Upload folder using huggingface_hub

.dockerignore

@@ -4,7 +4,7 @@
 # docker-entrypoint.sh is COPY'd at build time and is the image's ENTRYPOINT.
 
 .git
-
+docker-push.md
 __pycache__/
 *.py[cod]
 *$py.class

app/backend/app.py

@@ -66,6 +66,38 @@ _components_initialised = False
 _init_error = None
 
 
+_LEGACY_FINETUNED_CONFIG_PATH = "models/config/model_config_small.json"
+
+
+def _resolve_finetuned_config_path(model_dir: Path, config) -> str:
+    """Pick the architecture config for a fine-tuned model.
+
+    New runs drop a per-run model_config.json (and a training_metadata.json
+    breadcrumb) into the model folder. Older runs from before that change have
+    neither, so fall back to the small base config to preserve existing
+    behavior.
+    """
+    per_run_config = model_dir / "model_config.json"
+    if per_run_config.exists():
+        try:
+            return str(per_run_config.relative_to(config.project_root))
+        except ValueError:
+            return str(per_run_config)
+
+    metadata_path = model_dir / "training_metadata.json"
+    if metadata_path.exists():
+        try:
+            with open(metadata_path, 'r') as f:
+                metadata = json.load(f)
+            base_config = metadata.get("base_config_path")
+            if base_config and (config.project_root / base_config).exists():
+                return base_config
+        except (OSError, json.JSONDecodeError):
+            pass
+
+    return _LEGACY_FINETUNED_CONFIG_PATH
+
+
 def _ensure_components():
     global config, audio_processor, generator, model_manager
     global _components_initialised, _init_error
@@ -339,6 +371,8 @@ def generate_audio():
             data.get('duration', 10.0), 'duration', min_value=1, max_value=60)
         cfg_scale = Validator.number(
             data.get('cfg_scale', 7.0), 'cfg_scale', min_value=0.1, max_value=20.0)
+        steps = Validator.number(
+            data.get('steps', 250), 'steps', min_value=1, max_value=500, integer_only=True)
         seed = Validator.number(
             data.get('seed', -1), 'seed', min_value=-1, max_value=2**32 - 1, integer_only=True)
         batch_index = Validator.number(
@@ -349,8 +383,20 @@ def generate_audio():
         model_path = data.get('model_path')
         unwrapped_model_path = data.get('unwrapped_model_path')
 
+        align_bars_raw = data.get('align_bars')
+        align_bpm_raw = data.get('align_bpm')
+        align_bars = Validator.number(
+            align_bars_raw, 'align_bars', min_value=1, max_value=64,
+            integer_only=True) if align_bars_raw is not None else None
+        align_bpm = Validator.number(
+            align_bpm_raw, 'align_bpm', min_value=20, max_value=300
+        ) if align_bpm_raw is not None else None
+        do_align = align_bars is not None and align_bpm is not None
+
     except ValidationError as e:
-        return jsonify(APIResponse.validation_error({e.details['field']: [str(e)]})), 400
+        field = e.details.get('field', 'unknown') if e.details else 'unknown'
+        logger.warning(f"/api/generate validation failed on '{field}': {e}")
+        return jsonify(APIResponse.validation_error({field: [str(e)]})), 400
 
     logger.info(f"Audio generation request received")
     logger.debug(f"Request details: prompt='{prompt[:50]}...', duration={duration}s, model={model_name}")
@@ -395,6 +441,19 @@ def generate_audio():
     config_file, determined_model_path = determine_model_config(
         model_name, model_path, unwrapped_model_path)
     logger.info(f"Starting generation with config: {config_file}")
+
+    # In bars mode we need a little extra audio so the post-processor can
+    # onset-trim and tempo-warp without running short of the requested length.
+    # The generator caps duration to model.sample_size internally, so this
+    # never overshoots the model's natural length.
+    ALIGN_HEADROOM_SECONDS = 1.5
+    if do_align:
+        duration = duration + ALIGN_HEADROOM_SECONDS
+        logger.debug(
+            f"Bars-mode alignment requested: bars={align_bars}, bpm={align_bpm}; "
+            f"requesting {duration:.2f}s with headroom"
+        )
+
     try:
         if determined_model_path and determined_model_path.exists():
             output_path = generator.generate_audio(
@@ -404,9 +463,11 @@ def generate_audio():
                 config_file=config_file,
                 duration=duration,
                 cfg_scale=cfg_scale,
+                steps=steps,
                 seed=seed,
                 batch_index=batch_index,
-                batch_total=batch_total
+                batch_total=batch_total,
+                loop_mode=do_align,
             )
         elif model_name in ['stable-audio-open-small', 'stable-audio-open-1.0']:
             model_file_mapping = {
@@ -427,9 +488,11 @@ def generate_audio():
                 config_file=config_file,
                 duration=duration,
                 cfg_scale=cfg_scale,
+                steps=steps,
                 seed=seed,
                 batch_index=batch_index,
-                batch_total=batch_total
+                batch_total=batch_total,
+                loop_mode=do_align,
             )
         elif model_name and model_name != 'default':
             fine_tuned_path = config.get_path("models_fine_tuned") / model_name
@@ -438,17 +501,35 @@ def generate_audio():
 
             output_path = generator.generate_audio(
                 prompt, fine_tuned_path, duration=duration,
-                cfg_scale=cfg_scale, seed=seed,
-                batch_index=batch_index, batch_total=batch_total)
+                cfg_scale=cfg_scale, steps=steps, seed=seed,
+                batch_index=batch_index, batch_total=batch_total,
+                loop_mode=do_align)
         else:
             logger.debug("Using default model")
             output_path = generator.generate_audio(
-                prompt, duration=duration, cfg_scale=cfg_scale, seed=seed,
-                batch_index=batch_index, batch_total=batch_total)
+                prompt, duration=duration, cfg_scale=cfg_scale, steps=steps,
+                seed=seed, batch_index=batch_index, batch_total=batch_total,
+                loop_mode=do_align)
 
         if not output_path.exists():
             raise GenerationError(prompt, model_name, "Generated audio file not found")
 
+        if do_align:
+            try:
+                from app.core.generation.audio_post_process import align_to_grid
+                align_to_grid(
+                    output_path,
+                    target_bpm=float(align_bpm),
+                    target_bars=int(align_bars),
+                )
+                logger.info(
+                    f"Aligned to grid: bars={align_bars}, bpm={align_bpm}"
+                )
+            except Exception as exc:
+                # Never fail the request because alignment failed — the user
+                # would rather have the raw clip than an error toast.
+                logger.warning(f"Grid alignment skipped after error: {exc}")
+
         logger.info(f"Audio generation completed: {output_path.name} ({output_path.stat().st_size} bytes)")
         return send_file(
             str(output_path),
@@ -599,8 +680,10 @@ def get_models():
                     unwrapped_models.sort(
                         key=lambda x: x['created'], reverse=True)
 
-                # Fine-tuned models reuse the base model's config for unwrapping.
-                base_config_path = "models/config/model_config_small.json"
+                # Resolve the architecture config for this fine-tuned model.
+                # Order: per-run copy in the model folder, then training_metadata
+                # breadcrumb, then legacy fallback to the small base config.
+                base_config_path = _resolve_finetuned_config_path(model_dir, config)
 
                 models.append({
                     'name': model_dir.name,

app/core/audio/link_sync.py

@@ -61,11 +61,32 @@ class LinkBridge:
             if ctor is not None:
                 try:
                     self._link = ctor(self._last_bpm)
+                    # Tempo sync works without this; transport (play/stop) sync
+                    # is opt-in per peer. Live exposes the same toggle as
+                    # "Start Stop Sync" in its Link/Tempo/MIDI prefs.
+                    self._set_start_stop_sync(True)
                     return
                 except Exception as exc:
                     logger.warning(f"Link ctor {ctor_name} failed: {exc}")
         logger.warning("Loaded Link module but no known constructor was found")
 
+    def _set_start_stop_sync(self, value: bool) -> None:
+        if self._link is None:
+            return
+        try:
+            self._link.startStopSyncEnabled = value
+            return
+        except AttributeError:
+            pass
+        for setter_name in ("setStartStopSyncEnabled", "set_start_stop_sync_enabled"):
+            setter = getattr(self._link, setter_name, None)
+            if setter:
+                try:
+                    setter(value)
+                    return
+                except Exception as exc:
+                    logger.warning(f"Link {setter_name} failed: {exc}")
+
     def _set_enabled_on_link(self, value: bool) -> None:
         if self._link is None:
             return
@@ -114,17 +135,43 @@ class LinkBridge:
                 "enabled": self._enabled,
                 "bpm": self._last_bpm,
                 "num_peers": 0,
+                "is_playing": False,
+                "beat": 0.0,
+                "time_micros": 0,
             }
             if not self._enabled or self._link is None:
                 return state
             try:
                 session = self._capture_session()
-                if session is not None and hasattr(session, "tempo"):
+                if session is None:
+                    return state
+                if hasattr(session, "tempo"):
                     state["bpm"] = float(session.tempo())
                     self._last_bpm = state["bpm"]
                 num_peers = getattr(self._link, "numPeers", None)
                 if callable(num_peers):
                     state["num_peers"] = int(num_peers())
+
+                for name in ("isPlaying", "is_playing"):
+                    fn = getattr(session, name, None)
+                    if callable(fn):
+                        state["is_playing"] = bool(fn())
+                        break
+
+                # Sample beat + host time together so the client can extrapolate
+                # forward by (now - capturedAt) when scheduling launches.
+                clock_fn = getattr(self._link, "clock", None)
+                if callable(clock_fn):
+                    micros = int(clock_fn().micros())
+                    state["time_micros"] = micros
+                    # Quantum value here only affects phase wrapping for peers
+                    # that just joined; for an existing session the absolute
+                    # beat is stable. 4 = one bar in 4/4, a sane default.
+                    for name in ("beatAtTime", "beat_at_time"):
+                        fn = getattr(session, name, None)
+                        if callable(fn):
+                            state["beat"] = float(fn(micros, 4.0))
+                            break
             except Exception as exc:
                 logger.warning(f"Link state read failed: {exc}")
         return state

app/core/generation/audio_generator.py

@@ -25,7 +25,7 @@ def _slugify_prompt(text: str, max_len: int = 40) -> str:
 sys.path.append(
     str(Path(__file__).parent.parent.parent.parent / "stable-audio-tools"))
 
-# Third-party package noise (clip/pkg_resources) is non-actionable for runtime.
+
 warnings.filterwarnings(
     "ignore",
     message=r"pkg_resources is deprecated as an API.*",
@@ -46,6 +46,11 @@ class AudioGenerator:
         self.device = "cuda" if torch.cuda.is_available() else "cpu"
         self.current_model_name = None
         self.current_model_path = None
+        # Caller-facing key for the currently loaded weights. Used to short-
+        # circuit reloads when generate_audio is invoked repeatedly with the
+        # same model — without this, every Generate click reloads from disk.
+        self.current_model_key = None
+        self.is_distilled_small = False
         self._stop_event = threading.Event()
         logger.info(f"Using device: {self.device}")
 
@@ -67,7 +72,8 @@ class AudioGenerator:
                 config_file = "model_config_small.json"
             else:
                 config_file = "model_config.json"
-            
+            self.is_distilled_small = "small" in model_name.lower()
+
             config_path = Path(__file__).parent.parent.parent.parent / "models" / "config" / config_file
             logger.info(f"Using config file: {config_path}")
             
@@ -136,6 +142,7 @@ class AudioGenerator:
             from stable_audio_tools.models.utils import load_ckpt_state_dict
             if config_file is None:
                 config_file = "model_config_small.json"
+            self.is_distilled_small = "small" in config_file.lower()
 
             config_path = Path(__file__).parent.parent.parent.parent / \
                 "models" / "config" / config_file
@@ -176,13 +183,25 @@ class AudioGenerator:
         seed: int = -1,
         output_path: Optional[Path] = None,
         batch_index: int = 1,
-        batch_total: int = 1
+        batch_total: int = 1,
+        loop_mode: bool = False,
     ) -> Path:
         print(f"\nAUDIO GENERATOR: generate_audio called")
         print(f"   - Prompt: '{prompt}'")
         print(f"   - Duration: {duration}s")
 
-        if self.model is None or model_path is not None or unwrapped_model_path is not None:
+        # Build a cache key for the requested model so we can reuse weights
+        # across consecutive Generate clicks on the same model.
+        if unwrapped_model_path:
+            target_key = ('unwrapped', str(unwrapped_model_path))
+        elif model_path:
+            target_key = ('path', str(model_path))
+        else:
+            target_key = ('default', 'stable-audio-open-small')
+
+        if self.model is not None and self.current_model_key == target_key:
+            print(f"AUDIO GENERATOR: Reusing already-loaded model")
+        else:
             print(f"AUDIO GENERATOR: Loading new model")
 
             if unwrapped_model_path:
@@ -209,8 +228,8 @@ class AudioGenerator:
                 print(f"AUDIO GENERATOR: Loading default local small base model")
                 if not self.load_local_base_model("stable-audio-open-small"):
                     raise ValueError("Failed to load default local base model")
-        else:
-            print(f"AUDIO GENERATOR: Using existing model")
+
+            self.current_model_key = target_key
 
         print(f"AUDIO GENERATOR: Model loaded successfully")
 
@@ -222,8 +241,26 @@ class AudioGenerator:
                 raise GenerationStopped("Stop requested mid-diffusion")
 
         try:
+            # Stable Audio Open Small is an adversarially-distilled checkpoint
+            # that requires the pingpong sampler at 8 steps with CFG 1.0.
+            # Running the dpmpp-3m-sde recipe on it produces noise.
+            if self.is_distilled_small:
+                effective_sampler = "pingpong"
+                effective_steps = 8
+                effective_cfg = 1.0
+                sigma_kwargs = {}
+            else:
+                effective_sampler = "dpmpp-3m-sde"
+                effective_steps = steps
+                effective_cfg = cfg_scale
+                sigma_kwargs = {"sigma_min": 0.03, "sigma_max": 1000}
+
             print(f"Generating audio for prompt: '{prompt}'")
-            print(f"Duration: {duration}s, CFG scale: {cfg_scale}, Steps: {steps}")
+            print(
+                f"Duration: {duration}s, CFG scale: {effective_cfg}, "
+                f"Steps: {effective_steps}, Sampler: {effective_sampler}"
+                + (" (distilled small overrides applied)" if self.is_distilled_small else "")
+            )
             requested_sample_size = int(duration * self.model.sample_rate)
             max_sample_size = None
             try:
@@ -269,10 +306,23 @@ class AudioGenerator:
                 seed = np.random.randint(0, 2**32 - 1, dtype=np.int64)
 
             print(f"Using seed: {seed}")
+
+            # In loop_mode (bars mode in the performance panel), tell the model
+            # the song is much longer than what we render. SAO 1.0 was trained
+            # to fade out as it approaches `seconds_total`, so matching it to
+            # the requested duration bakes a song-ending fade into the clip.
+            # We still get back exactly `requested_sample_size` samples — the
+            # model just thinks they're the opening of a longer piece.
+            if loop_mode and max_sample_size:
+                song_seconds = max(int(duration),
+                                   int(max_sample_size / self.model.sample_rate))
+            else:
+                song_seconds = int(duration)
+
             conditioning = [{
                 "prompt": prompt,
                 "seconds_start": 0,
-                "seconds_total": int(duration)
+                "seconds_total": song_seconds,
             }]
 
             device = next(self.model.parameters()).device
@@ -295,17 +345,16 @@ class AudioGenerator:
 
                 audio = generate_diffusion_cond(
                     model=self.model,
-                    steps=steps,
-                    cfg_scale=cfg_scale,
+                    steps=effective_steps,
+                    cfg_scale=effective_cfg,
                     conditioning=conditioning,
                     batch_size=1,
                     sample_size=requested_sample_size,
                     seed=seed,
                     device=str(device),
-                    sigma_min=0.03,
-                    sigma_max=1000,
-                    sampler_type="dpmpp-3m-sde",
-                    callback=_stop_callback
+                    sampler_type=effective_sampler,
+                    callback=_stop_callback,
+                    **sigma_kwargs,
                 )
 
             print(f"Generation complete, audio shape: {audio.shape}")

app/core/generation/audio_post_process.py

@@ -0,0 +1,104 @@
+"""Beat-align and tempo-conform a generated WAV to a target BPM and bar count.
+"""
+
+from __future__ import annotations
+
+import logging
+from pathlib import Path
+from typing import Optional, Tuple
+
+import librosa
+import numpy as np
+import soundfile as sf
+
+logger = logging.getLogger(__name__)
+
+
+def align_to_grid(
+    input_path: Path,
+    target_bpm: float,
+    target_bars: int,
+    beats_per_bar: int = 4,
+) -> Path:
+    audio, sr = sf.read(str(input_path), always_2d=True)
+    audio = audio.astype(np.float32, copy=False)
+    target_samples = int(round(target_bars * beats_per_bar * 60.0 / target_bpm * sr))
+
+    mono = audio.mean(axis=1) if audio.shape[1] > 1 else audio[:, 0]
+
+    detected_bpm, first_beat = _detect_grid_anchor(mono, sr)
+
+    head_offset = 0
+    if first_beat is not None and 0 < first_beat < sr * 1.5:
+        head_offset = first_beat
+        logger.info(f"align_to_grid: trimmed {head_offset / sr * 1000:.1f} ms to first beat")
+    elif first_beat is None:
+        head_offset = _detect_first_onset_sample(mono, sr)
+        if head_offset > 0:
+            logger.info(f"align_to_grid: trimmed {head_offset / sr * 1000:.1f} ms (onset fallback)")
+
+    if head_offset > 0:
+        audio = audio[head_offset:]
+        mono = mono[head_offset:]
+
+    if detected_bpm is not None:
+        rate = target_bpm / detected_bpm
+        if 0.7 <= rate <= 1.4:
+            audio = _time_stretch_multichannel(audio, rate)
+            logger.info(
+                f"align_to_grid: detected {detected_bpm:.2f} BPM, "
+                f"stretched by {rate:.4f} to match target {target_bpm:.2f} BPM"
+            )
+        else:
+            logger.info(
+                f"align_to_grid: detected {detected_bpm:.2f} BPM out of safe stretch "
+                f"range vs target {target_bpm:.2f}; skipping warp"
+            )
+    else:
+        logger.info("align_to_grid: no usable tempo detected; skipping warp")
+
+    if audio.shape[0] > target_samples:
+        audio = audio[:target_samples]
+    elif audio.shape[0] < target_samples:
+        pad = np.zeros((target_samples - audio.shape[0], audio.shape[1]), dtype=audio.dtype)
+        audio = np.concatenate([audio, pad], axis=0)
+
+    sf.write(str(input_path), audio, sr, subtype="PCM_16")
+    return input_path
+
+
+def _detect_first_onset_sample(mono: np.ndarray, sr: int) -> int:
+    """Return the sample index of the first detected onset, or 0 if none found."""
+    try:
+        onsets = librosa.onset.onset_detect(
+            y=mono, sr=sr, units="samples", backtrack=True
+        )
+    except Exception as exc:
+        logger.warning(f"onset detection failed: {exc}")
+        return 0
+    if onsets is None or len(onsets) == 0:
+        return 0
+    first = int(onsets[0])
+    if first > sr * 1.0:
+        return 0
+    return first
+
+
+def _detect_grid_anchor(mono: np.ndarray, sr: int) -> Tuple[Optional[float], Optional[int]]:
+    try:
+        tempo, beats = librosa.beat.beat_track(y=mono, sr=sr, units="samples")
+    except Exception as exc:
+        logger.warning(f"beat tracking failed: {exc}")
+        return None, None
+    if beats is None or len(beats) < 4:
+        return None, None
+    bpm = float(np.atleast_1d(tempo).flatten()[0])
+    if not (40.0 <= bpm <= 240.0):
+        return None, None
+    return bpm, int(beats[0])
+
+
+def _time_stretch_multichannel(audio: np.ndarray, rate: float) -> np.ndarray:
+    """Phase-vocoder time stretch, applied per channel and re-stacked."""
+    stretched = librosa.effects.time_stretch(audio.T, rate=rate)
+    return np.ascontiguousarray(stretched.T)

app/core/training/fine_tuner.py

@@ -307,30 +307,59 @@ class FineTuner:
             learning_rate = self.config.get("learningRate", 1e-4)
             print(f"LEARNING RATE: {learning_rate}")
 
+            config = get_config()
+            dataset_config = config.get_dataset_config_path()
+            save_dir = str(config.get_path("models_fine_tuned") / model_name)
+            os.makedirs(save_dir, exist_ok=True)
+
+            # Write a per-run copy of the model config into save_dir with the LR
+            # override applied. This avoids mutating the shared base config on
+            # disk and makes the fine-tuned model folder self-describing for
+            # later loading/unwrapping.
             import json
-            config_path = Path(model_config)
-            if config_path.exists():
-                with open(config_path, 'r') as f:
+            base_config_path = Path(model_config)
+            run_config_path = Path(save_dir) / "model_config.json"
+            if base_config_path.exists():
+                with open(base_config_path, 'r') as f:
                     config_data = json.load(f)
 
-                if 'training' in config_data and 'optimizer_configs' in config_data['training']:
-                    if 'diffusion' in config_data['training']['optimizer_configs']:
-                        if 'optimizer' in config_data['training']['optimizer_configs']['diffusion']:
-                            if 'config' in config_data['training']['optimizer_configs']['diffusion']['optimizer']:
-                                old_lr = config_data['training']['optimizer_configs']['diffusion']['optimizer']['config']['lr']
-                                config_data['training']['optimizer_configs']['diffusion']['optimizer']['config']['lr'] = learning_rate
-                                print(f"Updated learning rate from {old_lr} to {learning_rate} in model config")
-
-                with open(config_path, 'w') as f:
+                try:
+                    optimizer_config = (
+                        config_data['training']['optimizer_configs']['diffusion']['optimizer']['config']
+                    )
+                    old_lr = optimizer_config.get('lr')
+                    optimizer_config['lr'] = learning_rate
+                    print(f"Updated learning rate from {old_lr} to {learning_rate} in run config")
+                except (KeyError, TypeError):
+                    print(f"WARNING: Could not locate optimizer.lr in base config; LR override skipped")
+
+                with open(run_config_path, 'w') as f:
                     json.dump(config_data, f, indent=4)
-                print(f"Updated model config saved to: {config_path}")
+                print(f"Per-run model config written to: {run_config_path}")
+                model_config = str(run_config_path)
             else:
-                print(f"WARNING: Model config file not found: {config_path}")
+                print(f"WARNING: Base model config file not found: {base_config_path}")
 
-            config = get_config()
-            dataset_config = config.get_dataset_config_path()
-            save_dir = str(config.get_path("models_fine_tuned") / model_name)
-            os.makedirs(save_dir, exist_ok=True)
+            # Drop a metadata breadcrumb so the read side (app.py /api/models)
+            # knows which base architecture this fine-tune is paired with,
+            # instead of guessing.
+            metadata_path = Path(save_dir) / "training_metadata.json"
+            try:
+                base_config_rel = str(base_config_path.relative_to(project_root))
+            except ValueError:
+                base_config_rel = str(base_config_path)
+            try:
+                pretrained_ckpt_rel = str(Path(pretrained_ckpt).relative_to(project_root))
+            except ValueError:
+                pretrained_ckpt_rel = pretrained_ckpt
+            with open(metadata_path, 'w') as f:
+                json.dump({
+                    "base_model": base_model,
+                    "base_config_path": base_config_rel,
+                    "pretrained_ckpt_path": pretrained_ckpt_rel,
+                    "learning_rate": learning_rate,
+                }, f, indent=4)
+            print(f"Training metadata written to: {metadata_path}")
 
             batch_size = self.config.get("batchSize", 4)
             accum_batches = 1

app/frontend/package.json

@@ -1,6 +1,6 @@
 {
     "name": "fragmenta-desktop",
-    "version": "0.0.2",
+    "version": "0.1.0",
     "description": "Fragmenta Desktop",
     "type": "module",
     "scripts": {

app/frontend/src/App.js

@@ -59,6 +59,7 @@ import ModelUnwrapButton from './components/ModelUnwrapButton';
 import CheckpointManager from './components/CheckpointManager';
 import GeneratedFragmentsWindow from './components/GeneratedFragmentsWindow';
 import WelcomePage from './components/WelcomePage';
+import { clearPerformanceSession } from './components/usePerformanceSession';
 import { formatDuration } from './utils/format';
 import theme, { appStyles, lightTheme } from './theme';
 
@@ -137,6 +138,7 @@ function App() {
     const [generatedFragments, setGeneratedFragments] = useState([]);
     const [currentFilename, setCurrentFilename] = useState('');
     const [cfgScale, setCfgScale] = useState(7.0);
+    const [steps, setSteps] = useState(250);
     const [batchCount, setBatchCount] = useState(1);
     const [randomSeed, setRandomSeed] = useState(true);
     const [seedValue, setSeedValue] = useState('');
@@ -206,6 +208,10 @@ function App() {
     const [showStartFreshDialog, setShowStartFreshDialog] = useState(false);
     const [isStartingFresh, setIsStartingFresh] = useState(false);
     const [uploadKey, setUploadKey] = useState(0);
+    // Bumping this key forces the performance panel to remount, which is how
+    // we flush its in-memory session state on Fresh Start (clearing localStorage
+    // alone wouldn't reset the mounted panel's useState mirrors).
+    const [performanceResetKey, setPerformanceResetKey] = useState(0);
     const [isFreeingGPU, setIsFreeingGPU] = useState(false);
     const [showFreeGPUDialog, setShowFreeGPUDialog] = useState(false);
     const [modelWarning, setModelWarning] = useState({
@@ -253,6 +259,16 @@ function App() {
         return 10;
     };
 
+    const isSmallModel = (() => {
+        if (selectedModel === 'stable-audio-open-small') return true;
+        const model = availableModels.find(m => m.name === selectedModel);
+        if (model && selectedUnwrappedModel) {
+            const u = model.unwrapped_models?.find(x => x.path === selectedUnwrappedModel);
+            return u ? (u.size_mb || 0) < 2000 : false;
+        }
+        return false;
+    })();
+
     useEffect(() => {
         const maxDuration = getMaxDuration();
         if (generationDuration > maxDuration) {
@@ -523,7 +539,8 @@ function App() {
         const baseRequestData = {
             prompt: generationPrompt,
             duration: generationDuration,
-            cfg_scale: cfgScale
+            cfg_scale: cfgScale,
+            steps: steps
         };
 
         const baseModel = baseModels.find(m => m.name === selectedModel);
@@ -631,6 +648,7 @@ function App() {
                     prompt: generationPrompt,
                     duration: generationDuration,
                     cfgScale,
+                    steps,
                     seed: seedForRun,
                     batchIndex,
                     batchTotal: totalRuns,
@@ -682,9 +700,6 @@ function App() {
 
     const stopGeneration = () => {
         stopGenerationRef.current = true;
-        // Tell the backend first so the in-flight diffusion loop bails out at
-        // the next step, then abort the HTTP request on our side. Fire-and-
-        // forget; we deliberately do not pass the abort signal here.
         api.post('/api/stop-generation').catch(() => {});
         if (generationAbortRef.current) {
             try { generationAbortRef.current.abort(); } catch (_) {}
@@ -709,6 +724,12 @@ function App() {
             setGenerationPrompt('');
             setUploadKey(prev => prev + 1);
 
+            // Wipe persisted performance session and force-remount the panel so
+            // its in-memory state resets to defaults along with localStorage.
+            // (MIDI mappings and other app preferences are intentionally kept.)
+            clearPerformanceSession();
+            setPerformanceResetKey(prev => prev + 1);
+
             setProcessingStatus(response.data.message);
 
             fetchSystemStatus();
@@ -1080,10 +1101,10 @@ function App() {
                                             <Paper sx={{ p: 2 }} variant="outlined">
                                                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
                                                     <UploadIcon size={20} />
-                                                    <Typography variant="h6">Manual Annotate</Typography>
+                                                    <Typography variant="h6">Manual Annotation</Typography>
                                                 </Box>
                                                 <Typography variant="body2" color="textSecondary" sx={{ mb: 2 }}>
-                                                    Upload audio files one by one and write each prompt yourself.
+                                                    Upload audio files one by one and annotate them yourself.
                                                     Use this when you want full control over every annotation.
                                                 </Typography>
 
@@ -1621,27 +1642,62 @@ function App() {
                                                                 <Typography gutterBottom>CFG Scale</Typography>
                                                                 <Box sx={appStyles.sliderRow}>
                                                                     <Slider
-                                                                        value={cfgScale}
+                                                                        value={isSmallModel ? 1.0 : cfgScale}
                                                                         onChange={(e, value) => setCfgScale(value)}
                                                                         min={0.1}
                                                                         max={20}
                                                                         step={0.1}
                                                                         valueLabelDisplay="auto"
+                                                                        disabled={isSmallModel}
                                                                         sx={appStyles.sliderFlexGrow}
                                                                     />
                                                                     <TextField
                                                                         type="number"
-                                                                        value={cfgScale}
+                                                                        value={isSmallModel ? 1.0 : cfgScale}
                                                                         onChange={(e) => {
                                                                             const val = parseFloat(e.target.value);
                                                                             if (Number.isNaN(val)) return;
                                                                             setCfgScale(Math.max(0.1, Math.min(20, val)));
                                                                         }}
                                                                         inputProps={{ min: 0.1, max: 20, step: 0.1 }}
+                                                                        disabled={isSmallModel}
                                                                         sx={appStyles.sliderInputSmall}
                                                                         size="small"
                                                                     />
                                                                 </Box>
+                                                                {isSmallModel && (
+                                                                    <Typography variant="caption" color="textSecondary">
+                                                                        Locked at 1.0 for the distilled small model.
+                                                                    </Typography>
+                                                                )}
+                                                            </Grid>
+
+                                                            <Grid item xs={12}>
+                                                                <Typography gutterBottom>Inference Steps</Typography>
+                                                                <Box sx={appStyles.sliderRow}>
+                                                                    <Slider
+                                                                        value={steps}
+                                                                        onChange={(e, value) => setSteps(value)}
+                                                                        min={50}
+                                                                        max={250}
+                                                                        step={null}
+                                                                        marks={[
+                                                                            { value: 50, label: '50' },
+                                                                            { value: 100, label: '100' },
+                                                                            { value: 150, label: '150' },
+                                                                            { value: 200, label: '200' },
+                                                                            { value: 250, label: '250' },
+                                                                        ]}
+                                                                        valueLabelDisplay="auto"
+                                                                        disabled={isSmallModel}
+                                                                        sx={appStyles.sliderFlexGrow}
+                                                                    />
+                                                                </Box>
+                                                                {isSmallModel && (
+                                                                    <Typography variant="caption" color="textSecondary">
+                                                                        Locked at 8 steps (pingpong sampler) for the distilled small model.
+                                                                    </Typography>
+                                                                )}
                                                             </Grid>
 
                                                             <Grid item xs={12}>
@@ -1864,7 +1920,7 @@ function App() {
                                 </Grid>
                             </TabPanel>
 
-                            <TabPanel value={tabValue} index={3}>
+                            <TabPanel value={tabValue} index={3} keepMounted>
                                 {performanceEnabled ? (
                                     <Suspense fallback={
                                         <Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
@@ -1872,6 +1928,7 @@ function App() {
                                         </Box>
                                     }>
                                         <PerformancePanel
+                                            key={performanceResetKey}
                                             selectedModel={selectedModel}
                                             selectedUnwrappedModel={selectedUnwrappedModel}
                                             availableModels={availableModels}
@@ -1879,6 +1936,13 @@ function App() {
                                             onSelectModel={setSelectedModel}
                                             onSelectUnwrappedModel={setSelectedUnwrappedModel}
                                             onRefreshModels={fetchAvailableModels}
+                                            steps={steps}
+                                            onStepsChange={setSteps}
+                                            randomSeed={randomSeed}
+                                            seedValue={seedValue}
+                                            onRandomSeedChange={setRandomSeed}
+                                            onSeedValueChange={setSeedValue}
+                                            onPresetLoaded={() => setPerformanceResetKey(prev => prev + 1)}
                                         />
                                     </Suspense>
                                 ) : (

app/frontend/src/components/BulkAnnotatePanel.js

@@ -118,8 +118,6 @@ export default function BulkAnnotatePanel({ onCommitted }) {
             const resp = await api.get('/api/bulk-annotate/status');
             data = resp.data;
         } catch (exc) {
-            // Transient errors (e.g. Flask auto-reload) must not kill polling —
-            // the download/annotation keeps running on the backend side.
             return;
         }
         setStatus(data);
@@ -265,13 +263,13 @@ export default function BulkAnnotatePanel({ onCommitted }) {
         <Paper sx={{ p: 2, mt: 3 }} variant="outlined">
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
                 <TagsIcon size={20} />
-                <Typography variant="h6">Bulk Auto-Annotate</Typography>
+                <Typography variant="h6">Bulk Auto-Annotation</Typography>
             </Box>
             <Typography variant="body2" color="textSecondary" sx={{ mb: 2 }}>
                 Point at a folder of audio files and auto-generate prompts.
                 Basic uses librosa (tempo + key). Rich adds CLAP tagging (genre, mood, instruments).
             </Typography>
-
+            
             <Accordion sx={{ mb: 2 }}>
                 <AccordionSummary expandIcon={<ExpandMoreIcon size={18} />}>
                     <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>

app/frontend/src/components/MidiConfigMenu.js

@@ -0,0 +1,225 @@
+import React from 'react';
+import {
+    Popover,
+    Box,
+    Typography,
+    FormControl,
+    Select,
+    MenuItem,
+    Button,
+    IconButton,
+    Tooltip,
+    Divider,
+    ToggleButton,
+    ToggleButtonGroup,
+    Alert,
+} from '@mui/material';
+import { Trash2 as DeleteIcon, X as CloseIcon } from 'lucide-react';
+import { useMidi, formatMidi } from './MidiContext';
+import { perfTokens } from '../theme';
+
+const CHANNEL_OPTIONS = [
+    { value: 0, label: 'Any' },
+    ...Array.from({ length: 16 }, (_, i) => ({ value: i + 1, label: `Ch ${i + 1}` })),
+];
+
+export default function MidiConfigMenu({ anchorEl, open, onClose }) {
+    const ctx = useMidi();
+    if (!ctx) return null;
+
+    const {
+        config,
+        inputs,
+        supported,
+        permissionError,
+        setDevice,
+        setChannelFilter,
+        setTakeover,
+        clearMapping,
+        clearAll,
+    } = ctx;
+
+    const sortedMappings = [...config.mappings].sort((a, b) => a.label.localeCompare(b.label));
+
+    return (
+        <Popover
+            anchorEl={anchorEl}
+            open={open}
+            onClose={onClose}
+            anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+            transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+            slotProps={{
+                paper: {
+                    sx: {
+                        width: 380,
+                        maxHeight: '70vh',
+                        p: 2,
+                        borderRadius: 2,
+                        border: '1px solid',
+                        borderColor: 'divider',
+                    },
+                },
+            }}
+        >
+            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1.5 }}>
+                <Typography variant="subtitle2" sx={{ letterSpacing: '0.08em', textTransform: 'uppercase', color: 'text.secondary' }}>
+                    MIDI Settings
+                </Typography>
+                <IconButton size="small" onClick={onClose}>
+                    <CloseIcon size={14} />
+                </IconButton>
+            </Box>
+
+            {!supported && (
+                <Alert severity="warning" sx={{ mb: 1.5 }}>
+                    {permissionError || 'Web MIDI is not available in this browser. Try Chrome / Edge / Electron.'}
+                </Alert>
+            )}
+
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+                <Box>
+                    <Typography variant="caption" sx={{ color: 'text.secondary', display: 'block', mb: 0.5 }}>
+                        Input device
+                    </Typography>
+                    <FormControl size="small" fullWidth>
+                        <Select
+                            value={config.deviceId && inputs.some(i => i.id === config.deviceId) ? config.deviceId : ''}
+                            onChange={(e) => setDevice(e.target.value || null)}
+                            displayEmpty
+                            disabled={!supported}
+                            renderValue={(value) => {
+                                if (!value) return <em style={{ opacity: 0.6 }}>None</em>;
+                                const found = inputs.find(i => i.id === value);
+                                return found ? found.name : 'Disconnected';
+                            }}
+                        >
+                            <MenuItem value="">
+                                <em>None</em>
+                            </MenuItem>
+                            {inputs.map((input) => (
+                                <MenuItem key={input.id} value={input.id}>
+                                    {input.name}
+                                </MenuItem>
+                            ))}
+                        </Select>
+                    </FormControl>
+                    {config.deviceName && !inputs.some(i => i.name === config.deviceName) && (
+                        <Typography variant="caption" sx={{ color: 'warning.main', display: 'block', mt: 0.5 }}>
+                            Saved device "{config.deviceName}" not connected
+                        </Typography>
+                    )}
+                </Box>
+
+                <Box sx={{ display: 'flex', gap: 1 }}>
+                    <Box sx={{ flex: 1 }}>
+                        <Typography variant="caption" sx={{ color: 'text.secondary', display: 'block', mb: 0.5 }}>
+                            Channel filter
+                        </Typography>
+                        <FormControl size="small" fullWidth>
+                            <Select
+                                value={config.channelFilter}
+                                onChange={(e) => setChannelFilter(Number(e.target.value))}
+                                disabled={!supported}
+                            >
+                                {CHANNEL_OPTIONS.map(opt => (
+                                    <MenuItem key={opt.value} value={opt.value}>{opt.label}</MenuItem>
+                                ))}
+                            </Select>
+                        </FormControl>
+                    </Box>
+
+                    <Box sx={{ flex: 1 }}>
+                        <Typography variant="caption" sx={{ color: 'text.secondary', display: 'block', mb: 0.5 }}>
+                            Takeover
+                        </Typography>
+                        <ToggleButtonGroup
+                            size="small"
+                            value={config.takeover}
+                            exclusive
+                            onChange={(_, v) => { if (v) setTakeover(v); }}
+                            fullWidth
+                            sx={{ height: 40 }}
+                        >
+                            <ToggleButton value="jump" sx={{ fontSize: perfTokens.fontSize.body }}>Jump</ToggleButton>
+                            <ToggleButton value="pickup" sx={{ fontSize: perfTokens.fontSize.body }}>Pickup</ToggleButton>
+                        </ToggleButtonGroup>
+                    </Box>
+                </Box>
+
+                <Divider sx={{ my: 0.5 }} />
+
+                <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                    <Typography variant="caption" sx={{ color: 'text.secondary', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
+                        Mappings ({config.mappings.length})
+                    </Typography>
+                    <Button
+                        size="small"
+                        onClick={clearAll}
+                        disabled={config.mappings.length === 0}
+                        sx={{ fontSize: perfTokens.fontSize.small, textTransform: 'none' }}
+                    >
+                        Clear all
+                    </Button>
+                </Box>
+
+                <Box
+                    sx={{
+                        border: '1px solid',
+                        borderColor: 'divider',
+                        borderRadius: 1,
+                        maxHeight: 280,
+                        overflowY: 'auto',
+                        bgcolor: 'background.default',
+                    }}
+                >
+                    {sortedMappings.length === 0 ? (
+                        <Box sx={{ p: 2, textAlign: 'center' }}>
+                            <Typography variant="caption" sx={{ color: 'text.disabled', fontStyle: 'italic' }}>
+                                No mappings yet. Enable MIDI mode (the MIDI button), click a control, then move a hardware knob, fader, or button.
+                            </Typography>
+                        </Box>
+                    ) : (
+                        sortedMappings.map((m) => (
+                            <Box
+                                key={m.controlId}
+                                sx={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: 1,
+                                    px: 1,
+                                    py: 0.6,
+                                    borderBottom: '1px solid',
+                                    borderColor: 'divider',
+                                    '&:last-child': { borderBottom: 'none' },
+                                }}
+                            >
+                                <Box sx={{ flex: 1, minWidth: 0 }}>
+                                    <Typography variant="body2" sx={{ fontSize: perfTokens.fontSize.body, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                                        {m.label}
+                                    </Typography>
+                                    <Typography variant="caption" sx={{ color: 'text.secondary', fontSize: perfTokens.fontSize.small, fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace' }}>
+                                        {formatMidi(m.midi)}
+                                    </Typography>
+                                </Box>
+                                <Tooltip title="Remove mapping">
+                                    <IconButton
+                                        size="small"
+                                        onClick={() => clearMapping(m.controlId)}
+                                        sx={{ color: 'text.disabled', '&:hover': { color: 'error.main' } }}
+                                    >
+                                        <DeleteIcon size={13} />
+                                    </IconButton>
+                                </Tooltip>
+                            </Box>
+                        ))
+                    )}
+                </Box>
+
+                <Typography variant="caption" sx={{ color: 'text.disabled', fontSize: perfTokens.fontSize.small, lineHeight: 1.4 }}>
+                    Pickup = ignore the hardware until its position matches the on-screen value (no jumps).
+                    Right-click a control while in MIDI mode to clear its mapping.
+                </Typography>
+            </Box>
+        </Popover>
+    );
+}

app/frontend/src/components/MidiContext.js

@@ -0,0 +1,465 @@
+import React, {
+    createContext,
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
+import { Box } from '@mui/material';
+
+const STORAGE_KEY = 'fragmenta.midi.config.v1';
+
+const DEFAULT_CONFIG = {
+    deviceId: null,
+    deviceName: null,
+    channelFilter: 0,           
+    takeover: 'jump',           
+    mappings: [],              
+};
+
+const MIDI_MODE = {
+    NOTE_ON: 0x90,
+    NOTE_OFF: 0x80,
+    CC: 0xb0,
+};
+
+function loadConfig() {
+    try {
+        const raw = localStorage.getItem(STORAGE_KEY);
+        if (!raw) return { ...DEFAULT_CONFIG, mappings: [] };
+        const parsed = JSON.parse(raw);
+        return {
+            ...DEFAULT_CONFIG,
+            ...parsed,
+            mappings: Array.isArray(parsed.mappings) ? parsed.mappings : [],
+        };
+    } catch {
+        return { ...DEFAULT_CONFIG, mappings: [] };
+    }
+}
+
+function saveConfig(config) {
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(config));
+    } catch { /* quota or serialization — non-fatal */ }
+}
+
+// Wipes the persisted MIDI device + mappings. The provider will pick up the
+// reset on its next mount (caller is expected to remount).
+export function clearMidiConfig() {
+    try { localStorage.removeItem(STORAGE_KEY); }
+    catch { /* non-fatal */ }
+}
+
+function midiKey(midi) {
+    return `${midi.type}:${midi.channel}:${midi.number}`;
+}
+
+function formatMidi(midi) {
+    if (!midi) return '';
+    const t = midi.type === 'cc' ? 'CC' : 'Note';
+    return `${t} ${midi.number} · ch.${midi.channel}`;
+}
+
+const MidiContext = createContext(null);
+
+export function MidiProvider({ children }) {
+    const [config, setConfig] = useState(loadConfig);
+    const [inputs, setInputs] = useState([]);
+    const [supported, setSupported] = useState(true);
+    const [permissionError, setPermissionError] = useState(null);
+    const [learnMode, setLearnMode] = useState(false);
+    const [learnTarget, setLearnTarget] = useState(null);
+
+    const accessRef = useRef(null);
+    const subscribersRef = useRef(new Map());
+    const pickupArmedRef = useRef(new Map());
+    const configRef = useRef(config);
+    const learnTargetRef = useRef(learnTarget);
+
+    useEffect(() => {
+        configRef.current = config;
+        saveConfig(config);
+    }, [config]);
+
+    useEffect(() => { learnTargetRef.current = learnTarget; }, [learnTarget]);
+
+    const refreshInputs = useCallback(() => {
+        const access = accessRef.current;
+        if (!access) return;
+        const list = [];
+        access.inputs.forEach((input) => {
+            list.push({
+                id: input.id,
+                name: input.name || 'Unknown device',
+                manufacturer: input.manufacturer || '',
+            });
+        });
+        setInputs(list);
+    }, []);
+
+    useEffect(() => {
+        if (typeof navigator === 'undefined' || !navigator.requestMIDIAccess) {
+            setSupported(false);
+            return undefined;
+        }
+        let cancelled = false;
+        navigator.requestMIDIAccess({ sysex: false })
+            .then((access) => {
+                if (cancelled) return;
+                accessRef.current = access;
+                refreshInputs();
+                access.onstatechange = refreshInputs;
+            })
+            .catch((err) => {
+                setPermissionError(err?.message || 'MIDI permission denied');
+                setSupported(false);
+            });
+        return () => { cancelled = true; };
+    }, [refreshInputs]);
+
+    useEffect(() => {
+        if (!inputs.length || !config.deviceName) return;
+        const stillThere = config.deviceId && inputs.some(i => i.id === config.deviceId);
+        if (stillThere) return;
+        const byName = inputs.find(i => i.name === config.deviceName);
+        if (byName) {
+            setConfig(prev => ({ ...prev, deviceId: byName.id }));
+        }
+    }, [inputs, config.deviceId, config.deviceName]);
+
+    const captureLearn = useCallback((controlId, midi) => {
+        setConfig((prev) => {
+            const subOpts = subscribersRef.current.get(controlId)?.opts || {};
+            const newMapping = {
+                controlId,
+                label: subOpts.label || controlId,
+                kind: subOpts.kind || 'continuous',
+                curve: subOpts.curve || 'linear',
+                min: subOpts.min ?? 0,
+                max: subOpts.max ?? 1,
+                midi,
+            };
+            const targetKey = midiKey(midi);
+            const filtered = prev.mappings.filter(
+                (m) => m.controlId !== controlId && midiKey(m.midi) !== targetKey,
+            );
+            return { ...prev, mappings: [...filtered, newMapping] };
+        });
+        pickupArmedRef.current.delete(controlId);
+        setLearnTarget(null);
+    }, []);
+
+    const dispatchMessage = useCallback((event) => {
+        const data = event.data;
+        if (!data || data.length < 2) return;
+        const status = data[0];
+        const data1 = data[1];
+        const data2 = data.length > 2 ? data[2] : 0;
+        const type = status & 0xf0;
+        const channel = (status & 0x0f) + 1;
+        const cfg = configRef.current;
+
+        if (cfg.channelFilter && channel !== cfg.channelFilter) return;
+
+        const isCC = type === MIDI_MODE.CC;
+        const isNoteOn = type === MIDI_MODE.NOTE_ON && data2 > 0;
+        const isNoteOff = type === MIDI_MODE.NOTE_OFF || (type === MIDI_MODE.NOTE_ON && data2 === 0);
+        if (!isCC && !isNoteOn && !isNoteOff) return;
+
+        const incomingType = isCC ? 'cc' : 'note';
+        const target = learnTargetRef.current;
+        if (target && (isCC || isNoteOn)) {
+            captureLearn(target, { type: incomingType, channel, number: data1 });
+            return;
+        }
+
+        for (const m of cfg.mappings) {
+            if (m.midi.channel !== channel || m.midi.number !== data1) continue;
+            if (m.midi.type !== incomingType) continue;
+            const sub = subscribersRef.current.get(m.controlId);
+            if (!sub) continue;
+
+            if (sub.opts.kind === 'continuous') {
+                if (!isCC) continue;
+                applyContinuous(sub, m, data2, cfg.takeover);
+            } else if (sub.opts.kind === 'trigger') {
+                if (isNoteOn) sub.handler();
+                else if (isCC && data2 >= 64) sub.handler();
+            }
+        }
+    }, [captureLearn]);
+
+    useEffect(() => {
+        const access = accessRef.current;
+        if (!access) return undefined;
+        const bound = [];
+        access.inputs.forEach((input) => {
+            if (config.deviceId && input.id === config.deviceId) {
+                input.onmidimessage = dispatchMessage;
+                bound.push(input);
+            } else {
+                input.onmidimessage = null;
+            }
+        });
+
+        pickupArmedRef.current = new Map();
+        return () => {
+            bound.forEach((i) => { i.onmidimessage = null; });
+        };
+    }, [config.deviceId, inputs, dispatchMessage]);
+
+    function applyContinuous(sub, mapping, midiValue, takeover) {
+        const norm = midiValue / 127;
+        let target;
+        if (mapping.curve === 'log' && mapping.min > 0 && mapping.max > 0) {
+            target = mapping.min * Math.pow(mapping.max / mapping.min, norm);
+        } else {
+            target = mapping.min + norm * (mapping.max - mapping.min);
+        }
+
+        if (takeover === 'pickup') {
+            const armed = pickupArmedRef.current.get(mapping.controlId);
+            if (!armed) {
+                const current = typeof sub.getValue === 'function' ? sub.getValue() : sub.value;
+                const span = mapping.max - mapping.min;
+                if (span === 0 || !isFinite(current)) {
+                    pickupArmedRef.current.set(mapping.controlId, true);
+                } else {
+                    // Compare on the same curve we used to compute target.
+                    let currentNorm;
+                    if (mapping.curve === 'log' && mapping.min > 0 && current > 0) {
+                        currentNorm = Math.log(current / mapping.min) / Math.log(mapping.max / mapping.min);
+                    } else {
+                        currentNorm = (current - mapping.min) / span;
+                    }
+                    if (Math.abs(norm - currentNorm) < 0.02) {
+                        pickupArmedRef.current.set(mapping.controlId, true);
+                    } else {
+                        return;
+                    }
+                }
+            }
+        }
+        sub.handler(target);
+    }
+
+    const beginLearn = useCallback((controlId) => {
+        setLearnMode(true);
+        setLearnTarget(controlId);
+    }, []);
+
+    const cancelLearn = useCallback(() => setLearnTarget(null), []);
+
+    const clearMapping = useCallback((controlId) => {
+        setConfig((prev) => ({
+            ...prev,
+            mappings: prev.mappings.filter((m) => m.controlId !== controlId),
+        }));
+        pickupArmedRef.current.delete(controlId);
+    }, []);
+
+    const clearAll = useCallback(() => {
+        setConfig((prev) => ({ ...prev, mappings: [] }));
+        pickupArmedRef.current.clear();
+    }, []);
+
+    const setDevice = useCallback((deviceId) => {
+        const found = inputs.find((i) => i.id === deviceId);
+        setConfig((prev) => ({
+            ...prev,
+            deviceId: deviceId || null,
+            deviceName: found ? found.name : null,
+        }));
+    }, [inputs]);
+
+    const setChannelFilter = useCallback((channel) => {
+        setConfig((prev) => ({ ...prev, channelFilter: channel }));
+    }, []);
+
+    const setTakeover = useCallback((mode) => {
+        setConfig((prev) => ({ ...prev, takeover: mode }));
+        pickupArmedRef.current.clear();
+    }, []);
+
+    const exitLearnMode = useCallback(() => {
+        setLearnMode(false);
+        setLearnTarget(null);
+    }, []);
+
+    const toggleLearnMode = useCallback(() => {
+        setLearnMode((prev) => {
+            if (prev) setLearnTarget(null);
+            return !prev;
+        });
+    }, []);
+
+    const registerSubscriber = useCallback((id, sub) => {
+        subscribersRef.current.set(id, sub);
+    }, []);
+
+    const unregisterSubscriber = useCallback((id) => {
+        subscribersRef.current.delete(id);
+    }, []);
+
+    const value = useMemo(() => ({
+        config,
+        inputs,
+        supported,
+        permissionError,
+        learnMode,
+        learnTarget,
+        setDevice,
+        setChannelFilter,
+        setTakeover,
+        beginLearn,
+        cancelLearn,
+        clearMapping,
+        clearAll,
+        toggleLearnMode,
+        exitLearnMode,
+        registerSubscriber,
+        unregisterSubscriber,
+    }), [
+        config, inputs, supported, permissionError, learnMode, learnTarget,
+        setDevice, setChannelFilter, setTakeover, beginLearn, cancelLearn,
+        clearMapping, clearAll, toggleLearnMode, exitLearnMode,
+        registerSubscriber, unregisterSubscriber,
+    ]);
+
+    return <MidiContext.Provider value={value}>{children}</MidiContext.Provider>;
+}
+
+export function useMidi() {
+    const ctx = useContext(MidiContext);
+    return ctx;
+}
+
+export { formatMidi };
+
+
+export function MidiMappable({
+    id,
+    label,
+    kind = 'continuous',
+    curve = 'linear',
+    min = 0,
+    max = 1,
+    value,
+    onChange,
+    sx,
+    children,
+}) {
+    const ctx = useMidi();
+    const valueRef = useRef(value);
+    useEffect(() => { valueRef.current = value; }, [value]);
+    const handlerRef = useRef(onChange);
+    useEffect(() => { handlerRef.current = onChange; }, [onChange]);
+
+    useEffect(() => {
+        if (!ctx) return undefined;
+        ctx.registerSubscriber(id, {
+            opts: { kind, curve, min, max, label },
+            handler: (v) => handlerRef.current?.(v),
+            getValue: () => valueRef.current,
+        });
+        return () => ctx.unregisterSubscriber(id);
+    }, [ctx, id, kind, curve, min, max, label]);
+
+    if (!ctx) return <>{children}</>;
+
+    const mapping = ctx.config.mappings.find((m) => m.controlId === id);
+    const isLearningThis = ctx.learnTarget === id;
+    const showOverlay = ctx.learnMode;
+
+    return (
+        <Box sx={{ position: 'relative', display: 'flex', flexDirection: 'column', minWidth: 0, minHeight: 0, ...sx }}>
+            {children}
+            {mapping && !showOverlay && (
+                <Box
+                    sx={{
+                        position: 'absolute',
+                        top: 1,
+                        right: 1,
+                        fontSize: '0.5rem',
+                        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+                        bgcolor: 'rgba(83, 193, 138, 0.85)',
+                        color: '#000',
+                        px: 0.4,
+                        py: 0.05,
+                        borderRadius: 0.5,
+                        pointerEvents: 'none',
+                        letterSpacing: '0.04em',
+                        zIndex: 5,
+                    }}
+                >
+                    {mapping.midi.type === 'cc' ? 'CC' : 'N'}{mapping.midi.number}
+                </Box>
+            )}
+            {showOverlay && (
+                <Box
+                    onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if (isLearningThis) ctx.cancelLearn();
+                        else ctx.beginLearn(id);
+                    }}
+                    onContextMenu={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if (mapping) ctx.clearMapping(id);
+                    }}
+                    title={
+                        isLearningThis
+                            ? `${label}: move a hardware control to bind (right-click to clear)`
+                            : mapping
+                                ? `${label}: ${formatMidi(mapping.midi)} (click to re-learn, right-click to clear)`
+                                : `${label}: click then move a hardware control to bind`
+                    }
+                    sx={{
+                        position: 'absolute',
+                        inset: 0,
+                        cursor: 'pointer',
+                        zIndex: 20,
+                        bgcolor: isLearningThis
+                            ? 'rgba(245, 197, 66, 0.32)'
+                            : mapping
+                                ? 'rgba(83, 193, 138, 0.18)'
+                                : 'rgba(245, 197, 66, 0.10)',
+                        border: '1px dashed',
+                        borderColor: isLearningThis
+                            ? '#F5C542'
+                            : mapping
+                                ? 'rgba(83, 193, 138, 0.7)'
+                                : 'rgba(245, 197, 66, 0.65)',
+                        borderRadius: 1,
+                        animation: isLearningThis ? 'midiPulse 900ms ease-in-out infinite' : 'none',
+                        '@keyframes midiPulse': {
+                            '0%, 100%': { opacity: 0.5 },
+                            '50%': { opacity: 1 },
+                        },
+                    }}
+                >
+                    {(mapping || isLearningThis) && (
+                        <Box
+                            sx={{
+                                position: 'absolute',
+                                top: 2,
+                                left: 2,
+                                fontSize: '0.5rem',
+                                fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+                                color: isLearningThis ? '#F5C542' : 'rgba(83, 193, 138, 0.95)',
+                                letterSpacing: '0.04em',
+                                pointerEvents: 'none',
+                            }}
+                        >
+                            {isLearningThis ? 'learn…' : `${mapping.midi.type === 'cc' ? 'CC' : 'N'}${mapping.midi.number}`}
+                        </Box>
+                    )}
+                </Box>
+            )}
+        </Box>
+    );
+}

app/frontend/src/components/PerformanceChannel.js

@@ -19,24 +19,32 @@ import {
     Volume2 as VolumeIcon,
     VolumeX as MuteIcon,
 } from 'lucide-react';
-import { performanceChannelStyles as styles } from '../theme';
+import { performanceChannelStyles as styles, perfTokens } from '../theme';
+import { MidiMappable } from './MidiContext';
 
 const CHANNEL_COLORS = [
     '#35C2D4', '#9F8AE6', '#53C18A', '#E3A34B',
     '#E36C61', '#F08AD2', '#5BA0F0', '#A8D86B',
 ];
 
-// -6 dBFS in linear amplitude — must match DEFAULT_CHANNEL_GAIN in performanceAudio.js
-const DEFAULT_GAIN = Math.pow(10, -6 / 20);
+// Channel gain runs on the same dBFS scale as the master fader so the two
+// scales line up: -60 dB floor, 0 dB ceiling, default at -6 dB. The knob's
+// dB value is converted to linear before reaching the audio graph.
+const GAIN_DB_MIN = -60;
+const GAIN_DB_MAX = 0;
+const GAIN_DB_DEFAULT = -6;
+const gainDbToLinear = (db) => (db <= GAIN_DB_MIN ? 0 : Math.pow(10, db / 20));
 
 const KNOB_DEFS = [
-    { key: 'gain', label: 'GAIN', min: 0, max: 1.5, step: 0.01, default: DEFAULT_GAIN },
-    { key: 'filter', label: 'LPF', min: 200, max: 18000, step: 1, default: 18000, log: true },
+    { key: 'gain', label: 'GAIN', min: GAIN_DB_MIN, max: GAIN_DB_MAX, step: 0.5, default: GAIN_DB_DEFAULT },
+    // LPF range goes from 20 Hz (full kill) to 20 kHz (bypass). We render the
+    // slider on a log axis so each octave gets equal travel — without this
+    // the bottom 5% of the knob does all the audible work.
+    { key: 'filter', label: 'LPF', min: 20, max: 20000, step: 1, default: 20000, scale: 'log' },
     { key: 'delay', label: 'DLY', min: 0, max: 1.0, step: 0.01, default: 0.0 },
     { key: 'reverb', label: 'REV', min: 0, max: 1.0, step: 0.01, default: 0.0 },
 ];
 
-// Snap pan to center when within this fraction of full travel from 0.
 const PAN_CENTER_SNAP = 0.06;
 
 const BARS_OPTIONS = [1, 2, 4, 8, 16];
@@ -45,10 +53,14 @@ const BEATS_PER_BAR = 4;
 export default function PerformanceChannel({
     index,
     strip,
+    engine,
+    playing = false,
     onGenerate,
     canGenerate,
     onMuteSoloChange,
     onStateChange,
+    onFormStateChange,
+    initialFormState,
     maxDuration = 47,
     bpm = 120,
 }) {
@@ -57,28 +69,43 @@ export default function PerformanceChannel({
     const meterRef = useRef(null);
     const meterRafRef = useRef(null);
 
-    const [prompt, setPrompt] = useState('');
-    const [duration, setDuration] = useState(8);
-    const [durationMode, setDurationMode] = useState('seconds');
-    const [bars, setBars] = useState(4);
+    const init = initialFormState || {};
+    const initKnobs = init.knobs || {};
+    const defaultKnobs = (() => {
+        const d = Object.fromEntries(KNOB_DEFS.map(k => [k.key, k.default]));
+        d.pan = 0;
+        return d;
+    })();
+
+    const [prompt, setPrompt] = useState(init.prompt ?? '');
+    const [duration, setDuration] = useState(init.duration ?? 8);
+    const [durationMode, setDurationMode] = useState(init.durationMode ?? 'seconds');
+    const [bars, setBars] = useState(init.bars ?? 4);
     const [generating, setGenerating] = useState(false);
     const [loaded, setLoaded] = useState(false);
-    const [playing, setPlaying] = useState(false);
-    const [looping, setLooping] = useState(true);
-    const [muted, setMuted] = useState(false);
-    const [soloed, setSoloed] = useState(false);
-    const [knobs, setKnobs] = useState(() => {
-        const initial = Object.fromEntries(KNOB_DEFS.map(k => [k.key, k.default]));
-        initial.pan = 0;
-        return initial;
-    });
+    const [looping, setLooping] = useState(init.looping ?? true);
+    const [muted, setMuted] = useState(init.muted ?? false);
+    const [soloed, setSoloed] = useState(init.soloed ?? false);
+    const [knobs, setKnobs] = useState(() => ({ ...defaultKnobs, ...initKnobs }));
+
+    // Mirror form state up to the panel so it can persist the session. Skip the
+    // first render so we don't re-write what we just loaded from localStorage.
+    const initialReportSkippedRef = useRef(false);
+    useEffect(() => {
+        if (!initialReportSkippedRef.current) {
+            initialReportSkippedRef.current = true;
+            return;
+        }
+        onFormStateChange?.(index, {
+            prompt, duration, durationMode, bars, looping, muted, soloed, knobs,
+        });
+    }, [prompt, duration, durationMode, bars, looping, muted, soloed, knobs, index, onFormStateChange]);
 
     const secondsFromBars = useMemo(
         () => bars * (60 / Math.max(bpm, 1)) * BEATS_PER_BAR,
         [bars, bpm]
     );
 
-    // Only show bar counts whose implied duration fits within the model's max.
     const availableBars = useMemo(() => {
         const maxBars = (maxDuration * bpm) / (60 * BEATS_PER_BAR);
         const opts = BARS_OPTIONS.filter(b => b <= maxBars);
@@ -108,6 +135,28 @@ export default function PerformanceChannel({
 
     useEffect(() => { drawWave(); }, [drawWave, loaded]);
 
+    // One-shot: push restored knob/loop values into the audio strip when it
+    // first becomes available, so the persisted session matches what's heard.
+    // Mute/solo applies through the parent's mix handler so the panel can
+    // recompute the "any-soloed" cross-channel state.
+    const stripStateAppliedRef = useRef(false);
+    useEffect(() => {
+        if (!strip || stripStateAppliedRef.current) return;
+        stripStateAppliedRef.current = true;
+        strip.setUserGain(gainDbToLinear(knobs.gain));
+        strip.setPan(knobs.pan);
+        strip.setFilter(knobs.filter);
+        strip.setDelayMix(knobs.delay);
+        strip.setReverbMix(knobs.reverb);
+        strip.setLoop(looping);
+        if (muted || soloed) {
+            onMuteSoloChange?.(index, { mute: muted, solo: soloed });
+        }
+        // Initial values are intentionally only applied once; subsequent edits
+        // flow through the normal handlers below.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [strip]);
+
     useEffect(() => {
         setDuration(prev => Math.min(prev, maxDuration));
     }, [maxDuration]);
@@ -120,10 +169,17 @@ export default function PerformanceChannel({
 
     const handleGenerate = async () => {
         if (!prompt.trim() || generating) return;
-        const effectiveDuration = durationMode === 'bars' ? secondsFromBars : duration;
+        const inBarsMode = durationMode === 'bars';
+        const effectiveDuration = inBarsMode ? secondsFromBars : duration;
         setGenerating(true);
         try {
-            const blob = await onGenerate({ prompt, duration: effectiveDuration });
+            const blob = await onGenerate({
+                prompt,
+                duration: effectiveDuration,
+                // Only forward alignment params in bars mode — seconds mode
+                // generates raw audio with no post-processing.
+                ...(inBarsMode ? { alignBars: bars, alignBpm: bpm } : {}),
+            });
             await strip.loadBlob(blob);
             setLoaded(true);
             onStateChange?.(index, { loaded: true });
@@ -137,14 +193,13 @@ export default function PerformanceChannel({
 
     const handlePlay = () => {
         if (!loaded) return;
-        strip.play(looping);
-        setPlaying(true);
+        if (engine) engine.playChannel(index, looping);
+        else strip.play(looping);
         onStateChange?.(index, { playing: true });
     };
 
     const handleStop = () => {
         strip.stop();
-        setPlaying(false);
         onStateChange?.(index, { playing: false });
     };
 
@@ -170,24 +225,42 @@ export default function PerformanceChannel({
 
     const handleKnob = (key, value) => {
         setKnobs(prev => ({ ...prev, [key]: value }));
-        if (key === 'gain') strip.setUserGain(value);
+        if (key === 'gain') strip.setUserGain(gainDbToLinear(value));
         else if (key === 'pan') strip.setPan(value);
         else if (key === 'filter') strip.setFilter(value);
         else if (key === 'delay') strip.setDelayMix(value);
         else if (key === 'reverb') strip.setReverbMix(value);
     };
 
+    const handlePan = (v) => {
+        const snapped = Math.abs(v) < PAN_CENTER_SNAP ? 0 : v;
+        handleKnob('pan', snapped);
+    };
+
+    const handleTransportToggle = () => {
+        if (!loaded) return;
+        if (playing) handleStop();
+        else handlePlay();
+    };
+
+    const ctrlId = (suffix) => `channel.${index}.${suffix}`;
+    const ctrlLabel = (name) => `Ch ${index + 1} · ${name}`;
+
     return (
         <Box sx={styles.strip(color, playing)}>
             <Box sx={styles.stripHeader(color)}>
                 <Box sx={styles.channelBadge(color)}>{String(index + 1).padStart(2, '0')}</Box>
                 <Box sx={styles.muteSoloRow}>
-                    <Tooltip title="Mute">
-                        <IconButton size="small" onClick={handleMuteToggle} sx={styles.muteBtn(muted)}>M</IconButton>
-                    </Tooltip>
-                    <Tooltip title="Solo">
-                        <IconButton size="small" onClick={handleSoloToggle} sx={styles.soloBtn(soloed)}>S</IconButton>
-                    </Tooltip>
+                    <MidiMappable id={ctrlId('mute')} label={ctrlLabel('Mute')} kind="trigger" onChange={handleMuteToggle}>
+                        <Tooltip title="Mute">
+                            <IconButton size="small" onClick={handleMuteToggle} sx={styles.muteBtn(muted)}>M</IconButton>
+                        </Tooltip>
+                    </MidiMappable>
+                    <MidiMappable id={ctrlId('solo')} label={ctrlLabel('Solo')} kind="trigger" onChange={handleSoloToggle}>
+                        <Tooltip title="Solo">
+                            <IconButton size="small" onClick={handleSoloToggle} sx={styles.soloBtn(soloed)}>S</IconButton>
+                        </Tooltip>
+                    </MidiMappable>
                 </Box>
             </Box>
 
@@ -204,9 +277,6 @@ export default function PerformanceChannel({
                     sx={styles.promptField}
                     disabled={generating}
                 />
-                {/* Fixed height keeps the strip stable when swapping between
-                    sec (slider) and bars (Select) modes — the Select would
-                    otherwise be taller and push everything below it up/down. */}
                 <Box sx={{ ...styles.durationRow, minHeight: 26, height: 26 }}>
                     <Box
                         sx={{
@@ -226,8 +296,8 @@ export default function PerformanceChannel({
                                     key={mode}
                                     onClick={() => setDurationMode(value)}
                                     sx={{
-                                        fontSize: '0.58rem',
-                                        letterSpacing: '0.08em',
+                                        fontSize: perfTokens.fontSize.small,
+                                        letterSpacing: perfTokens.letterSpacing.wide,
                                         textTransform: 'uppercase',
                                         fontFamily: 'inherit',
                                         px: 0.7,
@@ -268,7 +338,7 @@ export default function PerformanceChannel({
                             size="small"
                             sx={{
                                 flex: 1,
-                                fontSize: '0.7rem',
+                                fontSize: perfTokens.fontSize.body,
                                 height: '100%',
                                 '& .MuiOutlinedInput-input': {
                                     py: 0,
@@ -283,21 +353,23 @@ export default function PerformanceChannel({
                             }}
                         >
                             {availableBars.map(b => (
-                                <MenuItem key={b} value={b} sx={{ fontSize: '0.75rem' }}>
+                                <MenuItem key={b} value={b} sx={{ fontSize: perfTokens.fontSize.body }}>
                                     {b} {b === 1 ? 'bar' : 'bars'}
                                 </MenuItem>
                             ))}
                         </Select>
                     )}
                 </Box>
-                <IconButton
-                    onClick={handleGenerate}
-                    disabled={!canGenerate || !prompt.trim() || generating}
-                    sx={styles.generateBtn(color)}
-                    size="small"
-                >
-                    {generating ? <CircularProgress size={16} sx={{ color }} /> : <GenerateIcon size={16} />}
-                </IconButton>
+                <MidiMappable id={ctrlId('generate')} label={ctrlLabel('Generate')} kind="trigger" onChange={handleGenerate}>
+                    <IconButton
+                        onClick={handleGenerate}
+                        disabled={!canGenerate || !prompt.trim() || generating}
+                        sx={styles.generateBtn(color)}
+                        size="small"
+                    >
+                        {generating ? <CircularProgress size={16} sx={{ color }} /> : <GenerateIcon size={16} />}
+                    </IconButton>
+                </MidiMappable>
             </Box>
 
             <Box sx={styles.waveformWrap}>
@@ -316,72 +388,108 @@ export default function PerformanceChannel({
 
             <Box sx={{ px: 1, py: 1 }}>
                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
-                    <Box component="span" sx={{ fontSize: '0.53rem', color: 'text.secondary', letterSpacing: '0.06em', minWidth: 28 }}>PAN</Box>
-                    <Slider
-                        value={knobs.pan ?? 0}
-                        onChange={(_, v) => {
-                            // Snap to center when close, so "0" isn't fiddly to hit.
-                            const snapped = Math.abs(v) < PAN_CENTER_SNAP ? 0 : v;
-                            handleKnob('pan', snapped);
-                        }}
+                    <Box component="span" sx={{ fontSize: perfTokens.fontSize.knob, color: 'text.secondary', letterSpacing: perfTokens.letterSpacing.wide, minWidth: 28 }}>PAN</Box>
+                    <MidiMappable
+                        id={ctrlId('pan')}
+                        label={ctrlLabel('Pan')}
+                        kind="continuous"
                         min={-1}
                         max={1}
-                        step={0.01}
-                        size="small"
-                        track={false}
-                        marks={[{ value: 0 }]}
-                        sx={{
-                            flex: 1,
-                            '& .MuiSlider-mark': {
-                                width: 2,
-                                height: 10,
-                                borderRadius: 1,
-                                backgroundColor: 'text.secondary',
-                                opacity: 0.8,
-                            },
-                            '& .MuiSlider-markActive': {
-                                backgroundColor: 'text.secondary',
-                                opacity: 0.8,
-                            },
-                        }}
-                    />
+                        value={knobs.pan ?? 0}
+                        onChange={handlePan}
+                        sx={{ flex: 1, flexDirection: 'row' }}
+                    >
+                        <Slider
+                            value={knobs.pan ?? 0}
+                            onChange={(_, v) => handlePan(v)}
+                            min={-1}
+                            max={1}
+                            step={0.01}
+                            size="small"
+                            track={false}
+                            marks={[{ value: 0 }]}
+                            sx={{
+                                flex: 1,
+                                '& .MuiSlider-mark': {
+                                    width: 2,
+                                    height: 10,
+                                    borderRadius: 1,
+                                    backgroundColor: 'text.secondary',
+                                    opacity: 0.8,
+                                },
+                                '& .MuiSlider-markActive': {
+                                    backgroundColor: 'text.secondary',
+                                    opacity: 0.8,
+                                },
+                            }}
+                        />
+                    </MidiMappable>
                 </Box>
             </Box>
 
             <Box sx={styles.knobsGrid}>
-                {KNOB_DEFS.map((k) => (
-                    <Box key={k.key} sx={styles.knobCell}>
-                        <Slider
-                            orientation="vertical"
-                            value={knobs[k.key]}
-                            onChange={(_, v) => handleKnob(k.key, v)}
-                            min={k.min}
-                            max={k.max}
-                            step={k.step}
-                            size="small"
-                            sx={styles.knobSlider(color)}
-                        />
-                        <Box component="span" sx={styles.knobLabel}>{k.label}</Box>
-                    </Box>
-                ))}
+                {KNOB_DEFS.map((k) => {
+                    const isLog = k.scale === 'log';
+                    // For log knobs, the slider drives a 0..1 position and we
+                    // convert to/from the underlying value (Hz) on the audio
+                    // boundary. The knob value stored in state stays in the
+                    // domain unit (Hz here) so persistence and MIDI keep working.
+                    const valueToPos = isLog
+                        ? (v) => Math.log(Math.max(v, k.min) / k.min) / Math.log(k.max / k.min)
+                        : (v) => v;
+                    const posToValue = isLog
+                        ? (p) => k.min * Math.pow(k.max / k.min, p)
+                        : (v) => v;
+                    return (
+                        <Box key={k.key} sx={styles.knobCell}>
+                            <MidiMappable
+                                id={ctrlId(k.key)}
+                                label={ctrlLabel(k.label)}
+                                kind="continuous"
+                                curve={isLog ? 'log' : 'linear'}
+                                min={k.min}
+                                max={k.max}
+                                value={knobs[k.key]}
+                                onChange={(v) => handleKnob(k.key, v)}
+                                sx={{ alignItems: 'center' }}
+                            >
+                                <Slider
+                                    orientation="vertical"
+                                    value={valueToPos(knobs[k.key])}
+                                    onChange={(_, v) => handleKnob(k.key, posToValue(v))}
+                                    min={isLog ? 0 : k.min}
+                                    max={isLog ? 1 : k.max}
+                                    step={isLog ? 0.001 : k.step}
+                                    size="small"
+                                    sx={styles.knobSlider(color, k.key === 'gain')}
+                                />
+                            </MidiMappable>
+                            <Box component="span" sx={styles.knobLabel}>{k.label}</Box>
+                        </Box>
+                    );
+                })}
             </Box>
 
             <Box sx={styles.transportRow}>
-                <IconButton
-                    onClick={playing ? handleStop : handlePlay}
-                    disabled={!loaded}
-                    sx={styles.transportBtn(color, playing)}
-                    size="small"
-                >
-                    {playing ? <StopIcon size={16} /> : <PlayIcon size={16} />}
-                </IconButton>
-                <IconButton
-                    onClick={handleLoopToggle}
-                    sx={styles.loopBtn(color, looping)}
-                    size="small"
-                >
-                    <LoopIcon size={14} />
-                </IconButton>
+                <MidiMappable id={ctrlId('transport')} label={ctrlLabel('Play/Stop')} kind="trigger" onChange={handleTransportToggle}>
+                    <IconButton
+                        onClick={playing ? handleStop : handlePlay}
+                        disabled={!loaded}
+                        sx={styles.transportBtn(color, playing)}
+                        size="small"
+                    >
+                        {playing ? <StopIcon size={16} /> : <PlayIcon size={16} />}
+                    </IconButton>
+                </MidiMappable>
+                <MidiMappable id={ctrlId('loop')} label={ctrlLabel('Loop')} kind="trigger" onChange={handleLoopToggle}>
+                    <IconButton
+                        onClick={handleLoopToggle}
+                        sx={styles.loopBtn(color, looping)}
+                        size="small"
+                    >
+                        <LoopIcon size={14} />
+                    </IconButton>
+                </MidiMappable>
                 <Box sx={styles.meterTrack}>
                     <Box ref={meterRef} sx={styles.meterFill(color)} />
                 </Box>

app/frontend/src/components/PerformancePanel.js

@@ -7,22 +7,39 @@ import {
     Button,
     Alert,
     FormControl,
+    FormControlLabel,
+    Switch,
     Select,
     MenuItem,
     TextField,
     IconButton,
     Tooltip,
     ButtonBase,
+    Menu,
+    ListItemText,
 } from '@mui/material';
 import {
     Play as PlayAllIcon,
     Square as StopAllIcon,
     Trash2 as DeleteIcon,
+    Settings as SettingsIcon,
+    Save as SaveIcon,
+    X as CloseXIcon,
 } from 'lucide-react';
 import api from '../api';
 import PerformanceChannel from './PerformanceChannel';
 import { PerformanceEngine } from '../utils/performanceAudio';
-import { performancePanelStyles as styles } from '../theme';
+import { performancePanelStyles as styles, perfTokens } from '../theme';
+import { MidiProvider, MidiMappable, useMidi, clearMidiConfig } from './MidiContext';
+import MidiConfigMenu from './MidiConfigMenu';
+import {
+    usePerformanceSession,
+    listPresetNames,
+    savePreset,
+    deletePreset,
+    loadPresetIntoSession,
+    clearPerformanceSession,
+} from './usePerformanceSession';
 
 const CHANNEL_COUNT = 4;
 const MASTER_COLOR = '#35C2D4';
@@ -34,6 +51,21 @@ const BPM_MIN = 20;
 const BPM_MAX = 300;
 const BPM_DEFAULT = 120;
 
+
+const LAUNCH_QUANTIZE_OPTIONS = [
+    { value: 0,     label: 'None' },
+    { value: 32,    label: '8 Bars' },
+    { value: 16,    label: '4 Bars' },
+    { value: 8,     label: '2 Bars' },
+    { value: 4,     label: '1 Bar' },
+    { value: 2,     label: '1/2' },
+    { value: 1,     label: '1/4' },
+    { value: 0.5,   label: '1/8' },
+    { value: 0.25,  label: '1/16' },
+    { value: 0.125, label: '1/32' },
+];
+const LAUNCH_Q_DEFAULT = 4;
+
 const dbToGain = (db) => (db <= MASTER_DB_MIN ? 0 : Math.pow(10, db / 20));
 const ampToDb = (amp) => (amp <= 0 ? -Infinity : 20 * Math.log10(amp));
 const formatDb = (db) => {
@@ -42,7 +74,15 @@ const formatDb = (db) => {
     return db.toFixed(1);
 };
 
-export default function PerformancePanel({
+export default function PerformancePanel(props) {
+    return (
+        <MidiProvider>
+            <PerformancePanelInner {...props} />
+        </MidiProvider>
+    );
+}
+
+function PerformancePanelInner({
     selectedModel,
     selectedUnwrappedModel,
     availableModels = [],
@@ -50,32 +90,155 @@ export default function PerformancePanel({
     onSelectModel,
     onSelectUnwrappedModel,
     onRefreshModels,
+    steps = 250,
+    onStepsChange,
+    randomSeed = true,
+    seedValue = '',
+    onRandomSeedChange,
+    onSeedValueChange,
+    onPresetLoaded,
 }) {
+    const { session, updateGlobal, updateChannel } = usePerformanceSession(CHANNEL_COUNT);
+
     const engineRef = useRef(null);
     const meterFillRef = useRef(null);
     const peakHoldRef = useRef({ db: METER_FLOOR_DB, decayedAt: performance.now() });
     const meterRafRef = useRef(null);
     const [engineReady, setEngineReady] = useState(false);
-    const [masterDb, setMasterDb] = useState(MASTER_DB_DEFAULT);
-    const [bpm, setBpm] = useState(BPM_DEFAULT);
-    // Separate "what the field displays" from "what the app commits". Lets
-    // the user type "1" → "11" → "112" without the first keystroke getting
-    // clamped up to BPM_MIN mid-typing (which then produced "201", "211", etc).
-    const [bpmInput, setBpmInput] = useState(String(BPM_DEFAULT));
+    const [masterDb, setMasterDb] = useState(session.masterDb ?? MASTER_DB_DEFAULT);
+    const [bpm, setBpm] = useState(session.bpm ?? BPM_DEFAULT);
+    const [bpmInput, setBpmInput] = useState(String(session.bpm ?? BPM_DEFAULT));
     const bpmInputFocusedRef = useRef(false);
     const [error, setError] = useState(null);
     const [linkAvailable, setLinkAvailable] = useState(false);
-    const [linkEnabled, setLinkEnabled] = useState(false);
+    const [linkEnabled, setLinkEnabled] = useState(session.linkEnabled ?? false);
     const [linkPeers, setLinkPeers] = useState(0);
     const [linkInstalling, setLinkInstalling] = useState(false);
-    // Tracks whether the most recent bpm change came from Link (poll response)
-    // or from the user (typing in the field). Prevents an echo loop where a
-    // Link-driven update gets pushed back to Link as if it were a local edit.
+    const [launchQuantum, setLaunchQuantum] = useState(session.launchQuantum ?? LAUNCH_Q_DEFAULT);
+    const wasPlayingRef = useRef(false);
     const bpmOriginRef = useRef('user');
     const [peakLabelDb, setPeakLabelDb] = useState(METER_FLOOR_DB);
     const [channelStates, setChannelStates] = useState(() =>
         Array.from({ length: CHANNEL_COUNT }, () => ({ loaded: false, playing: false }))
     );
+    const [injectBpm, setInjectBpm] = useState(session.injectBpm ?? true);
+
+    // Restore App-level state (model, steps, seed) once on mount via the setter
+    // props the panel was given. The panel doesn't own those, so this is the
+    // only point at which we push session into App state. Subsequent changes
+    // flow normally through the prop callbacks.
+    const appStateRestoredRef = useRef(false);
+    useEffect(() => {
+        if (appStateRestoredRef.current) return;
+        appStateRestoredRef.current = true;
+        if (session.selectedModel && session.selectedModel !== selectedModel) {
+            onSelectModel?.(session.selectedModel);
+        }
+        if (session.selectedUnwrappedModel && session.selectedUnwrappedModel !== selectedUnwrappedModel) {
+            onSelectUnwrappedModel?.(session.selectedUnwrappedModel);
+        }
+        if (typeof session.steps === 'number' && session.steps !== steps) {
+            onStepsChange?.(session.steps);
+        }
+        if (typeof session.randomSeed === 'boolean' && session.randomSeed !== randomSeed) {
+            onRandomSeedChange?.(session.randomSeed);
+        }
+        if (typeof session.seedValue === 'string' && session.seedValue !== seedValue) {
+            onSeedValueChange?.(session.seedValue);
+        }
+        // Intentionally only run on first mount.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    // Push panel + App-level state into the session whenever any of it changes.
+    useEffect(() => { updateGlobal('bpm', bpm); }, [bpm, updateGlobal]);
+    useEffect(() => { updateGlobal('launchQuantum', launchQuantum); }, [launchQuantum, updateGlobal]);
+    useEffect(() => { updateGlobal('masterDb', masterDb); }, [masterDb, updateGlobal]);
+    useEffect(() => { updateGlobal('injectBpm', injectBpm); }, [injectBpm, updateGlobal]);
+    useEffect(() => { updateGlobal('linkEnabled', linkEnabled); }, [linkEnabled, updateGlobal]);
+    useEffect(() => { updateGlobal('selectedModel', selectedModel || ''); }, [selectedModel, updateGlobal]);
+    useEffect(() => { updateGlobal('selectedUnwrappedModel', selectedUnwrappedModel || ''); }, [selectedUnwrappedModel, updateGlobal]);
+    useEffect(() => { updateGlobal('steps', steps); }, [steps, updateGlobal]);
+    useEffect(() => { updateGlobal('randomSeed', randomSeed); }, [randomSeed, updateGlobal]);
+    useEffect(() => { updateGlobal('seedValue', seedValue); }, [seedValue, updateGlobal]);
+
+    const handleChannelFormChange = useCallback((index, partial) => {
+        updateChannel(index, partial);
+    }, [updateChannel]);
+
+    // ---- Preset menu state ----
+    const [presetMenuAnchor, setPresetMenuAnchor] = useState(null);
+    const [presetNames, setPresetNames] = useState(() => listPresetNames());
+    const [saveAsName, setSaveAsName] = useState('');
+    const [restoreArmed, setRestoreArmed] = useState(false);
+    const restoreArmTimerRef = useRef(null);
+
+    const refreshPresetNames = useCallback(() => {
+        setPresetNames(listPresetNames());
+    }, []);
+
+    const openPresetMenu = (e) => {
+        refreshPresetNames();
+        setSaveAsName('');
+        setRestoreArmed(false);
+        setPresetMenuAnchor(e.currentTarget);
+    };
+    const closePresetMenu = () => {
+        setPresetMenuAnchor(null);
+        setRestoreArmed(false);
+        if (restoreArmTimerRef.current) {
+            clearTimeout(restoreArmTimerRef.current);
+            restoreArmTimerRef.current = null;
+        }
+    };
+
+    const handleRestoreDefaults = () => {
+        if (!restoreArmed) {
+            // First click arms; second click within 3 s commits. Disarms
+            // automatically so the destructive path is never one accidental
+            // click away.
+            setRestoreArmed(true);
+            if (restoreArmTimerRef.current) clearTimeout(restoreArmTimerRef.current);
+            restoreArmTimerRef.current = setTimeout(() => setRestoreArmed(false), 3000);
+            return;
+        }
+        clearPerformanceSession();
+        clearMidiConfig();
+        closePresetMenu();
+        onPresetLoaded?.();
+    };
+
+    const handleSaveAs = () => {
+        const name = saveAsName.trim();
+        if (!name) return;
+        savePreset(name, session);
+        setSaveAsName('');
+        refreshPresetNames();
+    };
+
+    const handleLoadPreset = (name) => {
+        if (!loadPresetIntoSession(name)) return;
+        closePresetMenu();
+        // Force-remount via the App-level reset key. Same pathway as Fresh
+        // Start, just with a different localStorage payload pre-loaded.
+        onPresetLoaded?.();
+    };
+
+    const handleDeletePreset = (name, e) => {
+        e?.stopPropagation();
+        deletePreset(name);
+        refreshPresetNames();
+    };
+
+    const isSmallModel = (() => {
+        if (selectedModel === 'stable-audio-open-small') return true;
+        const model = availableModels.find((m) => m.name === selectedModel);
+        if (model && selectedUnwrappedModel) {
+            const u = model.unwrapped_models?.find((x) => x.path === selectedUnwrappedModel);
+            return u ? (u.size_mb || 0) < 2000 : false;
+        }
+        return false;
+    })();
 
     if (!engineRef.current) {
         engineRef.current = new PerformanceEngine(CHANNEL_COUNT);
@@ -129,9 +292,6 @@ export default function PerformancePanel({
     const handleBpmChange = (event) => {
         const raw = event.target.value;
         setBpmInput(raw);
-        // Only commit the numeric bpm if what the user has typed so far is a
-        // complete, in-range value. Intermediate digits ("1" on the way to
-        // "112") are held in bpmInput without disturbing the committed bpm.
         const parsed = Number(raw);
         if (Number.isFinite(parsed) && parsed >= BPM_MIN && parsed <= BPM_MAX) {
             bpmOriginRef.current = 'user';
@@ -157,13 +317,10 @@ export default function PerformancePanel({
         bpmInputFocusedRef.current = true;
     };
 
-    // Mirror committed bpm back into the field — but only when the user isn't
-    // currently typing, so Link-driven updates don't overwrite a draft.
     useEffect(() => {
         if (!bpmInputFocusedRef.current) setBpmInput(String(bpm));
     }, [bpm]);
 
-    // Probe whether the backend has an Ableton Link binding installed.
     useEffect(() => {
         api.get('/api/link/state')
             .then((r) => {
@@ -173,11 +330,16 @@ export default function PerformancePanel({
             .catch(() => setLinkAvailable(false));
     }, []);
 
-    // Poll Link state while enabled; pull BPM and peer count into local state.
+
     useEffect(() => {
-        if (!linkEnabled) return undefined;
+        if (!linkEnabled) {
+            engineRef.current?.setLinkSnapshot(null);
+            wasPlayingRef.current = false;
+            return undefined;
+        }
         let cancelled = false;
         const poll = async () => {
+            const capturedAt = performance.now();
             try {
                 const r = await api.get('/api/link/state');
                 if (cancelled || !r.data?.enabled) return;
@@ -190,6 +352,22 @@ export default function PerformancePanel({
                     });
                 }
                 setLinkPeers(Number(r.data.num_peers || 0));
+
+                const isPlaying = Boolean(r.data.is_playing);
+                const beat = Number(r.data.beat) || 0;
+                const bpmFloat = Number(r.data.bpm) || 120;
+                engineRef.current?.setLinkSnapshot({
+                    beat,
+                    bpm: bpmFloat,
+                    isPlaying,
+                    capturedAt,
+                });
+                
+                if (wasPlayingRef.current && !isPlaying) {
+                    engineRef.current?.stopAll();
+                    setChannelStates(prev => prev.map(s => ({ ...s, playing: false })));
+                }
+                wasPlayingRef.current = isPlaying;
             } catch {
                 /* transient network blip — next tick will retry */
             }
@@ -199,8 +377,10 @@ export default function PerformancePanel({
         return () => { cancelled = true; clearInterval(timer); };
     }, [linkEnabled]);
 
-    // User-initiated BPM changes are pushed to the Link session. Changes that
-    // originated from a Link poll are suppressed here (see bpmOriginRef).
+    useEffect(() => {
+        engineRef.current?.setLaunchQuantum(launchQuantum);
+    }, [launchQuantum]);
+
     useEffect(() => {
         if (!linkEnabled) return;
         if (bpmOriginRef.current === 'link') {
@@ -222,7 +402,6 @@ export default function PerformancePanel({
             try {
                 await api.post('/api/link/install');
                 setLinkAvailable(true);
-                // Auto-enable after a successful install — the user just asked for Link.
                 await api.post('/api/link/enable');
                 setLinkEnabled(true);
             } catch (err) {
@@ -251,23 +430,72 @@ export default function PerformancePanel({
         }
     }, [linkEnabled, linkAvailable]);
 
-    const handlePlayAll = () => engineRef.current?.playAll(true);
-    const handleStopAll = () => engineRef.current?.stopAll();
+    const handlePlayAll = () => {
+        engineRef.current?.playAll(true);
+        setChannelStates(prev => prev.map(s => (s.loaded ? { ...s, playing: true } : s)));
+    };
+    const handleStopAll = () => {
+        engineRef.current?.stopAll();
+        setChannelStates(prev => prev.map(s => ({ ...s, playing: false })));
+    };
+
+    const applyExternalBpm = useCallback((value) => {
+        const next = Math.max(BPM_MIN, Math.min(BPM_MAX, Math.round(value)));
+        bpmOriginRef.current = 'user';
+        setBpm(next);
+    }, []);
 
-    const generateForChannel = async ({ prompt, duration }) => {
+    const midi = useMidi();
+    const [midiMenuAnchor, setMidiMenuAnchor] = useState(null);
+
+    useEffect(() => {
+        if (!midi?.learnMode) return undefined;
+        const onKey = (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                midi.exitLearnMode();
+            }
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [midi?.learnMode, midi?.exitLearnMode]);
+
+    const generateForChannel = async ({ prompt, duration, alignBars, alignBpm }) => {
         setError(null);
         if (!selectedModel) {
             const msg = 'Pick a model first.';
             setError(msg);
             throw new Error(msg);
         }
+
+        const trimmed = (prompt || '').trim();
+        const hasExplicitBpm = /\b\d{2,3}\s*bpm\b/i.test(trimmed);
+        const finalPrompt = injectBpm && !hasExplicitBpm
+            ? `${trimmed}${trimmed ? ', ' : ''}${Math.round(bpm)} BPM`
+            : trimmed;
+
+        let resolvedSeed;
+        if (randomSeed) {
+            resolvedSeed = Math.floor(Math.random() * 0xffffffff);
+        } else {
+            const parsed = parseInt(seedValue, 10);
+            if (Number.isNaN(parsed) || parsed < 0) {
+                const msg = 'Enter a valid seed (0 or greater) or enable Random.';
+                setError(msg);
+                throw new Error(msg);
+            }
+            resolvedSeed = parsed;
+        }
+
         const requestData = {
-            prompt,
+            prompt: finalPrompt,
             duration,
             cfg_scale: 7.0,
-            seed: Math.floor(Math.random() * 0xffffffff),
+            steps,
+            seed: resolvedSeed,
             model_name: selectedModel,
             ...(selectedUnwrappedModel ? { unwrapped_model_path: selectedUnwrappedModel } : {}),
+            ...(alignBars && alignBpm ? { align_bars: alignBars, align_bpm: alignBpm } : {}),
         };
         const response = await api.post('/api/generate', requestData, { responseType: 'blob' });
         return response.data;
@@ -370,18 +598,30 @@ export default function PerformancePanel({
                                 alignItems: 'center',
                                 justifyContent: 'center',
                                 fontFamily: 'inherit',
-                                fontSize: '0.72rem',
+                                fontSize: perfTokens.fontSize.body,
                                 fontWeight: 600,
                                 px: 1,
                                 minWidth: 46,
-                                height: 26,
+                                height: perfTokens.height.compact,
                                 borderRadius: '2px',
-                                bgcolor: linkEnabled ? '#F5C542' : '#6e6e6e',
+                                // Three states matching Ableton Live's button:
+                                // off → gray, on/no peers → yellow (broadcasting,
+                                // alone), on/peers → teal (sync'd with at least
+                                // one other app).
+                                bgcolor: !linkEnabled
+                                    ? '#6e6e6e'
+                                    : linkPeers > 0
+                                        ? MASTER_COLOR
+                                        : '#F5C542',
                                 color: linkEnabled ? '#000' : '#2a2a2a',
                                 opacity: linkInstalling ? 0.55 : 1,
                                 transition: 'background-color 120ms',
                                 '&:hover': {
-                                    bgcolor: linkEnabled ? '#FFD54F' : '#7d7d7d',
+                                    bgcolor: !linkEnabled
+                                        ? '#7d7d7d'
+                                        : linkPeers > 0
+                                            ? '#4DD0DE'
+                                            : '#FFD54F',
                                 },
                                 '&.Mui-disabled': {
                                     color: linkEnabled ? '#000' : '#2a2a2a',
@@ -390,56 +630,321 @@ export default function PerformancePanel({
                         >
                             {linkInstalling
                                 ? 'installing…'
-                                : `Link${linkEnabled && linkPeers > 0 ? ` · ${linkPeers}` : ''}`}
+                                : linkEnabled && linkPeers > 0
+                                    ? `${linkPeers} Link`
+                                    : 'Link'}
                         </ButtonBase>
                     </span>
                 </Tooltip>
 
-                {/* Tempo — outlined field matching other inputs. The floating-label
-                    notch looked awkward at this width, so the unit label lives
-                    inline as an endAdornment instead. */}
-                <TextField
-                    size="small"
-                    type="number"
-                    value={bpmInput}
-                    onChange={handleBpmChange}
-                    onFocus={handleBpmFocus}
-                    onBlur={handleBpmBlur}
-                    inputProps={{ step: 1, inputMode: 'numeric', 'aria-label': 'Tempo in BPM' }}
-                    InputProps={{
-                        endAdornment: (
+                {/* MIDI learn toggle — same compact rectangle style as Link. */}
+                <Tooltip
+                    title={
+                        !midi?.supported
+                            ? (midi?.permissionError || 'Web MIDI is not available')
+                            : midi.learnMode
+                                ? 'Exit MIDI mode (Esc)'
+                                : 'Enter MIDI mode — click a control then move a hardware knob/button to bind'
+                    }
+                >
+                    <span style={{ display: 'inline-flex', alignItems: 'center' }}>
+                        <ButtonBase
+                            onClick={() => midi?.toggleLearnMode()}
+                            disabled={!midi?.supported}
+                            sx={{
+                                display: 'inline-flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                fontFamily: 'inherit',
+                                fontSize: perfTokens.fontSize.body,
+                                fontWeight: 600,
+                                px: 1,
+                                minWidth: 46,
+                                height: perfTokens.height.compact,
+                                borderRadius: '2px',
+                                bgcolor: midi?.learnMode ? '#F5C542' : '#6e6e6e',
+                                color: midi?.learnMode ? '#000' : '#2a2a2a',
+                                opacity: midi?.supported ? 1 : 0.45,
+                                transition: 'background-color 120ms',
+                                '&:hover': {
+                                    bgcolor: midi?.learnMode ? '#FFD54F' : '#7d7d7d',
+                                },
+                                '&.Mui-disabled': {
+                                    color: '#2a2a2a',
+                                },
+                            }}
+                        >
+                            MIDI
+                        </ButtonBase>
+                    </span>
+                </Tooltip>
+                <Tooltip title="MIDI settings & mappings">
+                    <span style={{ display: 'inline-flex', alignItems: 'center' }}>
+                        <IconButton
+                            size="small"
+                            onClick={(e) => setMidiMenuAnchor(e.currentTarget)}
+                            sx={{ width: perfTokens.height.compact, height: perfTokens.height.compact, color: 'text.secondary' }}
+                        >
+                            <SettingsIcon size={14} />
+                        </IconButton>
+                    </span>
+                </Tooltip>
+                <MidiConfigMenu
+                    anchorEl={midiMenuAnchor}
+                    open={Boolean(midiMenuAnchor)}
+                    onClose={() => setMidiMenuAnchor(null)}
+                />
+
+                <Tooltip title="Save / load presets">
+                    <span style={{ display: 'inline-flex', alignItems: 'center' }}>
+                        <IconButton
+                            size="small"
+                            onClick={openPresetMenu}
+                            sx={{ width: perfTokens.height.compact, height: perfTokens.height.compact, color: 'text.secondary' }}
+                        >
+                            <SaveIcon size={14} />
+                        </IconButton>
+                    </span>
+                </Tooltip>
+                <Menu
+                    anchorEl={presetMenuAnchor}
+                    open={Boolean(presetMenuAnchor)}
+                    onClose={closePresetMenu}
+                    MenuListProps={{ sx: { py: 0 } }}
+                    PaperProps={{
+                        sx: {
+                            minWidth: 240,
+                            borderRadius: 1.5,
+                        },
+                    }}
+                >
+                    {/* SAVE section — type a name and click save (or press Enter) */}
+                    <Box sx={{ px: 1.5, pt: 1.25, pb: 0.5 }}>
+                        <Typography
+                            sx={{
+                                fontSize: perfTokens.fontSize.badge,
+                                letterSpacing: perfTokens.letterSpacing.wide,
+                                fontWeight: 700,
+                                color: 'text.secondary',
+                                textTransform: 'uppercase',
+                            }}
+                        >
+                            Save
+                        </Typography>
+                    </Box>
+                    <Box sx={{ px: 1.5, pb: 1.25, display: 'flex', alignItems: 'center', gap: 0.75 }}>
+                        <TextField
+                            autoFocus
+                            size="small"
+                            placeholder="Preset name"
+                            value={saveAsName}
+                            onChange={(e) => setSaveAsName(e.target.value)}
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter') handleSaveAs();
+                                e.stopPropagation();
+                            }}
+                            sx={{
+                                flex: 1,
+                                '& .MuiOutlinedInput-root': {
+                                    borderRadius: 1.5,
+                                    height: perfTokens.height.compact,
+                                    fontSize: perfTokens.fontSize.body,
+                                },
+                            }}
+                        />
+                        <Button
+                            size="small"
+                            variant="contained"
+                            onClick={handleSaveAs}
+                            disabled={!saveAsName.trim()}
+                            sx={{
+                                height: perfTokens.height.compact,
+                                fontSize: perfTokens.fontSize.body,
+                                fontWeight: 600,
+                                letterSpacing: perfTokens.letterSpacing.wide,
+                                borderRadius: 1.5,
+                                minWidth: 56,
+                                px: 1.25,
+                            }}
+                        >
+                            Save
+                        </Button>
+                    </Box>
+                    {saveAsName.trim() && presetNames.includes(saveAsName.trim()) && (
+                        <Box sx={{ px: 1.5, pb: 0.75 }}>
                             <Typography
-                                component="span"
-                                sx={{
-                                    fontSize: '0.62rem',
-                                    letterSpacing: '0.08em',
-                                    color: 'text.disabled',
-                                    pl: 0.5,
-                                    userSelect: 'none',
-                                }}
+                                variant="caption"
+                                color="warning.main"
+                                sx={{ fontSize: perfTokens.fontSize.small }}
                             >
-                                BPM
+                                Will overwrite existing preset.
                             </Typography>
-                        ),
-                    }}
-                    sx={{
-                        width: 96,
-                        '& .MuiOutlinedInput-root': { borderRadius: 1.5, pr: 1 },
-                        '& input': {
-                            textAlign: 'right',
-                            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
-                            fontVariantNumeric: 'tabular-nums',
-                            pr: 0,
-                        },
-                        '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
-                            WebkitAppearance: 'none',
-                            margin: 0,
-                        },
-                        '& input[type=number]': { MozAppearance: 'textfield' },
-                    }}
-                />
+                        </Box>
+                    )}
+
+                    <Box sx={{ borderTop: '1px solid', borderColor: 'divider' }} />
+
+                    {/* LOAD section — list of saved presets */}
+                    <Box sx={{ px: 1.5, pt: 1.25, pb: 0.5 }}>
+                        <Typography
+                            sx={{
+                                fontSize: perfTokens.fontSize.badge,
+                                letterSpacing: perfTokens.letterSpacing.wide,
+                                fontWeight: 700,
+                                color: 'text.secondary',
+                                textTransform: 'uppercase',
+                            }}
+                        >
+                            Load
+                        </Typography>
+                    </Box>
+                    {presetNames.length === 0 ? (
+                        <Box sx={{ px: 1.5, pb: 1.25 }}>
+                            <Typography
+                                variant="caption"
+                                color="text.disabled"
+                                sx={{ fontSize: perfTokens.fontSize.small }}
+                            >
+                                No presets saved yet.
+                            </Typography>
+                        </Box>
+                    ) : (
+                        <Box sx={{ pb: 0.5 }}>
+                            {presetNames.map((name) => (
+                                <MenuItem
+                                    key={name}
+                                    onClick={() => handleLoadPreset(name)}
+                                    sx={{
+                                        display: 'flex',
+                                        justifyContent: 'space-between',
+                                        gap: 1,
+                                        fontSize: perfTokens.fontSize.body,
+                                        fontWeight: 600,
+                                        letterSpacing: perfTokens.letterSpacing.wide,
+                                    }}
+                                >
+                                    <ListItemText primary={name} primaryTypographyProps={{ sx: { fontSize: perfTokens.fontSize.body } }} />
+                                    <Tooltip title="Delete preset">
+                                        <IconButton
+                                            size="small"
+                                            onClick={(e) => handleDeletePreset(name, e)}
+                                            sx={{ ml: 1, width: perfTokens.height.sub, height: perfTokens.height.sub }}
+                                        >
+                                            <CloseXIcon size={12} />
+                                        </IconButton>
+                                    </Tooltip>
+                                </MenuItem>
+                            ))}
+                        </Box>
+                    )}
+
+                    <Box sx={{ borderTop: '1px solid', borderColor: 'divider' }} />
+
+                    {/* Destructive: wipes session + MIDI mappings. Two-click arm
+                        prevents accidental clicks; the menu auto-disarms after 3 s. */}
+                    <Tooltip
+                        title={restoreArmed
+                            ? 'Click again within 3s to confirm — this clears all panel settings AND MIDI mappings'
+                            : 'Reset panel settings and clear MIDI mappings'}
+                    >
+                        <MenuItem
+                            onClick={handleRestoreDefaults}
+                            sx={{
+                                fontSize: perfTokens.fontSize.body,
+                                fontWeight: 600,
+                                letterSpacing: perfTokens.letterSpacing.wide,
+                                color: restoreArmed ? 'error.main' : 'text.secondary',
+                            }}
+                        >
+                            <ListItemText
+                                primary={restoreArmed ? 'Click again to confirm' : 'Restore defaults'}
+                                primaryTypographyProps={{ sx: { fontSize: perfTokens.fontSize.body } }}
+                            />
+                        </MenuItem>
+                    </Tooltip>
+                </Menu>
+
+                <Tooltip placement="right" title="Launch quantization — match Live's">
+                    <FormControl
+                        size="small"
+                        sx={{
+                            minWidth: 92,
+                            '& .MuiOutlinedInput-root': { borderRadius: 1.5, height: perfTokens.height.compact },
+                            '& .MuiSelect-select': {
+                                py: 0,
+                                fontSize: perfTokens.fontSize.body,
+                                fontWeight: 600,
+                                letterSpacing: perfTokens.letterSpacing.wide,
+                            },
+                        }}
+                    >
+                        <Select
+                            value={launchQuantum}
+                            onChange={(e) => setLaunchQuantum(Number(e.target.value))}
+                            renderValue={(val) => {
+                                const opt = LAUNCH_QUANTIZE_OPTIONS.find((o) => o.value === val);
+                                return `Q · ${opt?.label ?? 'None'}`;
+                            }}
+                        >
+                            {LAUNCH_QUANTIZE_OPTIONS.map((opt) => (
+                                <MenuItem key={opt.value} value={opt.value}>
+                                    <Typography variant="body2">{opt.label}</Typography>
+                                </MenuItem>
+                            ))}
+                        </Select>
+                    </FormControl>
+                </Tooltip>
+
+                <MidiMappable
+                    id="master.bpm"
+                    label="Tempo (BPM)"
+                    kind="continuous"
+                    min={BPM_MIN}
+                    max={BPM_MAX}
+                    value={bpm}
+                    onChange={applyExternalBpm}
+                >
+                    <TextField
+                        size="small"
+                        type="number"
+                        value={bpmInput}
+                        onChange={handleBpmChange}
+                        onFocus={handleBpmFocus}
+                        onBlur={handleBpmBlur}
+                        inputProps={{ step: 1, inputMode: 'numeric', 'aria-label': 'Tempo in BPM' }}
+                        InputProps={{
+                            endAdornment: (
+                                <Typography
+                                    component="span"
+                                    sx={{
+                                        fontSize: perfTokens.fontSize.small,
+                                        letterSpacing: perfTokens.letterSpacing.wide,
+                                        color: 'text.disabled',
+                                        pl: 0.5,
+                                        userSelect: 'none',
+                                    }}
+                                >
+                                    BPM
+                                </Typography>
+                            ),
+                        }}
+                        sx={{
+                            width: 96,
+                            '& .MuiOutlinedInput-root': { borderRadius: 1.5, pr: 1 },
+                            '& input': {
+                                textAlign: 'right',
+                                fontVariantNumeric: 'tabular-nums',
+                                pr: 0,
+                            },
+                            '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
+                                WebkitAppearance: 'none',
+                                margin: 0,
+                            },
+                            '& input[type=number]': { MozAppearance: 'textfield' },
+                        }}
+                    />
+                </MidiMappable>
 
-                {/* Model picker — half the old width */}
                 <FormControl size="small" sx={{
                     flex: 1,
                     minWidth: 110,
@@ -515,7 +1020,7 @@ export default function PerformancePanel({
                     </Select>
                 </FormControl>
 
-                {/* Checkpoint picker — also halved */}
+
                 {unwrappedModels.length > 0 && (
                     <FormControl size="small" sx={{
                         flex: 1,
@@ -548,27 +1053,30 @@ export default function PerformancePanel({
                     </FormControl>
                 )}
 
-                {/* Transport */}
-                <Button
-                    size="small"
-                    variant="outlined"
-                    startIcon={<PlayAllIcon size={14} />}
-                    onClick={handlePlayAll}
-                    disabled={!anyLoaded}
-                    sx={styles.masterBtn(MASTER_COLOR, 'play')}
-                >
-                    Play All
-                </Button>
-                <Button
-                    size="small"
-                    variant="outlined"
-                    startIcon={<StopAllIcon size={14} />}
-                    onClick={handleStopAll}
-                    disabled={!anyPlaying}
-                    sx={styles.masterBtn(MASTER_COLOR, 'stop')}
-                >
-                    Stop All
-                </Button>
+                <MidiMappable id="master.playAll" label="Play All" kind="trigger" onChange={handlePlayAll}>
+                    <Button
+                        size="small"
+                        variant="outlined"
+                        startIcon={<PlayAllIcon size={14} />}
+                        onClick={handlePlayAll}
+                        disabled={!anyLoaded}
+                        sx={styles.masterBtn(MASTER_COLOR, 'play')}
+                    >
+                        Play All
+                    </Button>
+                </MidiMappable>
+                <MidiMappable id="master.stopAll" label="Stop All" kind="trigger" onChange={handleStopAll}>
+                    <Button
+                        size="small"
+                        variant="outlined"
+                        startIcon={<StopAllIcon size={14} />}
+                        onClick={handleStopAll}
+                        disabled={!anyPlaying}
+                        sx={styles.masterBtn(MASTER_COLOR, 'stop')}
+                    >
+                        Stop All
+                    </Button>
+                </MidiMappable>
             </Paper>
 
             {error && (
@@ -584,10 +1092,14 @@ export default function PerformancePanel({
                             key={i}
                             index={i}
                             strip={strip}
+                            engine={engineRef.current}
+                            playing={channelStates[i]?.playing || false}
                             onGenerate={generateForChannel}
                             canGenerate={Boolean(selectedModel)}
                             onMuteSoloChange={handleMuteSoloChange}
                             onStateChange={handleChannelStateChange}
+                            onFormStateChange={handleChannelFormChange}
+                            initialFormState={session.channels[i]}
                             maxDuration={maxDuration}
                             bpm={bpm}
                         />
@@ -604,15 +1116,26 @@ export default function PerformancePanel({
                             <Box ref={meterFillRef} sx={styles.masterMeterFill(MASTER_COLOR)} />
                             <Box sx={styles.masterMeterSegments} />
                         </Box>
-                        <Slider
-                            orientation="vertical"
-                            value={masterDb}
-                            onChange={handleMasterChange}
+                        <MidiMappable
+                            id="master.fader"
+                            label="Master Fader"
+                            kind="continuous"
                             min={MASTER_DB_MIN}
                             max={MASTER_DB_MAX}
-                            step={0.1}
-                            sx={styles.masterFader(MASTER_COLOR)}
-                        />
+                            value={masterDb}
+                            onChange={(v) => handleMasterChange(null, v)}
+                            sx={{ flex: 1, alignSelf: 'stretch' }}
+                        >
+                            <Slider
+                                orientation="vertical"
+                                value={masterDb}
+                                onChange={handleMasterChange}
+                                min={MASTER_DB_MIN}
+                                max={MASTER_DB_MAX}
+                                step={0.1}
+                                sx={styles.masterFader(MASTER_COLOR)}
+                            />
+                        </MidiMappable>
                     </Box>
 
                     <Box sx={styles.masterReadouts}>
@@ -625,6 +1148,106 @@ export default function PerformancePanel({
                     </Box>
                 </Box>
             </Box>
+
+            <Paper sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 2.5,
+                px: 1.5,
+                py: 0.75,
+                mt: 1,
+                borderRadius: 2,
+                border: '1px solid',
+                borderColor: 'divider',
+                background: 'linear-gradient(135deg, rgba(53, 194, 212, 0.04) 0%, rgba(159, 138, 230, 0.03) 100%)',
+                flexWrap: { xs: 'wrap', md: 'nowrap' },
+            }}>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <Typography variant="caption" color="textSecondary" sx={{ letterSpacing: perfTokens.letterSpacing.wide }}>
+                        STEPS
+                    </Typography>
+                    <Tooltip
+                        placement="right"
+                        title={
+                            isSmallModel
+                                ? 'Locked at 8 steps for the distilled small model'
+                                : 'Diffusion steps per generation (more = higher quality, slower)'
+                        }
+                    >
+                        <FormControl
+                            size="small"
+                            sx={{ minWidth: 96, '& .MuiOutlinedInput-root': { borderRadius: 1.5 } }}
+                        >
+                            <Select
+                                value={isSmallModel ? 8 : steps}
+                                onChange={(e) => onStepsChange?.(Number(e.target.value))}
+                                disabled={isSmallModel}
+                                renderValue={(value) => `${value} steps`}
+                            >
+                                {isSmallModel && (
+                                    <MenuItem value={8}>
+                                        <Typography variant="body2">8 (locked)</Typography>
+                                    </MenuItem>
+                                )}
+                                {[50, 100, 150, 200, 250].map((n) => (
+                                    <MenuItem key={n} value={n}>
+                                        <Typography variant="body2">{n} steps</Typography>
+                                    </MenuItem>
+                                ))}
+                            </Select>
+                        </FormControl>
+                    </Tooltip>
+                </Box>
+
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <Typography variant="caption" color="textSecondary" sx={{ letterSpacing: perfTokens.letterSpacing.wide }}>
+                        SEED
+                    </Typography>
+                    <FormControlLabel
+                        sx={{ mr: 0 }}
+                        control={
+                            <Switch
+                                size="small"
+                                checked={randomSeed}
+                                onChange={(e) => onRandomSeedChange?.(e.target.checked)}
+                            />
+                        }
+                        label={<Typography variant="caption">Random</Typography>}
+                    />
+                    <TextField
+                        size="small"
+                        type="number"
+                        placeholder="e.g. 42"
+                        value={seedValue}
+                        onChange={(e) => onSeedValueChange?.(e.target.value)}
+                        disabled={randomSeed}
+                        inputProps={{ min: 0, max: 4294967295, step: 1 }}
+                        sx={{
+                            width: 130,
+                            '& .MuiOutlinedInput-root': { borderRadius: 1.5 },
+                            '& input': {
+                                fontVariantNumeric: 'tabular-nums',
+                            },
+                        }}
+                    />
+                </Box>
+
+                <Tooltip
+                    placement="right"
+                    title="When on, the master BPM is injected to each prompt automatically (turn off if doing free-tempo or multi-tempo prompts)."
+                >
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                        <Typography variant="caption" color="textSecondary" sx={{ letterSpacing: perfTokens.letterSpacing.wide }}>
+                            AUTO BPM
+                        </Typography>
+                        <Switch
+                            size="small"
+                            checked={injectBpm}
+                            onChange={(e) => setInjectBpm(e.target.checked)}
+                        />
+                    </Box>
+                </Tooltip>
+            </Paper>
         </Box>
     );
 }

app/frontend/src/components/TabPanel.js

@@ -2,16 +2,37 @@ import React from 'react';
 import { Box } from '@mui/material';
 import { tabPanelStyles } from '../theme';
 
-export default function TabPanel({ children, value, index, ...other }) {
+export default function TabPanel({ children, value, index, keepMounted = false, ...other }) {
+    const isActive = value === index;
+    // keepMounted: render children unconditionally and toggle visibility via CSS,
+    // so component state, audio nodes, and decoded buffers survive tab switches.
+    // Use sparingly — by default we still mount/unmount so inactive tabs cost
+    // nothing at idle.
+    if (keepMounted) {
+        return (
+            <div
+                role="tabpanel"
+                hidden={!isActive}
+                id={`simple-tabpanel-${index}`}
+                aria-labelledby={`simple-tab-${index}`}
+                {...other}
+            >
+                <Box sx={{ ...tabPanelStyles.root, display: isActive ? undefined : 'none' }}>
+                    {children}
+                </Box>
+            </div>
+        );
+    }
+
     return (
         <div
             role="tabpanel"
-            hidden={value !== index}
+            hidden={!isActive}
             id={`simple-tabpanel-${index}`}
             aria-labelledby={`simple-tab-${index}`}
             {...other}
         >
-            {value === index && (
+            {isActive && (
                 <Box sx={tabPanelStyles.root}>
                     {children}
                 </Box>

app/frontend/src/components/WelcomePage.js

@@ -67,7 +67,7 @@ export default function WelcomePage({ open, onClose }) {
                             variant="body2"
                             sx={welcomePageStyles.version}
                         >
-                            Version 0.0.2
+                            Version 0.1.0
                         </Typography>
                         <Button
                             variant="contained"

app/frontend/src/components/usePerformanceSession.js

@@ -0,0 +1,147 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export const PERFORMANCE_SESSION_STORAGE_KEY = 'fragmenta.performance.session.v1';
+
+const STORAGE_KEY = PERFORMANCE_SESSION_STORAGE_KEY;
+
+export function clearPerformanceSession() {
+    try { localStorage.removeItem(STORAGE_KEY); }
+    catch { /* non-fatal */ }
+}
+
+const PRESETS_STORAGE_KEY = 'fragmenta.performance.presets.v1';
+
+function readPresetBag() {
+    try {
+        const raw = localStorage.getItem(PRESETS_STORAGE_KEY);
+        if (!raw) return {};
+        const parsed = JSON.parse(raw);
+        return parsed && typeof parsed === 'object' ? parsed : {};
+    } catch {
+        return {};
+    }
+}
+
+function writePresetBag(bag) {
+    try { localStorage.setItem(PRESETS_STORAGE_KEY, JSON.stringify(bag)); }
+    catch { /* quota — non-fatal */ }
+}
+
+export function listPresetNames() {
+    return Object.keys(readPresetBag()).sort((a, b) => a.localeCompare(b));
+}
+
+export function savePreset(name, sessionData) {
+    const trimmed = (name || '').trim();
+    if (!trimmed) return false;
+    const bag = readPresetBag();
+    bag[trimmed] = sessionData;
+    writePresetBag(bag);
+    return true;
+}
+
+export function deletePreset(name) {
+    const bag = readPresetBag();
+    if (!(name in bag)) return false;
+    delete bag[name];
+    writePresetBag(bag);
+    return true;
+}
+
+// Replace the live session storage with a preset's snapshot. Caller is
+// expected to force-remount the panel afterward so its useState mirrors
+// pick up the new shape; localStorage alone won't reset mounted state.
+export function loadPresetIntoSession(name) {
+    const bag = readPresetBag();
+    const preset = bag[name];
+    if (!preset) return false;
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(preset));
+        return true;
+    } catch {
+        return false;
+    }
+}
+
+const CHANNEL_DEFAULT = {
+    prompt: '',
+    duration: 8,
+    durationMode: 'seconds',
+    bars: 4,
+    looping: true,
+    muted: false,
+    soloed: false,
+    knobs: { gain: -6, pan: 0, filter: 18000, delay: 0, reverb: 0 },
+};
+
+function defaultSession(channelCount) {
+    return {
+        bpm: 120,
+        launchQuantum: 4,
+        masterDb: 0,
+        injectBpm: true,
+        linkEnabled: false,
+        selectedModel: '',
+        selectedUnwrappedModel: '',
+        steps: 250,
+        randomSeed: true,
+        seedValue: '',
+        channels: Array.from({ length: channelCount }, () => ({
+            ...CHANNEL_DEFAULT,
+            knobs: { ...CHANNEL_DEFAULT.knobs },
+        })),
+    };
+}
+
+function loadSession(channelCount) {
+    const fallback = defaultSession(channelCount);
+    try {
+        const raw = localStorage.getItem(STORAGE_KEY);
+        if (!raw) return fallback;
+        const parsed = JSON.parse(raw);
+        // Merge against defaults so older saves don't crash on missing fields.
+        // Length shifts (channel count change between releases) are absorbed
+        // by always producing exactly `channelCount` channels.
+        const channels = Array.from({ length: channelCount }, (_, i) => ({
+            ...CHANNEL_DEFAULT,
+            ...(parsed.channels?.[i] || {}),
+            knobs: { ...CHANNEL_DEFAULT.knobs, ...(parsed.channels?.[i]?.knobs || {}) },
+        }));
+        return { ...fallback, ...parsed, channels };
+    } catch {
+        return fallback;
+    }
+}
+
+export function usePerformanceSession(channelCount = 4) {
+    const [session, setSession] = useState(() => loadSession(channelCount));
+    const persistTimerRef = useRef(null);
+
+    // Knobs and sliders fire many times per second; debounce writes so we don't
+    // hammer localStorage. Last-write-wins is fine for session continuity.
+    useEffect(() => {
+        if (persistTimerRef.current) clearTimeout(persistTimerRef.current);
+        persistTimerRef.current = setTimeout(() => {
+            try {
+                localStorage.setItem(STORAGE_KEY, JSON.stringify(session));
+            } catch { /* quota or serialization — non-fatal */ }
+        }, 250);
+        return () => {
+            if (persistTimerRef.current) clearTimeout(persistTimerRef.current);
+        };
+    }, [session]);
+
+    const updateGlobal = useCallback((key, value) => {
+        setSession(prev => (prev[key] === value ? prev : { ...prev, [key]: value }));
+    }, []);
+
+    const updateChannel = useCallback((index, partial) => {
+        setSession(prev => {
+            const channels = prev.channels.slice();
+            channels[index] = { ...channels[index], ...partial };
+            return { ...prev, channels };
+        });
+    }, []);
+
+    return { session, updateGlobal, updateChannel };
+}

app/frontend/src/theme.js

@@ -2119,6 +2119,28 @@ export const lossChartStyles = {
     },
 };
 
+// Shared visual tokens for the Performance page (panel, channels, MIDI menu).
+// One source of truth for the size/spacing/height scale so similar elements
+// match. The previous code carried 9+ distinct font sizes and 5+ letter
+// spacings across these surfaces; anything new should pick from this set.
+export const perfTokens = {
+    fontSize: {
+        knob: '0.58rem',   // knob labels, pan label, master peak readout
+        small: '0.66rem',  // small labels: BPM unit, mute/solo, durationLabel, footer notes
+        body: '0.72rem',   // primary text: buttons, dropdowns, prompt field, mapping rows
+        badge: '0.78rem',  // section badges (MASTER, channel numbers)
+    },
+    letterSpacing: {
+        wide: '0.08em',    // uppercase labels and badges
+    },
+    height: {
+        compact: 26,       // primary compact controls (Link, MIDI, Q, BPM, transport, generate)
+        sub: 22,           // small subordinate square buttons (mute, solo, loop)
+    },
+    // Sharp 2px radius is the deliberate Ableton-style accent on Link/MIDI.
+    // Everything else lives on the MUI scale via shape.borderRadius (= 1.5).
+};
+
 export const performancePanelStyles = {
     root: {
         display: 'flex',
@@ -2157,7 +2179,7 @@ export const performancePanelStyles = {
     },
     subtitle: {
         color: 'text.secondary',
-        fontSize: '0.72rem',
+        fontSize: perfTokens.fontSize.body,
     },
     headerPickers: {
         display: 'flex',
@@ -2221,10 +2243,10 @@ export const performancePanelStyles = {
         color,
     }),
     masterBadge: (color) => ({
-        fontSize: '0.72rem',
+        fontSize: perfTokens.fontSize.badge,
         fontWeight: 600,
         color,
-        letterSpacing: '0.14em',
+        letterSpacing: perfTokens.letterSpacing.wide,
         px: 0.75,
         py: 0.25,
         borderRadius: 1,
@@ -2283,13 +2305,13 @@ export const performancePanelStyles = {
     masterValue: {
         textAlign: 'center',
         color: 'primary.main',
-        fontSize: '0.68rem',
+        fontSize: perfTokens.fontSize.small,
         letterSpacing: '0.04em',
     },
     masterPeakValue: {
         textAlign: 'center',
         color: 'text.disabled',
-        fontSize: '0.58rem',
+        fontSize: perfTokens.fontSize.knob,
         letterSpacing: '0.04em',
     },
     masterTransport: {
@@ -2303,7 +2325,7 @@ export const performancePanelStyles = {
     masterBtn: (color, variant) => (theme) => ({
         textTransform: 'none',
         borderRadius: 1.5,
-        fontSize: '0.72rem',
+        fontSize: perfTokens.fontSize.body,
         py: 0.5,
         ...(variant === 'play'
             ? {
@@ -2348,10 +2370,10 @@ export const performanceChannelStyles = {
     }),
     channelBadge: (color) => ({
         fontFamily: 'inherit',
-        fontSize: '0.78rem',
+        fontSize: perfTokens.fontSize.badge,
         fontWeight: 600,
         color,
-        letterSpacing: '0.08em',
+        letterSpacing: perfTokens.letterSpacing.wide,
         px: 0.75,
         py: 0.25,
         borderRadius: 1,
@@ -2363,9 +2385,9 @@ export const performanceChannelStyles = {
         gap: 0.5,
     },
     muteBtn: (active) => ({
-        width: 22,
-        height: 22,
-        fontSize: '0.65rem',
+        width: perfTokens.height.sub,
+        height: perfTokens.height.sub,
+        fontSize: perfTokens.fontSize.small,
         fontWeight: 700,
         borderRadius: 1,
         color: active ? '#fff' : 'text.secondary',
@@ -2377,9 +2399,9 @@ export const performanceChannelStyles = {
         },
     }),
     soloBtn: (active) => ({
-        width: 22,
-        height: 22,
-        fontSize: '0.65rem',
+        width: perfTokens.height.sub,
+        height: perfTokens.height.sub,
+        fontSize: perfTokens.fontSize.small,
         fontWeight: 700,
         borderRadius: 1,
         color: active ? '#0c1018' : 'text.secondary',
@@ -2397,7 +2419,7 @@ export const performanceChannelStyles = {
     },
     promptField: (theme) => ({
         '& .MuiOutlinedInput-root': {
-            fontSize: '0.75rem',
+            fontSize: perfTokens.fontSize.body,
             backgroundColor: theme.palette.mode === 'dark' ? 'rgba(9, 12, 18, 0.5)' : 'rgba(0, 0, 0, 0.04)',
             borderRadius: 1.5,
             '& textarea': { lineHeight: 1.3 },
@@ -2411,7 +2433,7 @@ export const performanceChannelStyles = {
     },
     durationLabel: {
         fontFamily: 'inherit',
-        fontSize: '0.65rem',
+        fontSize: perfTokens.fontSize.small,
         color: 'text.secondary',
         minWidth: 22,
     },
@@ -2423,8 +2445,8 @@ export const performanceChannelStyles = {
     }),
     generateBtn: (color) => (theme) => ({
         alignSelf: 'flex-end',
-        width: 28,
-        height: 28,
+        width: perfTokens.height.compact,
+        height: perfTokens.height.compact,
         borderRadius: 1.5,
         color,
         border: `1px solid ${color}55`,
@@ -2449,8 +2471,8 @@ export const performanceChannelStyles = {
         justifyContent: 'center',
         color: 'text.disabled',
         fontFamily: 'inherit',
-        fontSize: '0.65rem',
-        letterSpacing: '0.1em',
+        fontSize: perfTokens.fontSize.small,
+        letterSpacing: perfTokens.letterSpacing.wide,
         pointerEvents: 'none',
     },
     knobsGrid: {
@@ -2466,19 +2488,21 @@ export const performanceChannelStyles = {
         gap: 0.25,
         height: 70,
     },
-    knobSlider: (color) => ({
+    knobSlider: (color, fat = false) => ({
         height: 50,
         color,
-        '& .MuiSlider-thumb': { width: 10, height: 10 },
-        '& .MuiSlider-rail': { opacity: 0.3, width: 2 },
-        '& .MuiSlider-track': { width: 2, border: 'none' },
+        // Gain is visually fattened (wider track + bigger thumb) so it stands
+        // out from LPF/DLY/REV — it's the dBFS-scaled "fader" of the four.
+        '& .MuiSlider-thumb': { width: fat ? 12 : 10, height: fat ? 12 : 10 },
+        '& .MuiSlider-rail': { opacity: 0.3, width: fat ? 4 : 2 },
+        '& .MuiSlider-track': { width: fat ? 4 : 2, border: 'none' },
     }),
     knobLabel: {
         display: 'block',
         fontFamily: 'inherit',
-        fontSize: '0.53rem',
+        fontSize: perfTokens.fontSize.knob,
         color: 'text.secondary',
-        letterSpacing: '0.06em',
+        letterSpacing: perfTokens.letterSpacing.wide,
         mt: 0.75,
     },
     transportRow: {
@@ -2491,8 +2515,8 @@ export const performanceChannelStyles = {
         borderTopColor: 'divider',
     },
     transportBtn: (color, playing) => (theme) => ({
-        width: 26,
-        height: 26,
+        width: perfTokens.height.compact,
+        height: perfTokens.height.compact,
         borderRadius: 1.5,
         color: playing ? '#0c1018' : color,
         backgroundColor: playing ? color : `${color}14`,
@@ -2501,8 +2525,8 @@ export const performanceChannelStyles = {
         '&.Mui-disabled': theme.palette.mode === 'dark' ? { opacity: 0.3 } : {},
     }),
     loopBtn: (color, active) => ({
-        width: 22,
-        height: 22,
+        width: perfTokens.height.sub,
+        height: perfTokens.height.sub,
         borderRadius: 1,
         color: active ? color : 'text.secondary',
         backgroundColor: active ? `${color}1F` : 'transparent',

app/frontend/src/utils/performanceAudio.js

@@ -1,6 +1,3 @@
-// Default per-channel gain = -6 dBFS. Keeps the summed mix from clipping the
-// master limiter at four channels playing together, while leaving headroom to
-// push a single channel hot.
 export const DEFAULT_CHANNEL_GAIN = Math.pow(10, -6 / 20); // ≈ 0.5012
 
 let sharedCtx = null;
@@ -15,8 +12,6 @@ export function getAudioContext() {
     return sharedCtx;
 }
 
-// Real impulse responses served from /public/ir/. `id` is the stable key used
-// by the UI / setChannelImpulseResponse(); `file` is the actual filename.
 export const IMPULSE_RESPONSES = [
     { id: 'hall',   name: 'Opera Hall',    file: 'Scala Milan Opera Hall.wav' },
     { id: 'room',   name: 'Drum Room',     file: 'Nice Drum Room.wav' },
@@ -53,9 +48,6 @@ export function getImpulseResponseBuffer(id) {
     return irBufferCache.get(id);
 }
 
-// Synthetic hall IR: early reflections + diffuse noise tail with progressive
-// high-frequency damping and per-channel decorrelation. Swap this out by
-// dropping a real IR WAV into /public/ir/ and fetching it into a ConvolverNode.
 const EARLY_REFLECTIONS_MS = [
     [7, 0.55], [13, -0.42], [19, 0.36], [28, -0.30],
     [41, 0.26], [56, 0.22], [73, -0.18], [91, 0.15],
@@ -79,15 +71,12 @@ function getImpulse(ctx, duration = 2.8, decaySeconds = 1.6, damping = 0.55) {
             if (idx < length) data[idx] += amp * 0.8;
         }
 
-        // Diffuse tail: white noise gated by exp decay, through a 1-pole LP
-        // whose cutoff shrinks over time so high freqs die first (natural air).
         let lpState = 0;
         const predelaySec = 0.012;
         for (let i = 0; i < length; i++) {
             const t = i / sr;
             if (t < predelaySec) continue;
             const env = Math.exp(-(t - predelaySec) / decaySeconds);
-            // Damping grows with time: alpha goes from (1 - damping*0.4) → (1 - damping*0.95)
             const progression = Math.min(1, (t - predelaySec) / decaySeconds);
             const alpha = 1 - damping * (0.4 + 0.55 * progression);
             const noise = (Math.random() * 2 - 1) * env;
@@ -127,9 +116,6 @@ export class ChannelStrip {
 
         this.dryGain = ctx.createGain();
         this.dryGain.gain.value = 1.0;
-
-        // Delay time is tempo-locked to an 8th note. Default seed = 120 BPM
-        // (0.25 s); PerformanceEngine overwrites this once the panel sets BPM.
         this.delayNode = ctx.createDelay(2.0);
         this.delayNode.delayTime.value = 0.25;
         this.delayFeedback = ctx.createGain();
@@ -146,8 +132,6 @@ export class ChannelStrip {
         this.channelGain.gain.value = DEFAULT_CHANNEL_GAIN;
         this._lastUserGain = DEFAULT_CHANNEL_GAIN;
 
-        // Glue compressor on the post-mix channel bus. Gentle defaults —
-        // evens out transients without obvious pumping.
         this.compressor = ctx.createDynamicsCompressor();
         this.compressor.threshold.value = -16;
         this.compressor.knee.value = 8;
@@ -187,7 +171,7 @@ export class ChannelStrip {
         this.buffer = await this.ctx.decodeAudioData(arrayBuffer);
     }
 
-    play(loop = this.isLooping) {
+    play(loop = this.isLooping, startTime = 0) {
         if (!this.buffer) return;
         this.stop();
         this.isLooping = loop;
@@ -201,7 +185,8 @@ export class ChannelStrip {
                 this.isPlaying = false;
             }
         };
-        src.start(0);
+
+        src.start(Math.max(0, startTime));
         this.source = src;
         this.isPlaying = true;
     }
@@ -224,8 +209,6 @@ export class ChannelStrip {
         if (buffer) this.reverbNode.buffer = buffer;
     }
     setDelayTimeForBpm(bpm) {
-        // 8th note in seconds = 60 / bpm / 2 = 30 / bpm.
-        // Glide over ~40 ms so BPM edits slide rather than click.
         const safeBpm = Math.max(1, bpm);
         const eighthSec = Math.min(30 / safeBpm, 2.0);
         this.delayNode.delayTime.setTargetAtTime(
@@ -310,11 +293,6 @@ export class PerformanceEngine {
         this.ctx = ctx;
         this.masterBus = ctx.createGain();
         this.masterBus.gain.value = 0.9;
-
-        // Master limiter: brick-wall style defaults to catch sums that push
-        // past 0 dBFS when many channels play at once. DynamicsCompressor
-        // with a high ratio + fast attack is the best built-in approximation
-        // of a look-ahead limiter that Web Audio offers.
         this.masterLimiter = ctx.createDynamicsCompressor();
         this.masterLimiter.threshold.value = -1.0;
         this.masterLimiter.knee.value = 0;
@@ -330,9 +308,20 @@ export class PerformanceEngine {
         this.masterAnalyser.connect(ctx.destination);
         this.channels = Array.from({ length: channelCount }, () => new ChannelStrip(this.masterBus));
 
-        // Load real IRs asynchronously and swap them in when ready. Until
-        // they arrive (or if loading fails), channels keep using the
-        // synthetic fallback set in ChannelStrip's constructor.
+
+        this.linkSnapshot = null;
+        this.launchQuantum = 0;
+
+        // Internal transport: an always-running beat clock anchored in audio
+        // time. Used for launch quantization when Ableton Link isn't active,
+        // so 'Q' still lines launches up to the bar even with no peer.
+        // BPM changes rebase the anchor (see setBpm) so phase is preserved.
+        this.internalTransport = {
+            originAudioTime: ctx.currentTime,
+            anchorBeat: 0,
+            bpm: 120,
+        };
+
         this.currentImpulseId = DEFAULT_IR_ID;
         loadImpulseResponses(ctx).then(() => {
             const buf = getImpulseResponseBuffer(this.currentImpulseId);
@@ -356,9 +345,79 @@ export class PerformanceEngine {
     }
 
     setBpm(bpm) {
+        const safe = Number(bpm);
+        if (Number.isFinite(safe) && safe > 0) {
+            // Rebase the internal transport so its current beat position is
+            // preserved across the BPM change. Without rebasing, switching
+            // 120→140 would jump the next-quantized beat by minutes' worth
+            // of time in the wrong direction.
+            const tr = this.internalTransport;
+            const now = this.ctx.currentTime;
+            const elapsed = now - tr.originAudioTime;
+            tr.anchorBeat += elapsed * tr.bpm / 60;
+            tr.originAudioTime = now;
+            tr.bpm = safe;
+        }
         this.channels.forEach(ch => ch.setDelayTimeForBpm(bpm));
     }
 
+    setLinkSnapshot(snapshot) {
+        this.linkSnapshot = snapshot;
+    }
+
+    setLaunchQuantum(beats) {
+        const v = Number(beats);
+        this.launchQuantum = Number.isFinite(v) && v > 0 ? v : 0;
+    }
+
+    getNextQuantizedAudioTime() {
+        const quantum = this.launchQuantum;
+        if (!quantum) return 0;
+
+        // First-launch shortcut: if nothing is currently playing, fire
+        // immediately and (re)anchor the internal transport at "now". This
+        // matches Live's Session View — the user pressed Play, they expect
+        // audio, not silence until the next bar. Subsequent launches see at
+        // least one channel playing and quantize as normal. Link's clock is
+        // external so we leave its snapshot alone.
+        const anythingPlaying = this.channels.some(c => c.isPlaying);
+        if (!anythingPlaying) {
+            if (!this.linkSnapshot) {
+                this.internalTransport.originAudioTime = this.ctx.currentTime;
+                this.internalTransport.anchorBeat = 0;
+            }
+            return 0;
+        }
+
+        // Prefer the Link snapshot when active so the app stays in phase with
+        // external peers. Falls through to the internal transport when Link
+        // isn't running so 'Q' still works standalone.
+        const snap = this.linkSnapshot;
+        if (snap && snap.bpm) {
+            const elapsedSec = (performance.now() - snap.capturedAt) / 1000;
+            const currentBeat = snap.beat + elapsedSec * (snap.bpm / 60);
+            let nextBeat = Math.ceil(currentBeat / quantum) * quantum;
+            if (nextBeat - currentBeat < 1e-6) nextBeat += quantum;
+            const secondsUntil = (nextBeat - currentBeat) * 60 / snap.bpm;
+            return this.ctx.currentTime + secondsUntil;
+        }
+
+        const tr = this.internalTransport;
+        if (!tr.bpm) return 0;
+        const elapsedSec = this.ctx.currentTime - tr.originAudioTime;
+        const currentBeat = tr.anchorBeat + elapsedSec * (tr.bpm / 60);
+        let nextBeat = Math.ceil(currentBeat / quantum) * quantum;
+        if (nextBeat - currentBeat < 1e-6) nextBeat += quantum;
+        const secondsUntil = (nextBeat - currentBeat) * 60 / tr.bpm;
+        return this.ctx.currentTime + secondsUntil;
+    }
+
+    playChannel(index, loop) {
+        const ch = this.channels[index];
+        if (!ch || !ch.buffer) return;
+        ch.play(loop, this.getNextQuantizedAudioTime());
+    }
+
     setMasterGain(value) {
         this.masterBus.gain.setTargetAtTime(value, this.ctx.currentTime, 0.01);
     }
@@ -389,7 +448,8 @@ export class PerformanceEngine {
     }
 
     playAll(loop = true) {
-        this.channels.forEach(ch => { if (ch.buffer) ch.play(loop); });
+        const startTime = this.getNextQuantizedAudioTime();
+        this.channels.forEach(ch => { if (ch.buffer) ch.play(loop, startTime); });
     }
 
     stopAll() {

models/config/model_config_small.json

@@ -87,6 +87,7 @@
             "cond_dim": 768
         },
         "diffusion": {
+            "diffusion_objective": "rectified_flow",
             "cross_attention_cond_ids": [
                 "prompt",
                 "seconds_total"

stable-audio-tools/stable_audio_tools/inference/sampling.py

@@ -134,6 +134,30 @@ def sample_rk4(model, x, steps, sigma_max=1, callback=None, dist_shift=None, **e
     # If we are on the last timestep, output the denoised data
     return x
 
+@torch.no_grad()
+def sample_flow_pingpong(model, x, steps, sigma_max=1, callback=None, dist_shift=None, **extra_args):
+    """Draws samples from a model given starting noise. Ping-pong sampling for distilled RF models."""
+
+    # Make tensor of ones to broadcast the single t values
+    ts = x.new_ones([x.shape[0]])
+
+    # Create the noise schedule
+    t = torch.linspace(sigma_max, 0, steps + 1)
+
+    if dist_shift is not None:
+        t = dist_shift.time_shift(t, x.shape[-1])
+
+    for i in trange(len(t) - 1, disable=False):
+        denoised = x - t[i] * model(x, t[i] * ts, **extra_args)
+        if callback is not None:
+            callback({'x': x, 'i': i, 't': t[i], 'sigma': t[i], 'sigma_hat': t[i], 'denoised': denoised})
+
+        t_next = t[i + 1]
+        x = (1 - t_next) * denoised + t_next * torch.randn_like(x)
+
+    return x
+
+
 @torch.no_grad()
 def sample_flow_dpmpp(model, x, steps, sigma_max=1, callback=None, dist_shift=None, **extra_args):
     """Draws samples from a model given starting noise. DPM-Solver++ for RF models"""
@@ -371,4 +395,6 @@ def sample_rf(
     elif sampler_type == "rk4":
         return sample_rk4(model_fn, x, steps, sigma_max, callback=callback, **extra_args)
     elif sampler_type == "dpmpp":
-        return sample_flow_dpmpp(model_fn, x, steps, sigma_max, callback=callback, **extra_args)
+        return sample_flow_dpmpp(model_fn, x, steps, sigma_max, callback=callback, **extra_args)
+    elif sampler_type == "pingpong":
+        return sample_flow_pingpong(model_fn, x, steps, sigma_max, callback=callback, **extra_args)