fix: make upload and fallback robust

README.md

@@ -12,7 +12,7 @@ pinned: false
 
 A custom FastAPI + browser workstation for extracting, reviewing, and now semantically supervising reusable drum samples from an audio file.
 
-The pipeline defaults to Spleeter for lightweight source separation, can fall back to Demucs for quality, can bypass separation entirely for fast full-mix previews, detects onsets, classifies hits, clusters similar transients, chooses representative samples, optionally synthesizes alternate samples, and exports WAVs, MIDI, target-stem reconstruction, full-context reproduced audio, manifests, selected-only packs, and complete ZIP sample packs. The interactive layer stores user corrections as replayable semantic state beside each run manifest.
+The pipeline is configured for Spleeter as the lightweight source-separation default when available, falls back to full-mix processing when optional separation dependencies are missing, keeps Demucs as an explicit quality backend, detects onsets, classifies hits, clusters similar transients, chooses representative samples, optionally synthesizes alternate samples, and exports WAVs, MIDI, target-stem reconstruction, full-context reproduced audio, manifests, selected-only packs, and complete ZIP sample packs. The interactive layer stores user corrections as replayable semantic state beside each run manifest.
 
 ## Current status
 
@@ -58,7 +58,7 @@ Implemented:
   - constraint/event log.
 
 - Spleeter source-separation backend selected by default, with `spleeter:4stems`, `spleeter:2stems`, and `spleeter:5stems` support.
-- Optional Demucs backend and automatic Spleeter→Demucs fallback when enabled.
+- Optional Demucs backend for explicit higher-quality separation; Spleeter failures now fall back to full-mix processing when fallback is enabled.
 - True per-card checkbox selection and selected-only export under `selected/`.
 - Persisted `draw another` card action that pins the next representative hit for the cluster.
 - Immediate trim/extend card edits that rewrite preview WAVs under `overrides/hits/` and persist to supervised state.
@@ -71,7 +71,7 @@ Not fully complete yet:
 - No cluster merge/split/relabel workflow beyond move/pull-to-new-cluster.
 - No frontend TypeScript build/test harness yet.
 - Spleeter progress is coarse-grained; Demucs progress exposes chunk-level work where available.
-- Demucs remains offline/batch by design and is now treated as the higher-cost quality/fallback backend.
+- Demucs remains offline/batch by design and is treated as the higher-cost explicit quality backend.
 
 See:
 
@@ -87,6 +87,7 @@ See:
 - `docs/CLEAN_DEFAULT_UI.md`
 - `docs/IMMEDIATE_WAVEFORM_AND_REAL_PROGRESS.md`
 - `docs/API_ERRORS_AND_PARAMETER_VALIDATION.md`
+- `docs/UPLOAD_ERROR_AND_RUNTIME_FALLBACK.md`
 
 ## Run locally
 
@@ -105,7 +106,7 @@ For fast iteration, use the default automatic flow. To bypass source separation
 - `Stem = all`
 - `Clustering mode = online_preview`
 
-That uses the full mix and the near-realtime clustering path. The default engine is Spleeter. Install it separately with `pip install -r requirements-spleeter.txt` in an environment compatible with Spleeter/TensorFlow. If Spleeter is unavailable and fallback is enabled, the app falls back to Demucs.
+That uses the full mix and the near-realtime clustering path. The default engine is Spleeter. Install it separately with `pip install -r requirements-spleeter.txt` in an environment compatible with Spleeter/TensorFlow. If Spleeter is unavailable and fallback is enabled, the app falls back to full-mix processing so the UI still works. Choose Demucs explicitly under Expert controls for slower quality separation.
 
 ## Run checks
 

app.py

@@ -24,7 +24,7 @@ from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import FileResponse, JSONResponse, StreamingResponse
 from fastapi.staticfiles import StaticFiles
 
-from pipeline_runner import PipelineParams, SPLEETER_MODELS, SPLEETER_STEMS, SEPARATION_BACKENDS, clear_disk_cache, initial_stages, run_extraction_pipeline
+from pipeline_runner import PipelineParams, SPLEETER_MODELS, SPLEETER_STEMS, SEPARATION_BACKENDS, clear_disk_cache, initial_stages, run_extraction_pipeline, separation_runtime_status
 from sample_extractor import DEMUCS_MODELS, DEMUCS_STEMS, cache_clear
 from supervised_state import (
     accept_suggestion,
@@ -257,6 +257,7 @@ def config() -> dict[str, Any]:
         "demucs_models": DEMUCS_MODELS,
         "demucs_stems": {key: value + ["all"] for key, value in DEMUCS_STEMS.items()},
         "defaults": asdict(PipelineParams()),
+        "runtime": separation_runtime_status(),
         "stages": initial_stages(),
         "clustering_modes": {
             "batch_quality": "Batch quality: all-pairs mel/NCC + agglomerative clustering",
@@ -283,6 +284,10 @@ def list_jobs(limit: int = 50) -> dict[str, Any]:
 
 @app.post("/api/jobs")
 async def create_job(file: UploadFile = File(...), params: str = Form("{}")) -> JSONResponse:
+    filename = file.filename or "input.wav"
+    suffix = Path(filename).suffix.lower()
+    if suffix and suffix not in {".wav", ".mp3", ".flac", ".aiff", ".aif", ".ogg", ".m4a", ".aac"}:
+        raise HTTPException(status_code=400, detail=f"Unsupported audio file extension: {suffix}")
     try:
         parsed_params = json.loads(params)
         validated = PipelineParams.from_mapping(parsed_params)
@@ -300,7 +305,7 @@ async def create_job(file: UploadFile = File(...), params: str = Form("{}")) ->
     input_dir.mkdir(parents=True, exist_ok=True)
     output_dir.mkdir(parents=True, exist_ok=True)
 
-    suffix = Path(file.filename or "input.wav").suffix or ".wav"
+    suffix = suffix or ".wav"
     input_path = input_dir / f"source{suffix}"
     with input_path.open("wb") as handle:
         shutil.copyfileobj(file.file, handle)

docs/API.md

@@ -595,3 +595,11 @@ Final results remain authoritative under `result.samples`.
 ## `PipelineParams.auto_tune`
 
 `auto_tune` defaults to `true`. When enabled, the pipeline tunes onset sensitivity and group bounds from the loaded target stem before final onset detection. The effective tuned values are returned in the job params/result manifest.
+
+## Upload/runtime fallback update (2026-05-12)
+
+- Added a visible top-bar `Choose audio` affordance in addition to whole-app drag/drop.
+- Fixed the default hidden state of the error banner so placeholder errors are not shown on page load.
+- API errors now surface request path/status/detail in the visible banner and pipeline logs.
+- `/api/config` now includes runtime diagnostics for optional separation backends.
+- If Spleeter is unavailable, the simple UI keeps the app usable by switching to full-mix mode; backend fallback also uses full-mix rather than silently launching Demucs.

docs/API_ERRORS_AND_PARAMETER_VALIDATION.md

@@ -45,3 +45,11 @@ This verifies:
 - invalid subdivisions still fail;
 - `/api/jobs` accepts a string `subdivision` from the UI;
 - bad parameter responses include visible actionable details.
+
+## Upload/runtime fallback update (2026-05-12)
+
+- Added a visible top-bar `Choose audio` affordance in addition to whole-app drag/drop.
+- Fixed the default hidden state of the error banner so placeholder errors are not shown on page load.
+- API errors now surface request path/status/detail in the visible banner and pipeline logs.
+- `/api/config` now includes runtime diagnostics for optional separation backends.
+- If Spleeter is unavailable, the simple UI keeps the app usable by switching to full-mix mode; backend fallback also uses full-mix rather than silently launching Demucs.

docs/FEATURES.md

@@ -166,3 +166,11 @@ Implemented after the reference-image UI pass:
 | Cards | Trim/extend preview | Implemented | Rewrites a playable preview WAV immediately under `overrides/hits/`. |
 | Docs | Separation backend docs | Implemented | See `docs/SPLEETER_AND_SEPARATION_BACKENDS.md`. |
 | Docs | Card action docs | Implemented | See `docs/CARD_SELECTION_EXPORT_AND_EDITING.md`. |
+
+## Upload/runtime fallback update (2026-05-12)
+
+- Added a visible top-bar `Choose audio` affordance in addition to whole-app drag/drop.
+- Fixed the default hidden state of the error banner so placeholder errors are not shown on page load.
+- API errors now surface request path/status/detail in the visible banner and pipeline logs.
+- `/api/config` now includes runtime diagnostics for optional separation backends.
+- If Spleeter is unavailable, the simple UI keeps the app usable by switching to full-mix mode; backend fallback also uses full-mix rather than silently launching Demucs.

docs/PROGRESS.md

@@ -388,3 +388,11 @@ Completed in this pass:
 Outcome:
 
 The default app now behaves more like a card review tool: drop audio, let Spleeter/fallback separation run, review grouped cards, select/dismiss/draw/trim, and export only the selected pack.
+
+## Upload/runtime fallback update (2026-05-12)
+
+- Added a visible top-bar `Choose audio` affordance in addition to whole-app drag/drop.
+- Fixed the default hidden state of the error banner so placeholder errors are not shown on page load.
+- API errors now surface request path/status/detail in the visible banner and pipeline logs.
+- `/api/config` now includes runtime diagnostics for optional separation backends.
+- If Spleeter is unavailable, the simple UI keeps the app usable by switching to full-mix mode; backend fallback also uses full-mix rather than silently launching Demucs.

docs/REMAINING_WORK.md

@@ -110,7 +110,7 @@ The default UI is now a cleaner fixed, non-scrolling workstation layout with col
 - Sample card checkboxes are real per-card state.
 - Draw-next is persisted as a representative override in `supervision_state.json`.
 - Trim/extend rewrites preview audio immediately and persists the edited representative hit.
-- Spleeter is now the default backend, with Demucs fallback and full-mix preview still available.
+- Spleeter is now the configured default backend; when unavailable, the UI/backend fall back to full-mix mode and Demucs remains an explicit quality backend.
 
 ## Remaining after selected-card/Spleeter pass
 

docs/SPLEETER_AND_SEPARATION_BACKENDS.md

@@ -17,7 +17,7 @@ The application now defaults to Spleeter:
 
 Spleeter is treated as the normal first-pass separation backend because it is much lighter for the common UX: drop a track, get drum-card candidates quickly, and only escalate to heavier processing when necessary.
 
-Demucs remains available as a higher-cost quality/fallback backend:
+Demucs remains available as a higher-cost quality backend:
 
 ```json
 {"separation_backend":"demucs","demucs_model":"htdemucs_ft"}
@@ -34,7 +34,7 @@ Full-mix preview remains available for the fastest possible iteration:
 | Backend | Status | Use |
 |---|---:|---|
 | `spleeter` | Default | Lightweight drum/source separation for the common automatic workflow. |
-| `demucs` | Supported | Higher-cost quality backend and fallback when Spleeter is unavailable or insufficient. |
+| `demucs` | Supported | Explicit higher-cost quality backend when Spleeter/full-mix results are insufficient. |
 | `none` | Supported | Bypass source separation and process the full mix. Best for quick UI/debug iteration. |
 
 ## Spleeter models
@@ -55,7 +55,7 @@ Install it only when needed:
 pip install -r requirements-spleeter.txt
 ```
 
-For the normal local app, leave `allow_backend_fallback=true`. If Spleeter is unavailable or fails, the job falls back to Demucs and logs that fallback in the stage details. Disable fallback only when actively debugging Spleeter.
+For the normal local app, leave `allow_backend_fallback=true`. If Spleeter is unavailable or fails, the job falls back to full-mix processing and logs that fallback in the stage details. Demucs is no longer used as a silent fallback for Spleeter because full-track Demucs is too slow and surprising for the default automatic UI. Disable fallback only when actively debugging Spleeter.
 
 ## Caching
 

docs/TASKS.md

@@ -224,3 +224,11 @@ Next:
 - [ ] Add card-column relabel/merge/split actions.
 - [ ] Add browser-level tests for card selection/export/edit flows.
 - [ ] Add localized high-quality separation refinement on short candidate windows.
+
+## Upload/runtime fallback update (2026-05-12)
+
+- Added a visible top-bar `Choose audio` affordance in addition to whole-app drag/drop.
+- Fixed the default hidden state of the error banner so placeholder errors are not shown on page load.
+- API errors now surface request path/status/detail in the visible banner and pipeline logs.
+- `/api/config` now includes runtime diagnostics for optional separation backends.
+- If Spleeter is unavailable, the simple UI keeps the app usable by switching to full-mix mode; backend fallback also uses full-mix rather than silently launching Demucs.

docs/UPLOAD_ERROR_AND_RUNTIME_FALLBACK.md

@@ -0,0 +1,40 @@
+# Upload, visible errors, and runtime fallback
+
+Last updated: 2026-05-12
+
+## Problem addressed
+
+A deployed UI could appear broken before a file was even processed:
+
+- the default error banner was visible with placeholder text because CSS overrode the HTML `hidden` attribute;
+- the upload affordance was too subtle because the middle top-bar control looked like passive text;
+- if a user selected a file before `/api/config` finished loading, automatic extraction could start with incomplete control defaults;
+- a Spleeter-default runtime without Spleeter installed could fail or escalate into a slower backend instead of staying usable.
+
+## Current behavior
+
+- The error banner is hidden by default via an explicit `[hidden]` CSS rule.
+- Errors shown in the UI include the request path, HTTP status, and server detail/traceback when available.
+- The top bar now contains a visible `Choose audio` button plus whole-app drag/drop.
+- File selection waits for backend config before submitting `/api/jobs`.
+- `/api/config` exposes runtime diagnostics for optional separation engines.
+- Spleeter remains the configured default, but if the runtime does not have Spleeter available the UI switches the default control to full-mix mode so the app still works.
+- Backend Spleeter failures with fallback enabled now fall back to full-mix processing, not automatic full-track Demucs. Demucs is an explicit quality option.
+
+## Rationale
+
+The normal user path should be reliable even on minimal hosted runtimes. Full-mix extraction is less clean than source-separated extraction, but it is fast, dependency-light, and visibly produces cards. Demucs remains available for deliberate high-quality separation, but it is too expensive and unpredictable as a silent automatic fallback for a simple drop-to-process UI.
+
+## Validation
+
+Covered by:
+
+```bash
+python3 scripts/test_upload_error_visibility_and_fallback.py
+```
+
+The script checks:
+
+- runtime diagnostics are exposed by `/api/config`;
+- invalid upload extensions produce actionable `400` details;
+- Spleeter failure falls back to full-mix extraction without attempting Demucs.

pipeline_runner.py

@@ -4,6 +4,7 @@
 from __future__ import annotations
 
 import hashlib
+import importlib.util
 import json
 import os
 import shutil
@@ -48,6 +49,38 @@ SPLEETER_STEMS = {
 SEPARATION_BACKENDS = ["spleeter", "demucs", "none"]
 
 
+def _module_available(name: str) -> bool:
+    return importlib.util.find_spec(name) is not None
+
+
+def separation_runtime_status() -> dict[str, Any]:
+    """Return lightweight runtime diagnostics for optional separation engines.
+
+    This is intentionally import-spec/CLI based and does not instantiate models or
+    download weights. It is safe to call on page load.
+    """
+    spleeter_available = _module_available("spleeter") or shutil.which("spleeter") is not None
+    demucs_available = _module_available("demucs")
+    return {
+        "backends": {
+            "spleeter": {
+                "available": bool(spleeter_available),
+                "default": True,
+                "install_hint": "Install requirements-spleeter.txt or use the full-mix fallback.",
+            },
+            "demucs": {
+                "available": bool(demucs_available),
+                "default": False,
+                "install_hint": "Install demucs and model dependencies for quality fallback separation.",
+            },
+            "none": {
+                "available": True,
+                "default": False,
+                "install_hint": "Always available; uses the uploaded mix without source separation.",
+            },
+        }
+    }
+
 @dataclass
 class PipelineParams:
     stem: str = "drums"
@@ -396,7 +429,7 @@ def _make_reproduction_mix(target_reconstruction: np.ndarray, context_bed: np.nd
 MODULE_ROOT = Path(__file__).resolve().parent
 CACHE_DIR = Path(os.environ["DSE_CACHE_DIR"]) if os.environ.get("DSE_CACHE_DIR") else MODULE_ROOT / ".cache"
 STEM_CACHE_DIR = CACHE_DIR / "stems"
-CACHE_VERSION = "dse-cache-v3-separation-backends"
+CACHE_VERSION = "dse-cache-v4-runtime-fallback"
 
 
 def _write_audio(path: Path, audio: np.ndarray, sr: int, subtype: str = "PCM_24") -> None:
@@ -543,12 +576,32 @@ def _extract_demucs_separation(
     return audio, sr, None, f"{params.stem} via Demucs {params.demucs_model}"
 
 
+
+def _load_full_mix_separation(
+    audio_path: str | os.PathLike[str],
+    progress_cb: Callable[[dict[str, Any]], None] | None = None,
+    detail: str = "loaded full mix",
+) -> tuple[np.ndarray, int, str, np.ndarray | None]:
+    audio, sr = librosa.load(audio_path, sr=44100, mono=True)
+    if progress_cb:
+        progress_cb({"fraction": 1.0, "completed_units": 1, "total_units": 1, "detail": detail})
+    return _mono(audio), int(sr), detail, None
+
+
+def _fallback_to_full_mix(
+    audio_path: str | os.PathLike[str],
+    progress_cb: Callable[[dict[str, Any]], None] | None,
+    reason: str,
+) -> tuple[np.ndarray, int, str, np.ndarray | None]:
+    return _load_full_mix_separation(
+        audio_path,
+        progress_cb=progress_cb,
+        detail=f"fallback full mix because separation failed: {reason}",
+    )
+
 def _load_or_extract_separation(audio_path: str | os.PathLike[str], params: PipelineParams, progress_cb: Callable[[dict[str, Any]], None] | None = None) -> tuple[np.ndarray, int, str, np.ndarray | None]:
     if params.stem == "all" or params.separation_backend == "none":
-        audio, sr = librosa.load(audio_path, sr=44100, mono=True)
-        if progress_cb:
-            progress_cb({"fraction": 1.0, "completed_units": 1, "total_units": 1, "detail": "loaded full mix"})
-        return _mono(audio), int(sr), "loaded full mix", None
+        return _load_full_mix_separation(audio_path, progress_cb=progress_cb, detail="loaded full mix")
 
     cache_path = _stem_cache_path(audio_path, params)
     context_cache = _context_cache_path(cache_path)
@@ -566,15 +619,19 @@ def _load_or_extract_separation(audio_path: str | os.PathLike[str], params: Pipe
     if params.separation_backend == "spleeter":
         try:
             audio, sr, context, detail = _extract_spleeter_separation(audio_path, params, progress_cb=progress_cb)
-        except Exception as exc:
+        except Exception as spleeter_exc:
             if not params.allow_backend_fallback:
                 raise
             if progress_cb:
-                progress_cb({"fraction": 0.0, "completed_units": 0, "total_units": 1, "detail": f"Spleeter unavailable; falling back to Demucs: {exc}"})
-            audio, sr, context, demucs_detail = _extract_demucs_separation(audio_path, params, progress_cb=progress_cb)
-            detail = f"Spleeter unavailable ({exc}); fallback {demucs_detail}"
+                progress_cb({"fraction": 0.0, "completed_units": 0, "total_units": 1, "detail": f"Spleeter unavailable; using full-mix fallback: {spleeter_exc}"})
+            audio, sr, detail, context = _fallback_to_full_mix(audio_path, progress_cb, f"Spleeter failed ({spleeter_exc})")
     elif params.separation_backend == "demucs":
-        audio, sr, context, detail = _extract_demucs_separation(audio_path, params, progress_cb=progress_cb)
+        try:
+            audio, sr, context, detail = _extract_demucs_separation(audio_path, params, progress_cb=progress_cb)
+        except Exception as demucs_exc:
+            if not params.allow_backend_fallback:
+                raise
+            audio, sr, detail, context = _fallback_to_full_mix(audio_path, progress_cb, f"Demucs failed ({demucs_exc})")
     else:
         raise ValueError(f"Unsupported separation backend: {params.separation_backend}")
 

scripts/test_upload_error_visibility_and_fallback.py

@@ -0,0 +1,74 @@
+import io
+import json
+import sys
+import tempfile
+from pathlib import Path
+
+sys.path.insert(0, str(Path(__file__).resolve().parents[1]))
+
+import numpy as np
+import soundfile as sf
+from fastapi.testclient import TestClient
+
+import pipeline_runner as runner
+from app import app
+
+
+def make_wav_buffer() -> io.BytesIO:
+    sr = 22050
+    y = np.zeros(sr, dtype=np.float32)
+    for pos in [0, sr // 4, sr // 2, 3 * sr // 4]:
+        n = min(1600, len(y) - pos)
+        t = np.arange(n) / sr
+        y[pos:pos + n] += 0.7 * np.exp(-t * 42) * np.sin(2 * np.pi * 90 * t)
+    buf = io.BytesIO()
+    sf.write(buf, y, sr, format="WAV")
+    buf.seek(0)
+    return buf
+
+
+def test_config_exposes_runtime_diagnostics() -> None:
+    client = TestClient(app)
+    payload = client.get("/api/config").json()
+    assert "runtime" in payload
+    assert payload["runtime"]["backends"]["none"]["available"] is True
+    assert payload["defaults"]["separation_backend"] == "spleeter"
+
+
+def test_invalid_upload_extension_is_actionable() -> None:
+    client = TestClient(app)
+    response = client.post(
+        "/api/jobs",
+        files={"file": ("not-audio.txt", b"hello", "text/plain")},
+        data={"params": json.dumps({})},
+    )
+    assert response.status_code == 400
+    assert "Unsupported audio file extension" in response.json()["detail"]
+
+
+def test_spleeter_falls_back_to_full_mix_without_demucs() -> None:
+    original_spleeter = runner._extract_spleeter_separation
+    original_demucs = runner._extract_demucs_separation
+    runner._extract_spleeter_separation = lambda *args, **kwargs: (_ for _ in ()).throw(RuntimeError("synthetic spleeter failure"))
+    runner._extract_demucs_separation = lambda *args, **kwargs: (_ for _ in ()).throw(RuntimeError("demucs should not be used for Spleeter fallback"))
+    try:
+        with tempfile.TemporaryDirectory() as tmp:
+            wav_path = Path(tmp) / "input.wav"
+            wav_path.write_bytes(make_wav_buffer().getvalue())
+            params = runner.PipelineParams(separation_backend="spleeter", stem="drums", use_disk_cache=False, allow_backend_fallback=True)
+            audio, sr, detail, context = runner._load_or_extract_separation(wav_path, params)
+            assert sr == 44100
+            assert audio.size > 0
+            assert context is None
+            assert "fallback full mix" in detail
+            assert "Spleeter failed" in detail
+    finally:
+        runner._extract_spleeter_separation = original_spleeter
+        runner._extract_demucs_separation = original_demucs
+
+
+if __name__ == "__main__":
+    test_config_exposes_runtime_diagnostics()
+    test_invalid_upload_extension_is_actionable()
+    test_spleeter_falls_back_to_full_mix_without_demucs()
+    print("upload/error/fallback contract passed")

web/app.js

@@ -32,6 +32,7 @@ let sampleOverrides = new Map();
 let userChangedSampleSelection = false;
 let waveZoom = 1;
 let waveOffset = 0;
+let configLoadError = null;
 
 const palette = ["#9b72ef", "#4f7df2", "#42b8b4", "#ef9343", "#ea5ca9", "#6d9be8", "#8abc59", "#805fe6"];
 
@@ -73,10 +74,11 @@ function showError(title, error, detail = "") {
   const message = error instanceof Error ? error.message : String(error ?? "Unknown error");
   const status = error?.status ? `HTTP ${error.status}${error.statusText ? ` ${error.statusText}` : ""}` : "";
   const path = error?.path ? ` · ${error.path}` : "";
-  const extra = stringifyErrorDetail(detail || error?.detail || error?.payload?.detail || "");
+  const payloadDetail = error?.payload?.detail ?? error?.payload?.error ?? error?.payload?.message ?? "";
+  const extra = stringifyErrorDetail(detail || error?.detail || payloadDetail || "");
   $("errorTitle").textContent = title || "Request failed";
-  $("errorMessage").textContent = message;
-  $("errorDetail").textContent = [status + path, extra].filter(Boolean).join(" — ");
+  $("errorMessage").textContent = message || "Request failed";
+  $("errorDetail").textContent = [status + path, extra].filter(Boolean).join("\n");
   banner.hidden = false;
 }
 
@@ -295,6 +297,35 @@ async function jsonApi(path, body = {}, method = "POST") {
   });
 }
 
+async function waitForConfigReady() {
+  if (config) return config;
+  if (configLoadError) throw configLoadError;
+  for (let i = 0; i < 80; i += 1) {
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    if (config) return config;
+    if (configLoadError) throw configLoadError;
+  }
+  throw new Error("Backend configuration did not load yet. Reload the page or check the server logs.");
+}
+
+function backendAvailable(name) {
+  return Boolean(config?.runtime?.backends?.[name]?.available);
+}
+
+function applyRuntimeBackendHints() {
+  const backend = $("separation_backend");
+  if (!backend || !config?.runtime?.backends) return;
+  const spleeterAvailable = backendAvailable("spleeter");
+  const demucsAvailable = backendAvailable("demucs");
+  if (!spleeterAvailable && backend.value === "spleeter") {
+    backend.value = "none";
+    updateStemOptions();
+    $("resultSummary").textContent = demucsAvailable
+      ? "Spleeter is not available in this runtime. Full-mix mode is active by default; choose Demucs under Expert controls when you want slower quality separation."
+      : "Spleeter is not available in this runtime. Full-mix mode is active so the app still works.";
+  }
+}
+
 function hitIdFromIndex(index) {
   if (index === null || index === undefined) return null;
   return `hit:${String(Number(index)).padStart(5, "0")}`;
@@ -368,6 +399,8 @@ function populateConfig() {
     else el.value = defaults[field];
   }
   updateStemOptions();
+  applyRuntimeBackendHints();
+  updateControlOutputs();
   renderStages(config.stages);
 }
 
@@ -408,6 +441,7 @@ function collectParams() {
     }
   }
   params.auto_tune = $("auto_tune") ? Boolean($("auto_tune").checked) : true;
+  if (params.separation_backend === "none") params.stem = "all";
   return params;
 }
 
@@ -1381,6 +1415,13 @@ async function watchJob(id) {
 async function runExtraction(options = {}) {
   if (!selectedFile) return;
   const automatic = Boolean(options.automatic);
+  try {
+    await waitForConfigReady();
+  } catch (error) {
+    showError("App is still loading", error);
+    $("resultSummary").textContent = error.message;
+    return;
+  }
   selectedHitIndex = null;
   lastResult = null;
   lastSupervisionState = null;
@@ -1404,9 +1445,10 @@ async function runExtraction(options = {}) {
   } catch (error) {
     $("runButton").disabled = false;
     $("jobPill").textContent = "error";
+    const detail = stringifyErrorDetail(error.detail || error.payload || "");
     $("resultSummary").textContent = `${automatic ? "Automatic extraction" : "Extraction"} could not start: ${error.message}`;
-    $("logs").textContent = `Request failed before the pipeline started.\n${error.message}`;
-    showError("Extraction could not start", error, "Check the visible controls first; advanced parameters may also be invalid.");
+    $("logs").textContent = `Request failed before the pipeline started.\n${error.message}${detail ? `\n\n${detail}` : ""}`;
+    showError("Extraction could not start", error, "The request did not enter the extraction pipeline. Check the visible controls first; advanced parameters may also be invalid.");
   }
 }
 
@@ -1445,8 +1487,8 @@ function setFile(file) {
   clearError();
   selectedFile = file;
   clearRunViews();
-  $("dropTitle").textContent = file ? file.name : "Drop or choose audio";
-  $("dropMeta").textContent = file ? `${(file.size / 1024 / 1024).toFixed(2)} MB` : "Processing starts automatically";
+  $("dropTitle").textContent = file ? file.name : "Drop audio anywhere";
+  $("dropMeta").textContent = file ? `${(file.size / 1024 / 1024).toFixed(2)} MB · processing starts automatically` : "or use Choose audio";
   $("runButton").disabled = !file;
   currentProgress = { fraction: 0, status: "idle", stage_label: null, stage_fraction: 0 };
   currentJobStatus = "idle";
@@ -1507,6 +1549,7 @@ async function boot() {
     drawWaveform({ envelope: [], onsets: [], duration_sec: 0 });
     setHealth(true, "Ready", "Backend online");
   } catch (error) {
+    configLoadError = error;
     setHealth(false, "Offline", error.message);
     showError("Backend unavailable", error, "Start the FastAPI server, then reload this page.");
   }
@@ -1517,6 +1560,15 @@ if ($("separation_backend")) $("separation_backend").addEventListener("change",
 if ($("spleeter_model")) $("spleeter_model").addEventListener("change", updateStemOptions);
 $("demucs_model").addEventListener("change", updateStemOptions);
 $("fileInput").addEventListener("change", (event) => setFile(event.target.files?.[0] ?? null));
+if ($("chooseAudioButton")) $("chooseAudioButton").addEventListener("click", (event) => { event.preventDefault(); event.stopPropagation(); $("fileInput").click(); });
+if ($("dropzone")) {
+  $("dropzone").addEventListener("keydown", (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      $("fileInput").click();
+    }
+  });
+}
 $("runButton").addEventListener("click", () => runExtraction({ automatic: false }));
 $("usePreviewButton").addEventListener("click", () => {
   $("separation_backend").value = "none";

web/index.html

@@ -31,12 +31,12 @@
           <span class="beta-pill">BETA</span>
         </div>
 
-        <label id="dropzone" class="file-picker" title="Click to browse, or drop audio anywhere">
-          <input id="fileInput" type="file" accept="audio/*,.wav,.mp3,.flac,.aiff,.ogg,.m4a" />
-          <span id="dropTitle">Drop or choose audio</span>
-          <small id="dropMeta">Processing starts automatically</small>
+        <div id="dropzone" class="file-picker" title="Choose audio, or drop audio anywhere" role="button" tabindex="0">
+          <input id="fileInput" type="file" accept="audio/*,.wav,.mp3,.flac,.aiff,.ogg,.m4a,.aac" aria-label="Choose audio file" />
+          <button id="chooseAudioButton" class="file-picker-button" type="button">Choose audio</button>
+          <span class="file-picker-copy"><span id="dropTitle">Drop audio anywhere</span><small id="dropMeta">Processing starts automatically</small></span>
           <span aria-hidden="true">⌄</span>
-        </label>
+        </div>
 
         <div class="top-actions">
           <div class="backend-pill" aria-live="polite">
@@ -163,7 +163,7 @@
               <label><input id="quantize_midi" type="checkbox" /> quantize MIDI</label>
               <label><input id="auto_tune" type="checkbox" checked /> automatic parameter tuning</label>
               <label><input id="use_disk_cache" type="checkbox" /> disk cache stems/source loads</label>
-              <label><input id="allow_backend_fallback" type="checkbox" /> fallback to Demucs if Spleeter is unavailable</label>
+              <label><input id="allow_backend_fallback" type="checkbox" /> fallback to full mix if separation is unavailable</label>
             </div>
             <div class="preset-row">
               <button id="usePreviewButton" class="secondary-action" type="button">Fast preview</button>

web/styles.css

@@ -22,6 +22,7 @@ html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); c
 button, input, select { font: inherit; }
 button { cursor: pointer; }
 button:disabled { cursor: not-allowed; opacity: .48; }
+[hidden], .error-banner[hidden], .global-drop-overlay[hidden] { display: none !important; }
 
 .app-shell { height: 100vh; display: grid; grid-template-rows: 70px minmax(0, 1fr) 54px; }
 .topbar { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(280px, 460px) minmax(440px, 1fr); align-items: center; gap: 18px; padding: 14px 26px; background: rgba(255,255,255,.86); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
@@ -34,10 +35,14 @@ button:disabled { cursor: not-allowed; opacity: .48; }
 .brand-mark i:nth-child(2), .brand-mark i:nth-child(4) { height: 20px; opacity: .86; }
 .brand-mark i:nth-child(3) { height: 28px; }
 .beta-pill { color: var(--purple); background: var(--purple-soft); border: 1px solid #dfd2ff; border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 700; }
-.file-picker { justify-self: center; max-width: 460px; min-width: 260px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; border-radius: 12px; border: 1px solid transparent; color: var(--text); font-weight: 600; white-space: nowrap; }
-.file-picker:hover { background: var(--panel); border-color: var(--line); }
-.file-picker input { display: none; }
-.file-picker small { max-width: 140px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 11px; font-weight: 500; }
+.file-picker { justify-self: center; max-width: 540px; min-width: 320px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 5px 8px; border-radius: 12px; border: 1px solid transparent; color: var(--text); font-weight: 600; white-space: nowrap; }
+.file-picker:hover, .file-picker:focus-within, .file-picker.dragging { background: var(--panel); border-color: var(--line); }
+.file-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
+.file-picker-button { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 9px; min-height: 34px; padding: 0 13px; font-weight: 750; box-shadow: 0 1px 1px rgba(0,0,0,.02); }
+.file-picker-button:hover { border-color: var(--line-strong); background: #fafafd; }
+.file-picker-copy { min-width: 0; display: grid; gap: 1px; justify-items: start; }
+.file-picker-copy > span { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
+.file-picker small { max-width: 190px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 11px; font-weight: 500; }
 .top-actions { justify-content: end; gap: 10px; min-width: 0; }
 .backend-pill { gap: 7px; color: var(--muted); font-size: 11px; opacity: .75; }
 .backend-pill strong { display: block; line-height: 1; }
@@ -156,7 +161,7 @@ th, td { padding: 8px; border-bottom: 1px solid var(--line); text-align: left; w
 .error-banner { position: fixed; z-index: 30; left: 50%; top: 78px; transform: translateX(-50%); width: min(760px, calc(100vw - 32px)); display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: 14px; border: 1px solid #fac8d0; background: #fff4f6; box-shadow: var(--shadow); color: #611923; }
 .error-copy { display: grid; gap: 3px; }
 .error-copy span { font-size: 13px; }
-.error-copy small { color: #8a3440; white-space: pre-wrap; }
+.error-copy small { color: #8a3440; white-space: pre-wrap; max-height: 160px; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
 .global-drop-overlay { position: fixed; inset: 0; z-index: 25; display: none; place-items: center; background: rgba(109,61,242,.12); backdrop-filter: blur(4px); }
 .global-drop-overlay.active { display: grid; }
 .global-drop-overlay > div { display: grid; gap: 6px; place-items: center; padding: 32px 42px; border-radius: 18px; border: 1px solid #d9ccff; background: rgba(255,255,255,.94); box-shadow: var(--shadow); }