fix(web): make workspace downloads direct

rcarmo · rcarmo · commit 4b7b71c3f19c · 2026-03-30T19:49:43.000+01:00
diff --git a/runtime/src/channels/web/handlers/workspace.ts b/runtime/src/channels/web/handlers/workspace.ts
@@ -105,7 +105,8 @@ export function handleWorkspaceDelete(req: Request): Response {
  */
 export function handleWorkspaceRaw(req: Request): Response {
   const url = new URL(req.url);
-  const result = workspaceService.getRaw(url.searchParams.get("path"));
+  const download = url.searchParams.get("download") === "1" || url.searchParams.get("download") === "true";
+  const result = workspaceService.getRaw(url.searchParams.get("path"), download);
   if (result.status !== 200) {
     return new Response(result.body as string, {
       status: result.status,
@@ -120,11 +121,13 @@ export function handleWorkspaceRaw(req: Request): Response {
   const file = result.body as ReturnType<typeof Bun.file>;
   const filePath = result.filePath || null;
   const fileSize = typeof result.size === "number" ? result.size : (typeof file?.size === "number" ? file.size : 0);
+  const downloadFilename = String(result.filename || "download").replace(/["\\]/g, "_");
   const baseHeaders: Record<string, string> = {
     "Content-Type": contentType,
     "Accept-Ranges": "bytes",
     "X-Frame-Options": "SAMEORIGIN",
     "Content-Security-Policy": "default-src 'self'; frame-ancestors 'self'; base-uri 'self'; form-action 'self'",
+    ...(result.download ? { "Content-Disposition": `attachment; filename="${downloadFilename}"` } : {}),
   };
 
   const readRangeChunk = (start: number, chunkSize: number): Uint8Array | null => {
diff --git a/runtime/src/channels/web/workspace/file-service.ts b/runtime/src/channels/web/workspace/file-service.ts
@@ -127,7 +127,10 @@ export class WorkspaceFileService {
     }
   }
 
-  getRaw(pathParam: string | null): { status: number; body: string | Blob; contentType?: string; filePath?: string; size?: number } {
+  getRaw(
+    pathParam: string | null,
+    download = false,
+  ): { status: number; body: string | Blob; contentType?: string; filePath?: string; size?: number; filename?: string; download?: boolean } {
     const targetPath = resolveWorkspacePath(pathParam);
     if (!targetPath) return { status: 400, body: "Invalid path" };
 
@@ -136,7 +139,15 @@ export class WorkspaceFileService {
       if (stats.isDirectory()) return { status: 400, body: "Path is a directory" };
       const contentType = contentTypeForPath(targetPath);
       const file = Bun.file(targetPath);
-      return { status: 200, body: file, contentType, filePath: targetPath, size: stats.size };
+      return {
+        status: 200,
+        body: file,
+        contentType,
+        filePath: targetPath,
+        size: stats.size,
+        filename: path.basename(targetPath),
+        download,
+      };
     } catch {
       return { status: 404, body: "Not found" };
     }
diff --git a/runtime/src/channels/web/workspace/service.ts b/runtime/src/channels/web/workspace/service.ts
@@ -25,8 +25,8 @@ export class WorkspaceService {
     return this.fileService.getFile(pathParam, maxParam, mode);
   }
 
-  getRaw(pathParam: string | null) {
-    return this.fileService.getRaw(pathParam);
+  getRaw(pathParam: string | null, download = false) {
+    return this.fileService.getRaw(pathParam, download);
   }
 
   getGitBranch(pathParam: string | null) {
diff --git a/runtime/test/channels/web/workspace-file-service.test.ts b/runtime/test/channels/web/workspace-file-service.test.ts
@@ -75,6 +75,12 @@ test("updateFile/deleteFile and getRaw handle success and errors", () => {
     const raw = service.getRaw(`${prefix}/edit.txt`);
     expect(raw.status).toBe(200);
     expect(raw.contentType).toBe("text/plain");
+    expect(raw.download).toBe(false);
+
+    const rawDownload = service.getRaw(`${prefix}/edit.txt`, true);
+    expect(rawDownload.status).toBe(200);
+    expect(rawDownload.download).toBe(true);
+    expect(rawDownload.filename).toBe("edit.txt");
 
     expect(service.updateFile(`${prefix}/edit.txt`, undefined as any).status).toBe(400);
     expect(service.updateFile(`${prefix}/missing.txt`, "x").status).toBe(404);
diff --git a/runtime/test/channels/web/workspace-handlers.test.ts b/runtime/test/channels/web/workspace-handlers.test.ts
@@ -0,0 +1,35 @@
+import { expect, test } from "bun:test";
+import "../../helpers.js";
+import { mkdirSync, rmSync, writeFileSync } from "fs";
+import { join } from "path";
+
+import { handleWorkspaceRaw } from "../../../src/channels/web/handlers/workspace.js";
+import { WORKSPACE_DIR } from "../../../src/core/config.js";
+
+function setupWorkspaceFile() {
+  const prefix = `workspace-raw-handler-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+  const base = join(WORKSPACE_DIR, prefix);
+  mkdirSync(base, { recursive: true });
+  const filePath = join(base, "download me.txt");
+  writeFileSync(filePath, "hello\n", "utf8");
+  return {
+    prefix,
+    cleanup: () => rmSync(base, { recursive: true, force: true }),
+  };
+}
+
+test("handleWorkspaceRaw adds attachment headers when download=1", async () => {
+  const { prefix, cleanup } = setupWorkspaceFile();
+  try {
+    const response = handleWorkspaceRaw(new Request(
+      `https://example.com/workspace/raw?path=${encodeURIComponent(`${prefix}/download me.txt`)}&download=1`,
+      { method: "GET" },
+    ));
+
+    expect(response.status).toBe(200);
+    expect(response.headers.get("Content-Disposition")).toBe('attachment; filename="download me.txt"');
+    expect(await response.text()).toBe("hello\n");
+  } finally {
+    cleanup();
+  }
+});
diff --git a/runtime/web/src/api.ts b/runtime/web/src/api.ts
@@ -655,8 +655,17 @@ export async function setWorkspaceVisibility(visible, showHidden = false) {
 /**
  * Get raw workspace file URL (images/SVG)
  */
-export function getWorkspaceRawUrl(path) {
-    return `${API_BASE}/workspace/raw?path=${encodeURIComponent(path)}`;
+export function getWorkspaceRawUrl(path, options = {}) {
+    const query = new URLSearchParams({ path: String(path || '') });
+    if (options.download) query.set('download', '1');
+    return `${API_BASE}/workspace/raw?${query.toString()}`;
+}
+
+/**
+ * Get workspace file download URL.
+ */
+export function getWorkspaceFileDownloadUrl(path) {
+    return getWorkspaceRawUrl(path, { download: true });
 }
 
 /**
diff --git a/runtime/web/src/components/workspace-explorer.ts b/runtime/web/src/components/workspace-explorer.ts
@@ -2,13 +2,11 @@
 import { html, useCallback, useEffect, useMemo, useRef, useState } from '../vendor/preact-htm.js';
 import { getLocalStorageBoolean, getLocalStorageItem, getLocalStorageNumber, setLocalStorageItem } from '../utils/storage.js';
 import {
-    attachWorkspaceFile,
     createWorkspaceFile,
     deleteWorkspaceFile,
-    getMediaInfo,
-    getMediaUrl,
     getWorkspaceDownloadUrl,
     getWorkspaceFile,
+    getWorkspaceFileDownloadUrl,
     getWorkspaceTree,
     moveWorkspaceEntry,
     renameWorkspaceFile,
@@ -524,40 +522,16 @@ function FolderStarburstChart({ payload }) {
     `;
 }
 
-// ── FileAttachmentCard ────────────────────────────────────────────────────────
-
-function FileAttachmentCard({ mediaId }) {
-    const [info, setInfo] = useState(null);
-    useEffect(() => {
-        if (!mediaId) return;
-        getMediaInfo(mediaId).then(setInfo).catch(() => {
-            /* expected: attachment metadata is best-effort for workspace cards. */
-        });
-    }, [mediaId]);
-    if (!info) return null;
-    const filename = info.filename || 'file';
-    const sizeStr = info.metadata?.size ? formatFileSize(info.metadata.size) : '';
-    return html`
-        <a href=${getMediaUrl(mediaId)} download=${filename} class="file-attachment"
-            onClick=${(e) => e.stopPropagation()}>
-            <svg class="file-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-                <polyline points="14 2 14 8 20 8"/>
-                <line x1="16" y1="13" x2="8" y2="13"/>
-                <line x1="16" y1="17" x2="8" y2="17"/>
-                <polyline points="10 9 9 9 8 9"/>
-            </svg>
-            <div class="file-info">
-                <span class="file-name">${filename}</span>
-                ${sizeStr && html`<span class="file-size">${sizeStr}</span>`}
-            </div>
-            <svg class="download-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
-                <polyline points="7 10 12 15 17 10"/>
-                <line x1="12" y1="15" x2="12" y2="3"/>
-            </svg>
-        </a>
-    `;
+function triggerWorkspaceDownload(url) {
+    if (typeof document === 'undefined' || !url) return;
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', '');
+    link.rel = 'noopener';
+    link.style.display = 'none';
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
 }
 
 // ── WorkspaceExplorer ─────────────────────────────────────────────────────────
@@ -579,7 +553,7 @@ export function WorkspaceExplorer({
     const [renamingPath, setRenamingPath]  = useState(null);
     const [renameValue,  setRenameValue]   = useState('');
     const [preview,       setPreview]       = useState(null);
-    const [downloadId,    setDownloadId]    = useState(null);
+    const [,             setDownloadId]    = useState(null);
     const [initialLoad,   setInitialLoad]   = useState(true);
     const [loadingPreview,setLoadingPreview]= useState(false);
     const [error,         setError]         = useState(null);
@@ -1756,15 +1730,10 @@ export function WorkspaceExplorer({
         document.addEventListener('touchcancel', onUp);
     }).current;
 
-    const handleDownload = async () => {
-        if (!selectedPath) return;
-        try {
-            const res = await attachWorkspaceFile(selectedPath);
-            if (res.media_id) setDownloadId(res.media_id);
-        } catch (err) {
-            setPreview(prev => ({ ...(prev || {}), error: err.message || 'Failed to attach' }));
-        }
-    };
+    const handleDownload = useCallback((path = selectedPath) => {
+        if (!path) return;
+        triggerWorkspaceDownload(getWorkspaceFileDownloadUrl(path));
+    }, [selectedPath]);
 
     const handleDeleteFile = async () => {
         if (!selectedPath || selectedIsDir) return;
@@ -1967,9 +1936,7 @@ export function WorkspaceExplorer({
     const handleMenuDownloadFolder = useCallback(() => {
         if (!selectedFolderDownloadUrl) return;
         closeHeaderMenu();
-        if (typeof window !== 'undefined') {
-            window.open(selectedFolderDownloadUrl, '_blank', 'noopener');
-        }
+        triggerWorkspaceDownload(selectedFolderDownloadUrl);
     }, [closeHeaderMenu, selectedFolderDownloadUrl]);
 
     const handleMenuOpenTerminalTab = useCallback(() => {
@@ -2320,7 +2287,7 @@ export function WorkspaceExplorer({
                                             <line x1="12" y1="3" x2="12" y2="15"/>
                                         </svg>
                                     </button>
-                                    <a class="workspace-download" href=${getWorkspaceDownloadUrl(selectedPath, showHidden)}
+                                    <a class="workspace-download" href=${getWorkspaceDownloadUrl(selectedPath, showHidden)} download
                                         title="Download folder as zip" onClick=${(e) => e.stopPropagation()}>
                                         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                             stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
@@ -2329,14 +2296,15 @@ export function WorkspaceExplorer({
                                             <line x1="12" y1="15" x2="12" y2="3"/>
                                         </svg>
                                     </a>`
-                                : html`<button class="workspace-download" onClick=${handleDownload} title="Download">
+                                : html`<a class="workspace-download" href=${getWorkspaceFileDownloadUrl(selectedPath)} download
+                                        title="Download" onClick=${(e) => e.stopPropagation()}>
                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                         stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                         <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                                         <polyline points="7 10 12 15 17 10"/>
                                         <line x1="12" y1="15" x2="12" y2="3"/>
                                     </svg>
-                                </button>`}
+                                </a>`}
                         </div>
                     </div>
                     ${loadingPreview && html`<div class="workspace-loading">Loading preview…</div>`}
@@ -2355,11 +2323,6 @@ export function WorkspaceExplorer({
                     ${preview && !preview.error && !selectedIsDir && html`
                         <div class="workspace-preview-body" ref=${previewPaneHostRef}></div>
                     `}
-                    ${downloadId && html`
-                        <div class="workspace-download-card">
-                            <${FileAttachmentCard} mediaId=${downloadId} />
-                        </div>
-                    `}
                 </div>
             `}
             ${dragGhost && html`

Original file line number	Diff line number	Diff line change
`@@ -25,8 +25,8 @@ export class WorkspaceService {`
`25`	`25`	`return this.fileService.getFile(pathParam, maxParam, mode);`
`26`	`26`	`}`
`27`	`27`
`28`		`- getRaw(pathParam: string \| null) {`
`29`		`- return this.fileService.getRaw(pathParam);`
	`28`	`+ getRaw(pathParam: string \| null, download = false) {`
	`29`	`+ return this.fileService.getRaw(pathParam, download);`
`30`	`30`	`}`
`31`	`31`
`32`	`32`	`getGitBranch(pathParam: string \| null) {`