adds file download feature (#69)

rishabhpoddar · web-flow · commit d5a71fbbabec · 2026-05-17T13:31:04.000+05:30
diff --git a/frontend/src/pages/EditorPage.tsx b/frontend/src/pages/EditorPage.tsx
diff --git a/frontend/src/pages/WorkflowEditorPage.css b/frontend/src/pages/WorkflowEditorPage.css
@@ -250,6 +250,11 @@
     display: inline-flex;
 }
 
+.wf-tree-mobile-trigger,
+.wf-mobile-action-backdrop {
+    display: none;
+}
+
 .wf-tree-actions button {
     padding: 2px 6px;
     font-size: 0.72rem;
@@ -436,10 +441,80 @@
 
     .wf-tree-row {
         min-height: 36px;
+        align-items: center;
+        padding-right: 4px;
     }
 
     .wf-tree-actions {
+        display: none;
+    }
+
+    .wf-tree-row:hover .wf-tree-actions {
+        display: none;
+    }
+
+    .wf-tree-mobile-trigger {
         display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: auto;
+        width: 30px;
+        height: 30px;
+        border: 1px solid #4a5568;
+        background: #374151;
+        color: #e5e7eb;
+        border-radius: 8px;
+        cursor: pointer;
+        flex-shrink: 0;
+    }
+
+    .wf-mobile-action-backdrop {
+        display: flex;
+        position: fixed;
+        inset: 0;
+        z-index: 1000;
+        align-items: flex-end;
+        justify-content: center;
+        padding: 16px;
+        background: rgba(3, 7, 18, 0.5);
+    }
+
+    .wf-mobile-action-sheet {
+        width: min(360px, 100%);
+        padding: 8px;
+        border: 1px solid #374151;
+        border-radius: 12px;
+        background: #111827;
+        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
+    }
+
+    .wf-mobile-action-title {
+        padding: 8px 10px 10px;
+        color: #d1d5db;
+        font-size: 0.82rem;
+        font-weight: 700;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .wf-mobile-action-sheet button {
+        width: 100%;
+        text-align: left;
+        border: 1px solid #4a5568;
+        background: #374151;
+        color: #e5e7eb;
+        border-radius: 8px;
+        padding: 10px 12px;
+        cursor: pointer;
+        font-size: 0.9rem;
+        margin-top: 6px;
+    }
+
+    .wf-mobile-action-sheet button.danger {
+        border-color: #7f1d1d;
+        background: #450a0a;
+        color: #fecaca;
     }
 }
 
@@ -457,4 +532,8 @@
     .wf-tree-actions button {
         padding: 0.45rem 0.7rem;
     }
+
+    .wf-mobile-action-backdrop {
+        padding: 10px;
+    }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -87,4 +87,4 @@
     "supertest": "^7.2.2",
     "ts-prune": "^0.10.3"
   }
-}
+}
diff --git a/src/skills/index.ts b/src/skills/index.ts
@@ -15,6 +15,7 @@ import {
 import { assertCommonPermissionMode } from "../utils/permission-common";
 import {
     createSkillFileOrFolder,
+    downloadSkillPath,
     deleteSkillPath,
     listSkillDirectory,
     readSkillFileContent,
@@ -315,6 +316,7 @@ registerResourceFileRoutes({
     assertCanEdit: assertCanEditSkillFiles,
     listDirectory: listSkillDirectory,
     readFileContent: readSkillFileContent,
+    downloadPath: downloadSkillPath,
     saveFileContent: saveSkillFileContent,
     createFileOrFolder: createSkillFileOrFolder,
     uploadFileFromTempPath: uploadSkillFileFromTempPath,
diff --git a/src/utils/resource-file-routes.ts b/src/utils/resource-file-routes.ts
@@ -20,6 +20,11 @@ interface ResourceFileRouteOptions {
     assertCanEdit: (slug: string, userId: string) => Promise<void>;
     listDirectory: (slug: string, rawPath: string | undefined) => FileTreeResponse;
     readFileContent: (slug: string, rawPath: string | undefined) => FileContentResponse;
+    downloadPath: (slug: string, rawPath: string | undefined) => {
+        filename: string;
+        contentType: string;
+        body: Buffer | NodeJS.ReadableStream;
+    };
     saveFileContent: (slug: string, payload: { path: string; content: string; base_etag: string }) => FileSaveResponse;
     createFileOrFolder: (slug: string, parentPath: string, name: string, kind: "file" | "directory") => FileNode;
     uploadFileFromTempPath: (slug: string, parentPath: string, name: string, tempFilePath: string) => FileNode;
@@ -37,6 +42,7 @@ export function registerResourceFileRoutes(options: ResourceFileRouteOptions): v
         assertCanEdit,
         listDirectory,
         readFileContent,
+        downloadPath,
         saveFileContent,
         createFileOrFolder,
         uploadFileFromTempPath,
@@ -72,6 +78,22 @@ export function registerResourceFileRoutes(options: ResourceFileRouteOptions): v
         res.json(content);
     }, true));
 
+    router.get("/:slug/files/download", apiHandler(async (req, res) => {
+        const slug = req.params.slug as string;
+        const authReq = req as AuthenticatedRequest;
+        await assertCanView(slug, authReq.userId!);
+        await ensureResourceExists(slug);
+        const rawPath = typeof req.query.path === "string" ? req.query.path : undefined;
+        const download = downloadPath(slug, rawPath);
+        res.type(download.contentType);
+        res.attachment(download.filename);
+        if (Buffer.isBuffer(download.body)) {
+            res.send(download.body);
+            return;
+        }
+        download.body.pipe(res);
+    }, true));
+
     router.put("/:slug/files/content", apiHandler(async (req, res) => {
         const slug = req.params.slug as string;
         const authReq = req as AuthenticatedRequest;
diff --git a/src/utils/resource-files.ts b/src/utils/resource-files.ts
@@ -28,6 +28,11 @@ interface ResourceFileManagerOptions {
 interface ResourceFileManager {
     listDirectory: (slug: string, rawPath: string | undefined) => FileTreeResponse;
     readFileContent: (slug: string, rawPath: string | undefined) => FileContentResponse;
+    downloadPath: (slug: string, rawPath: string | undefined) => {
+        filename: string;
+        contentType: string;
+        body: NodeJS.ReadableStream;
+    };
     saveFileContent: (slug: string, request: FileSaveRequest) => FileSaveResponse;
     createFileOrFolder: (slug: string, rawParentPath: string | undefined, name: string, kind: "file" | "directory") => FileNode;
     uploadFileFromTempPath: (slug: string, rawParentPath: string | undefined, name: string, tempFilePath: string) => FileNode;
@@ -379,6 +384,36 @@ export function createResourceFileManager(options: ResourceFileManagerOptions):
         return response;
     }
 
+    function downloadPath(slug: string, rawPath: string | undefined): {
+        filename: string;
+        contentType: string;
+        body: NodeJS.ReadableStream;
+    } {
+        const relativePath = normalizeRelativePath(rawPath ?? "", false);
+        const absolutePath = resolveTarget(slug, relativePath);
+        if (!fs.existsSync(absolutePath)) {
+            throw {
+                status: 404,
+                message: "File or folder not found"
+            };
+        }
+        assertExistingPathIsSafe(slug, absolutePath);
+
+        const stat = fs.statSync(absolutePath);
+        if (!stat.isFile()) {
+            throw {
+                status: 400,
+                message: "path must be a file"
+            };
+        }
+
+        return {
+            filename: path.basename(relativePath),
+            contentType: "application/octet-stream",
+            body: fs.createReadStream(absolutePath),
+        };
+    }
+
     function saveFileContent(slug: string, request: FileSaveRequest): FileSaveResponse {
         const relativePath = normalizeRelativePath(request.path, false);
         const absolutePath = resolveTarget(slug, relativePath);
@@ -560,6 +595,7 @@ export function createResourceFileManager(options: ResourceFileManagerOptions):
     return {
         listDirectory,
         readFileContent,
+        downloadPath,
         saveFileContent,
         createFileOrFolder,
         uploadFileFromTempPath,
diff --git a/src/utils/skill-files.ts b/src/utils/skill-files.ts
@@ -16,6 +16,7 @@ const skillFileManager = createResourceFileManager({
 
 export const listSkillDirectory = skillFileManager.listDirectory;
 export const readSkillFileContent = skillFileManager.readFileContent;
+export const downloadSkillPath = skillFileManager.downloadPath;
 export const saveSkillFileContent = skillFileManager.saveFileContent;
 export const createSkillFileOrFolder = skillFileManager.createFileOrFolder;
 export const uploadSkillFileFromTempPath = skillFileManager.uploadFileFromTempPath;
diff --git a/src/utils/workflow-files.ts b/src/utils/workflow-files.ts
@@ -9,6 +9,7 @@ const workflowFileManager = createResourceFileManager({
 
 export const listWorkflowDirectory = workflowFileManager.listDirectory;
 export const readWorkflowFileContent = workflowFileManager.readFileContent;
+export const downloadWorkflowPath = workflowFileManager.downloadPath;
 export const saveWorkflowFileContent = workflowFileManager.saveFileContent;
 export const createWorkflowFileOrFolder = workflowFileManager.createFileOrFolder;
 export const uploadWorkflowFileFromTempPath = workflowFileManager.uploadFileFromTempPath;
diff --git a/src/workflows/index.ts b/src/workflows/index.ts
@@ -17,6 +17,7 @@ import {
 } from "../utils/workflow";
 import {
     createWorkflowFileOrFolder,
+    downloadWorkflowPath,
     deleteWorkflowPath,
     listWorkflowDirectory,
     readWorkflowFileContent,
@@ -720,6 +721,7 @@ registerResourceFileRoutes({
     assertCanEdit: assertCanEditWorkflowFiles,
     listDirectory: listWorkflowDirectory,
     readFileContent: readWorkflowFileContent,
+    downloadPath: downloadWorkflowPath,
     saveFileContent: saveWorkflowFileContent,
     createFileOrFolder: createWorkflowFileOrFolder,
     uploadFileFromTempPath: uploadWorkflowFileFromTempPath,

Original file line number	Diff line number	Diff line change
`@@ -87,4 +87,4 @@`
`87`	`87`	`"supertest": "^7.2.2",`
`88`	`88`	`"ts-prune": "^0.10.3"`
`89`	`89`	`}`
`90`		`-}`
	`90`	`+}`