refactor: preserve source extension in archive name

Author: hi-ogawa-agent

README.md

@@ -81,7 +81,7 @@ pnpm dev
 
 Open `http://localhost:5173`, choose a local audio file and the required model files from `data/onnx-lean/`, then run separation. Audio and models stay in the browser.
 
-When separation finishes, the app automatically downloads all generated stems as `<input>.stems.zip`. Individual stem previews and WAV downloads remain available in the results.
+When separation finishes, the app automatically downloads all generated stems as a source-named archive such as `song_wav.stems.zip`. Individual stem previews and WAV downloads remain available in the results.
 
 Build the static app with:
 

packages/app/e2e/separate.spec.ts

@@ -34,7 +34,7 @@ test("separates a clip fully client-side", async ({ page }) => {
   });
   await expect(page.getByTestId("timing-summary")).toContainText("Inference");
   const download = await downloadPromise;
-  expect(download.suggestedFilename()).toBe("sine-2s.stems.zip");
+  expect(download.suggestedFilename()).toBe("sine-2s_wav.stems.zip");
 
   const stems = page.locator("#stems > div");
   await expect(stems).toHaveCount(2);
@@ -44,5 +44,5 @@ test("separates a clip fully client-side", async ({ page }) => {
   await expect(page.locator("#stems a")).toHaveCount(2);
   await expect(
     page.getByRole("link", { name: "Download ZIP" }),
-  ).toHaveAttribute("download", "sine-2s.stems.zip");
+  ).toHaveAttribute("download", "sine-2s_wav.stems.zip");
 });

packages/app/src/app.tsx

@@ -16,7 +16,7 @@ import {
   createStemArchive,
   downloadBlob,
   orderStemFiles,
-  stemArchiveFilename,
+  toStemArchiveFilename,
 } from "./lib/audio/stem-archive";
 import { encodeWavF32 } from "./lib/audio/wav";
 import { separateInWorker } from "./lib/audio/worker-client";
@@ -166,7 +166,7 @@ export function App() {
       const durationMs = performance.now() - started;
       const archiveBlob = await createStemArchive(nextOutputs);
       const archive = {
-        name: stemArchiveFilename(decodedAudio.name),
+        name: toStemArchiveFilename(decodedAudio.name),
         url: URL.createObjectURL(archiveBlob),
       };
       outputCleanupRef.current.push(() => URL.revokeObjectURL(archive.url));

packages/app/src/lib/audio/stem-archive.ts

@@ -21,11 +21,9 @@ export function orderStemFiles<T extends { name: string }>(
   return [...stems].sort((a, b) => rank(a.name) - rank(b.name));
 }
 
-export function stemArchiveFilename(inputFilename: string): string {
-  const extensionIndex = inputFilename.lastIndexOf(".");
-  const basename =
-    extensionIndex > 0 ? inputFilename.slice(0, extensionIndex) : inputFilename;
-  return `${basename || "stems"}.stems.zip`;
+export function toStemArchiveFilename(inputFilename: string): string {
+  const basename = inputFilename.replaceAll(".", "_");
+  return `${basename || "demucs"}.stems.zip`;
 }
 
 export async function createStemArchive(stems: StemFile[]): Promise<Blob> {