storage-explorer 1.0.0 → 1.1.0

package/dist/{chunk-veptbhs8.css → chunk-aq15a172.css}

@@ -1 +1 @@
-:root{color:#152234;--bg-top:#f9f3ea;--bg-bottom:#e8eff8;--panel:#ffffffd8;--panel-border:#cdd9e8;--text:#152234;--muted:#5d6f84;--accent:#146c94;--accent-soft:#e1f0f8;--danger:#b9414f;--ok:#1f8b4c;--radius:14px;background:#f6f8fb;font-family:Segoe UI,Avenir Next,Helvetica Neue,sans-serif;font-weight:400;line-height:1.4}*{box-sizing:border-box}body{color:var(--text);background:linear-gradient(168deg,var(--bg-top),var(--bg-bottom));min-width:320px;min-height:100vh;margin:0}body:before{content:"";position:fixed;z-index:-1;pointer-events:none;background:radial-gradient(circle at 20% 18%,#fffa 0,#0000 36%),radial-gradient(circle at 85% 12%,#d9e9fa88 0,#0000 28%),radial-gradient(circle at 70% 80%,#f8e8d6aa 0,#0000 35%);inset:0}#root{width:100%;min-height:100vh}.app-shell{display:grid;grid-template-columns:360px minmax(0,1fr);gap:1rem;width:min(1320px,100% - 2rem);margin:1rem auto}.main-column{display:grid;align-content: start;gap:1rem}.panel{background:var(--panel);backdrop-filter:blur(10px);border:1px solid var(--panel-border);border-radius:var(--radius);box-shadow:0 10px 24px #12233712}.panel-step{display:inline-block;color:var(--accent);background:var(--accent-soft);border-radius:999px;margin-bottom:.6rem;padding:.2rem .55rem;font-size:.73rem;font-weight:600}.profile-panel{position:sticky;overflow:auto;max-height:calc(100vh - 2rem);padding:1rem;top:1rem}.explorer-panel,.object-panel{padding:1rem}.panel-header h1,.explorer-header h2,.objects-header h3{letter-spacing:.01em;margin:0}.panel-header p,.explorer-header p,.objects-header p{color:var(--muted);margin:.35rem 0 0;font-size:.92rem}.profiles-toolbar{display:flex;justify-content:space-between;align-items: center;margin-top:1rem}.profiles-list{display:grid;gap:.5rem;margin-top:.65rem}.profile-card{border:1px solid var(--panel-border);overflow:hidden;background:#fff;border-radius:10px}.profile-card.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.profile-select{text-align:left;display:grid;cursor:pointer;background:0 0;border:0;gap:.25rem;width:100%;padding:.65rem .75rem}.profile-name{font-weight:600}.profile-endpoint{color:var(--muted);overflow-wrap:anywhere;font-size:.84rem}.delete-button{border:0;border-top:1px solid var(--panel-border);color:var(--danger);cursor:pointer;background:#fff;width:100%;padding:.45rem .75rem}.profile-form{display:grid;gap:.7rem;margin-top:1rem}.profile-form label{display:grid;gap:.35rem;font-size:.9rem}input,button{font:inherit}.profile-form input,.manual-bucket-row input{border:1px solid var(--panel-border);color:var(--text);background:#fff;border-radius:9px;flex:1;padding:.55rem .65rem}.profile-form input:focus,.manual-bucket-row input:focus{outline:2px solid #0000;border-color:var(--accent);box-shadow:0 0 0 2px #146c9430}.secret-row{display:flex;gap:.5rem}.secret-row input{flex:1}.checkbox-row{grid-template-columns:auto 1fr;align-items: center}.checkbox-row input{width:1rem;height:1rem}.form-actions{display:flex;flex-wrap:wrap;gap:.55rem}.primary-button,.secondary-button,.ghost-button{cursor:pointer;border-radius:9px;padding:.55rem .85rem;transition:all .15s}.primary-button{border:1px solid var(--accent);background:var(--accent);color:#fff}.primary-button:hover{filter:brightness(1.05)}.secondary-button{border:1px solid var(--panel-border);color:var(--text);background:#fff}.ghost-button{border:1px solid var(--panel-border);color:var(--muted);background:#fff}.secondary-button:hover,.ghost-button:hover,.delete-button:hover,.bucket-item:hover,.object-row.folder:hover,.breadcrumb-link:hover{background:var(--accent-soft)}button:disabled{opacity:.58;cursor:not-allowed}.status-ok,.status-error,.empty-copy{margin:.75rem 0 0;font-size:.88rem}.status-ok{color:var(--ok)}.status-error{color:var(--danger)}.empty-copy,.muted,.helper-copy{color:var(--muted)}.explorer-header,.objects-header{display:flex;justify-content:space-between;align-items: flex-start;gap:1rem}.manual-bucket-form{display:grid;border:1px solid var(--panel-border);background:#fff;border-radius:10px;gap:.45rem;margin-top:.9rem;padding:.7rem}.manual-bucket-form label{color:var(--muted);font-size:.88rem}.manual-bucket-row{display:flex;align-items: center;gap:.5rem}.helper-copy{margin:0;font-size:.82rem}.buckets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.5rem;margin-top:.8rem}.bucket-item{border:1px solid var(--panel-border);text-align:left;display:grid;cursor:pointer;background:#fff;border-radius:10px;gap:.2rem;padding:.7rem}.bucket-item.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.bucket-item small{color:var(--muted)}.objects-actions{display:flex;flex-wrap:wrap;gap:.5rem}.path-breadcrumb{border:1px solid var(--panel-border);display:flex;background:#fff;border-radius:10px;flex-wrap:wrap;align-items: center;gap:.1rem;margin-top:.8rem;padding:.55rem .7rem;font-size:.88rem}.path-breadcrumb.muted{color:var(--muted)}.breadcrumb-link{cursor:pointer;color:var(--text);background:0 0;border:0;border-radius:6px;padding:.2rem .4rem}.breadcrumb-segment{display:inline-flex;align-items: center}.breadcrumb-separator{color:var(--muted);margin:0 .05rem}.objects-list{border:1px solid var(--panel-border);overflow:auto;background:#fff;border-radius:10px;min-height:320px;margin-top:.8rem;padding:.5rem}.object-row{color:var(--text);display:grid;grid-template-columns:minmax(0,1fr)140px 210px;text-align:left;background:#fff;border:0;border-bottom:1px solid #e7edf6;align-items: center;gap:.8rem;width:100%;padding:.65rem}.object-row:last-child{border-bottom:0}.object-row.folder{cursor:pointer}.object-name{overflow-wrap:anywhere}.object-meta{color:var(--muted);text-align:right;white-space:nowrap;font-size:.82rem}@media (max-width:1020px){.app-shell{grid-template-columns:1fr}.profile-panel{position:static;max-height:none}.explorer-header,.objects-header{flex-direction:column}.manual-bucket-row{flex-direction:column;align-items:stretch}.object-row{grid-template-columns:1fr}.object-meta{text-align:left;white-space:normal}}
+:root{color:#152234;--bg-top:#f9f3ea;--bg-bottom:#e8eff8;--panel:#ffffffd8;--panel-border:#cdd9e8;--text:#152234;--muted:#5d6f84;--accent:#146c94;--accent-soft:#e1f0f8;--danger:#b9414f;--ok:#1f8b4c;--radius:14px;background:#f6f8fb;font-family:Segoe UI,Avenir Next,Helvetica Neue,sans-serif;font-weight:400;line-height:1.4}*{box-sizing:border-box}body{color:var(--text);background:linear-gradient(168deg,var(--bg-top),var(--bg-bottom));min-width:320px;min-height:100vh;margin:0}body:before{content:"";position:fixed;z-index:-1;pointer-events:none;background:radial-gradient(circle at 20% 18%,#fffa 0,#0000 36%),radial-gradient(circle at 85% 12%,#d9e9fa88 0,#0000 28%),radial-gradient(circle at 70% 80%,#f8e8d6aa 0,#0000 35%);inset:0}#root{width:100%;min-height:100vh}.app-shell{display:grid;grid-template-columns:360px minmax(0,1fr);gap:1rem;width:min(1320px,100% - 2rem);margin:1rem auto}.main-column{display:grid;align-content: start;gap:1rem}.panel{background:var(--panel);backdrop-filter:blur(10px);border:1px solid var(--panel-border);border-radius:var(--radius);box-shadow:0 10px 24px #12233712}.panel-step{display:inline-block;color:var(--accent);background:var(--accent-soft);border-radius:999px;margin-bottom:.6rem;padding:.2rem .55rem;font-size:.73rem;font-weight:600}.profile-panel{position:sticky;overflow:auto;max-height:calc(100vh - 2rem);padding:1rem;top:1rem}.explorer-panel,.object-panel{padding:1rem}.panel-header h1,.explorer-header h2,.objects-header h3{letter-spacing:.01em;margin:0}.panel-header p,.explorer-header p,.objects-header p{color:var(--muted);margin:.35rem 0 0;font-size:.92rem}.profiles-toolbar{display:flex;justify-content:space-between;align-items: center;margin-top:1rem}.profiles-list{display:grid;gap:.5rem;margin-top:.65rem}.profile-card{border:1px solid var(--panel-border);overflow:hidden;background:#fff;border-radius:10px}.profile-card.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.profile-select{text-align:left;display:grid;cursor:pointer;background:0 0;border:0;gap:.25rem;width:100%;padding:.65rem .75rem}.profile-name{font-weight:600}.profile-endpoint{color:var(--muted);overflow-wrap:anywhere;font-size:.84rem}.delete-button{border:0;border-top:1px solid var(--panel-border);color:var(--danger);cursor:pointer;background:#fff;width:100%;padding:.45rem .75rem}.profile-form{display:grid;gap:.7rem;margin-top:1rem}.profile-form label{display:grid;gap:.35rem;font-size:.9rem}input,button{font:inherit}.profile-form input,.manual-bucket-row input{border:1px solid var(--panel-border);color:var(--text);background:#fff;border-radius:9px;flex:1;padding:.55rem .65rem}.profile-form input:focus,.manual-bucket-row input:focus{outline:2px solid #0000;border-color:var(--accent);box-shadow:0 0 0 2px #146c9430}.secret-row{display:flex;gap:.5rem}.secret-row input{flex:1}.checkbox-row{grid-template-columns:auto 1fr;align-items: center}.checkbox-row input{width:1rem;height:1rem}.form-actions{display:flex;flex-wrap:wrap;gap:.55rem}.primary-button,.secondary-button,.ghost-button{cursor:pointer;border-radius:9px;padding:.55rem .85rem;transition:all .15s}.primary-button{border:1px solid var(--accent);background:var(--accent);color:#fff}.primary-button:hover{filter:brightness(1.05)}.secondary-button{border:1px solid var(--panel-border);color:var(--text);background:#fff}.ghost-button{border:1px solid var(--panel-border);color:var(--muted);background:#fff}.secondary-button:hover,.ghost-button:hover,.delete-button:hover,.bucket-item:hover,.object-row.folder:hover,.breadcrumb-link:hover{background:var(--accent-soft)}button:disabled{opacity:.58;cursor:not-allowed}.status-ok,.status-error,.empty-copy{margin:.75rem 0 0;font-size:.88rem}.status-ok{color:var(--ok)}.status-error{color:var(--danger)}.empty-copy,.muted,.helper-copy{color:var(--muted)}.explorer-header,.objects-header{display:flex;justify-content:space-between;align-items: flex-start;gap:1rem}.manual-bucket-form{display:grid;border:1px solid var(--panel-border);background:#fff;border-radius:10px;gap:.45rem;margin-top:.9rem;padding:.7rem}.manual-bucket-form label{color:var(--muted);font-size:.88rem}.manual-bucket-row{display:flex;align-items: center;gap:.5rem}.helper-copy{margin:0;font-size:.82rem}.buckets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.5rem;margin-top:.8rem}.bucket-item{border:1px solid var(--panel-border);text-align:left;display:grid;cursor:pointer;background:#fff;border-radius:10px;gap:.2rem;padding:.7rem}.bucket-item.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.bucket-item small{color:var(--muted)}.objects-actions{display:flex;flex-wrap:wrap;gap:.5rem}.path-breadcrumb{border:1px solid var(--panel-border);display:flex;background:#fff;border-radius:10px;flex-wrap:wrap;align-items: center;gap:.1rem;margin-top:.8rem;padding:.55rem .7rem;font-size:.88rem}.path-breadcrumb.muted{color:var(--muted)}.breadcrumb-link{cursor:pointer;color:var(--text);background:0 0;border:0;border-radius:6px;padding:.2rem .4rem}.breadcrumb-segment{display:inline-flex;align-items: center}.breadcrumb-separator{color:var(--muted);margin:0 .05rem}.objects-list{border:1px solid var(--panel-border);overflow:auto;background:#fff;border-radius:10px;min-height:320px;margin-top:.8rem;padding:.5rem}.object-row{color:var(--text);display:grid;grid-template-columns:minmax(0,1fr)140px 210px auto;text-align:left;background:#fff;border:0;border-bottom:1px solid #e7edf6;align-items: center;gap:.8rem;width:100%;padding:.65rem}.object-row:last-child{border-bottom:0}.object-row.folder{cursor:pointer}.object-name{overflow-wrap:anywhere}.object-meta{color:var(--muted);text-align:right;white-space:nowrap;font-size:.82rem}.download-button{border:1px solid var(--panel-border);color:var(--accent);cursor:pointer;white-space:nowrap;background:#fff;border-radius:7px;padding:.3rem .6rem;transition:all .15s;font-size:.8rem}.download-button:hover{background:var(--accent-soft)}@media (max-width:1020px){.app-shell{grid-template-columns:1fr}.profile-panel{position:static;max-height:none}.explorer-header,.objects-header{flex-direction:column}.manual-bucket-row{flex-direction:column;align-items:stretch}.object-row{grid-template-columns:1fr}.object-meta{text-align:left;white-space:normal}}

package/dist/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/svg+xml" href="./logo-kygw735p.svg" />
     <title>S3 Explorer</title>
-  <link rel="stylesheet" crossorigin href="./chunk-veptbhs8.css"><script type="module" crossorigin src="./chunk-fa0pf3pw.js"></script></head>
+  <link rel="stylesheet" crossorigin href="./chunk-aq15a172.css"><script type="module" crossorigin src="./chunk-0sdjygxy.js"></script></head>
   <body>
     <div id="root"></div>
     

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storage-explorer",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": false,
   "bin": {
     "storage-explorer": "./cli.js"

package/src/App.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState, type FormEvent } from "react";
 import { BucketPanel } from "./features/buckets/BucketPanel";
 import { ObjectExplorer } from "./features/objects/ObjectExplorer";
 import { ProfileSidebar } from "./features/profiles/ProfileSidebar";
-import { listBuckets, listObjects, testConnection } from "./shared/api/s3Api";
+import { downloadObject, listBuckets, listObjects, testConnection } from "./shared/api/s3Api";
 import { useProfilesStorage } from "./shared/hooks/useProfilesStorage";
 import type {
   BucketItem,
@@ -74,6 +74,7 @@ export function App() {
   const [objects, setObjects] = useState<ObjectsPayload | null>(null);
   const [nextToken, setNextToken] = useState<string | null>(null);
   const [isNextPage, setIsNextPage] = useState(false);
+  const [downloadingKey, setDownloadingKey] = useState<string | null>(null);
 
   useEffect(() => {
     if (!selectedProfile) {
@@ -335,6 +336,27 @@ export function App() {
     await loadObjects({ bucket: selectedBucket, targetPrefix: prefix, continuationToken: null });
   };
 
+  const onDownloadFile = async (key: string) => {
+    if (!selectedBucket || !profileValid) {
+      return;
+    }
+
+    setDownloadingKey(key);
+    setStatusError("");
+
+    try {
+      await downloadObject({
+        profile: profilePayload(),
+        bucket: selectedBucket,
+        key,
+      });
+    } catch (err) {
+      setStatusError(err instanceof Error ? err.message : "Download failed.");
+    } finally {
+      setDownloadingKey(null);
+    }
+  };
+
   return (
     <div className="app-shell">
       <ProfileSidebar
@@ -381,6 +403,8 @@ export function App() {
           onLoadNextPage={onLoadNextPage}
           onOpenFolder={onOpenFolder}
           onNavigatePrefix={onNavigatePrefix}
+          onDownloadFile={onDownloadFile}
+          downloadingKey={downloadingKey}
         />
       </main>
     </div>

package/src/features/objects/ObjectExplorer.tsx

@@ -13,6 +13,8 @@ type ObjectExplorerProps = {
   onLoadNextPage: () => void;
   onOpenFolder: (folderPrefix: string) => void;
   onNavigatePrefix: (prefix: string) => void;
+  onDownloadFile: (key: string) => void;
+  downloadingKey: string | null;
 };
 
 function formatObjectName(key: string, prefix: string): string {
@@ -44,6 +46,8 @@ export function ObjectExplorer(props: ObjectExplorerProps) {
     onLoadNextPage,
     onOpenFolder,
     onNavigatePrefix,
+    onDownloadFile,
+    downloadingKey,
   } = props;
 
   return (
@@ -109,16 +113,25 @@ export function ObjectExplorer(props: ObjectExplorerProps) {
                 <span className="object-name">{formatFolderName(folder, prefix)}/</span>
                 <span className="object-meta">folder</span>
                 <span className="object-meta">-</span>
+                <span />
               </button>
             ))}
 
             {objects.files.map(file => (
-              <div key={file.key} className="object-row">
+              <div key={file.key} className="object-row file">
                 <span className="object-name">{formatObjectName(file.key, prefix)}</span>
                 <span className="object-meta">{file.size.toLocaleString()} bytes</span>
                 <span className="object-meta">
                   {file.lastModified ? new Date(file.lastModified).toLocaleString() : "-"}
                 </span>
+                <button
+                  type="button"
+                  className="download-button"
+                  onClick={() => onDownloadFile(file.key)}
+                  disabled={downloadingKey === file.key}
+                >
+                  {downloadingKey === file.key ? "Downloading..." : "Download"}
+                </button>
               </div>
             ))}
           </>

package/src/index.css

@@ -408,7 +408,7 @@ button:disabled {
   background: #fff;
   color: var(--text);
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 140px 210px;
+  grid-template-columns: minmax(0, 1fr) 140px 210px auto;
   gap: 0.8rem;
   padding: 0.65rem;
   text-align: left;
@@ -434,6 +434,22 @@ button:disabled {
   white-space: nowrap;
 }
 
+.download-button {
+  border: 1px solid var(--panel-border);
+  border-radius: 7px;
+  padding: 0.3rem 0.6rem;
+  background: #fff;
+  color: var(--accent);
+  font-size: 0.8rem;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: 0.15s ease;
+}
+
+.download-button:hover {
+  background: var(--accent-soft);
+}
+
 @media (max-width: 1020px) {
   .app-shell {
     grid-template-columns: 1fr;

package/src/server/routes/s3Routes.ts

@@ -1,4 +1,5 @@
 import {
+  downloadObjectHandler,
   listBucketsHandler,
   listObjectsHandler,
   testConnectionHandler,
@@ -14,4 +15,7 @@ export const s3Routes = {
   "/api/s3/list-objects": {
     POST: listObjectsHandler,
   },
+  "/api/s3/download-object": {
+    POST: downloadObjectHandler,
+  },
 };

package/src/server/s3/handlers.ts

@@ -1,4 +1,5 @@
 import {
+  GetObjectCommand,
   ListBucketsCommand,
   ListObjectsV2Command,
   S3ServiceException,
@@ -6,7 +7,7 @@ import {
 import { fail, ok } from "../http/response";
 import { createS3Client } from "./client";
 import { mapListBucketsResult, mapListObjectsResult, mapS3Error } from "./mappers";
-import { invalidProfileError, parseListObjectsInput, parseProfileFromBody } from "./validate";
+import { invalidProfileError, parseDownloadInput, parseListObjectsInput, parseProfileFromBody } from "./validate";
 
 async function parseJsonBody(req: Request): Promise<unknown> {
   try {
@@ -94,3 +95,40 @@ export async function listObjectsHandler(req: Request): Promise<Response> {
     return fail(400, mapS3Error(err));
   }
 }
+
+export async function downloadObjectHandler(req: Request): Promise<Response> {
+  const body = await parseJsonBody(req);
+  const parsed = parseDownloadInput(body);
+
+  if (!parsed.ok) {
+    return fail(400, parsed.error);
+  }
+
+  const { profile, bucket, key } = parsed.data;
+  const client = createS3Client(profile);
+
+  try {
+    const result = await client.send(
+      new GetObjectCommand({
+        Bucket: bucket,
+        Key: key,
+      }),
+    );
+
+    if (!result.Body) {
+      return fail(404, { message: "Object body is empty.", code: "EmptyBody" });
+    }
+
+    const filename = key.split("/").filter(Boolean).pop() ?? key;
+
+    return new Response(result.Body.transformToWebStream(), {
+      headers: {
+        "Content-Type": result.ContentType || "application/octet-stream",
+        "Content-Disposition": `attachment; filename="${filename}"`,
+        ...(result.ContentLength != null ? { "Content-Length": String(result.ContentLength) } : {}),
+      },
+    });
+  } catch (err) {
+    return fail(400, mapS3Error(err));
+  }
+}

package/src/server/s3/types.ts

@@ -13,3 +13,9 @@ export type ParsedListObjectsInput = {
   continuationToken?: string;
   maxKeys: number;
 };
+
+export type ParsedDownloadInput = {
+  profile: S3ProfileInput;
+  bucket: string;
+  key: string;
+};

package/src/server/s3/validate.ts

@@ -1,5 +1,5 @@
 import type { ApiErrorPayload } from "../http/response";
-import type { ParsedListObjectsInput, S3ProfileInput } from "./types";
+import type { ParsedDownloadInput, ParsedListObjectsInput, S3ProfileInput } from "./types";
 
 function parseProfile(value: unknown): S3ProfileInput | null {
   if (typeof value !== "object" || value === null) {
@@ -95,6 +95,43 @@ export function parseListObjectsInput(body: unknown):
   };
 }
 
+export function parseDownloadInput(body: unknown):
+  | { ok: true; data: ParsedDownloadInput }
+  | { ok: false; error: ApiErrorPayload } {
+  const record = body as
+    | { profile?: unknown; bucket?: unknown; key?: unknown }
+    | null;
+
+  const profile = parseProfile(record?.profile);
+  if (!profile) {
+    return {
+      ok: false,
+      error: {
+        message: "Invalid profile. endpoint, accessKeyId, and secretAccessKey are required.",
+        code: "InvalidProfile",
+      },
+    };
+  }
+
+  const bucket = typeof record?.bucket === "string" ? record.bucket.trim() : "";
+  if (!bucket) {
+    return {
+      ok: false,
+      error: { message: "Bucket is required.", code: "MissingBucket" },
+    };
+  }
+
+  const key = typeof record?.key === "string" ? record.key.trim() : "";
+  if (!key) {
+    return {
+      ok: false,
+      error: { message: "Object key is required.", code: "MissingKey" },
+    };
+  }
+
+  return { ok: true, data: { profile, bucket, key } };
+}
+
 export function invalidProfileError(): ApiErrorPayload {
   return {
     message: "Invalid profile. endpoint, accessKeyId, and secretAccessKey are required.",

package/src/shared/api/s3Api.ts

@@ -54,3 +54,33 @@ export function listObjects(input: {
 }): Promise<ObjectsPayload> {
   return postJson<ObjectsPayload>("/api/s3/list-objects", input);
 }
+
+export async function downloadObject(input: {
+  profile: S3ConnectionProfile;
+  bucket: string;
+  key: string;
+}): Promise<void> {
+  const response = await fetch("/api/s3/download-object", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(input),
+  });
+
+  if (!response.ok) {
+    const payload = (await response.json().catch(() => null)) as ApiErrorEnvelope | null;
+    const message = payload?.error?.message || "Download failed.";
+    throw new Error(message);
+  }
+
+  const disposition = response.headers.get("Content-Disposition");
+  const match = disposition?.match(/filename="(.+)"/);
+  const filename = match?.[1] ?? input.key.split("/").filter(Boolean).pop() ?? "download";
+
+  const blob = await response.blob();
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}