feat: add workspace files to chat from Files and Changes

* feat(app): open changed files from context menu * fix(app): preserve changed-file row behavior * feat(app): add changed files to open chats * feat(app): share file actions across explorer and changes * feat(app): attach workspace files to focused chat * feat(app): drag workspace files into chat * refactor(app): use file actions menu for changed files * fix(app): open changed-file actions on right click * test(app): cover direct file attachment flow * fix(app): enable add to chat on native * fix(app): align workspace file pane rows * refactor(app): simplify workspace file attachments * fix(app): preserve uploaded file draft attachments --------- Co-authored-by: Mohamed Boudra <boudra.moha@gmail.com>
2026-07-22 15:58:24 +02:00
parent 42ee5a5949
commit bd937850b3
42 changed files with 1665 additions and 342 deletions
@@ -15,35 +15,26 @@ import {
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { WORKSPACE_SECONDARY_HEADER_HEIGHT } from "@/constants/layout";
 import * as Clipboard from "expo-clipboard";
-import {
-  ChevronDown,
-  Copy,
-  Download,
-  Eye,
-  EyeOff,
-  MoreVertical,
-  RotateCw,
-} from "lucide-react-native";
+import { ChevronDown, Eye, EyeOff, RotateCw } from "lucide-react-native";
 import { MaterialFileIcon } from "@/components/material-file-icon";
-import { TreeChevron, TreeIndentGuides, TREE_INDENT_PER_LEVEL } from "@/components/tree-primitives";
+import {
+  TreeChevron,
+  TreeIndentGuides,
+  treeRowPaddingLeft,
+  WORKSPACE_FILE_ROW_VERTICAL_PADDING,
+} from "@/components/tree-primitives";
 import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import type { AgentFileExplorerState, ExplorerEntry } from "@/stores/session-store";
-import { useHosts } from "@/runtime/host-runtime";
 import { useSessionStore } from "@/stores/session-store";
-import { useDownloadStore } from "@/stores/download-store";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+import { FileActionsMenu } from "@/components/file-actions-menu";
+import { useFileDownload } from "@/hooks/use-file-download";
 import { useFileExplorerActions } from "@/hooks/use-file-explorer-actions";
 import { buildWorkspaceExplorerStateKey } from "@/hooks/use-file-explorer-actions";
 import { usePanelStore, type SortOption } from "@/stores/panel-store";
 import { formatTimeAgo } from "@/utils/time";
 import { buildAbsoluteExplorerPath } from "@/utils/explorer-paths";
 import { filterVisibleExplorerEntries, isHiddenExplorerPath } from "@/file-explorer/visibility";
+import { useWorkspaceFileDragSource } from "@/attachments/use-workspace-file-drag-source";

 const SORT_OPTIONS: { value: SortOption }[] = [
  { value: "name" },
@@ -62,6 +53,8 @@ function formatFileSize({ size }: { size: number }): string {
 }

 interface TreeRowItemProps {
+  serverId: string;
+  workspaceId?: string | null;
  entry: ExplorerEntry;
  depth: number;
  isExpanded: boolean;
@@ -70,21 +63,8 @@ interface TreeRowItemProps {
  onEntryPress: (entry: ExplorerEntry) => void;
  onCopyPath: (path: string) => void;
  onDownloadEntry: (entry: ExplorerEntry) => void;
-}
-
-function stopPressInPropagation(event: { stopPropagation?: () => void }) {
-  event.stopPropagation?.();
-}
-
-function menuButtonStyle({
-  hovered,
-  pressed,
-  open,
-}: PressableStateCallbackType & { hovered?: boolean; open?: boolean }) {
-  return [
-    styles.menuButton,
-    (Boolean(hovered) || pressed || Boolean(open)) && styles.menuButtonActive,
-  ];
+  onAddToChat?: (path: string) => void;
+  testID?: string;
 }

 function sortTriggerStyle({
@@ -103,6 +83,8 @@ function treeRowKeyExtractor(row: TreeRow) {
 }

 function TreeRowItem({
+  serverId,
+  workspaceId,
  entry,
  depth,
  isExpanded,
@@ -111,10 +93,17 @@ function TreeRowItem({
  onEntryPress,
  onCopyPath,
  onDownloadEntry,
+  onAddToChat,
+  testID,
 }: TreeRowItemProps) {
-  const { theme } = useUnistyles();
  const { t } = useTranslation();
  const isDirectory = entry.kind === "directory";
+  const dragSourceRef = useWorkspaceFileDragSource({
+    enabled: !isDirectory,
+    serverId,
+    workspaceId,
+    path: entry.path,
+  });

  const handlePress = useCallback(() => {
    onEntryPress(entry);
@@ -123,10 +112,10 @@ function TreeRowItem({
  const pressableStyle = useCallback(
    ({ hovered, pressed }: PressableStateCallbackType & { hovered?: boolean }) => [
      styles.entryRow,
-      { paddingLeft: theme.spacing[2] + depth * TREE_INDENT_PER_LEVEL },
+      { paddingLeft: treeRowPaddingLeft(depth) },
      (Boolean(hovered) || pressed || isSelected) && styles.entryRowActive,
    ],
-    [depth, isSelected, theme.spacing],
+    [depth, isSelected],
  );

  const handleCopy = useCallback(() => {
@@ -137,19 +126,38 @@ function TreeRowItem({
    onDownloadEntry(entry);
  }, [onDownloadEntry, entry]);

-  const copyLeading = useMemo(
-    () => <Copy size={14} color={theme.colors.foregroundMuted} />,
-    [theme.colors.foregroundMuted],
-  );
-  const downloadLeading = useMemo(
-    () => <Download size={14} color={theme.colors.foregroundMuted} />,
-    [theme.colors.foregroundMuted],
+  const handleAddToChat = useCallback(() => {
+    onAddToChat?.(entry.path);
+  }, [onAddToChat, entry.path]);
+
+  const metaHeader = useMemo(
+    () => (
+      <View style={styles.contextMetaBlock}>
+        <View style={styles.contextMetaRow}>
+          <Text style={styles.contextMetaLabel} numberOfLines={1}>
+            {t("workspace.fileExplorer.context.size")}
+          </Text>
+          <Text style={styles.contextMetaValue} numberOfLines={1} ellipsizeMode="tail">
+            {formatFileSize({ size: entry.size })}
+          </Text>
+        </View>
+        <View style={styles.contextMetaRow}>
+          <Text style={styles.contextMetaLabel} numberOfLines={1}>
+            {t("workspace.fileExplorer.context.modified")}
+          </Text>
+          <Text style={styles.contextMetaValue} numberOfLines={1} ellipsizeMode="tail">
+            {formatTimeAgo(new Date(entry.modifiedAt))}
+          </Text>
+        </View>
+      </View>
+    ),
+    [entry.modifiedAt, entry.size, t],
  );

  return (
-    <Pressable onPress={handlePress} style={pressableStyle}>
+    <Pressable onPress={handlePress} style={pressableStyle} testID={testID}>
      <TreeIndentGuides depth={depth} />
-      <View style={styles.entryInfo}>
+      <View ref={dragSourceRef} style={styles.entryInfo}>
        <View style={styles.entryIcon}>
          {(() => {
            if (!isDirectory) {
@@ -163,40 +171,15 @@ function TreeRowItem({
          {entry.name}
        </Text>
      </View>
-      <DropdownMenu>
-        <DropdownMenuTrigger hitSlop={8} onPressIn={stopPressInPropagation} style={menuButtonStyle}>
-          <MoreVertical size={16} color={theme.colors.foregroundMuted} />
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" width={220}>
-          <View style={styles.contextMetaBlock}>
-            <View style={styles.contextMetaRow}>
-              <Text style={styles.contextMetaLabel} numberOfLines={1}>
-                {t("workspace.fileExplorer.context.size")}
-              </Text>
-              <Text style={styles.contextMetaValue} numberOfLines={1} ellipsizeMode="tail">
-                {formatFileSize({ size: entry.size })}
-              </Text>
-            </View>
-            <View style={styles.contextMetaRow}>
-              <Text style={styles.contextMetaLabel} numberOfLines={1}>
-                {t("workspace.fileExplorer.context.modified")}
-              </Text>
-              <Text style={styles.contextMetaValue} numberOfLines={1} ellipsizeMode="tail">
-                {formatTimeAgo(new Date(entry.modifiedAt))}
-              </Text>
-            </View>
-          </View>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem leading={copyLeading} onSelect={handleCopy}>
-            {t("workspace.fileExplorer.context.copyPath")}
-          </DropdownMenuItem>
-          {entry.kind === "file" ? (
-            <DropdownMenuItem leading={downloadLeading} onSelect={handleDownload}>
-              {t("workspace.fileExplorer.context.download")}
-            </DropdownMenuItem>
-          ) : null}
-        </DropdownMenuContent>
-      </DropdownMenu>
+      <FileActionsMenu
+        fileKind={entry.kind}
+        onCopyPath={handleCopy}
+        onDownload={handleDownload}
+        onAddToChat={onAddToChat ? handleAddToChat : undefined}
+        header={metaHeader}
+        accessibilityLabel={t("workspace.fileActions.moreActions")}
+        testIDPrefix={testID}
+      />
    </Pressable>
  );
 }
@@ -206,6 +189,7 @@ interface FileExplorerPaneProps {
  workspaceId?: string | null;
  workspaceRoot: string;
  onOpenFile?: (filePath: string) => void;
+  onAddToChat?: (path: string) => void;
 }

 interface TreeRow {
@@ -218,14 +202,10 @@ export function FileExplorerPane({
  workspaceId,
  workspaceRoot,
  onOpenFile,
+  onAddToChat,
 }: FileExplorerPaneProps) {
  const { t } = useTranslation();

-  const daemons = useHosts();
-  const daemonProfile = useMemo(
-    () => daemons.find((daemon) => daemon.serverId === serverId),
-    [daemons, serverId],
-  );
  const normalizedWorkspaceRoot = useMemo(() => workspaceRoot.trim(), [workspaceRoot]);
  const workspaceStateKey = useMemo(
    () =>
@@ -235,10 +215,6 @@ export function FileExplorerPane({
      }),
    [normalizedWorkspaceRoot, workspaceId],
  );
-  const workspaceScopeId = useMemo(
-    () => workspaceId?.trim() || normalizedWorkspaceRoot,
-    [normalizedWorkspaceRoot, workspaceId],
-  );
  const hasWorkspaceScope = Boolean(workspaceStateKey && normalizedWorkspaceRoot);
  const explorerState = useSessionStore((state) =>
    workspaceStateKey && state.sessions[serverId]
@@ -246,12 +222,16 @@ export function FileExplorerPane({
      : undefined,
  );

-  const { requestDirectoryListing, requestFileDownloadToken, selectExplorerEntry } =
-    useFileExplorerActions({
-      serverId,
-      workspaceId,
-      workspaceRoot: normalizedWorkspaceRoot,
-    });
+  const { requestDirectoryListing, selectExplorerEntry } = useFileExplorerActions({
+    serverId,
+    workspaceId,
+    workspaceRoot: normalizedWorkspaceRoot,
+  });
+  const downloadFile = useFileDownload({
+    serverId,
+    workspaceId,
+    workspaceRoot: normalizedWorkspaceRoot,
+  });
  const sortOption = usePanelStore((state) => state.explorerSortOption);
  const showHiddenFiles = usePanelStore((state) => state.explorerShowHiddenFiles);
  const setSortOption = usePanelStore((state) => state.setExplorerSortOption);
@@ -346,18 +326,14 @@ export function FileExplorerPane({
    [normalizedWorkspaceRoot],
  );

-  const startDownload = useDownloadStore((state) => state.startDownload);
  const handleDownloadEntry = useCallback(
-    (entry: ExplorerEntry) =>
-      downloadExplorerEntry({
-        entry,
-        workspaceScopeId,
-        serverId,
-        daemonProfile,
-        startDownload,
-        requestFileDownloadToken,
-      }),
-    [daemonProfile, requestFileDownloadToken, serverId, startDownload, workspaceScopeId],
+    (entry: ExplorerEntry) => {
+      if (entry.kind !== "file") {
+        return;
+      }
+      downloadFile({ fileName: entry.name, path: entry.path });
+    },
+    [downloadFile],
  );

  const handleSortCycle = useCallback(() => {
@@ -419,6 +395,8 @@ export function FileExplorerPane({
  const renderTreeRow = useCallback(
    (info: ListRenderItemInfo<TreeRow>) => (
      <TreeRowDispatcher
+        serverId={serverId}
+        workspaceId={workspaceId}
        info={info}
        expandedPaths={expandedPaths}
        selectedEntryPath={selectedEntryPath}
@@ -426,6 +404,7 @@ export function FileExplorerPane({
        onEntryPress={handleEntryPress}
        onCopyPath={handleCopyPath}
        onDownloadEntry={handleDownloadEntry}
+        onAddToChat={onAddToChat}
      />
    ),
    [
@@ -435,6 +414,9 @@ export function FileExplorerPane({
      handleDownloadEntry,
      isDirectoryLoading,
      selectedEntryPath,
+      onAddToChat,
+      serverId,
+      workspaceId,
    ],
  );

@@ -576,8 +558,14 @@ function FileExplorerPaneContent(props: FileExplorerPaneContentProps) {
  return (
    <View style={[styles.treePane, styles.treePaneFill]}>
      <View style={styles.paneHeader} testID="files-pane-header">
-        <Pressable onPress={handleSortCycle} style={sortTriggerStyleProp}>
-          <Text style={styles.sortTriggerText}>{currentSortLabel}</Text>
+        <Pressable
+          onPress={handleSortCycle}
+          style={sortTriggerStyleProp}
+          testID="files-sort-trigger"
+        >
+          <Text style={styles.sortTriggerText} testID="files-sort-label">
+            {currentSortLabel}
+          </Text>
          <ChevronDown size={12} color={theme.colors.foregroundMuted} />
        </Pressable>
        <View style={styles.headerActions}>
@@ -588,6 +576,7 @@ function FileExplorerPaneContent(props: FileExplorerPaneContentProps) {
            accessibilityRole="button"
            accessibilityLabel={hiddenFilesToggleAccessibilityLabel}
            accessibilityState={hiddenFilesToggleAccessibilityState}
+            testID="files-hidden-toggle"
          >
            {showHiddenFiles ? (
              <Eye size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
@@ -606,6 +595,7 @@ function FileExplorerPaneContent(props: FileExplorerPaneContentProps) {
                ? t("workspace.fileExplorer.actions.refreshing")
                : t("workspace.fileExplorer.actions.refresh")
            }
+            testID="files-refresh"
          >
            <View style={styles.refreshIcon}>
              {isRefreshFetching ? (
@@ -778,39 +768,6 @@ function resolveTreeRows({
  });
 }

-type StartDownloadFn = ReturnType<typeof useDownloadStore.getState>["startDownload"];
-type StartDownloadParams = Parameters<StartDownloadFn>[0];
-
-function downloadExplorerEntry({
-  entry,
-  workspaceScopeId,
-  serverId,
-  daemonProfile,
-  startDownload,
-  requestFileDownloadToken,
-}: {
-  entry: ExplorerEntry;
-  workspaceScopeId: string | undefined;
-  serverId: string;
-  daemonProfile: StartDownloadParams["daemonProfile"];
-  startDownload: StartDownloadFn;
-  requestFileDownloadToken: (
-    targetPath: string,
-  ) => ReturnType<StartDownloadParams["requestFileDownloadToken"]>;
-}): void {
-  if (!workspaceScopeId || entry.kind !== "file") {
-    return;
-  }
-  startDownload({
-    serverId,
-    scopeId: workspaceScopeId,
-    fileName: entry.name,
-    path: entry.path,
-    daemonProfile,
-    requestFileDownloadToken: (targetPath) => requestFileDownloadToken(targetPath),
-  });
-}
-
 function toggleDirectory({
  entry,
  workspaceStateKey,
@@ -850,6 +807,8 @@ function toggleDirectory({
 }

 function TreeRowDispatcher({
+  serverId,
+  workspaceId,
  info,
  expandedPaths,
  selectedEntryPath,
@@ -857,7 +816,10 @@ function TreeRowDispatcher({
  onEntryPress,
  onCopyPath,
  onDownloadEntry,
+  onAddToChat,
 }: {
+  serverId: string;
+  workspaceId?: string | null;
  info: ListRenderItemInfo<TreeRow>;
  expandedPaths: Set<string>;
  selectedEntryPath: string | null;
@@ -865,6 +827,7 @@ function TreeRowDispatcher({
  onEntryPress: (entry: ExplorerEntry) => void;
  onCopyPath: (path: string) => void | Promise<void>;
  onDownloadEntry: (entry: ExplorerEntry) => void;
+  onAddToChat?: (path: string) => void;
 }) {
  const entry = info.item.entry;
  const depth = info.item.depth;
@@ -875,6 +838,8 @@ function TreeRowDispatcher({

  return (
    <TreeRowItem
+      serverId={serverId}
+      workspaceId={workspaceId}
      entry={entry}
      depth={depth}
      isExpanded={isExpanded}
@@ -883,6 +848,8 @@ function TreeRowDispatcher({
      onEntryPress={onEntryPress}
      onCopyPath={onCopyPath}
      onDownloadEntry={onDownloadEntry}
+      onAddToChat={onAddToChat}
+      testID={`file-explorer-row-${info.index}`}
    />
  );
 }
@@ -1061,7 +1028,6 @@ const styles = StyleSheet.create((theme) => ({
    minHeight: 0,
  },
  entriesContent: {
-    paddingHorizontal: theme.spacing[2],
    paddingTop: theme.spacing[2],
    paddingBottom: theme.spacing[4],
  },
@@ -1111,9 +1077,8 @@ const styles = StyleSheet.create((theme) => ({
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
-    paddingVertical: 2,
-    paddingRight: theme.spacing[2],
-    borderRadius: theme.borderRadius.md,
+    paddingVertical: WORKSPACE_FILE_ROW_VERTICAL_PADDING,
+    paddingRight: theme.spacing[3],
  },
  entryRowActive: {
    backgroundColor: theme.colors.surfaceSidebarHover,
@@ -1133,16 +1098,6 @@ const styles = StyleSheet.create((theme) => ({
    color: theme.colors.foreground,
    fontSize: theme.fontSize.sm,
  },
-  menuButton: {
-    width: 30,
-    height: 30,
-    borderRadius: theme.borderRadius.full,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  menuButtonActive: {
-    backgroundColor: theme.colors.surface2,
-  },
  contextMetaBlock: {
    paddingVertical: theme.spacing[1],
  },