Further improvements

frontend/src/melodies/MelodyDetail.jsx

@@ -383,17 +383,40 @@ export default function MelodyDetail() {
             <h2 className="text-lg font-semibold mb-4" style={{ color: "var(--text-heading)" }}>Files</h2>
             <dl className="space-y-4">
               <Field label="Binary File">
-                {files.binary_url ? (
-                  <a
-                    href={files.binary_url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="underline"
-                    style={{ color: "var(--accent)" }}
-                  >
-                    Download binary
-                  </a>
-                ) : (
+                {files.binary_url ? (() => {
+                  const binaryPid = builtMelody?.pid || melody.pid || "binary";
+                  const binaryFilename = `${binaryPid}.bsm`;
+                  const handleDownload = async (e) => {
+                    e.preventDefault();
+                    try {
+                      const token = localStorage.getItem("access_token");
+                      const res = await fetch(files.binary_url, {
+                        headers: token ? { Authorization: `Bearer ${token}` } : {},
+                      });
+                      if (!res.ok) throw new Error(`Download failed: ${res.statusText}`);
+                      const blob = await res.blob();
+                      const url = URL.createObjectURL(blob);
+                      const a = document.createElement("a");
+                      a.href = url;
+                      a.download = binaryFilename;
+                      a.click();
+                      URL.revokeObjectURL(url);
+                    } catch (err) {
+                      // surface error in page error state if possible
+                      console.error(err);
+                    }
+                  };
+                  return (
+                    <a
+                      href={files.binary_url}
+                      onClick={handleDownload}
+                      className="underline"
+                      style={{ color: "var(--accent)" }}
+                    >
+                      {binaryFilename}
+                    </a>
+                  );
+                })() : (
                   <span style={{ color: "var(--text-muted)" }}>Not uploaded</span>
                 )}
               </Field>