Merge branch 'main' of github.com:getpaseo/paseo

2026-06-29 20:24:57 +02:00
parent 0d1c8db87d f31bc2b8b7
commit 0614618d2f
156 changed files with 5976 additions and 1189 deletions
@@ -15,8 +15,6 @@ import {
 } from "@gorhom/bottom-sheet";
 import Animated from "react-native-reanimated";
 import { ArrowLeft, Search, X } from "lucide-react-native";
-import { FileDropZone } from "@/components/file-drop-zone";
-import type { ImageAttachment } from "@/composer/types";
 import {
  IsolatedBottomSheetModal,
  useIsolatedBottomSheetVisibility,
@@ -451,9 +449,6 @@ export interface AdaptiveModalSheetProps {
  testID?: string;
  /** Override the max width of the desktop card. */
  desktopMaxWidth?: number;
-  /** When provided, wraps the card content in a FileDropZone. */
-  onFilesDropped?: (files: ImageAttachment[]) => void;
-  onGenericFilesDropped?: (items: import("@/hooks/use-file-drop-zone").DroppedItem[]) => void;
  scrollable?: boolean;
  presentation?: "push" | "replace";
 }
@@ -467,8 +462,6 @@ export function AdaptiveModalSheet({
  snapPoints,
  testID,
  desktopMaxWidth,
-  onFilesDropped,
-  onGenericFilesDropped,
  scrollable = true,
  presentation,
 }: AdaptiveModalSheetProps) {
@@ -602,18 +595,7 @@ export function AdaptiveModalSheet({
        style={ABSOLUTE_FILL_STYLE}
        onPress={onClose}
      />
-      <View style={desktopCardStyle}>
-        {onFilesDropped ? (
-          <FileDropZone
-            onFilesDropped={onFilesDropped}
-            onGenericFilesDropped={onGenericFilesDropped}
-          >
-            {cardInner}
-          </FileDropZone>
-        ) : (
-          cardInner
-        )}
-      </View>
+      <View style={desktopCardStyle}>{cardInner}</View>
    </View>
  );

@@ -0,0 +1,148 @@
+import { memo, useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Text, View } from "react-native";
+import { FolderPlus, Split } from "lucide-react-native";
+import { StyleSheet, withUnistyles } from "react-native-unistyles";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import type { Theme } from "@/styles/theme";
+
+export type AssistantForkTarget = "tab" | "workspace";
+
+interface AssistantForkMenuProps {
+  onFork: (target: AssistantForkTarget) => Promise<void> | void;
+  testID?: string;
+}
+
+const ThemedFolderPlus = withUnistyles(FolderPlus);
+const ThemedSplit = withUnistyles(Split);
+
+const foregroundColorMapping = (theme: Theme) => ({ color: theme.colors.foreground });
+const foregroundMutedColorMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
+
+function getIcon(target: AssistantForkTarget) {
+  switch (target) {
+    case "tab":
+      return <ThemedSplit size={16} uniProps={foregroundColorMapping} />;
+    case "workspace":
+      return <ThemedFolderPlus size={16} uniProps={foregroundColorMapping} />;
+  }
+}
+
+export const AssistantForkMenu = memo(function AssistantForkMenu({
+  onFork,
+  testID = "assistant-fork-menu",
+}: AssistantForkMenuProps) {
+  const { t } = useTranslation();
+  const [isOpen, setIsOpen] = useState(false);
+  const [pendingTarget, setPendingTarget] = useState<AssistantForkTarget | null>(null);
+  const isLocked = pendingTarget !== null;
+
+  const handleOpenChange = useCallback(
+    (next: boolean) => {
+      if (!next && pendingTarget !== null) return;
+      setIsOpen(next);
+    },
+    [pendingTarget],
+  );
+
+  const handleSelect = useCallback(
+    (target: AssistantForkTarget) => async () => {
+      if (isLocked) return;
+      setPendingTarget(target);
+      try {
+        await onFork(target);
+      } finally {
+        setPendingTarget(null);
+        setIsOpen(false);
+      }
+    },
+    [isLocked, onFork],
+  );
+
+  const triggerStyle = useCallback(
+    () => [styles.trigger, isLocked ? styles.triggerDisabled : null],
+    [isLocked],
+  );
+
+  const tooltipContent = useMemo(
+    () => (
+      <TooltipContent side="top" align="center" offset={8}>
+        <Text style={styles.tooltipText}>{t("message.actions.forkMenu")}</Text>
+      </TooltipContent>
+    ),
+    [t],
+  );
+
+  return (
+    <DropdownMenu open={isOpen} onOpenChange={handleOpenChange}>
+      <Tooltip delayDuration={250} enabledOnDesktop enabledOnMobile={false}>
+        <TooltipTrigger asChild>
+          <View style={styles.triggerSlot} collapsable={false}>
+            <DropdownMenuTrigger
+              accessibilityLabel={t("message.actions.forkMenu")}
+              accessibilityRole="button"
+              disabled={isLocked}
+              style={triggerStyle}
+              testID={`${testID}-trigger`}
+            >
+              {({ hovered, open }) => (
+                <ThemedSplit
+                  size={16}
+                  uniProps={hovered || open ? foregroundColorMapping : foregroundMutedColorMapping}
+                />
+              )}
+            </DropdownMenuTrigger>
+          </View>
+        </TooltipTrigger>
+        {tooltipContent}
+      </Tooltip>
+      <DropdownMenuContent align="start" minWidth={220} side="bottom" testID={`${testID}-content`}>
+        <DropdownMenuItem
+          closeOnSelect={false}
+          disabled={isLocked && pendingTarget !== "tab"}
+          leading={getIcon("tab")}
+          onSelect={handleSelect("tab")}
+          status={pendingTarget === "tab" ? "pending" : undefined}
+          testID={`${testID}-new-tab`}
+        >
+          {t("message.actions.forkInNewTab")}
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          closeOnSelect={false}
+          disabled={isLocked && pendingTarget !== "workspace"}
+          leading={getIcon("workspace")}
+          onSelect={handleSelect("workspace")}
+          status={pendingTarget === "workspace" ? "pending" : undefined}
+          testID={`${testID}-new-workspace`}
+        >
+          {t("message.actions.forkInNewWorkspace")}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+});
+
+const styles = StyleSheet.create((theme) => ({
+  trigger: {
+    padding: theme.spacing[1],
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "transparent",
+  },
+  triggerDisabled: {
+    opacity: theme.opacity[50],
+  },
+  triggerSlot: {
+    alignSelf: "center",
+  },
+  tooltipText: {
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize.xs,
+  },
+}));
@@ -1,106 +0,0 @@
-import { View, Text } from "react-native";
-import type { StyleProp, ViewStyle } from "react-native";
-import { StyleSheet, useUnistyles } from "react-native-unistyles";
-import Animated, { useAnimatedStyle, withTiming, useSharedValue } from "react-native-reanimated";
-import { useEffect, useMemo } from "react";
-import { Upload } from "lucide-react-native";
-import { useTranslation } from "react-i18next";
-import { useFileDropZone, type DroppedItem } from "@/hooks/use-file-drop-zone";
-import type { ImageAttachment } from "@/composer/types";
-import { isWeb } from "@/constants/platform";
-
-interface FileDropZoneProps {
-  children: React.ReactNode;
-  onFilesDropped: (files: ImageAttachment[]) => void;
-  onGenericFilesDropped?: (items: DroppedItem[]) => void;
-  disabled?: boolean;
-  style?: StyleProp<ViewStyle>;
-}
-
-const IS_WEB = isWeb;
-
-export function FileDropZone({
-  children,
-  onFilesDropped,
-  onGenericFilesDropped,
-  disabled = false,
-  style,
-}: FileDropZoneProps) {
-  const { t } = useTranslation();
-  const { theme } = useUnistyles();
-  const { isDragging, containerRef } = useFileDropZone({
-    onFilesDropped,
-    onGenericFilesDropped,
-    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",
-  }));
-
-  const overlayStyle = useMemo(
-    () => [styles.overlay, overlayAnimatedStyle],
-    [overlayAnimatedStyle],
-  );
-  const containerStyle = useMemo(() => [styles.container, style], [style]);
-
-  // 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={containerStyle}
-    >
-      {children}
-
-      {/* Drop overlay */}
-      <Animated.View style={overlayStyle}>
-        {/* Backdrop */}
-        <View style={styles.backdrop} />
-        {/* Content */}
-        <View style={styles.overlayContent}>
-          <Upload size={32} color={theme.colors.primary} />
-          <Text style={styles.overlayText}>{t("composer.attachments.dropFilesHere")}</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.surface0,
-    opacity: 0.7,
-  },
-  overlayContent: {
-    alignItems: "center",
-    gap: theme.spacing[2],
-  },
-  overlayText: {
-    fontSize: theme.fontSize.base,
-    fontWeight: theme.fontWeight.medium,
-    color: theme.colors.foreground,
-  },
-}));
@@ -0,0 +1,20 @@
+import { createContext, useContext } from "react";
+import type { SharedValue } from "react-native-reanimated";
+import type { FileDropSink } from "./types";
+
+export interface FileDropContextValue {
+  /** Drag-active flag, driven on the UI thread so toggling it triggers no React render. */
+  isDragging: SharedValue<boolean>;
+  /** Active sink can't accept right now (e.g. composer submitting): hide backdrop and reject drops. */
+  suppressed: SharedValue<boolean>;
+  /** Whether a consumer is currently registered — no consumer (e.g. archived agent), no backdrop. */
+  hasSink: SharedValue<boolean>;
+  /** Register the active sink. Pass a getter so the zone always reads the latest handlers. */
+  registerSink: (getSink: () => FileDropSink | null) => () => void;
+}
+
+export const FileDropContext = createContext<FileDropContextValue | null>(null);
+
+export function useFileDropContext(): FileDropContextValue | null {
+  return useContext(FileDropContext);
+}
@@ -0,0 +1,71 @@
+import { View, Text, StyleSheet as RNStyleSheet } from "react-native";
+import { StyleSheet, withUnistyles } from "react-native-unistyles";
+import Animated, { useAnimatedStyle, withTiming } from "react-native-reanimated";
+import { Upload } from "lucide-react-native";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import type { Theme } from "@/styles/theme";
+import { useFileDropContext } from "./context";
+
+const ThemedUpload = withUnistyles(Upload);
+const primaryIconColorMapping = (theme: Theme) => ({ color: theme.colors.primary });
+
+/**
+ * Drop overlay rendered by FileDropZone. Reads `isDragging` on the UI thread so the dim
+ * only ever repaints the backdrop — never the surrounding tree.
+ */
+export function FileDropBackdrop() {
+  const { t } = useTranslation();
+  const ctx = useFileDropContext();
+  const isDragging = ctx?.isDragging;
+  const suppressed = ctx?.suppressed;
+  const hasSink = ctx?.hasSink;
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const active = isDragging?.value && hasSink?.value && !suppressed?.value;
+    return { opacity: withTiming(active ? 1 : 0, { duration: 150 }) };
+  });
+
+  const overlayStyle = useMemo(() => [positionStyles.overlay, animatedStyle], [animatedStyle]);
+
+  if (!ctx) return null;
+
+  // Animated.View keeps only plain-RN positioning; theme-dependent paint lives on the
+  // non-animated children (applying themed Unistyles styles to an Animated.View crashes
+  // on theme change — see docs/unistyles.md).
+  return (
+    <Animated.View style={overlayStyle} pointerEvents="none">
+      <View style={styles.backdrop} />
+      <View style={styles.content}>
+        <ThemedUpload size={32} uniProps={primaryIconColorMapping} />
+        <Text style={styles.text}>{t("composer.attachments.dropFilesHere")}</Text>
+      </View>
+    </Animated.View>
+  );
+}
+
+const positionStyles = RNStyleSheet.create({
+  overlay: {
+    ...RNStyleSheet.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1000,
+  },
+});
+
+const styles = StyleSheet.create((theme) => ({
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: theme.colors.surface0,
+    opacity: 0.7,
+  },
+  content: {
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
+  text: {
+    fontSize: theme.fontSize.base,
+    fontWeight: theme.fontWeight.medium,
+    color: theme.colors.foreground,
+  },
+}));
@@ -0,0 +1,84 @@
+import type { ReactNode, RefObject } from "react";
+import { useCallback, useMemo, useRef } from "react";
+import { View } from "react-native";
+import type { StyleProp, ViewStyle } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
+import { useSharedValue } from "react-native-reanimated";
+import { isWeb } from "@/constants/platform";
+import { FileDropContext, type FileDropContextValue } from "./context";
+import { FileDropBackdrop } from "./file-drop-backdrop";
+import { useDropListeners } from "./use-drop-listeners";
+import type { FileDropSink } from "./types";
+
+interface FileDropZoneProps {
+  children: ReactNode;
+  /** When true, no drops are accepted and the backdrop stays hidden. */
+  disabled?: boolean;
+  /** Styles the drop area (defaults to filling its parent). The backdrop fills this area. */
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Defines a drag-and-drop area and renders its dim backdrop. Files are consumed by any
+ * descendant calling `useFileDrop` — the drop area, the backdrop, and the consumer are
+ * decoupled, so a consumer's layout can never collapse the backdrop.
+ */
+export function FileDropZone({ children, disabled = false, style }: FileDropZoneProps) {
+  const isDragging = useSharedValue(false);
+  const suppressed = useSharedValue(false);
+  const hasSink = useSharedValue(false);
+  const activeGetSink = useRef<(() => FileDropSink | null) | null>(null);
+
+  const registerSink = useCallback(
+    (getSink: () => FileDropSink | null) => {
+      activeGetSink.current = getSink;
+      hasSink.value = true;
+      return () => {
+        if (activeGetSink.current === getSink) {
+          activeGetSink.current = null;
+          hasSink.value = false;
+        }
+      };
+    },
+    [hasSink],
+  );
+
+  const getSink = useCallback(() => activeGetSink.current?.() ?? null, []);
+
+  const ctx = useMemo<FileDropContextValue>(
+    () => ({ isDragging, suppressed, hasSink, registerSink }),
+    [isDragging, suppressed, hasSink, registerSink],
+  );
+
+  const containerRef = useDropListeners({ isDragging, suppressed, hasSink, getSink, disabled });
+
+  const targetStyle = useMemo(() => [styles.target, style], [style]);
+
+  // On native there is no web drag-and-drop, so skip the listeners and the backdrop — but still
+  // render the styled layout View (callers use FileDropZone as their container) and provide
+  // context so useFileDrop no-ops safely.
+  if (!isWeb) {
+    return (
+      <FileDropContext.Provider value={ctx}>
+        <View style={targetStyle}>{children}</View>
+      </FileDropContext.Provider>
+    );
+  }
+
+  return (
+    <FileDropContext.Provider value={ctx}>
+      <View ref={containerRef as unknown as RefObject<View>} style={targetStyle}>
+        {children}
+        <FileDropBackdrop />
+      </View>
+    </FileDropContext.Provider>
+  );
+}
+
+// No default flex: the caller's `style` owns sizing (full-area surfaces pass flex:1; a dialog
+// passes a content-sized style). `position` anchors the absolutely-positioned backdrop.
+const styles = StyleSheet.create({
+  target: {
+    position: "relative",
+  },
+});
@@ -0,0 +1,21 @@
+import type { ImageAttachment } from "@/composer/types";
+
+export interface DroppedFileItem {
+  kind: "web-file";
+  file: File;
+}
+export interface DroppedPathItem {
+  kind: "desktop-path";
+  path: string;
+}
+export type DroppedItem = DroppedFileItem | DroppedPathItem;
+
+/**
+ * What a consumer (e.g. a composer) registers to receive files dropped onto the
+ * surrounding FileDropZone. Raster images arrive already persisted via `onFiles`;
+ * everything else arrives raw via `onGenericFiles`.
+ */
+export interface FileDropSink {
+  onFiles: (images: ImageAttachment[]) => void;
+  onGenericFiles?: (items: DroppedItem[]) => void;
+}
@@ -0,0 +1,281 @@
+import { useEffect, useRef } from "react";
+import type { RefObject } from "react";
+import type { SharedValue } from "react-native-reanimated";
+import type { ImageAttachment } from "@/composer/types";
+import { getDesktopHost } from "@/desktop/host";
+import { persistAttachmentFromBlob, persistAttachmentFromFileUri } from "@/attachments/service";
+import {
+  getRasterImageMimeTypeFromPath,
+  isRasterImageFile,
+  isRasterImagePath,
+} from "@/attachments/file-types";
+import { isWeb } from "@/constants/platform";
+import type { DroppedItem, DroppedPathItem, FileDropSink } from "./types";
+
+type DesktopDragDropPayload =
+  | { type: "enter"; paths: string[] }
+  | { type: "over" }
+  | { type: "drop"; paths: string[] }
+  | { type: "leave" };
+
+interface DesktopDragDropEvent {
+  payload: DesktopDragDropPayload;
+}
+
+async function filePathToImageAttachment(path: string): Promise<ImageAttachment> {
+  const mimeType = getRasterImageMimeTypeFromPath(path) ?? "image/jpeg";
+  return await persistAttachmentFromFileUri({ uri: path, mimeType });
+}
+
+async function fileToImageAttachment(file: File): Promise<ImageAttachment> {
+  return await persistAttachmentFromBlob({
+    blob: file,
+    mimeType: file.type || "image/jpeg",
+    fileName: file.name,
+  });
+}
+
+interface UseDropListenersOptions {
+  isDragging: SharedValue<boolean>;
+  /** Active sink can't accept right now: reject drops without showing acceptance. */
+  suppressed: SharedValue<boolean>;
+  /** Whether a consumer is mounted: with none, don't advertise or accept drops. */
+  hasSink: SharedValue<boolean>;
+  /** Stable getter for the currently registered sink. */
+  getSink: () => FileDropSink | null;
+  disabled: boolean;
+}
+
+/**
+ * Attaches web/desktop drag-and-drop listeners to the returned element ref. Drag state is
+ * written to a shared value (no React renders); dropped files are routed to the active sink.
+ */
+export function useDropListeners({
+  isDragging,
+  suppressed,
+  hasSink,
+  getSink,
+  disabled,
+}: UseDropListenersOptions): RefObject<HTMLElement | null> {
+  const containerRef = useRef<HTMLElement | null>(null);
+  const dragCounter = useRef(0);
+  const disabledRef = useRef(disabled);
+  disabledRef.current = disabled;
+
+  // Clear an in-progress drag when the zone becomes disabled.
+  useEffect(() => {
+    if (disabled) {
+      isDragging.value = false;
+      dragCounter.current = 0;
+    }
+  }, [disabled, isDragging]);
+
+  useEffect(() => {
+    if (!isWeb) return;
+
+    let disposed = false;
+    let cleanup: (() => void) | undefined;
+    let didCleanup = false;
+
+    function runCleanup(unlisten?: () => void | Promise<void>) {
+      if (didCleanup) return;
+      const cleanupFn = unlisten ?? cleanup;
+      if (!cleanupFn) return;
+      didCleanup = true;
+      try {
+        void Promise.resolve(cleanupFn()).catch((error) => {
+          console.warn("[useDropListeners] Failed to remove desktop drag-drop listener:", error);
+        });
+      } catch (error) {
+        console.warn("[useDropListeners] Failed to remove desktop drag-drop listener:", error);
+      }
+    }
+
+    // Desktop drag-drop (Tauri-style) is window-scoped, not element-scoped: with multiple zones
+    // mounted, every zone would react to the same drop. Dormant today — current Electron does not
+    // expose onDragDropEvent, so the element-scoped HTML5 DOM path below is what actually runs.
+    async function setupDesktopDragDrop(): Promise<boolean> {
+      const desktopHost = getDesktopHost();
+      if (desktopHost === null) {
+        return false;
+      }
+
+      const desktopWindow = desktopHost.window?.getCurrentWindow?.();
+      if (!desktopWindow || typeof desktopWindow.onDragDropEvent !== "function") {
+        return false;
+      }
+
+      try {
+        const unlisten = await desktopWindow.onDragDropEvent((event: DesktopDragDropEvent) => {
+          const payload = event.payload;
+          if (payload.type === "leave") {
+            isDragging.value = false;
+            return;
+          }
+
+          if (payload.type === "enter" || payload.type === "over") {
+            if (!disabledRef.current) {
+              isDragging.value = true;
+            }
+            return;
+          }
+
+          // Drop always ends the current drag operation.
+          isDragging.value = false;
+
+          if (disabledRef.current || suppressed.value) return;
+
+          const sink = getSink();
+          if (!sink) return;
+
+          const items: DroppedPathItem[] = payload.paths.map((path) => ({
+            kind: "desktop-path",
+            path,
+          }));
+
+          if (sink.onGenericFiles && items.length > 0) {
+            sink.onGenericFiles(items);
+          }
+
+          const imagePaths = payload.paths.filter(isRasterImagePath);
+          if (imagePaths.length === 0) {
+            return;
+          }
+
+          void Promise.all(imagePaths.map(filePathToImageAttachment))
+            .then((attachments) => {
+              if (attachments.length === 0) {
+                return;
+              }
+              // Use the sink captured at drop time, not a fresh getSink() — routing belongs to the
+              // composer the user dropped on (matches the web path below). No post-persist busy
+              // re-check: a mixed drop's own generic upload flips the busy flag, and re-checking
+              // would discard the image from the same drop.
+              sink.onFiles(attachments);
+              return;
+            })
+            .catch((error) => {
+              console.error("[useDropListeners] Failed to persist dropped files:", error);
+            });
+        });
+
+        if (disposed) {
+          runCleanup(unlisten);
+          return true;
+        }
+
+        cleanup = unlisten;
+        return true;
+      } catch (error) {
+        console.warn("[useDropListeners] Failed to listen for desktop drag-drop:", error);
+        return false;
+      }
+    }
+
+    function setupDomDragDrop() {
+      const element = containerRef.current;
+      if (!element) {
+        return;
+      }
+
+      function handleDragEnter(e: DragEvent) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (disabledRef.current) return;
+
+        dragCounter.current++;
+        if (e.dataTransfer?.types.includes("Files")) {
+          isDragging.value = true;
+        }
+      }
+
+      function handleDragOver(e: DragEvent) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (!e.dataTransfer) return;
+        // Only advertise "copy" when the drop would actually be accepted, so the cursor doesn't
+        // promise a drop that the handler then discards (suppressed/archived/no consumer mounted).
+        const canAccept = !disabledRef.current && !suppressed.value && hasSink.value;
+        e.dataTransfer.dropEffect = canAccept ? "copy" : "none";
+      }
+
+      function handleDragLeave(e: DragEvent) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (disabledRef.current) return;
+
+        dragCounter.current--;
+        if (dragCounter.current === 0) {
+          isDragging.value = false;
+        }
+      }
+
+      async function handleDrop(e: DragEvent) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        isDragging.value = false;
+        dragCounter.current = 0;
+
+        if (disabledRef.current || suppressed.value) return;
+
+        const sink = getSink();
+        if (!sink) return;
+
+        const files = Array.from(e.dataTransfer?.files ?? []);
+        const genericItems: DroppedItem[] = files.map((file) => ({
+          kind: "web-file",
+          file,
+        }));
+
+        if (sink.onGenericFiles && genericItems.length > 0) {
+          sink.onGenericFiles(genericItems);
+        }
+
+        const imageFiles = files.filter(isRasterImageFile);
+
+        if (imageFiles.length === 0) return;
+
+        try {
+          const attachments = await Promise.all(imageFiles.map(fileToImageAttachment));
+          // No post-persist busy re-check: a mixed drop's own generic upload flips the busy flag,
+          // and re-checking would discard the image from the same drop. The guard at drop start
+          // already rejects drops that begin while busy.
+          sink.onFiles(attachments);
+        } catch (error) {
+          console.error("[useDropListeners] Failed to process dropped files:", error);
+        }
+      }
+
+      element.addEventListener("dragenter", handleDragEnter);
+      element.addEventListener("dragover", handleDragOver);
+      element.addEventListener("dragleave", handleDragLeave);
+      element.addEventListener("drop", handleDrop);
+
+      cleanup = () => {
+        element.removeEventListener("dragenter", handleDragEnter);
+        element.removeEventListener("dragover", handleDragOver);
+        element.removeEventListener("dragleave", handleDragLeave);
+        element.removeEventListener("drop", handleDrop);
+      };
+    }
+
+    void (async () => {
+      const desktopListenersAttached = await setupDesktopDragDrop();
+      if (disposed || desktopListenersAttached) {
+        return;
+      }
+      setupDomDragDrop();
+    })();
+
+    return () => {
+      disposed = true;
+      runCleanup();
+    };
+  }, [isDragging, suppressed, hasSink, getSink]);
+
+  return containerRef;
+}
@@ -0,0 +1,35 @@
+import { useEffect, useRef } from "react";
+import { useFileDropContext } from "./context";
+import type { FileDropSink } from "./types";
+
+interface UseFileDropOptions {
+  /** When true, the zone hides the backdrop and rejects drops atomically (e.g. while submitting). */
+  disabled?: boolean;
+}
+
+/**
+ * Receive files dropped onto the surrounding FileDropZone. The sink is read through
+ * a ref, so passing a fresh object every render neither re-registers nor re-renders.
+ * No-ops when rendered without a FileDropZone ancestor.
+ */
+export function useFileDrop(sink: FileDropSink, options?: UseFileDropOptions): void {
+  const ctx = useFileDropContext();
+  const sinkRef = useRef(sink);
+  sinkRef.current = sink;
+  const disabled = options?.disabled ?? false;
+
+  const registerSink = ctx?.registerSink;
+  useEffect(() => {
+    if (!registerSink) return;
+    return registerSink(() => sinkRef.current);
+  }, [registerSink]);
+
+  const suppressed = ctx?.suppressed;
+  useEffect(() => {
+    if (!suppressed) return;
+    suppressed.value = disabled;
+    return () => {
+      suppressed.value = false;
+    };
+  }, [suppressed, disabled]);
+}
@@ -32,7 +32,6 @@ import { useQuery } from "@tanstack/react-query";
 import MaskedView from "@react-native-masked-view/masked-view";
 import {
  Circle,
-  CircleDot,
  Info,
  CheckCircle,
  XCircle,
@@ -42,15 +41,13 @@ import {
  Check,
  CheckSquare,
  Copy,
-  GitPullRequest,
-  MessageSquareCode,
  TriangleAlertIcon,
  Scissors,
  MicVocal,
  FileSymlink,
 } from "lucide-react-native";
 import { StyleSheet, withUnistyles } from "react-native-unistyles";
-import { ICON_SIZE, type Theme } from "@/styles/theme";
+import type { Theme } from "@/styles/theme";
 import { useIsCompactFormFactor } from "@/constants/layout";
 import Animated, {
  Easing,
@@ -89,6 +86,7 @@ import {
  getFileNameFromPath,
  parseImageDataUrl,
 } from "@/attachments/utils";
+import { getAgentAttachmentPillContent } from "@/attachments/attachment-pill-content";
 import { PlanCard } from "./plan-card";
 import { useToolCallSheet } from "./tool-call-sheet";
 import { ToolCallDetailsContent } from "./tool-call-details";
@@ -104,7 +102,6 @@ import {
 import { getCompactionMarkerLabel } from "./message-compaction-label";
 import { useAttachmentPreviewUrl } from "@/attachments/use-attachment-preview-url";
 import { persistAttachmentFromBytes, persistAttachmentFromDataUrl } from "@/attachments/service";
-import { getFileTypeLabel } from "@/attachments/file-types";
 import {
  AttachmentFrame,
  AttachmentLabel,
@@ -116,7 +113,9 @@ import { isWeb, isNative } from "@/constants/platform";
 import type { AgentCapabilityFlags } from "@getpaseo/protocol/agent-types";
 import { RewindMenu, type RewindMode } from "@/components/rewind/rewind-menu";
 import { useRewindAgentMutation } from "@/components/rewind/use-rewind-agent-mutation";
+import { AssistantForkMenu, type AssistantForkTarget } from "@/components/assistant-fork-menu";
 export type { InlinePathTarget } from "@/assistant-file-links";
+export type { AssistantForkTarget };

 interface UserMessageProps {
  serverId?: string;
@@ -170,10 +169,6 @@ const ThemedTodoCheckIcon = withUnistyles(Check);
 const ThemedFileSymlinkIcon = withUnistyles(FileSymlink);
 const ThemedTriangleAlertIcon = withUnistyles(TriangleAlertIcon);
 const ThemedChevronRightIcon = withUnistyles(ChevronRight);
-const ThemedAttachmentFileText = withUnistyles(FileText);
-const ThemedGitPullRequest = withUnistyles(GitPullRequest);
-const ThemedCircleDot = withUnistyles(CircleDot);
-const ThemedMessageSquareCode = withUnistyles(MessageSquareCode);

 const foregroundColorMapping = (theme: Theme) => ({ color: theme.colors.foreground });
 const foregroundMutedColorMapping = (theme: Theme) => ({
@@ -402,19 +397,6 @@ const userMessageStylesheet = StyleSheet.create((theme) => ({
  },
 }));

-const attachmentReviewIcon = (
-  <ThemedMessageSquareCode size={ICON_SIZE.sm} uniProps={foregroundMutedColorMapping} />
-);
-const attachmentGithubPrIcon = (
-  <ThemedGitPullRequest size={ICON_SIZE.sm} uniProps={foregroundMutedColorMapping} />
-);
-const attachmentGithubIssueIcon = (
-  <ThemedCircleDot size={ICON_SIZE.sm} uniProps={foregroundMutedColorMapping} />
-);
-const attachmentFileIcon = (
-  <ThemedAttachmentFileText size={ICON_SIZE.sm} uniProps={foregroundMutedColorMapping} />
-);
-
 interface UserMessageImagePillProps {
  image: UserMessageImageAttachment;
  onOpen: (image: UserMessageImageAttachment) => void;
@@ -432,55 +414,6 @@ function UserMessageImagePill({ image, onOpen, accessibilityLabel }: UserMessage
  );
 }

-interface UserMessageAttachmentContent {
-  icon: ReactNode;
-  title: string;
-  subtitle: string;
-}
-
-function getUserMessageAttachmentContent(
-  attachment: AgentAttachment,
-  t: ReturnType<typeof useTranslation>["t"],
-): UserMessageAttachmentContent {
-  switch (attachment.type) {
-    case "review": {
-      const count = attachment.comments.length;
-      return {
-        icon: attachmentReviewIcon,
-        title: t("message.attachments.review"),
-        subtitle:
-          count === 1
-            ? t("message.attachments.commentsOne")
-            : t("message.attachments.commentsMany", { count }),
-      };
-    }
-    case "github_pr":
-      return {
-        icon: attachmentGithubPrIcon,
-        title: attachment.title,
-        subtitle: `PR #${attachment.number}`,
-      };
-    case "github_issue":
-      return {
-        icon: attachmentGithubIssueIcon,
-        title: attachment.title,
-        subtitle: `Issue #${attachment.number}`,
-      };
-    case "text":
-      return {
-        icon: attachmentFileIcon,
-        title: attachment.title ?? t("message.attachments.textAttachment"),
-        subtitle: t("message.attachments.text"),
-      };
-    case "uploaded_file":
-      return {
-        icon: attachmentFileIcon,
-        title: attachment.fileName,
-        subtitle: getFileTypeLabel(attachment.fileName) ?? t("message.attachments.file"),
-      };
-  }
-}
-
 export const UserMessage = memo(function UserMessage({
  serverId,
  agentId,
@@ -579,7 +512,7 @@ export const UserMessage = memo(function UserMessage({
          {hasAttachments ? (
            <View style={attachmentPreviewContainerStyle}>
              {attachments.map((attachment, index) => {
-                const content = getUserMessageAttachmentContent(attachment, t);
+                const content = getAgentAttachmentPillContent(attachment, t);
                return (
                  <AttachmentFrame
                    key={`${attachment.type}:${"number" in attachment ? attachment.number : index}`}
@@ -628,6 +561,11 @@ interface AssistantTurnFooterProps {
  getContent: () => string;
  completedAt?: Date;
  durationMs?: number;
+  forkBoundaryMessageId?: string;
+  onFork?: (input: {
+    target: AssistantForkTarget;
+    boundaryMessageId?: string;
+  }) => Promise<void> | void;
 }

 const assistantTurnFooterStylesheet = StyleSheet.create((theme) => ({
@@ -672,6 +610,8 @@ export const AssistantTurnFooter = memo(function AssistantTurnFooter({
  getContent,
  completedAt,
  durationMs,
+  forkBoundaryMessageId,
+  onFork,
 }: AssistantTurnFooterProps) {
  const [hovered, setHovered] = useState(false);
  const [pressedReveal, setPressedReveal] = useState(false);
@@ -711,6 +651,13 @@ export const AssistantTurnFooter = memo(function AssistantTurnFooter({
      revealTimerRef.current = null;
    }, TIMESTAMP_REVEAL_MS);
  }, [canSwap]);
+  const handleFork = useCallback(
+    (target: AssistantForkTarget) => {
+      return onFork?.({ target, boundaryMessageId: forkBoundaryMessageId });
+    },
+    [forkBoundaryMessageId, onFork],
+  );
+  const canFork = Boolean(onFork && forkBoundaryMessageId);

  return (
    <View style={assistantTurnFooterStylesheet.container}>
@@ -718,6 +665,7 @@ export const AssistantTurnFooter = memo(function AssistantTurnFooter({
        getContent={getContent}
        containerStyle={assistantTurnFooterStylesheet.copyButton}
      />
+      {canFork ? <AssistantForkMenu onFork={handleFork} /> : null}
      {durationLabel ? (
        <Pressable
          onPress={handlePress}
@@ -4,6 +4,7 @@ import { StyleSheet } from "react-native-unistyles";
 import { useTranslation } from "react-i18next";
 import { createNameId } from "mnemonic-id";
 import { AdaptiveModalSheet, type SheetHeader } from "@/components/adaptive-modal-sheet";
+import { FileDropZone } from "@/components/file-drop/file-drop-zone";
 import { Composer } from "@/composer";
 import { DraftAgentModeControl } from "@/composer/agent-controls/mode-control";
 import { useToast } from "@/contexts/toast-context";
@@ -420,7 +421,7 @@ export function WorkspaceSetupDialog() {
      testID="workspace-setup-dialog"
      desktopMaxWidth={640}
    >
-      <View style={styles.section}>
+      <FileDropZone style={styles.section}>
        <Composer
          agentId={`workspace-setup:${serverId}:${sourceDirectory}`}
          serverId={serverId}
@@ -440,7 +441,7 @@ export function WorkspaceSetupDialog() {
          inputWrapperStyle={styles.composerInputWrapper}
          footer={composerFooter}
        />
-      </View>
+      </FileDropZone>

      {errorMessage ? <Text style={styles.errorText}>{errorMessage}</Text> : null}
    </AdaptiveModalSheet>