Implement file-by-file download with progress

frontend/src/components/features/chat/action-suggestions.tsx

@@ -2,7 +2,7 @@ import posthog from "posthog-js";
 import React from "react";
 import { SuggestionItem } from "#/components/features/suggestions/suggestion-item";
 import { useAuth } from "#/context/auth-context";
-import { downloadWorkspace } from "#/utils/download-workspace";
+import { DownloadModal } from "#/components/shared/download-modal";
 
 interface ActionSuggestionsProps {
   onSuggestionsClick: (value: string) => void;
@@ -16,19 +16,17 @@ export function ActionSuggestions({
   const [isDownloading, setIsDownloading] = React.useState(false);
   const [hasPullRequest, setHasPullRequest] = React.useState(false);
 
-  const handleDownloadWorkspace = async () => {
-    setIsDownloading(true);
-    try {
-      await downloadWorkspace();
-    } catch (error) {
-      // TODO: Handle error
-    } finally {
-      setIsDownloading(false);
-    }
+  const handleDownloadClose = () => {
+    setIsDownloading(false);
   };
 
   return (
     <div className="flex flex-col gap-2 mb-2">
+      <DownloadModal
+        initialPath=""
+        onClose={handleDownloadClose}
+        isOpen={isDownloading}
+      />
       {gitHubToken ? (
         <div className="flex flex-row gap-2 justify-center w-full">
           {!hasPullRequest ? (
@@ -75,13 +73,15 @@ export function ActionSuggestions({
         <SuggestionItem
           suggestion={{
             label: !isDownloading
-              ? "Download .zip"
+              ? "Download files"
               : "Downloading, please wait...",
-            value: "Download .zip",
+            value: "Download files",
           }}
           onClick={() => {
             posthog.capture("download_workspace_button_clicked");
-            handleDownloadWorkspace();
+            if (!isDownloading) {
+              setIsDownloading(true);
+            }
           }}
         />
       )}

frontend/src/components/features/project-menu/ProjectMenuCard.tsx

@@ -1,16 +1,14 @@
 import React from "react";
-import toast from "react-hot-toast";
 import posthog from "posthog-js";
 import EllipsisH from "#/icons/ellipsis-h.svg?react";
 import { createChatMessage } from "#/services/chat-service";
 import { ProjectMenuCardContextMenu } from "./project.menu-card-context-menu";
 import { ProjectMenuDetailsPlaceholder } from "./project-menu-details-placeholder";
 import { ProjectMenuDetails } from "./project-menu-details";
-import { downloadWorkspace } from "#/utils/download-workspace";
 import { useWsClient } from "#/context/ws-client-provider";
-import { LoadingSpinner } from "#/components/shared/loading-spinner";
 import { ConnectToGitHubModal } from "#/components/shared/modals/connect-to-github-modal";
 import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
+import { DownloadModal } from "#/components/shared/download-modal";
 
 interface ProjectMenuCardProps {
   isConnectedToGitHub: boolean;
@@ -30,7 +28,7 @@ export function ProjectMenuCard({
   const [contextMenuIsOpen, setContextMenuIsOpen] = React.useState(false);
   const [connectToGitHubModalOpen, setConnectToGitHubModalOpen] =
     React.useState(false);
-  const [working, setWorking] = React.useState(false);
+  const [downloading, setDownloading] = React.useState(false);
 
   const toggleMenuVisibility = () => {
     setContextMenuIsOpen((prev) => !prev);
@@ -58,20 +56,16 @@ Please push the changes to GitHub and open a pull request.
 
   const handleDownloadWorkspace = () => {
     posthog.capture("download_workspace_button_clicked");
-    try {
-      setWorking(true);
-      downloadWorkspace().then(
-        () => setWorking(false),
-        () => setWorking(false),
-      );
-    } catch (error) {
-      toast.error("Failed to download workspace");
-    }
+    setDownloading(true);
+  };
+
+  const handleDownloadClose = () => {
+    setDownloading(false);
   };
 
   return (
     <div className="px-4 py-[10px] w-[337px] rounded-xl border border-[#525252] flex justify-between items-center relative">
-      {!working && contextMenuIsOpen && (
+      {!downloading && contextMenuIsOpen && (
         <ProjectMenuCardContextMenu
           isConnectedToGitHub={isConnectedToGitHub}
           onConnectToGitHub={() => setConnectToGitHubModalOpen(true)}
@@ -93,17 +87,20 @@ Please push the changes to GitHub and open a pull request.
           onConnectToGitHub={() => setConnectToGitHubModalOpen(true)}
         />
       )}
-      <button
-        type="button"
-        onClick={toggleMenuVisibility}
-        aria-label="Open project menu"
-      >
-        {working ? (
-          <LoadingSpinner size="small" />
-        ) : (
+      <DownloadModal
+        initialPath=""
+        onClose={handleDownloadClose}
+        isOpen={downloading}
+      />
+      {!downloading && (
+        <button
+          type="button"
+          onClick={toggleMenuVisibility}
+          aria-label="Open project menu"
+        >
           <EllipsisH width={36} height={36} />
-        )}
-      </button>
+        </button>
+      )}
       {connectToGitHubModalOpen && (
         <ModalBackdrop onClose={() => setConnectToGitHubModalOpen(false)}>
           <ConnectToGitHubModal

frontend/src/components/features/project-menu/project.menu-card-context-menu.tsx

@@ -37,7 +37,7 @@ export function ProjectMenuCardContextMenu({
         </ContextMenuListItem>
       )}
       <ContextMenuListItem onClick={onDownloadWorkspace}>
-        {t(I18nKey.PROJECT_MENU_CARD_CONTEXT_MENU$DOWNLOAD_AS_ZIP_LABEL)}
+        {t(I18nKey.PROJECT_MENU_CARD_CONTEXT_MENU$DOWNLOAD_FILES_LABEL)}
       </ContextMenuListItem>
     </ContextMenu>
   );

frontend/src/components/shared/download-modal.tsx

@@ -0,0 +1,33 @@
+import { useDownloadProgress } from "#/hooks/use-download-progress";
+import { DownloadProgress } from "./download-progress";
+
+interface DownloadModalProps {
+  initialPath: string;
+  onClose: () => void;
+  isOpen: boolean;
+}
+
+function ActiveDownload({
+  initialPath,
+  onClose,
+}: {
+  initialPath: string;
+  onClose: () => void;
+}) {
+  const { progress, cancelDownload } = useDownloadProgress(
+    initialPath,
+    onClose,
+  );
+
+  return <DownloadProgress progress={progress} onCancel={cancelDownload} />;
+}
+
+export function DownloadModal({
+  initialPath,
+  onClose,
+  isOpen,
+}: DownloadModalProps) {
+  if (!isOpen) return null;
+
+  return <ActiveDownload initialPath={initialPath} onClose={onClose} />;
+}

frontend/src/components/shared/download-progress.tsx

@@ -0,0 +1,87 @@
+export interface DownloadProgressState {
+  filesTotal: number;
+  filesDownloaded: number;
+  currentFile: string;
+  totalBytesDownloaded: number;
+  bytesDownloadedPerSecond: number;
+  isDiscoveringFiles: boolean;
+}
+
+interface DownloadProgressProps {
+  progress: DownloadProgressState;
+  onCancel: () => void;
+}
+
+export function DownloadProgress({
+  progress,
+  onCancel,
+}: DownloadProgressProps) {
+  const formatBytes = (bytes: number) => {
+    const units = ["B", "KB", "MB", "GB"];
+    let size = bytes;
+    let unitIndex = 0;
+    while (size >= 1024 && unitIndex < units.length - 1) {
+      size /= 1024;
+      unitIndex += 1;
+    }
+    return `${size.toFixed(1)} ${units[unitIndex]}`;
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-20">
+      <div className="bg-[#1C1C1C] rounded-lg p-6 max-w-md w-full mx-4 border border-[#525252]">
+        <div className="mb-4">
+          <h3 className="text-lg font-semibold mb-2 text-white">
+            {progress.isDiscoveringFiles
+              ? "Preparing Download..."
+              : "Downloading Files"}
+          </h3>
+          <p className="text-sm text-gray-400 truncate">
+            {progress.isDiscoveringFiles
+              ? `Found ${progress.filesTotal} files...`
+              : progress.currentFile}
+          </p>
+        </div>
+
+        <div className="mb-4">
+          <div className="h-2 bg-[#2C2C2C] rounded-full overflow-hidden">
+            {progress.isDiscoveringFiles ? (
+              <div
+                className="h-full bg-blue-500 animate-pulse"
+                style={{ width: "100%" }}
+              />
+            ) : (
+              <div
+                className="h-full bg-blue-500 transition-all duration-300"
+                style={{
+                  width: `${(progress.filesDownloaded / progress.filesTotal) * 100}%`,
+                }}
+              />
+            )}
+          </div>
+        </div>
+
+        <div className="flex justify-between text-sm text-gray-400">
+          <span>
+            {progress.isDiscoveringFiles
+              ? `Scanning workspace...`
+              : `${progress.filesDownloaded} of ${progress.filesTotal} files`}
+          </span>
+          {!progress.isDiscoveringFiles && (
+            <span>{formatBytes(progress.bytesDownloadedPerSecond)}/s</span>
+          )}
+        </div>
+
+        <div className="mt-4 flex justify-end">
+          <button
+            type="button"
+            onClick={onCancel}
+            className="px-4 py-2 text-sm text-gray-400 hover:text-white transition-colors"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/shared/modals/modal-backdrop.tsx

@@ -20,7 +20,7 @@ export function ModalBackdrop({ children, onClose }: ModalBackdropProps) {
   };
 
   return (
-    <div className="fixed inset-0 flex items-center justify-center z-10">
+    <div className="fixed inset-0 flex items-center justify-center z-20">
       <div
         onClick={handleClick}
         className="fixed inset-0 bg-black bg-opacity-80"

frontend/src/hooks/use-download-progress.ts

@@ -0,0 +1,78 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { downloadFiles } from "#/utils/download-files";
+import { DownloadProgressState } from "#/components/shared/download-progress";
+
+export const INITIAL_PROGRESS: DownloadProgressState = {
+  filesTotal: 0,
+  filesDownloaded: 0,
+  currentFile: "",
+  totalBytesDownloaded: 0,
+  bytesDownloadedPerSecond: 0,
+  isDiscoveringFiles: true,
+};
+
+export function useDownloadProgress(
+  initialPath: string | undefined,
+  onClose: () => void,
+) {
+  const [isStarted, setIsStarted] = useState(false);
+  const [progress, setProgress] =
+    useState<DownloadProgressState>(INITIAL_PROGRESS);
+  const progressRef = useRef<DownloadProgressState>(INITIAL_PROGRESS);
+  const abortController = useRef<AbortController>();
+
+  // Create AbortController on mount
+  useEffect(() => {
+    const controller = new AbortController();
+    abortController.current = controller;
+    // Initialize progress ref with initial state
+    progressRef.current = INITIAL_PROGRESS;
+    return () => {
+      controller.abort();
+      abortController.current = undefined;
+    };
+  }, []); // Empty deps array - only run on mount/unmount
+
+  // Start download when isStarted becomes true
+  useEffect(() => {
+    if (!isStarted) {
+      setIsStarted(true);
+      return;
+    }
+
+    if (!abortController.current) return;
+
+    // Start download
+    const download = async () => {
+      try {
+        await downloadFiles(initialPath, {
+          onProgress: (p) => {
+            // Update both the ref and state
+            progressRef.current = { ...p };
+            setProgress((prev: DownloadProgressState) => ({ ...prev, ...p }));
+          },
+          signal: abortController.current!.signal,
+        });
+        onClose();
+      } catch (error) {
+        if (error instanceof Error && error.message === "Download cancelled") {
+          onClose();
+        } else {
+          throw error;
+        }
+      }
+    };
+    download();
+  }, [initialPath, onClose, isStarted]);
+
+  // No longer need startDownload as it's handled in useEffect
+
+  const cancelDownload = useCallback(() => {
+    abortController.current?.abort();
+  }, []);
+
+  return {
+    progress,
+    cancelDownload,
+  };
+}

frontend/src/i18n/translation.json

@@ -2001,9 +2001,9 @@
     "en": "Push to GitHub",
     "es": "Subir a GitHub"
   },
-  "PROJECT_MENU_CARD_CONTEXT_MENU$DOWNLOAD_AS_ZIP_LABEL": {
-    "en": "Download as .zip",
-    "es": "Descargar como .zip"
+  "PROJECT_MENU_CARD_CONTEXT_MENU$DOWNLOAD_FILES_LABEL": {
+    "en": "Download files",
+    "es": "Descargar archivos"
   },
   "ACTION_MESSAGE$RUN": {
     "en": "Running a bash command"