refactor: organize ui logic (#55)

Co-authored-by: Hiroshi Ogawa <4232207+hi-ogawa@users.noreply.github.com>
Co-authored-by: OpenCode <noreply@opencode.ai>

Author: hi-ogawa

packages/app/e2e/preferences.spec.ts

@@ -3,11 +3,10 @@ import { expect, test } from "@playwright/test";
 test("restores and updates configuration preferences", async ({ page }) => {
   await page.addInitScript(() => {
     localStorage.setItem(
-      "demucs-onnx:main:v1",
+      "demucs-onnx:main:v2",
       JSON.stringify({
         model: "htdemucs_ft",
-        outputMode: "two-stems",
-        targetStem: "bass",
+        twoStems: "bass",
         method: "minus",
         shifts: 3,
       }),
@@ -32,7 +31,7 @@ test("restores and updates configuration preferences", async ({ page }) => {
   );
   await expect
     .poll(() =>
-      page.evaluate(() => localStorage.getItem("demucs-onnx:main:v1")),
+      page.evaluate(() => localStorage.getItem("demucs-onnx:main:v2")),
     )
-    .toContain('"outputMode":"four-stems"');
+    .toContain('"twoStems":null');
 });

packages/app/e2e/separate.spec.ts

@@ -1,10 +1,5 @@
 import { existsSync } from "node:fs";
 import { resolve } from "node:path";
-// Flow e2e: upload -> decode -> separate -> stems rendered with players + downloads.
-// Exercises the whole client pipeline (decodeAudioData, wasm core, onnxruntime-web);
-// numeric parity vs the native CLI is covered by the CLI-side comparisons, not here.
-//
-// Requires models in data/onnx-lean (see README.md for the regeneration chain).
 import { test, expect } from "@playwright/test";
 
 const MODELS_DIR = resolve(import.meta.dirname, "../../../data/onnx-lean");
@@ -23,7 +18,7 @@ test("separates a clip fully client-side", async ({ page }) => {
     page.getByTestId("model-file-slot").getByText("Ready"),
   ).toHaveCount(2);
   await page.setInputFiles("#file", FIXTURE);
-  await expect(page.locator("#status")).toContainText("decoded: 2.00s");
+  await expect(page.locator("#audio-status")).toContainText("Decoded: 2.00s");
 
   await page.click("#run");
   await expect(

packages/app/package.json

@@ -11,9 +11,11 @@
     "test-e2e": "playwright test"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.101.2",
     "lucide-react": "^0.562.0",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
+    "sonner": "^2.0.7",
     "zod": "^4.4.3"
   },
   "devDependencies": {