applied the comments regarding chord progression, scale suggestions and UI/UX changes

backend/main.py

@@ -8,7 +8,7 @@ from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.staticfiles import StaticFiles
 
-from .routers import upload_router, detection_router, processing_router, stems_router, generation_router, presets_router
+from .routers import upload_router, detection_router, processing_router, stems_router, generation_router, presets_router, chords_router
 from .models.session import cleanup_old_sessions
 
 
@@ -63,6 +63,7 @@ app.include_router(processing_router, prefix="/api", tags=["processing"])
 app.include_router(stems_router, prefix="/api", tags=["stems"])
 app.include_router(generation_router, prefix="/api", tags=["generation"])
 app.include_router(presets_router, prefix="/api", tags=["presets"])
+app.include_router(chords_router, prefix="/api", tags=["chords"])
 
 
 # Health check endpoint

backend/models/schemas.py

@@ -77,6 +77,31 @@ class GenerateResponse(BaseModel):
     generation_time_seconds: float
 
 
+class ChordEntry(BaseModel):
+    """A single chord in the progression."""
+
+    chord: str  # e.g., "Am7", "C", "N.C."
+    start_time: float  # seconds
+    end_time: float  # seconds
+
+
+class ScaleSuggestion(BaseModel):
+    """A suggested scale for improvising."""
+
+    name: str  # e.g., "A Minor Pentatonic"
+    notes: list[str]  # e.g., ["A", "C", "D", "E", "G"]
+    fit_score: float  # 0-1
+    guitar_friendly: bool
+
+
+class ChordsResponse(BaseModel):
+    """Response from chord detection endpoint."""
+
+    chords: list[ChordEntry]
+    scales: list[ScaleSuggestion]
+    chord_source: str  # "midi" or "audio"
+
+
 class ErrorResponse(BaseModel):
     """Standard error response."""
 

backend/models/session.py

@@ -38,6 +38,10 @@ class Session:
     wav_cache: dict[str, bytes] = field(default_factory=dict)
     # Optional metadata overrides loaded from preset's metadata.json
     preset_metadata: Optional[dict] = None
+    # Chord progression and scale suggestions (cached after first detection)
+    chord_progression: Optional[list] = None
+    scale_suggestions: Optional[list] = None
+    chord_source: Optional[str] = None
 
 
 # In-memory session store

backend/presets/282-Static-Summer/metadata.json

@@ -1 +0,0 @@
-{ "key": "A", "mode": "major" }

backend/routers/__init__.py

@@ -6,6 +6,7 @@ from .processing import router as processing_router
 from .stems import router as stems_router
 from .generation import router as generation_router
 from .presets import router as presets_router
+from .chords import router as chords_router
 
 __all__ = [
     "upload_router",
@@ -14,4 +15,5 @@ __all__ = [
     "stems_router",
     "generation_router",
     "presets_router",
+    "chords_router",
 ]

backend/routers/chords.py

@@ -0,0 +1,51 @@
+"""Chord detection and scale suggestion endpoint."""
+
+from fastapi import APIRouter, HTTPException
+
+from ..models.session import get_session
+from ..models.schemas import ChordsResponse
+from ..services.chord_detector import detect_chords
+from ..utils.music_theory import suggest_scales
+
+router = APIRouter()
+
+
+@router.get("/chords/{session_id}", response_model=ChordsResponse)
+async def get_chords_and_scales(session_id: str):
+    """Extract chord progression and suggest scales for a session."""
+    session = get_session(session_id)
+    if not session:
+        raise HTTPException(status_code=404, detail="Session not found")
+
+    if not session.detected_key:
+        raise HTTPException(status_code=400, detail="Run detection first")
+
+    # Return cached results if available
+    if session.chord_progression is not None:
+        return ChordsResponse(
+            chords=session.chord_progression,
+            scales=session.scale_suggestions or [],
+            chord_source=session.chord_source or "unknown",
+        )
+
+    # Detect chords
+    chords = detect_chords(session)
+    chord_source = "midi" if session.midi_data is not None and chords else "audio"
+
+    # Suggest scales
+    scales = suggest_scales(
+        session.detected_key,
+        session.detected_mode or "major",
+        chords,
+    )
+
+    # Cache on session
+    session.chord_progression = chords
+    session.scale_suggestions = scales
+    session.chord_source = chord_source
+
+    return ChordsResponse(
+        chords=chords,
+        scales=scales,
+        chord_source=chord_source,
+    )

backend/routers/detection.py

@@ -5,13 +5,13 @@ from fastapi import APIRouter, HTTPException
 from ..models.session import get_session
 from ..models.schemas import DetectionResponse
 from ..services.bpm_detector import detect_bpm
-from ..services.key_detector import detect_key
-from ..services.midi_analyzer import (
-    extract_bpm_from_midi,
-    extract_key_from_midi,
-)
+from ..services.midi_analyzer import extract_bpm_from_midi, extract_key_from_midi
+from ..services.audio_key_detector import detect_key_from_stems
 from ..utils.audio_utils import to_mono
 
+# Below this threshold, audio chromagram analysis supplements MIDI key detection
+MIDI_KEY_CONFIDENCE_THRESHOLD = 0.15
+
 router = APIRouter()
 
 
@@ -70,7 +70,7 @@ async def detect_bpm_and_key(session_id: str):
         bpm_result = detect_bpm(mix_audio, mix_sr, drums_audio)
         bpm_source = "audio"
 
-    # Key Detection - prefer MIDI (instant)
+    # Key Detection
     key_source = "audio"
     key_result = None
 
@@ -80,32 +80,31 @@ async def detect_bpm_and_key(session_id: str):
         print(f"Key from preset metadata: {key_result['key']} {key_result['mode']}")
 
     elif session.midi_data is not None:
-        # Use MIDI directly
-        key_result = extract_key_from_midi(session.midi_data)
-        if key_result["confidence"] > 0:  # Accept any MIDI key result
+        midi_key = extract_key_from_midi(session.midi_data)
+        print(f"Key from MIDI: {midi_key['key']} {midi_key['mode']}  confidence={midi_key['confidence']}")
+
+        if midi_key["confidence"] >= MIDI_KEY_CONFIDENCE_THRESHOLD:
+            key_result = midi_key
             key_source = "midi"
-            print(f"Key from MIDI: {key_result['key']} {key_result['mode']}")
         else:
-            key_result = None
+            # MIDI is uncertain — run audio chromagram on all stems
+            print(f"MIDI confidence {midi_key['confidence']} < {MIDI_KEY_CONFIDENCE_THRESHOLD}, checking audio stems...")
+            audio_key = detect_key_from_stems(session.stems)
+            print(f"Key from audio: {audio_key['key']} {audio_key['mode']}  confidence={audio_key['confidence']}")
+
+            if audio_key["confidence"] > midi_key["confidence"]:
+                key_result = audio_key
+                key_source = "audio"
+            else:
+                key_result = midi_key
+                key_source = "midi"
 
     if key_result is None:
-        # Fall back to audio analysis (slower)
-        print("Falling back to audio key detection...")
-        mix_audio = session.full_mix.audio
-        mix_sr = session.full_mix.sample_rate
-        if mix_audio.ndim == 2:
-            mix_audio = to_mono(mix_audio)
-
-        # Get bass stem if available
-        bass_audio = None
-        for name, stem in session.stems.items():
-            if 'bass' in name.lower():
-                bass_audio = stem.audio
-                if bass_audio.ndim == 2:
-                    bass_audio = to_mono(bass_audio)
-                break
-
-        key_result = detect_key(mix_audio, mix_sr, bass_audio)
+        # No MIDI — use audio only
+        print("No MIDI data, using audio key detection...")
+        audio_key = detect_key_from_stems(session.stems)
+        print(f"Key from audio: {audio_key['key']} {audio_key['mode']}  confidence={audio_key['confidence']}")
+        key_result = audio_key
         key_source = "audio"
 
     # Store results in session

backend/services/audio_key_detector.py

@@ -0,0 +1,83 @@
+"""Audio stem key detection using weighted chromagram analysis.
+
+Works on in-memory numpy arrays (no file I/O needed).
+Instrument priority mirrors the MIDI analyzer:
+    bass > lead/synth > keys > pad > strings > guitar
+Drums are excluded automatically by name matching.
+"""
+
+import numpy as np
+import librosa
+
+from .midi_analyzer import INSTRUMENT_ROLES, _get_role_and_weight, _run_key_profiles
+
+
+def detect_key_from_stems(stems: dict, chroma_type: str = "cqt") -> dict:
+    """
+    Detect key from in-memory audio stems using weighted chromagram fusion.
+
+    Args:
+        stems      : dict of {stem_name: StemData} from session.stems
+        chroma_type: "cqt" (default), "stft", or "cens"
+
+    Returns:
+        dict with "key", "mode", "confidence"
+    """
+    fused = np.zeros(12, dtype=np.float64)
+    stems_used = []
+
+    for name, stem_data in stems.items():
+        role, weight = _get_role_and_weight(name)
+        if weight == 0.0:
+            continue  # skip drums / unpitched stems
+
+        y = stem_data.audio
+        sr = stem_data.sample_rate
+
+        # Ensure mono float32
+        if y.ndim == 2:
+            y = y.mean(axis=1)
+        y = y.astype(np.float32)
+
+        # Use first 60 s for speed on long stems
+        y = y[:sr * 60]
+
+        try:
+            if chroma_type == "cqt":
+                chroma = librosa.feature.chroma_cqt(y=y, sr=sr)
+            elif chroma_type == "stft":
+                chroma = librosa.feature.chroma_stft(y=y, sr=sr)
+            else:
+                chroma = librosa.feature.chroma_cens(y=y, sr=sr)
+        except Exception as e:
+            print(f"  [audio key] Skipping '{name}': {e}")
+            continue
+
+        mean_chroma = chroma.mean(axis=1)
+        total = mean_chroma.sum()
+        if total <= 0:
+            continue
+
+        fused += (mean_chroma / total) * weight
+        stems_used.append(f"{name}(w={weight})")
+
+    if stems_used:
+        print(f"Audio key detection using: {', '.join(stems_used)}")
+    else:
+        print("Audio key detection: no usable pitched stems found")
+
+    if fused.sum() == 0:
+        return {"key": "C", "mode": "major", "confidence": 0.0}
+
+    fused /= fused.sum()
+
+    ranked = _run_key_profiles(fused)
+    (winner_key, winner_mode), winner_score = ranked[0]
+    second_score = ranked[1][1] if len(ranked) > 1 else 0.0
+    last_score   = ranked[-1][1]
+
+    score_range = winner_score - last_score
+    gap         = winner_score - second_score
+    confidence  = round(gap / score_range, 3) if score_range > 0 else 0.0
+
+    return {"key": winner_key, "mode": winner_mode, "confidence": confidence}

backend/services/chord_detector.py

@@ -0,0 +1,238 @@
+"""Chord detection from MIDI data and audio stems."""
+
+import numpy as np
+import mido
+
+from ..utils.music_theory import KEY_NAMES, match_chord
+from .midi_analyzer import _get_role_and_weight, extract_bpm_from_midi
+
+
+def detect_chords(session) -> list[dict]:
+    """
+    Extract chord progression from a session, preferring MIDI over audio.
+
+    Returns:
+        List of {"chord": str, "start_time": float, "end_time": float}
+    """
+    if session.midi_data is not None:
+        bpm_info = extract_bpm_from_midi(session.midi_data)
+        bpm = session.detected_bpm or bpm_info["bpm"]
+        chords = extract_chords_from_midi(session.midi_data, bpm)
+        if chords:
+            return chords
+
+    # Fallback: audio-based chord detection
+    if session.stems:
+        bpm = session.detected_bpm or 120.0
+        sr = session.original_sr
+        return extract_chords_from_audio(session.stems, bpm, sr)
+
+    return []
+
+
+def extract_chords_from_midi(midi_file: mido.MidiFile, bpm: float) -> list[dict]:
+    """
+    Extract chord progression from MIDI by analyzing notes in beat-aligned windows.
+
+    Args:
+        midi_file: Parsed MIDI file
+        bpm: Detected BPM for beat alignment
+
+    Returns:
+        List of chord entries with start_time and end_time in seconds
+    """
+    ticks_per_beat = midi_file.ticks_per_beat or 480
+    us_per_beat = 60_000_000 / bpm  # microseconds per beat
+
+    # Collect all note events with absolute times in seconds, weighted by instrument role
+    note_events = []  # (start_sec, end_sec, pitch, velocity, weight)
+
+    for track in midi_file.tracks:
+        # Determine track role and weight
+        track_name = track.name.strip() if track.name else ""
+        instrument_name = ""
+        for msg in track:
+            if msg.type == 'instrument_name':
+                instrument_name = msg.name.strip()
+                break
+
+        display_name = track_name or instrument_name or "unknown"
+        role, weight = _get_role_and_weight(display_name)
+
+        # Skip drums entirely
+        if weight == 0.0:
+            continue
+
+        # Parse note on/off pairs
+        active_notes = {}  # note -> (start_tick, velocity)
+        current_tick = 0
+        current_tempo = us_per_beat  # default
+
+        # Build tempo map for this track
+        tempo_map = []
+        tick_acc = 0
+        for msg in track:
+            tick_acc += msg.time
+            if msg.type == 'set_tempo':
+                tempo_map.append((tick_acc, msg.tempo))
+
+        # Reset for note parsing
+        current_tick = 0
+        tempo_idx = 0
+        current_us_per_beat = us_per_beat
+
+        for msg in track:
+            current_tick += msg.time
+
+            # Update tempo if needed
+            while tempo_idx < len(tempo_map) and current_tick >= tempo_map[tempo_idx][0]:
+                current_us_per_beat = tempo_map[tempo_idx][1]
+                tempo_idx += 1
+
+            if msg.type == 'note_on' and msg.velocity > 0:
+                active_notes[msg.note] = (current_tick, msg.velocity)
+            elif msg.type == 'note_off' or (msg.type == 'note_on' and msg.velocity == 0):
+                if msg.note in active_notes:
+                    start_tick, velocity = active_notes.pop(msg.note)
+                    start_sec = mido.tick2second(start_tick, ticks_per_beat, int(current_us_per_beat))
+                    end_sec = mido.tick2second(current_tick, ticks_per_beat, int(current_us_per_beat))
+                    note_events.append((start_sec, end_sec, msg.note, velocity, weight))
+
+    if not note_events:
+        return []
+
+    # Determine total duration
+    max_time = max(e[1] for e in note_events)
+
+    # Quantize to half-bar windows (2 beats)
+    beat_duration = 60.0 / bpm
+    window_size = beat_duration * 2  # half-bar
+    num_windows = int(np.ceil(max_time / window_size))
+
+    chords = []
+    for i in range(num_windows):
+        win_start = i * window_size
+        win_end = (i + 1) * window_size
+
+        # Gather pitch classes weighted by duration * velocity * instrument weight
+        pitch_weights = {}
+        for start_sec, end_sec, pitch, velocity, weight in note_events:
+            # Overlap with this window
+            overlap_start = max(start_sec, win_start)
+            overlap_end = min(end_sec, win_end)
+            if overlap_end <= overlap_start:
+                continue
+            overlap_duration = overlap_end - overlap_start
+            pc = pitch % 12
+            w = overlap_duration * (velocity / 127.0) * weight
+            pitch_weights[pc] = pitch_weights.get(pc, 0.0) + w
+
+        chord_name, score = match_chord(pitch_weights)
+        if score < 0.1:
+            chord_name = "N.C."
+
+        chords.append({
+            "chord": chord_name,
+            "start_time": round(win_start, 3),
+            "end_time": round(min(win_end, max_time), 3),
+        })
+
+    # Merge consecutive identical chords
+    return _merge_consecutive(chords)
+
+
+def extract_chords_from_audio(
+    stems: dict, bpm: float, sr: int = 44100
+) -> list[dict]:
+    """
+    Fallback chord detection from audio stems using chroma analysis.
+
+    Uses librosa's chroma_cqt on harmonic stems (bass, guitar, synth, keys).
+    """
+    try:
+        import librosa
+    except ImportError:
+        return []
+
+    # Mix harmonic stems with instrument weighting
+    harmonic_mix = None
+    total_weight = 0.0
+
+    for name, stem_data in stems.items():
+        role, weight = _get_role_and_weight(name)
+        if weight == 0.0:
+            continue
+
+        audio = stem_data.audio
+        if audio.ndim == 2:
+            audio = audio.mean(axis=1)
+
+        # Resample if needed
+        if stem_data.sample_rate != sr:
+            audio = librosa.resample(audio, orig_sr=stem_data.sample_rate, target_sr=sr)
+
+        weighted = audio.astype(np.float64) * weight
+        if harmonic_mix is None:
+            harmonic_mix = np.zeros(len(weighted), dtype=np.float64)
+
+        min_len = min(len(harmonic_mix), len(weighted))
+        harmonic_mix[:min_len] += weighted[:min_len]
+        total_weight += weight
+
+    if harmonic_mix is None or total_weight == 0:
+        return []
+
+    harmonic_mix = harmonic_mix.astype(np.float32)
+
+    # Compute chroma features
+    chroma = librosa.feature.chroma_cqt(y=harmonic_mix, sr=sr, hop_length=512)
+
+    # Beat-aligned segmentation
+    beat_duration = 60.0 / bpm
+    window_size = beat_duration * 2  # half-bar
+    hop_time = 512 / sr
+    window_frames = max(1, int(window_size / hop_time))
+
+    total_frames = chroma.shape[1]
+    total_duration = len(harmonic_mix) / sr
+
+    chords = []
+    for start_frame in range(0, total_frames, window_frames):
+        end_frame = min(start_frame + window_frames, total_frames)
+        segment = chroma[:, start_frame:end_frame]
+
+        # Average chroma across the segment
+        avg_chroma = segment.mean(axis=1)
+
+        # Convert to pitch class weights
+        pitch_weights = {i: float(avg_chroma[i]) for i in range(12) if avg_chroma[i] > 0.01}
+
+        chord_name, score = match_chord(pitch_weights)
+        if score < 0.1:
+            chord_name = "N.C."
+
+        start_time = start_frame * hop_time
+        end_time = min(end_frame * hop_time, total_duration)
+
+        chords.append({
+            "chord": chord_name,
+            "start_time": round(start_time, 3),
+            "end_time": round(end_time, 3),
+        })
+
+    return _merge_consecutive(chords)
+
+
+def _merge_consecutive(chords: list[dict]) -> list[dict]:
+    """Merge consecutive entries with the same chord name."""
+    if not chords:
+        return []
+
+    merged = [chords[0].copy()]
+    for entry in chords[1:]:
+        if entry["chord"] == merged[-1]["chord"]:
+            merged[-1]["end_time"] = entry["end_time"]
+        else:
+            merged.append(entry.copy())
+
+    return merged

backend/services/midi_analyzer.py

@@ -5,7 +5,10 @@ import mido
 
 from ..utils.music_theory import KEY_NAMES
 
-# Key profiles for MIDI key detection (pop/rock/folk optimized)
+# ---------------------------------------------------------------------------
+# Key profiles
+# ---------------------------------------------------------------------------
+
 # Temperley (rock/pop corpus)
 TEMPERLEY_MAJOR = [5.0, 2.0, 3.5, 2.0, 4.5, 4.0, 2.0, 4.5, 2.0, 3.5, 1.5, 4.0]
 TEMPERLEY_MINOR = [5.0, 2.0, 3.5, 4.5, 2.0, 4.0, 2.0, 4.5, 3.5, 2.0, 1.5, 4.0]
@@ -14,14 +17,106 @@ TEMPERLEY_MINOR = [5.0, 2.0, 3.5, 4.5, 2.0, 4.0, 2.0, 4.5, 3.5, 2.0, 1.5, 4.0]
 AARDEN_MAJOR = [17.77, 0.15, 14.93, 0.16, 19.80, 11.36, 0.29, 22.06, 0.15, 8.15, 0.23, 4.95]
 AARDEN_MINOR = [18.16, 0.69, 12.99, 13.34, 1.07, 11.15, 1.38, 21.07, 7.49, 1.53, 0.92, 10.21]
 
+# ---------------------------------------------------------------------------
+# Instrument role registry
+# ---------------------------------------------------------------------------
+# keyword -> (role_label, key_detection_weight)
+#
+# bass    → highest:  almost always plays the root on the downbeat
+# lead    → very high: melody resolves to tonic
+# keys    → medium-high: full chords give harmonic context
+# pad     → medium: sustained harmony
+# guitar  → low: rhythm parts flood histogram with IV/V chord tones
+# strings → low-medium: often doubling harmony
+# drums   → zero: unpitched, never use for key detection
+
+INSTRUMENT_ROLES = {
+    # Drums — always zero
+    "drum":    ("drums",   0.0),
+    "perc":    ("drums",   0.0),
+    "kick":    ("drums",   0.0),
+    "snare":   ("drums",   0.0),
+    "hat":     ("drums",   0.0),
+    "cymbal":  ("drums",   0.0),
+    "xo":      ("drums",   0.0),
+    "hh":      ("drums",   0.0),
+
+    # Bass — highest weight
+    "bass":    ("bass",    3.0),
+    "sub":     ("bass",    2.5),
+    "808":     ("bass",    2.5),
+
+    # Lead / melody — very high weight
+    "lead":    ("lead",    2.5),
+    "synth":   ("lead",    2.5),
+    "melody":  ("lead",    2.5),
+    "vocal":   ("lead",    2.5),
+    "vox":     ("lead",    2.5),
+    "keys":    ("keys",    2.0),
+    "piano":   ("keys",    2.0),
+    "ep":      ("keys",    2.0),
+
+    # Pads / atmosphere — medium
+    "pad":     ("pad",     1.5),
+    "organ":   ("pad",     1.5),
+    "choir":   ("pad",     1.2),
+
+    # Rhythm / chords — low weight
+    "guitar":  ("guitar",  0.5),
+    "gtr":     ("guitar",  0.5),
+    "strings": ("strings", 0.8),
+    "str":     ("strings", 0.8),
+    "brass":   ("strings", 0.8),
+    "horn":    ("strings", 0.8),
+}
+
+
+def _get_role_and_weight(name: str) -> tuple[str, float]:
+    """Match a track or instrument name to a role and key-detection weight."""
+    name_lower = name.lower()
+    for keyword, (role, weight) in INSTRUMENT_ROLES.items():
+        if keyword in name_lower:
+            return role, weight
+    return "unknown", 1.0
+
+
+def _run_key_profiles(pitch_histogram: np.ndarray) -> list[tuple[str, str, float]]:
+    """
+    Run Temperley + Aarden-Essen profiles against a normalized pitch histogram.
+    Returns all 24 (key, mode, score) candidates sorted best-first.
+    """
+    scores: dict[tuple[str, str], float] = {}
+
+    for major_profile, minor_profile in [
+        (TEMPERLEY_MAJOR, TEMPERLEY_MINOR),
+        (AARDEN_MAJOR,    AARDEN_MINOR),
+    ]:
+        maj = np.array(major_profile)
+        min_ = np.array(minor_profile)
+
+        for semitones in range(12):
+            key_name = KEY_NAMES[semitones]
+
+            rotated_maj  = np.roll(maj,  semitones) / maj.sum()
+            rotated_min  = np.roll(min_, semitones) / min_.sum()
+
+            corr_maj = float(np.corrcoef(pitch_histogram, rotated_maj)[0, 1])
+            corr_min = float(np.corrcoef(pitch_histogram, rotated_min)[0, 1])
+
+            scores[(key_name, "major")] = scores.get((key_name, "major"), 0.0) + corr_maj
+            scores[(key_name, "minor")] = scores.get((key_name, "minor"), 0.0) + corr_min
+
+    return sorted(scores.items(), key=lambda x: x[1], reverse=True)
+
+
+# ---------------------------------------------------------------------------
+# Public API
+# ---------------------------------------------------------------------------
 
 def extract_bpm_from_midi(midi_file: mido.MidiFile) -> dict:
     """
     Extract BPM from MIDI tempo map.
 
-    Args:
-        midi_file: Parsed MIDI file (mido.MidiFile)
-
     Returns:
         dict with "bpm", "tempo_changes", "confidence"
     """
@@ -30,137 +125,95 @@ def extract_bpm_from_midi(midi_file: mido.MidiFile) -> dict:
     for track in midi_file.tracks:
         for msg in track:
             if msg.type == 'set_tempo':
-                # mido stores tempo as microseconds per beat
                 bpm = 60_000_000 / msg.tempo
-                tempo_changes.append({
-                    "bpm": round(bpm, 2),
-                    "tempo_us": msg.tempo
-                })
+                tempo_changes.append({"bpm": round(bpm, 2), "tempo_us": msg.tempo})
 
     if not tempo_changes:
-        # Default MIDI tempo is 120 BPM if not specified
-        return {
-            "bpm": 120.0,
-            "tempo_changes": [],
-            "confidence": 0.5  # Lower confidence for default
-        }
+        return {"bpm": 120.0, "tempo_changes": [], "confidence": 0.5}
 
-    return {
-        "bpm": tempo_changes[0]["bpm"],  # Use first tempo
-        "tempo_changes": tempo_changes,
-        "confidence": 1.0  # Exact data from MIDI
-    }
+    return {"bpm": tempo_changes[0]["bpm"], "tempo_changes": tempo_changes, "confidence": 1.0}
 
 
 def extract_key_from_midi(midi_file: mido.MidiFile) -> dict:
     """
-    Extract key from MIDI note data using ensemble voting.
+    Extract key from MIDI using instrument-priority weighting.
 
-    Args:
-        midi_file: Parsed MIDI file (mido.MidiFile)
+    Each track is weighted by its role (bass > lead/synth > keys/pad > strings > guitar).
+    Drum tracks (drum, xo, perc, etc.) are excluded entirely.
 
     Returns:
         dict with "key", "mode", "confidence"
     """
-    # Build pitch class histogram weighted by duration and velocity
+    # Build a single pitch-class histogram weighted by duration * velocity * instrument_weight
     pitch_histogram = np.zeros(12, dtype=np.float64)
+    tracks_used = []
 
     for track in midi_file.tracks:
-        # Track active notes for duration calculation
-        active_notes = {}  # note_number -> (start_time, velocity)
+        # Resolve track name: prefer track name, fall back to instrument_name message
+        track_name = track.name.strip()
+        instrument_name = ""
+        for msg in track:
+            if msg.type == 'instrument_name':
+                instrument_name = msg.name.strip()
+                break
+
+        display_name = track_name or instrument_name or "unknown"
+        role, track_weight = _get_role_and_weight(display_name)
+
+        # Skip drums and any zero-weight tracks
+        if track_weight == 0.0:
+            continue
+
+        active_notes: dict[int, tuple[int, int]] = {}
         current_time = 0
+        track_contributed = False
 
         for msg in track:
             current_time += msg.time
 
             if msg.type == 'note_on' and msg.velocity > 0:
                 active_notes[msg.note] = (current_time, msg.velocity)
+
             elif msg.type == 'note_off' or (msg.type == 'note_on' and msg.velocity == 0):
                 if msg.note in active_notes:
                     start_time, velocity = active_notes.pop(msg.note)
                     duration = current_time - start_time
+                    if duration <= 0:
+                        continue
                     pitch_class = msg.note % 12
-                    # Weight by duration and velocity
-                    weight = duration * (velocity / 127.0)
-                    pitch_histogram[pitch_class] += weight
-
-    # Handle case with no notes
-    if np.sum(pitch_histogram) == 0:
-        return {
-            "key": "C",
-            "mode": "major",
-            "confidence": 0.0
-        }
-
-    # Normalize histogram
-    pitch_histogram = pitch_histogram / np.sum(pitch_histogram)
-
-    # Run ensemble detection with multiple profiles
-    profiles = [
-        ("temperley", TEMPERLEY_MAJOR, TEMPERLEY_MINOR),
-        ("aarden", AARDEN_MAJOR, AARDEN_MINOR),
-    ]
-
-    votes = {}  # (key, mode) -> total weight
+                    pitch_histogram[pitch_class] += duration * (velocity / 127.0) * track_weight
+                    track_contributed = True
 
-    for profile_name, major_profile, minor_profile in profiles:
-        best_key = None
-        best_mode = None
-        best_corr = -1
+        if track_contributed:
+            tracks_used.append(f"{display_name}(w={track_weight})")
 
-        for semitones in range(12):
-            key_name = KEY_NAMES[semitones]
-
-            # Rotate profile to match key
-            rotated_major = np.roll(major_profile, semitones)
-            rotated_minor = np.roll(minor_profile, semitones)
-
-            # Normalize profiles
-            rotated_major = rotated_major / np.sum(rotated_major)
-            rotated_minor = rotated_minor / np.sum(rotated_minor)
+    if tracks_used:
+        print(f"Key detection using tracks: {', '.join(tracks_used)}")
 
-            # Correlate
-            corr_major = np.corrcoef(pitch_histogram, rotated_major)[0, 1]
-            corr_minor = np.corrcoef(pitch_histogram, rotated_minor)[0, 1]
-
-            if corr_major > best_corr:
-                best_corr = corr_major
-                best_key = key_name
-                best_mode = "major"
+    if np.sum(pitch_histogram) == 0:
+        return {"key": "C", "mode": "major", "confidence": 0.0}
 
-            if corr_minor > best_corr:
-                best_corr = corr_minor
-                best_key = key_name
-                best_mode = "minor"
+    # Normalize
+    pitch_histogram /= pitch_histogram.sum()
 
-        # Add weighted vote
-        vote_key = (best_key, best_mode)
-        votes[vote_key] = votes.get(vote_key, 0) + best_corr
+    # Run profiles
+    ranked = _run_key_profiles(pitch_histogram)
+    (winner_key, winner_mode), winner_score = ranked[0]
+    second_score = ranked[1][1] if len(ranked) > 1 else 0.0
+    last_score   = ranked[-1][1]
 
-    # Find winner
-    winner = max(votes.keys(), key=lambda k: votes[k])
-    total_weight = sum(votes.values())
-    confidence = votes[winner] / total_weight if total_weight > 0 else 0
+    score_range = winner_score - last_score
+    gap         = winner_score - second_score
+    confidence  = round(gap / score_range, 3) if score_range > 0 else 0.0
 
-    return {
-        "key": winner[0],
-        "mode": winner[1],
-        "confidence": round(confidence, 3)
-    }
+    return {"key": winner_key, "mode": winner_mode, "confidence": confidence}
 
 
 def validate_midi_audio_sync(midi_file: mido.MidiFile, audio_duration: float) -> bool:
     """
     Check if MIDI duration matches audio duration within 500ms.
 
-    Args:
-        midi_file: Parsed MIDI file
-        audio_duration: Audio duration in seconds
-
     Returns:
         True if durations match within tolerance
     """
-    midi_duration = midi_file.length  # mido provides this property
-    tolerance = 0.5  # 500ms
-
-    return abs(midi_duration - audio_duration) <= tolerance
+    return abs(midi_file.length - audio_duration) <= 0.5

backend/utils/music_theory.py

@@ -60,3 +60,189 @@ def transpose_key(key: str, semitones: int) -> str:
     current = SEMITONE_MAP[key]
     new = (current + semitones) % 12
     return KEY_NAMES[new]
+
+
+# ---------------------------------------------------------------------------
+# Chord templates (intervals from root as pitch-class sets)
+# ---------------------------------------------------------------------------
+
+CHORD_TEMPLATES = {
+    "":      [0, 4, 7],        # Major triad
+    "m":     [0, 3, 7],        # Minor triad
+    "7":     [0, 4, 7, 10],    # Dominant 7th
+    "m7":    [0, 3, 7, 10],    # Minor 7th
+    "maj7":  [0, 4, 7, 11],    # Major 7th
+    "dim":   [0, 3, 6],        # Diminished
+    "aug":   [0, 4, 8],        # Augmented
+    "sus4":  [0, 5, 7],        # Suspended 4th
+    "sus2":  [0, 2, 7],        # Suspended 2nd
+    "m7b5":  [0, 3, 6, 10],   # Half-diminished
+    "dim7":  [0, 3, 6, 9],    # Diminished 7th
+    "6":     [0, 4, 7, 9],    # Major 6th
+    "m6":    [0, 3, 7, 9],    # Minor 6th
+    "9":     [0, 4, 7, 10, 2], # Dominant 9th
+    "add9":  [0, 4, 7, 2],    # Add 9
+}
+
+
+def match_chord(pitch_classes: dict[int, float]) -> tuple[str, float]:
+    """
+    Match a weighted set of pitch classes to the best chord.
+
+    Args:
+        pitch_classes: dict mapping pitch class (0-11) to weight (duration*velocity)
+
+    Returns:
+        (chord_name, score) e.g. ("Am7", 0.85)
+    """
+    if not pitch_classes:
+        return ("N.C.", 0.0)
+
+    total_weight = sum(pitch_classes.values())
+    if total_weight == 0:
+        return ("N.C.", 0.0)
+
+    best_chord = "N.C."
+    best_score = 0.0
+
+    for root in range(12):
+        for suffix, intervals in CHORD_TEMPLATES.items():
+            template_pcs = set((root + i) % 12 for i in intervals)
+
+            # Score: sum of weights for pitch classes that match the template
+            matched_weight = sum(pitch_classes.get(pc, 0.0) for pc in template_pcs)
+            # Penalize notes outside the template
+            outside_weight = total_weight - matched_weight
+            score = (matched_weight - 0.3 * outside_weight) / total_weight
+
+            # Bonus for root being the strongest note
+            root_weight = pitch_classes.get(root, 0.0)
+            if root_weight > 0:
+                score += 0.1 * (root_weight / total_weight)
+
+            if score > best_score:
+                best_score = score
+                best_chord = f"{KEY_NAMES[root]}{suffix}"
+
+    return (best_chord, max(0.0, best_score))
+
+
+# ---------------------------------------------------------------------------
+# Scale definitions and suggestion logic
+# ---------------------------------------------------------------------------
+
+SCALE_INTERVALS = {
+    "Major Pentatonic":  [0, 2, 4, 7, 9],
+    "Minor Pentatonic":  [0, 3, 5, 7, 10],
+    "Blues":             [0, 3, 5, 6, 7, 10],
+    "Natural Minor":    [0, 2, 3, 5, 7, 8, 10],
+    "Major (Ionian)":   [0, 2, 4, 5, 7, 9, 11],
+    "Dorian":           [0, 2, 3, 5, 7, 9, 10],
+    "Mixolydian":       [0, 2, 4, 5, 7, 9, 10],
+    "Harmonic Minor":   [0, 2, 3, 5, 7, 8, 11],
+    "Melodic Minor":    [0, 2, 3, 5, 7, 9, 11],
+    "Phrygian":         [0, 1, 3, 5, 7, 8, 10],
+    "Lydian":           [0, 2, 4, 6, 7, 9, 11],
+}
+
+# Scales that are especially idiomatic on guitar
+GUITAR_FRIENDLY_SCALES = {
+    "Major Pentatonic", "Minor Pentatonic", "Blues",
+    "Dorian", "Mixolydian", "Natural Minor",
+}
+
+# Keys with open-string-friendly roots on guitar (standard tuning)
+GUITAR_OPEN_KEYS = {"E", "A", "D", "G", "C", "B"}
+
+
+def suggest_scales(
+    key: str, mode: str, chords: list[dict]
+) -> list[dict]:
+    """
+    Suggest scales ranked by fit to the key/mode and chord progression.
+
+    Args:
+        key: Detected key name (e.g., "A")
+        mode: "major" or "minor"
+        chords: List of chord dicts with "chord" field
+
+    Returns:
+        List of scale suggestion dicts, sorted by fit_score descending.
+    """
+    # Collect all pitch classes from chord progression
+    chord_pitch_classes = set()
+    for ch in chords:
+        chord_name = ch.get("chord", "")
+        if chord_name == "N.C.":
+            continue
+        root, suffix = _parse_chord_name(chord_name)
+        if root is None:
+            continue
+        root_pc = SEMITONE_MAP.get(root, 0)
+        template = CHORD_TEMPLATES.get(suffix, [0, 4, 7])
+        for interval in template:
+            chord_pitch_classes.add((root_pc + interval) % 12)
+
+    root_pc = SEMITONE_MAP.get(key, 0)
+    results = []
+
+    for scale_name, intervals in SCALE_INTERVALS.items():
+        scale_pcs = set((root_pc + i) % 12 for i in intervals)
+        scale_notes = [KEY_NAMES[(root_pc + i) % 12] for i in intervals]
+
+        # Fit score: how many chord tones are covered by this scale
+        if chord_pitch_classes:
+            covered = len(chord_pitch_classes & scale_pcs)
+            fit = covered / len(chord_pitch_classes)
+        else:
+            fit = 0.5
+
+        # Mode alignment bonus
+        if mode == "minor" and scale_name in (
+            "Minor Pentatonic", "Blues", "Natural Minor",
+            "Dorian", "Harmonic Minor", "Phrygian",
+        ):
+            fit += 0.15
+        elif mode == "major" and scale_name in (
+            "Major Pentatonic", "Major (Ionian)", "Mixolydian", "Lydian",
+        ):
+            fit += 0.15
+
+        guitar_friendly = scale_name in GUITAR_FRIENDLY_SCALES
+        if guitar_friendly:
+            fit += 0.05
+        if key in GUITAR_OPEN_KEYS:
+            fit += 0.02
+
+        results.append({
+            "name": f"{key} {scale_name}",
+            "notes": scale_notes,
+            "fit_score": round(min(fit, 1.0), 3),
+            "guitar_friendly": guitar_friendly,
+        })
+
+    results.sort(key=lambda x: x["fit_score"], reverse=True)
+    return results[:6]
+
+
+def _parse_chord_name(chord_name: str) -> tuple:
+    """Parse 'Am7' into ('A', 'm7'), 'F#dim' into ('F#', 'dim'), etc."""
+    if not chord_name or chord_name == "N.C.":
+        return (None, None)
+
+    # Try two-char root first (e.g., "F#", "A#")
+    if len(chord_name) >= 2 and chord_name[1] == '#':
+        root = chord_name[:2]
+        suffix = chord_name[2:]
+    else:
+        root = chord_name[0]
+        suffix = chord_name[1:]
+
+    if root not in SEMITONE_MAP:
+        return (None, None)
+
+    # Normalize suffix
+    if suffix not in CHORD_TEMPLATES:
+        suffix = ""  # Default to major triad
+
+    return (root, suffix)

frontend/src/App.jsx

@@ -1,10 +1,11 @@
 import React, { useState, useRef, useCallback, useEffect } from 'react'
 import FileUpload from './components/FileUpload'
 import AnalysisDisplay from './components/AnalysisDisplay'
-import ControlPanel from './components/ControlPanel'
+import ChordDisplay from './components/ChordDisplay'
+import LiveChordView from './components/LiveChordView'
+import ScalesDisplay from './components/ScalesDisplay'
 import StemMixer from './components/StemMixer'
 import TransportBar from './components/TransportBar'
-import Waveform from './components/Waveform'
 import ProcessingOverlay from './components/ProcessingOverlay'
 import { useSession } from './hooks/useSession'
 import { useAudioEngine } from './hooks/useAudioEngine'
@@ -17,6 +18,7 @@ function App() {
     sessionId,
     stems,
     detection,
+    chordsData,
     loading,
     error,
     upload,
@@ -58,20 +60,18 @@ function App() {
 
   const { cacheStatus } = usePresetCache()
 
-  // Tracks which preset is currently being loaded so handleStemsReady can check the cache
   const currentPresetNameRef = useRef(null)
 
   const [isProcessing, setIsProcessing] = useState(false)
   const [isGenerating, setIsGenerating] = useState(false)
+  const [appliedSemitones, setAppliedSemitones] = useState(0)
   const [continuationReady, setContinuationReady] = useState(false)
   const { progress: processingProgress, resetProgress } = useProcessingProgress(sessionId)
 
   // Region selection state
   const [regionStart, setRegionStart] = useState(null)
   const [regionEnd, setRegionEnd] = useState(null)
-  // 'full' = playing full song stems, 'region' = playing processed region slice
   const [playbackMode, setPlaybackMode] = useState('full')
-  // Store the full-song duration so we can show the region on the full-length bar
   const [fullSongDuration, setFullSongDuration] = useState(0)
 
   const hasRegion = regionStart !== null && regionEnd !== null
@@ -86,7 +86,6 @@ function App() {
     await loadPreset(presetName)
   }, [loadPreset])
 
-  // Main play button: always plays full song — clears any active raw-region loop first
   const handlePlay = useCallback(() => {
     if (isRawRegionActive) {
       setRawRegion(null)
@@ -95,7 +94,6 @@ function App() {
     play()
   }, [isRawRegionActive, setRawRegion, setLoop, play])
 
-  // Play Section: loops the selected region using full-song buffers (no processing needed)
   const handlePlaySection = useCallback(() => {
     if (!hasRegion) return
     stop()
@@ -109,6 +107,7 @@ function App() {
     resetProgress()
 
     try {
+      setAppliedSemitones(semitones)
       const result = await process(
         semitones,
         targetBpm,
@@ -117,14 +116,12 @@ function App() {
       )
       if (result?.success && sessionId && stems.length > 0) {
         if (hasRegion) {
-          // Clear stale region cache (new processing produced new audio)
           clearBufferCache('region')
           await loadStems(sessionId, stems, { region: true })
-          setRawRegion(null)  // processed region takes over; raw region no longer needed
+          setRawRegion(null)
           setPlaybackMode('region')
           setLoop(true)
         } else {
-          // Clear stale full cache (new processing produced new audio)
           clearBufferCache('full')
           await loadStems(sessionId, stems)
           setPlaybackMode('full')
@@ -153,31 +150,25 @@ function App() {
   }, [generate, hasRegion, regionStart, regionEnd, resetProgress])
 
   const handlePlayFullSong = useCallback(async () => {
-    // Stop current playback
     stop()
     setRawRegion(null)
     setLoop(false)
     setPlaybackMode('full')
 
     if (sessionId && stems.length > 0) {
-      // Reload full stems (original or previously full-processed)
-      // Setting processed=true will get processed if available, else original
       await loadStems(sessionId, stems)
     }
   }, [stop, setRawRegion, setLoop, sessionId, stems, loadStems])
 
   const handleStemsReady = useCallback(async () => {
     if (sessionId && stems.length > 0) {
-      console.log('=== handleStemsReady called ===')
       const presetName = currentPresetNameRef.current
       if (presetName) {
         const cached = await getCachedPreset(presetName, stems)
         if (cached) {
-          console.log(`[preset] Cache hit for '${presetName}' — loading from IndexedDB`)
           await loadStemsFromBytes(cached)
           return
         }
-        console.log(`[preset] Cache miss for '${presetName}' — fetching from network`)
       }
       try {
         await loadStems(sessionId, stems)
@@ -187,23 +178,22 @@ function App() {
     }
   }, [sessionId, stems, loadStems, loadStemsFromBytes])
 
-  // Track full song duration whenever we're in full mode and duration updates
   useEffect(() => {
     if (playbackMode === 'full' && duration > 0) {
       setFullSongDuration(duration)
     }
   }, [playbackMode, duration])
 
-  // Show upload screen if no session
+  // Upload screen
   if (!sessionId) {
     return (
       <div className="min-h-screen flex items-center justify-center p-4">
         <div className="w-full max-w-2xl">
-          <h1 className="text-4xl font-bold text-center mb-2 bg-gradient-to-r from-primary-400 to-accent-400 bg-clip-text text-transparent">
+          <h1 className="text-3xl font-bold text-center mb-2 text-white">
             Jam Track Studio
           </h1>
-          <p className="text-gray-400 text-center mb-8">
-            Upload your stems, detect BPM & key, shift pitch and tempo, mix in real-time
+          <p className="text-gray-500 text-center mb-8 text-sm">
+            Upload stems, detect BPM & key, shift pitch and tempo, mix in real-time
           </p>
 
           <FileUpload
@@ -219,129 +209,163 @@ function App() {
     )
   }
 
-  // Show analysis and controls
+  // Main layout
   return (
-    <div className="min-h-screen p-4 md:p-8">
-      <div className="max-w-full mx-auto px-4">
-        {/* Header */}
-        <header className="mb-6 flex items-center justify-between">
-          <h1 className="text-2xl font-bold bg-gradient-to-r from-primary-400 to-accent-400 bg-clip-text text-transparent">
-            Jam Track Studio
-          </h1>
-          <button
-            onClick={() => window.location.reload()}
-            className="text-sm text-gray-400 hover:text-white transition-colors"
-          >
-            Choose a different song
-          </button>
-        </header>
-
-        {/* Main content grid */}
-        <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
-          {/* Left column: Analysis + Controls */}
-          <div className="lg:col-span-3 space-y-6">
-            <AnalysisDisplay
-              detection={detection}
-              loading={loading}
-              onReady={handleStemsReady}
+    <div className="min-h-screen pb-20">
+      {/* Header */}
+      <header className="px-6 py-4 flex items-center justify-between border-b border-white/[0.04]">
+        <h1 className="text-lg font-semibold text-white">
+          Jam Track Studio
+        </h1>
+        <button
+          onClick={() => window.location.reload()}
+          className="text-xs text-gray-500 hover:text-white transition-colors"
+        >
+          Change song
+        </button>
+      </header>
+
+      <div className="flex">
+        {/* Main content — scrollable */}
+        <div className="flex-1 lg:pr-80 px-6 py-5 space-y-4">
+          {/* Merged BPM + Key controls */}
+          <AnalysisDisplay
+            detection={detection}
+            loading={loading}
+            onReady={handleStemsReady}
+            appliedSemitones={appliedSemitones}
+            onProcess={handleProcess}
+            isProcessing={isProcessing}
+            hasRegion={hasRegion}
+          />
+
+          {/* Chord Summary (all unique chords) */}
+          {chordsData && (
+            <ChordDisplay
+              chordsData={chordsData}
+              semitones={appliedSemitones}
             />
+          )}
 
-            <ControlPanel
-              detection={detection}
-              onProcess={handleProcess}
-              isProcessing={isProcessing}
-              hasRegion={hasRegion}
-              isGenerating={isGenerating}
-              onGenerate={handleGenerate}
-              sessionId={sessionId}
-              continuationReady={continuationReady}
+          {/* Suggested Scales */}
+          {chordsData?.scales && (
+            <ScalesDisplay
+              scales={chordsData.scales}
+              semitones={appliedSemitones}
             />
+          )}
 
-            {/* Waveform visualization */}
-            <div className="glass rounded-xl p-4">
-              <Waveform analyserData={analyserData} isPlaying={isPlaying} />
+          {/* Live Chord Teleprompter (right above transport bar) */}
+          {chordsData && (
+            <LiveChordView
+              chordsData={chordsData}
+              currentTime={currentTime}
+              isPlaying={isPlaying}
+              semitones={appliedSemitones}
+              onSeek={seek}
+            />
+          )}
+
+          {/* Loading indicator when stems not ready */}
+          {!isLoaded && detection && (
+            <div className="card rounded-xl p-4 text-center">
+              <span className="text-gray-500 text-sm">Loading audio...</span>
             </div>
+          )}
+        </div>
+
+        {/* Right sidebar — Stem Mixer (fixed) */}
+        <div className="hidden lg:block fixed right-0 top-0 h-screen w-80 border-l border-white/[0.06] bg-surface-card overflow-y-auto pt-16">
+          <StemMixer
+            stems={stems}
+            volumes={volumes}
+            solos={solos}
+            mutes={mutes}
+            reverbs={reverbs}
+            pans={pans}
+            isPlaying={isPlaying}
+            onVolumeChange={setVolume}
+            onSoloToggle={setSolo}
+            onMuteToggle={setMute}
+            onReverbChange={setReverb}
+            onPanChange={setPan}
+            onReset={resetVolumes}
+          />
+        </div>
 
-            {/* Transport controls */}
-            {isLoaded ? (
-              <TransportBar
+        {/* Mobile stem mixer (below content) */}
+        <div className="lg:hidden">
+          <div className="px-6 pb-4">
+            <div className="card rounded-xl">
+              <StemMixer
+                stems={stems}
+                volumes={volumes}
+                solos={solos}
+                mutes={mutes}
+                reverbs={reverbs}
+                pans={pans}
                 isPlaying={isPlaying}
-                currentTime={currentTime}
-                duration={duration}
-                onPlay={handlePlay}
-                onPlaySection={handlePlaySection}
-                isRawRegionActive={isRawRegionActive}
-                onPause={pause}
-                onStop={stop}
-                onSeek={seek}
-                regionStart={regionStart}
-                regionEnd={regionEnd}
-                onRegionChange={(start, end) => {
-                  setRegionStart(start)
-                  setRegionEnd(end)
-                  if (playbackMode !== 'region') {
-                    setRawRegion(start, end)
-                    setLoop(true)
-                  }
-                }}
-                onClearRegion={() => {
-                  setRegionStart(null)
-                  setRegionEnd(null)
-                  setRawRegion(null)
-                  setLoop(false)
-                  if (playbackMode === 'region') {
-                    handlePlayFullSong()
-                  }
-                }}
-                playbackMode={playbackMode}
-                onPlayFullSong={handlePlayFullSong}
-                fullSongDuration={fullSongDuration}
+                onVolumeChange={setVolume}
+                onSoloToggle={setSolo}
+                onMuteToggle={setMute}
+                onReverbChange={setReverb}
+                onPanChange={setPan}
+                onReset={resetVolumes}
               />
-            ) : (
-              <div className="glass rounded-xl p-4 text-center">
-                <div className="flex items-center justify-center gap-3 text-gray-400">
-                  <div className="animate-spin text-2xl">⏳</div>
-                  <span>Loading audio for playback...</span>
-                </div>
-              </div>
-            )}
+            </div>
           </div>
+        </div>
+      </div>
 
-          {/* Right column: Stem Mixer */}
-          <div className="lg:col-span-2">
-            <StemMixer
-              stems={stems}
-              volumes={volumes}
-              solos={solos}
-              mutes={mutes}
-              reverbs={reverbs}
-              pans={pans}
-              isPlaying={isPlaying}
-              onVolumeChange={setVolume}
-              onSoloToggle={setSolo}
-              onMuteToggle={setMute}
-              onReverbChange={setReverb}
-              onPanChange={setPan}
-              onReset={resetVolumes}
-            />
-          </div>
+      {/* Pinned bottom transport bar */}
+      {isLoaded && (
+        <div className="fixed bottom-0 left-0 right-0 lg:right-80 z-40">
+          <TransportBar
+            isPlaying={isPlaying}
+            currentTime={currentTime}
+            duration={duration}
+            onPlay={handlePlay}
+            onPlaySection={handlePlaySection}
+            isRawRegionActive={isRawRegionActive}
+            onPause={pause}
+            onStop={stop}
+            onSeek={seek}
+            regionStart={regionStart}
+            regionEnd={regionEnd}
+            bpm={detection?.bpm}
+            onRegionChange={(start, end) => {
+              setRegionStart(start)
+              setRegionEnd(end)
+              if (playbackMode !== 'region') {
+                setRawRegion(start, end)
+                setLoop(true)
+              }
+            }}
+            onClearRegion={() => {
+              setRegionStart(null)
+              setRegionEnd(null)
+              setRawRegion(null)
+              setLoop(false)
+              if (playbackMode === 'region') {
+                handlePlayFullSong()
+              }
+            }}
+            playbackMode={playbackMode}
+            onPlayFullSong={handlePlayFullSong}
+            fullSongDuration={fullSongDuration}
+          />
         </div>
+      )}
 
-        {/* Error display */}
-        {error && (
-          <div className="fixed bottom-4 right-4 bg-red-500/90 text-white px-4 py-3 rounded-lg shadow-lg animate-fade-in">
-            <div className="flex items-center gap-3">
-              <span>{error}</span>
-              <button
-                onClick={clearError}
-                className="text-white/80 hover:text-white"
-              >
-                &times;
-              </button>
-            </div>
+      {/* Error toast */}
+      {error && (
+        <div className="fixed bottom-20 right-4 lg:right-84 bg-red-500/90 text-white px-4 py-3 rounded-lg shadow-lg animate-fade-in z-50">
+          <div className="flex items-center gap-3">
+            <span className="text-sm">{error}</span>
+            <button onClick={clearError} className="text-white/80 hover:text-white">&times;</button>
           </div>
-        )}
-      </div>
+        </div>
+      )}
 
       {/* Processing overlay */}
       {isProcessing && (

frontend/src/components/AnalysisDisplay.jsx

@@ -1,71 +1,168 @@
-import React, { useEffect } from 'react'
+import React, { useState, useEffect, useMemo, useCallback } from 'react'
+
+const ALL_KEYS_WITH_MODES = [
+  'C major', 'C minor', 'C# major', 'C# minor',
+  'D major', 'D minor', 'D# major', 'D# minor',
+  'E major', 'E minor', 'F major', 'F minor',
+  'F# major', 'F# minor', 'G major', 'G minor',
+  'G# major', 'G# minor', 'A major', 'A minor',
+  'A# major', 'A# minor', 'B major', 'B minor'
+]
+
+const KEY_NAMES = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B']
+
+function AnalysisDisplay({
+  detection,
+  loading,
+  onReady,
+  appliedSemitones = 0,
+  onProcess,
+  isProcessing,
+  hasRegion
+}) {
+  const [targetKeyWithMode, setTargetKeyWithMode] = useState('C major')
+  const [targetBpm, setTargetBpm] = useState(120)
 
-function AnalysisDisplay({ detection, loading, onReady }) {
   useEffect(() => {
     if (detection && onReady) {
-      console.log('=== AnalysisDisplay: detection ready, calling onReady ===')
-      console.log('Detection data:', detection)
       onReady()
     }
   }, [detection, onReady])
 
+  useEffect(() => {
+    if (detection) {
+      setTargetKeyWithMode(`${detection.key} ${detection.mode}`)
+      setTargetBpm(detection.bpm)
+    }
+  }, [detection])
+
+  const targetKey = targetKeyWithMode.split(' ')[0]
+
+  const semitones = useMemo(() => {
+    if (!detection || !targetKey) return 0
+    const fromIdx = KEY_NAMES.indexOf(detection.key)
+    const toIdx = KEY_NAMES.indexOf(targetKey)
+    let diff = toIdx - fromIdx
+    if (diff > 6) diff -= 12
+    if (diff < -6) diff += 12
+    return diff
+  }, [detection, targetKey])
+
+  const handleKeyShift = useCallback((shift) => {
+    const currentIdx = KEY_NAMES.indexOf(targetKey)
+    const newIdx = (currentIdx + shift + 12) % 12
+    const mode = targetKeyWithMode.split(' ')[1]
+    setTargetKeyWithMode(`${KEY_NAMES[newIdx]} ${mode}`)
+  }, [targetKey, targetKeyWithMode])
+
+  const handleApply = useCallback(() => {
+    if (!detection || !onProcess) return
+    const newBpm = Math.abs(targetBpm - detection.bpm) > 0.1 ? targetBpm : null
+    onProcess(semitones, newBpm)
+  }, [onProcess, semitones, targetBpm, detection])
+
+  const hasChanges = detection && (semitones !== 0 || Math.abs(targetBpm - detection.bpm) > 0.1)
+
   if (loading) {
     return (
-      <div className="glass rounded-xl p-6 animate-pulse">
-        <div className="flex items-center gap-4">
-          <div className="w-24 h-24 bg-gray-700/50 rounded-lg"></div>
-          <div className="flex-1 space-y-3">
-            <div className="h-6 bg-gray-700/50 rounded w-1/2"></div>
-            <div className="h-4 bg-gray-700/50 rounded w-1/3"></div>
-          </div>
+      <div className="card rounded-xl p-5 animate-pulse">
+        <div className="flex gap-6">
+          <div className="h-12 bg-white/5 rounded-lg w-40"></div>
+          <div className="h-12 bg-white/5 rounded-lg w-40"></div>
         </div>
       </div>
     )
   }
 
-  if (!detection) {
-    return null
-  }
-
-  const getConfidenceColor = (confidence) => {
-    if (confidence >= 0.8) return 'bg-green-500'
-    if (confidence >= 0.6) return 'bg-yellow-500'
-    return 'bg-red-500'
-  }
+  if (!detection) return null
 
-  const getConfidenceLabel = (confidence) => {
-    if (confidence >= 0.8) return 'High'
-    if (confidence >= 0.6) return 'Medium'
-    return 'Low'
-  }
+  const btnClass = 'w-8 h-8 rounded-lg font-bold text-sm transition-all bg-white/[0.06] hover:bg-white/[0.12] text-gray-300 border border-white/[0.08] flex items-center justify-center flex-shrink-0'
+  const inputClass = 'bg-surface-elevated border border-white/[0.08] rounded-lg text-white text-sm text-center focus:outline-none focus:border-accent-500 transition-colors'
 
   return (
-    <div className="glass rounded-xl p-6 animate-fade-in">
-      <h2 className="text-lg font-semibold mb-4 text-gray-300">Analysis Results</h2>
-
-      <div className="grid grid-cols-2 gap-6">
-        {/* BPM Display */}
-        <div className="bg-gray-800/60 border border-purple-500/30 rounded-xl p-4 flex flex-col items-center gap-1">
-          <span className="text-xs text-gray-500 uppercase tracking-widest">BPM</span>
-          <div className="flex items-baseline gap-2">
-            <span className="text-4xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
-              {detection.bpm.toFixed(1)}
-            </span>
-          </div>
+    <div className="card rounded-xl p-5 animate-fade-in">
+      <div className="flex items-center gap-6 flex-wrap">
+
+        {/* BPM Control: - [editable input] + */}
+        <div className="flex items-center gap-1.5">
+          <span className="text-[10px] uppercase tracking-widest text-accent-500 font-medium mr-2">BPM</span>
+          <button onClick={() => setTargetBpm(v => Math.max(20, v - 1))} className={btnClass}>-</button>
+          <input
+            type="number"
+            value={Math.round(targetBpm)}
+            onChange={(e) => {
+              const val = parseFloat(e.target.value)
+              if (!isNaN(val) && val >= 20 && val <= 400) setTargetBpm(val)
+            }}
+            min={20}
+            max={400}
+            className={`${inputClass} w-20 px-2 py-1.5 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none`}
+          />
+          <button onClick={() => setTargetBpm(v => Math.min(400, v + 1))} className={btnClass}>+</button>
+          {Math.abs(targetBpm - detection.bpm) > 0.1 && (
+            <button
+              onClick={() => setTargetBpm(detection.bpm)}
+              className="text-[10px] text-gray-500 hover:text-gray-300 transition-colors ml-1"
+            >
+              Reset
+            </button>
+          )}
         </div>
 
-        {/* Key Display */}
-        <div className="bg-gray-800/60 border border-cyan-500/30 rounded-xl p-4 flex flex-col items-center gap-1">
-          <span className="text-xs text-gray-500 uppercase tracking-widest">Key</span>
-          <div className="flex items-baseline gap-2">
-            <span className="text-4xl font-bold bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">
-              {detection.key}
-            </span>
-            <span className="text-gray-400 text-lg capitalize">
-              {detection.mode}
+        {/* Divider */}
+        <div className="w-px h-10 bg-white/[0.08]"></div>
+
+        {/* Key Control: - [dropdown] + */}
+        <div className="flex items-center gap-1.5">
+          <span className="text-[10px] uppercase tracking-widest text-accent-500 font-medium mr-2">Key</span>
+          <button onClick={() => handleKeyShift(-1)} className={btnClass}>-</button>
+          <select
+            value={targetKeyWithMode}
+            onChange={(e) => setTargetKeyWithMode(e.target.value)}
+            className={`${inputClass} w-28 px-2 py-1.5 cursor-pointer`}
+          >
+            {ALL_KEYS_WITH_MODES.map(k => (
+              <option key={k} value={k}>{k}</option>
+            ))}
+          </select>
+          <button onClick={() => handleKeyShift(1)} className={btnClass}>+</button>
+          {semitones !== 0 && (
+            <span className="text-xs text-gray-500 font-mono ml-1">
+              {semitones > 0 ? '+' : ''}{semitones}st
             </span>
-          </div>
+          )}
+          {semitones !== 0 && (
+            <button
+              onClick={() => setTargetKeyWithMode(`${detection.key} ${detection.mode}`)}
+              className="text-[10px] text-gray-500 hover:text-gray-300 transition-colors ml-1"
+            >
+              Reset
+            </button>
+          )}
         </div>
+
+        {/* Divider */}
+        <div className="w-px h-10 bg-white/[0.08]"></div>
+
+        {/* Apply Button */}
+        <button
+          onClick={handleApply}
+          disabled={!hasChanges || isProcessing}
+          className={`px-5 py-2 rounded-lg text-sm font-medium transition-all ${
+            !hasChanges || isProcessing
+              ? 'bg-white/[0.04] text-gray-600 cursor-not-allowed'
+              : 'bg-accent-500 hover:bg-accent-400 text-white'
+          }`}
+        >
+          {isProcessing ? 'Processing...' : hasChanges ? (hasRegion ? 'Apply to Selection' : 'Apply') : 'No Changes'}
+        </button>
+
+        {/* Original values */}
+        {(semitones !== 0 || Math.abs(targetBpm - detection.bpm) > 0.1) && (
+          <span className="text-[10px] text-gray-600 ml-auto">
+            Original: {detection.key} {detection.mode} / {detection.bpm.toFixed(1)} BPM
+          </span>
+        )}
       </div>
     </div>
   )

frontend/src/components/ChordDisplay.jsx

@@ -0,0 +1,61 @@
+import React, { useMemo } from 'react'
+
+const KEY_NAMES = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B']
+
+export function transposeChord(chord, semitones) {
+  if (!chord || chord === 'N.C.' || semitones === 0) return chord
+  let root, suffix
+  if (chord.length >= 2 && chord[1] === '#') {
+    root = chord.slice(0, 2)
+    suffix = chord.slice(2)
+  } else {
+    root = chord[0]
+    suffix = chord.slice(1)
+  }
+  const idx = KEY_NAMES.indexOf(root)
+  if (idx === -1) return chord
+  return KEY_NAMES[(idx + semitones + 120) % 12] + suffix
+}
+
+function ChordDisplay({ chordsData, semitones = 0 }) {
+  const chords = chordsData?.chords || []
+
+  // Build unique chord list
+  const uniqueChords = useMemo(() => {
+    const seen = new Set()
+    return chords
+      .filter(c => c.chord !== 'N.C.')
+      .map(c => transposeChord(c.chord, semitones))
+      .filter(c => {
+        if (seen.has(c)) return false
+        seen.add(c)
+        return true
+      })
+  }, [chords, semitones])
+
+  if (!chordsData || uniqueChords.length === 0) return null
+
+  return (
+    <div className="card rounded-xl p-5 animate-fade-in">
+      <div className="flex items-center justify-between mb-3">
+        <h2 className="text-sm font-semibold text-white">Chords in this Song</h2>
+        <span className="text-[10px] text-gray-600 uppercase tracking-wider">
+          {chordsData.chord_source === 'midi' ? 'MIDI' : 'Audio'}
+        </span>
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        {uniqueChords.map((chord, i) => (
+          <span
+            key={i}
+            className="px-3 py-1.5 rounded-lg bg-surface-elevated border border-white/[0.06] text-sm font-semibold text-gray-300"
+          >
+            {chord}
+          </span>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(ChordDisplay)

frontend/src/components/FileUpload.jsx

@@ -88,18 +88,18 @@ function FileUpload({ onUpload, onLoadPreset, loading, error, onClearError, cach
   */
 
   return (
-    <div className="glass rounded-2xl p-6 animate-fade-in max-w-4xl mx-auto">
+    <div className="card rounded-2xl p-6 animate-fade-in max-w-4xl mx-auto">
       <h2 className="text-xl font-semibold mb-6 text-center">Load a Demo Track</h2>
 
       {/* Demo presets dropdown */}
       {presets.length > 0 && (
-        <div className="p-4 bg-gray-800/50 rounded-xl border border-gray-600">
+        <div className="p-4 bg-surface-elevated rounded-xl border border-white/[0.08]">
           <div className="flex gap-3">
             <select
               value={selectedPreset}
               onChange={(e) => setSelectedPreset(e.target.value)}
               disabled={loading}
-              className="flex-1 bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-primary-500"
+              className="flex-1 bg-surface border border-white/[0.08] rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-accent-500"
             >
               <option value="">Select a demo...</option>
               {presets.map(p => {
@@ -115,7 +115,7 @@ function FileUpload({ onUpload, onLoadPreset, loading, error, onClearError, cach
             <button
               onClick={() => selectedPreset && onLoadPreset(selectedPreset)}
               disabled={loading || !selectedPreset}
-              className="px-4 py-2 rounded-lg text-sm font-medium transition-all disabled:bg-gray-700 disabled:text-gray-500 disabled:cursor-not-allowed bg-gradient-to-r from-primary-600 to-accent-600 hover:from-primary-500 hover:to-accent-500"
+              className="px-4 py-2 rounded-lg text-sm font-medium transition-all disabled:bg-white/[0.04] disabled:text-gray-600 disabled:cursor-not-allowed bg-accent-500 hover:bg-accent-400 text-white"
             >
               {loading ? 'Loading...' : 'Load'}
             </button>

frontend/src/components/LiveChordView.jsx

@@ -0,0 +1,127 @@
+import React, { useMemo, useRef, useEffect, useState } from 'react'
+import { transposeChord } from './ChordDisplay'
+
+const VISIBLE_SIDES = 3 // number of chords to show on each side
+
+function LiveChordView({ chordsData, currentTime, isPlaying, semitones = 0, onSeek }) {
+  const containerRef = useRef(null)
+  const [prevIndex, setPrevIndex] = useState(-1)
+
+  const chords = chordsData?.chords || []
+  const hasChords = chords.length > 0
+
+  // Binary search for active chord
+  const activeIndex = useMemo(() => {
+    if (!hasChords) return -1
+    let lo = 0, hi = chords.length - 1
+    while (lo <= hi) {
+      const mid = (lo + hi) >> 1
+      if (currentTime < chords[mid].start_time) hi = mid - 1
+      else if (currentTime >= chords[mid].end_time) lo = mid + 1
+      else return mid
+    }
+    return -1
+  }, [chords, currentTime, hasChords])
+
+  // Track previous index for transition direction
+  useEffect(() => {
+    if (activeIndex !== -1 && activeIndex !== prevIndex) {
+      setPrevIndex(activeIndex)
+    }
+  }, [activeIndex, prevIndex])
+
+  if (!chordsData || !hasChords) return null
+
+  // Progress within the current chord (0-1)
+  const chordProgress = activeIndex >= 0
+    ? (() => {
+        const c = chords[activeIndex]
+        const span = c.end_time - c.start_time
+        return span > 0 ? Math.max(0, Math.min(1, (currentTime - c.start_time) / span)) : 0
+      })()
+    : 0
+
+  // Build the visible window of chords
+  const windowStart = Math.max(0, (activeIndex >= 0 ? activeIndex : 0) - VISIBLE_SIDES)
+  const windowEnd = Math.min(chords.length - 1, (activeIndex >= 0 ? activeIndex : 0) + VISIBLE_SIDES)
+
+  const visibleChords = []
+  for (let i = windowStart; i <= windowEnd; i++) {
+    visibleChords.push({ ...chords[i], index: i })
+  }
+
+  return (
+    <div className="card rounded-xl p-6 animate-fade-in">
+      {/* Teleprompter row */}
+      <div
+        ref={containerRef}
+        className="flex items-center justify-center gap-2 overflow-hidden py-4"
+        style={{ minHeight: '100px' }}
+      >
+        {visibleChords.map((entry) => {
+          const i = entry.index
+          const isActive = i === activeIndex
+          const isPast = activeIndex >= 0 && i < activeIndex
+          const isFuture = activeIndex >= 0 && i > activeIndex
+          const displayChord = transposeChord(entry.chord, semitones)
+          const isNC = displayChord === 'N.C.'
+
+          // Distance from active chord (0 = active, 1 = adjacent, etc.)
+          const distance = activeIndex >= 0 ? Math.abs(i - activeIndex) : 0
+
+          // Opacity and scale based on distance
+          let opacity, scale, textSize
+          if (isActive) {
+            opacity = 1
+            scale = 1
+            textSize = 'text-5xl'
+          } else if (distance === 1) {
+            opacity = isPast ? 0.35 : 0.5
+            scale = 0.7
+            textSize = 'text-2xl'
+          } else if (distance === 2) {
+            opacity = isPast ? 0.18 : 0.25
+            scale = 0.55
+            textSize = 'text-xl'
+          } else {
+            opacity = isPast ? 0.08 : 0.12
+            scale = 0.45
+            textSize = 'text-lg'
+          }
+
+          if (isNC && !isActive) {
+            opacity *= 0.4
+          }
+
+          return (
+            <button
+              key={i}
+              onClick={() => onSeek && onSeek(entry.start_time)}
+              className={`
+                flex-shrink-0 transition-all duration-300 ease-out cursor-pointer
+                font-bold tracking-tight px-3
+                ${textSize}
+                ${isActive ? 'text-white' : 'text-gray-400'}
+              `}
+              style={{
+                opacity,
+                transform: `scale(${scale})`,
+              }}
+            >
+              {displayChord}
+            </button>
+          )
+        })}
+      </div>
+
+      {/* Subtle label */}
+      {activeIndex >= 0 && (
+        <p className="text-center text-[10px] text-gray-600 mt-1 uppercase tracking-wider">
+          Now Playing
+        </p>
+      )}
+    </div>
+  )
+}
+
+export default React.memo(LiveChordView)

frontend/src/components/ProcessingOverlay.jsx

@@ -11,7 +11,7 @@ function ProcessingOverlay({ stems, progress }) {
 
   return (
     <div className="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50 animate-fade-in">
-      <div className="glass rounded-2xl p-8 max-w-md w-full mx-4">
+      <div className="card rounded-2xl p-8 max-w-md w-full mx-4">
         <div className="text-center mb-6">
           <div className="inline-block animate-spin-slow text-5xl mb-4">
             ⚙️
@@ -68,7 +68,7 @@ function ProcessingOverlay({ stems, progress }) {
         <div className="mt-6">
           <div className="h-2 bg-gray-700 rounded-full overflow-hidden">
             <div
-              className="h-full bg-gradient-to-r from-primary-500 to-accent-500 transition-all duration-300"
+              className="h-full bg-accent-500 transition-all duration-300"
               style={{
                 width: `${(doneCount / Math.max(totalSteps, 1)) * 100}%`
               }}

frontend/src/components/ScalesDisplay.jsx

@@ -0,0 +1,72 @@
+import React from 'react'
+
+const KEY_NAMES = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B']
+
+function transposeNote(note, semitones) {
+  if (!note || semitones === 0) return note
+  const idx = KEY_NAMES.indexOf(note)
+  if (idx === -1) return note
+  return KEY_NAMES[(idx + semitones + 120) % 12]
+}
+
+function ScalesDisplay({ scales, semitones = 0 }) {
+  if (!scales || scales.length === 0) return null
+
+  return (
+    <div className="card rounded-xl p-5 animate-fade-in">
+      <h2 className="text-sm font-semibold text-white mb-3">Suggested Scales</h2>
+
+      <div className="flex gap-3 overflow-x-auto pb-2 scrollbar-thin">
+        {scales.map((scale, i) => {
+          const parts = scale.name.split(' ')
+          const scaleRoot = parts[0]
+          const scaleSuffix = parts.slice(1).join(' ')
+          const transposedRoot = transposeNote(scaleRoot, semitones)
+          const transposedNotes = scale.notes.map(n => transposeNote(n, semitones))
+
+          return (
+            <div
+              key={i}
+              className={`
+                flex-shrink-0 rounded-xl px-4 py-3 border transition-colors min-w-[200px]
+                ${i === 0
+                  ? 'bg-accent-500/[0.08] border-accent-500/20'
+                  : 'bg-surface-elevated border-white/[0.06]'
+                }
+              `}
+            >
+              {/* Header row */}
+              <div className="flex items-center gap-2 mb-2">
+                <span className="text-sm font-semibold text-white">
+                  {transposedRoot} {scaleSuffix}
+                </span>
+                {scale.guitar_friendly && (
+                  <span className="text-[10px] text-amber-400 font-medium">guitar</span>
+                )}
+                {i === 0 && (
+                  <span className="text-[10px] px-1.5 py-0.5 rounded bg-accent-500/20 text-accent-400 font-medium ml-auto">
+                    Best fit
+                  </span>
+                )}
+              </div>
+
+              {/* Note chips */}
+              <div className="flex flex-wrap gap-1">
+                {transposedNotes.map((note, j) => (
+                  <span
+                    key={j}
+                    className="text-[11px] px-1.5 py-0.5 rounded bg-surface text-gray-400"
+                  >
+                    {note}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(ScalesDisplay)

frontend/src/components/StemMixer.jsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import React, { useRef, useState } from 'react'
 
 const STEM_ICONS = {
   bass: '🎸',
@@ -13,11 +13,13 @@ const STEM_ICONS = {
   other: '🎵'
 }
 
-// ─── Custom volume slider ────────────────────────────────────────────────────
+const STEM_DISPLAY_NAMES = {
+  synth: 'Keys',
+}
+
 function VolumeSlider({ value, onChange, disabled }) {
   const containerRef = useRef(null)
   const dragging = useRef(false)
-
   const pct = Math.max(0, Math.min(1, value)) * 100
 
   const calcValue = (clientX) => {
@@ -42,54 +44,45 @@ function VolumeSlider({ value, onChange, disabled }) {
   return (
     <div
       ref={containerRef}
-      className="relative h-5 select-none"
+      className="relative h-6 flex-1 select-none"
       style={{ cursor: disabled ? 'default' : 'pointer', touchAction: 'none' }}
       onPointerDown={handlePointerDown}
       onPointerMove={handlePointerMove}
       onPointerUp={handlePointerUp}
     >
-      {/* Track */}
       <div
         className="absolute inset-x-0 rounded-full"
         style={{ height: 4, top: '50%', transform: 'translateY(-50%)' }}
       >
-        <div className="w-full h-full rounded-full bg-gray-700/80" />
+        <div className="w-full h-full rounded-full bg-white/[0.08]" />
         <div
           className="absolute top-0 left-0 h-full rounded-full"
-          style={{ width: `${pct}%`, background: disabled ? '#4b5563' : '#a855f7' }}
+          style={{ width: `${pct}%`, background: disabled ? '#374151' : '#14B8A6' }}
         />
       </div>
-
-      {/* Thumb — circular, centered on the track */}
       <div
         className="absolute rounded-full pointer-events-none"
         style={{
-          width: 14,
-          height: 14,
+          width: 12,
+          height: 12,
           top: '50%',
           left: `${pct}%`,
           transform: 'translate(-50%, -50%)',
           background: disabled ? '#374151' : 'white',
-          border: `2px solid ${disabled ? '#6b7280' : '#a855f7'}`,
-          boxShadow: disabled ? 'none' : '0 0 0 3px rgba(168,85,247,0.25), 0 0 6px rgba(168,85,247,0.4)',
+          border: `2px solid ${disabled ? '#4b5563' : '#14B8A6'}`,
         }}
       />
     </div>
   )
 }
 
-// ─── SVG rotary knob ─────────────────────────────────────────────────────────
-// True rotary: tracks the angle of the mouse around the knob center.
-// Dragging clockwise increases value; counterclockwise decreases it.
 function Knob({ value, min, max, onChange, label, color, showCenterTick = false, disabled, endLabels }) {
   const dragRef = useRef(null)
-
   const norm = Math.max(0, Math.min(1, (value - min) / (max - min)))
-  const SIZE = 40
+  const SIZE = 36
   const cx = SIZE / 2
   const cy = SIZE / 2
-  const R = 12
-
+  const R = 11
   const START = -135
   const angleDeg = START + norm * 270
 
@@ -106,18 +99,7 @@ function Knob({ value, min, max, onChange, label, color, showCenterTick = false,
   }
 
   const tip = toXY(angleDeg, R - 3)
-  const minTick = toXY(START, R + 1)
-  const minTickIn = toXY(START, R - 2)
-  const maxTick = toXY(135, R + 1)
-  const maxTickIn = toXY(135, R - 2)
-  const cTick = toXY(0, R + 1)
-  const cTickIn = toXY(0, R - 3)
-
-  // End label positions — just outside the disc near min/max ticks
-  const minLabelPos = endLabels ? toXY(START, R + 8) : null
-  const maxLabelPos = endLabels ? toXY(135, R + 8) : null
 
-  // Returns angle in degrees, clockwise from 12 o'clock, for a pointer event
   const getAngle = (e, rect) => {
     const kx = rect.left + rect.width / 2
     const ky = rect.top + rect.height / 2
@@ -128,34 +110,24 @@ function Knob({ value, min, max, onChange, label, color, showCenterTick = false,
     if (disabled) return
     const rect = e.currentTarget.getBoundingClientRect()
     e.currentTarget.setPointerCapture(e.pointerId)
-    dragRef.current = {
-      rect,
-      lastAngle: getAngle(e, rect),
-      accumulated: 0,
-      startValue: value,
-    }
+    dragRef.current = { rect, lastAngle: getAngle(e, rect), accumulated: 0, startValue: value }
   }
 
   const handlePointerMove = (e) => {
     if (!dragRef.current) return
     const currentAngle = getAngle(e, dragRef.current.rect)
     let delta = currentAngle - dragRef.current.lastAngle
-    // Normalize to [-180, 180] to handle the 360°→0° wraparound
     if (delta > 180) delta -= 360
     if (delta < -180) delta += 360
     dragRef.current.accumulated += delta
     dragRef.current.lastAngle = currentAngle
     const range = max - min
-    // 270° of rotation = full range
-    const newVal = Math.max(min, Math.min(max,
-      dragRef.current.startValue + dragRef.current.accumulated * (range / 270)
-    ))
+    const newVal = Math.max(min, Math.min(max, dragRef.current.startValue + dragRef.current.accumulated * (range / 270)))
     onChange(newVal)
   }
 
   const handlePointerUp = () => { dragRef.current = null }
 
-  // Value display
   let display
   if (showCenterTick) {
     if (Math.abs(value) < 0.01) display = 'C'
@@ -164,8 +136,6 @@ function Knob({ value, min, max, onChange, label, color, showCenterTick = false,
     display = `${Math.round(value * 100)}%`
   }
 
-  const cursor = disabled ? 'default' : 'grab'
-
   return (
     <div className="flex flex-col items-center select-none" style={{ gap: 1 }}>
       <svg
@@ -173,60 +143,20 @@ function Knob({ value, min, max, onChange, label, color, showCenterTick = false,
         onPointerDown={handlePointerDown}
         onPointerMove={handlePointerMove}
         onPointerUp={handlePointerUp}
-        style={{ cursor, touchAction: 'none', overflow: 'visible' }}
+        style={{ cursor: disabled ? 'default' : 'grab', touchAction: 'none', overflow: 'visible' }}
       >
-        {/* Disc background */}
-        <circle
-          cx={cx} cy={cy} r={R + 3}
-          fill="rgba(255,255,255,0.05)"
-          stroke="rgba(255,255,255,0.1)"
-          strokeWidth="1"
-        />
-        {/* Range arc — thin, shows full travel */}
-        <path
-          d={arcPath(R, START, 135)}
-          fill="none" stroke="#374151" strokeWidth="2" strokeLinecap="butt"
-        />
-        {/* Range limit ticks */}
-        <line x1={minTick.x.toFixed(2)} y1={minTick.y.toFixed(2)} x2={minTickIn.x.toFixed(2)} y2={minTickIn.y.toFixed(2)} stroke="#6b7280" strokeWidth="1.5" strokeLinecap="round" />
-        <line x1={maxTick.x.toFixed(2)} y1={maxTick.y.toFixed(2)} x2={maxTickIn.x.toFixed(2)} y2={maxTickIn.y.toFixed(2)} stroke="#6b7280" strokeWidth="1.5" strokeLinecap="round" />
-        {/* Center tick for pan */}
-        {showCenterTick && (
-          <line x1={cTick.x.toFixed(2)} y1={cTick.y.toFixed(2)} x2={cTickIn.x.toFixed(2)} y2={cTickIn.y.toFixed(2)} stroke="#6b7280" strokeWidth="1" strokeLinecap="round" />
-        )}
-        {/* End labels — L/R for pan, 0/50 for reverb */}
-        {endLabels && (
-          <>
-            <text
-              x={minLabelPos.x.toFixed(1)} y={minLabelPos.y.toFixed(1)}
-              textAnchor="middle" dominantBaseline="middle"
-              fill="#6b7280" fontSize="6.5" fontFamily="monospace"
-            >{endLabels[0]}</text>
-            <text
-              x={maxLabelPos.x.toFixed(1)} y={maxLabelPos.y.toFixed(1)}
-              textAnchor="middle" dominantBaseline="middle"
-              fill="#6b7280" fontSize="6.5" fontFamily="monospace"
-            >{endLabels[1]}</text>
-          </>
-        )}
-        {/* Pointer line from center to tip */}
-        <line
-          x1={cx} y1={cy}
-          x2={tip.x.toFixed(2)} y2={tip.y.toFixed(2)}
-          stroke={color} strokeWidth="2" strokeLinecap="round"
-        />
-        {/* Center dot */}
-        <circle cx={cx} cy={cy} r="2" fill="rgba(255,255,255,0.3)" />
-        {/* Tip dot */}
-        <circle cx={tip.x.toFixed(2)} cy={tip.y.toFixed(2)} r="2" fill={color} />
+        <circle cx={cx} cy={cy} r={R + 3} fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.06)" strokeWidth="1" />
+        <path d={arcPath(R, START, 135)} fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="2" strokeLinecap="butt" />
+        <line x1={cx} y1={cy} x2={tip.x.toFixed(2)} y2={tip.y.toFixed(2)} stroke={color} strokeWidth="2" strokeLinecap="round" />
+        <circle cx={cx} cy={cy} r="1.5" fill="rgba(255,255,255,0.2)" />
+        <circle cx={tip.x.toFixed(2)} cy={tip.y.toFixed(2)} r="1.5" fill={color} />
       </svg>
-      <span className="text-[10px] text-gray-400 leading-none">{label}</span>
-      <span className="text-[10px] font-mono text-gray-300 leading-none">{display}</span>
+      <span className="text-[9px] text-gray-500 leading-none">{label}</span>
+      <span className="text-[9px] font-mono text-gray-400 leading-none">{display}</span>
     </div>
   )
 }
 
-// ─── Main mixer ──────────────────────────────────────────────────────────────
 function StemMixer({
   stems,
   volumes,
@@ -242,6 +172,8 @@ function StemMixer({
   onPanChange,
   onReset
 }) {
+  const [expandedStem, setExpandedStem] = useState(null)
+
   const getIcon = (stemName) => {
     const name = stemName.toLowerCase()
     for (const [key, icon] of Object.entries(STEM_ICONS)) {
@@ -252,9 +184,9 @@ function StemMixer({
 
   if (!stems || stems.length === 0) {
     return (
-      <div className="glass rounded-xl p-4">
-        <h2 className="text-lg font-semibold mb-3 text-white">Stem Mixer</h2>
-        <p className="text-gray-400 text-sm">No stems loaded yet</p>
+      <div className="p-5">
+        <h2 className="text-sm font-semibold text-white mb-3">Stem Mixer</h2>
+        <p className="text-gray-500 text-sm">No stems loaded</p>
       </div>
     )
   }
@@ -262,94 +194,101 @@ function StemMixer({
   const hasSolos = Object.values(solos).some(s => s)
 
   return (
-    <div className="glass rounded-xl p-4 h-fit sticky top-4">
-      <div className="flex items-center justify-between mb-3">
-        <h2 className="text-lg font-semibold text-white">Stem Mixer</h2>
+    <div className="p-4">
+      <div className="flex items-center justify-between mb-4">
+        <h2 className="text-sm font-semibold text-white">Stems</h2>
         <button
           onClick={onReset}
-          className="text-xs px-2.5 py-1 bg-white/10 hover:bg-white/20 rounded text-gray-300 transition-colors"
+          className="text-[10px] px-2 py-1 bg-white/[0.06] hover:bg-white/[0.1] rounded text-gray-400 transition-colors"
         >
-          Reset All
+          Reset
         </button>
       </div>
 
-      <div className="space-y-1.5">
-        {stems.map((stem) => {
+      <div className="space-y-0">
+        {stems.map((stem, idx) => {
           const volume = volumes[stem] ?? 1
           const isSolo = solos[stem] ?? false
           const isMuted = mutes[stem] ?? false
-          const reverb = reverbs?.[stem] ?? 0.15
+          const reverb = reverbs?.[stem] ?? 0.0
           const pan = pans?.[stem] ?? 0
           const isAudible = !isMuted && (hasSolos ? isSolo : true) && volume > 0
+          const isExpanded = expandedStem === stem
 
           return (
-            <div
-              key={stem}
-              className={`px-2.5 py-1.5 rounded-lg transition-all duration-300 ${
-                isMuted
-                  ? 'bg-gray-900/50 opacity-50'
-                  : isPlaying && isAudible
-                    ? 'bg-purple-500/20 shadow-lg shadow-purple-500/10'
-                    : 'bg-white/5'
-              }`}
-            >
-              {/* Row 1: icon + name | solo + mute */}
-              <div className="flex items-center justify-between mb-1">
-                <div className="flex items-center gap-1.5">
-                  <span className="text-sm">{getIcon(stem)}</span>
-                  <span className="text-xs text-white font-medium capitalize">
-                    {stem.replace(/_/g, ' ')}
-                  </span>
-                </div>
-                <div className="flex gap-1">
+            <div key={stem}>
+              <div
+                className={`px-3 py-3 transition-all duration-200 ${
+                  isMuted ? 'opacity-40' : ''
+                } ${isPlaying && isAudible ? 'bg-accent-500/[0.06]' : ''}`}
+              >
+                {/* Main row: icon + name | volume slider | S M */}
+                <div className="flex items-center gap-3">
+                  {/* Icon + name */}
                   <button
-                    onClick={() => onSoloToggle(stem, !isSolo)}
-                    className={`w-6 h-6 rounded text-[10px] font-semibold transition-all ${
-                      isSolo ? 'bg-yellow-500 text-black' : 'bg-white/10 text-gray-400 hover:bg-white/20'
-                    }`}
-                    title="Solo"
-                  >S</button>
-                  <button
-                    onClick={() => onMuteToggle(stem, !isMuted)}
-                    className={`w-6 h-6 rounded text-[10px] font-semibold transition-all ${
-                      isMuted ? 'bg-red-500 text-white' : 'bg-white/10 text-gray-400 hover:bg-white/20'
-                    }`}
-                    title="Mute"
-                  >M</button>
+                    onClick={() => setExpandedStem(isExpanded ? null : stem)}
+                    className="flex items-center gap-2 min-w-[90px] text-left"
+                  >
+                    <span className="text-sm">{getIcon(stem)}</span>
+                    <span className="text-xs text-white font-medium capitalize truncate">
+                      {STEM_DISPLAY_NAMES[stem.toLowerCase()] || stem.replace(/_/g, ' ')}
+                    </span>
+                  </button>
+
+                  {/* Volume slider */}
+                  <VolumeSlider
+                    value={volume}
+                    onChange={(v) => onVolumeChange(stem, v)}
+                    disabled={isMuted}
+                  />
+
+                  {/* Solo / Mute pills */}
+                  <div className="flex gap-1 flex-shrink-0">
+                    <button
+                      onClick={() => onSoloToggle(stem, !isSolo)}
+                      className={`rounded-full px-2 py-0.5 text-[10px] font-semibold transition-all ${
+                        isSolo ? 'bg-amber-500 text-black' : 'bg-white/[0.06] text-gray-500 hover:bg-white/[0.1]'
+                      }`}
+                    >S</button>
+                    <button
+                      onClick={() => onMuteToggle(stem, !isMuted)}
+                      className={`rounded-full px-2 py-0.5 text-[10px] font-semibold transition-all ${
+                        isMuted ? 'bg-red-500 text-white' : 'bg-white/[0.06] text-gray-500 hover:bg-white/[0.1]'
+                      }`}
+                    >M</button>
+                  </div>
                 </div>
-              </div>
 
-              {/* Row 2: volume slider */}
-              <VolumeSlider
-                value={volume}
-                onChange={(v) => onVolumeChange(stem, v)}
-                disabled={isMuted}
-              />
-
-              {/* Row 3: knobs side by side beneath slider */}
-              <div className="flex justify-around mt-1">
-                <Knob
-                  value={pan}
-                  min={-1}
-                  max={1}
-                  onChange={(v) => onPanChange && onPanChange(stem, v)}
-                  label="Pan"
-                  color="#22d3ee"
-                  showCenterTick
-                  disabled={isMuted}
-                  endLabels={['L', 'R']}
-                />
-                <Knob
-                  value={reverb}
-                  min={0}
-                  max={0.5}
-                  onChange={(v) => onReverbChange && onReverbChange(stem, v)}
-                  label="Reverb"
-                  color="#60a5fa"
-                  disabled={isMuted}
-                  endLabels={['Min', 'Max']}
-                />
+                {/* Expanded: Pan + Reverb knobs */}
+                {isExpanded && (
+                  <div className="flex justify-center gap-6 mt-2 pt-2 border-t border-white/[0.04]">
+                    <Knob
+                      value={pan}
+                      min={-1}
+                      max={1}
+                      onChange={(v) => onPanChange && onPanChange(stem, v)}
+                      label="Pan"
+                      color="#14B8A6"
+                      showCenterTick
+                      disabled={isMuted}
+                    />
+                    <Knob
+                      value={reverb}
+                      min={0}
+                      max={0.5}
+                      onChange={(v) => onReverbChange && onReverbChange(stem, v)}
+                      label="Reverb"
+                      color="#14B8A6"
+                      disabled={isMuted}
+                    />
+                  </div>
+                )}
               </div>
+
+              {/* Divider */}
+              {idx < stems.length - 1 && (
+                <div className="h-px bg-white/[0.04] mx-3"></div>
+              )}
             </div>
           )
         })}

frontend/src/components/TransportBar.jsx

@@ -28,6 +28,35 @@ function parseTimeInput(str) {
 
 const HANDLE_WIDTH = 8 // pixels for drag handle hit area
 
+function timeToBarBeat(seconds, bpm) {
+  if (!bpm || !seconds || !isFinite(seconds)) return null
+  const beatDuration = 60.0 / bpm
+  const totalBeats = seconds / beatDuration
+  const bar = Math.floor(totalBeats / 4) + 1
+  const beat = Math.floor(totalBeats % 4) + 1
+  return { bar, beat }
+}
+
+function formatBarBeat(seconds, bpm) {
+  const bb = timeToBarBeat(seconds, bpm)
+  if (!bb) return null
+  return `Bar ${bb.bar}`
+}
+
+function formatBarBeatDetailed(seconds, bpm) {
+  const bb = timeToBarBeat(seconds, bpm)
+  if (!bb) return null
+  return `${bb.bar}.${bb.beat}`
+}
+
+function formatDurationBars(seconds, bpm) {
+  if (!bpm || !seconds) return null
+  const beatDuration = 60.0 / bpm
+  const bars = seconds / (beatDuration * 4)
+  if (bars === Math.floor(bars)) return `${Math.floor(bars)} bars`
+  return `${bars.toFixed(1)} bars`
+}
+
 function TransportBar({
   isPlaying,
   currentTime,
@@ -44,8 +73,19 @@ function TransportBar({
   onPlayFullSong,
   onPlaySection,
   isRawRegionActive,
-  fullSongDuration
+  fullSongDuration,
+  bpm = null
 }) {
+  // Snap modes: 'off', 'beat', 'bar'
+  const [snapMode, setSnapMode] = useState('bar')
+
+  // Snap a time value to the nearest beat or bar boundary
+  const snapTime = useCallback((time) => {
+    if (!bpm || snapMode === 'off') return time
+    const beatDuration = 60.0 / bpm
+    const snapUnit = snapMode === 'bar' ? beatDuration * 4 : beatDuration
+    return Math.round(time / snapUnit) * snapUnit
+  }, [bpm, snapMode])
   // In region mode, map the playhead position into the region's span on the full bar
   const progress = (() => {
     if (duration <= 0) return 0
@@ -119,12 +159,17 @@ function TransportBar({
     return Math.abs(clientX - handleX) <= HANDLE_WIDTH
   }, [])
 
+  // Keep snapTime ref current for use in drag listeners
+  const snapTimeRef = useRef(snapTime)
+  snapTimeRef.current = snapTime
+
   // Document-level drag listeners — attached when isDragging becomes true
   useEffect(() => {
     if (!isDragging) return
 
     const onMouseMove = (e) => {
-      const time = pixelToTimeRef.current(e.clientX)
+      const rawTime = pixelToTimeRef.current(e.clientX)
+      const time = snapTimeRef.current(rawTime)
       const MIN_REGION = 0.1
       const dt = dragTypeRef.current
 
@@ -186,7 +231,8 @@ function TransportBar({
     }
 
     // Start creating a new region
-    const time = pixelToTime(e.clientX)
+    const rawTime = pixelToTime(e.clientX)
+    const time = snapTime(rawTime)
     dragOriginRef.current = time
     dragTypeRef.current = 'create'
     setDragType('create')
@@ -211,7 +257,8 @@ function TransportBar({
   const handleStartInputBlur = () => {
     const parsed = parseTimeInput(startInputValue)
     if (parsed !== null && parsed >= 0 && parsed < barDuration) {
-      const newStart = Math.min(parsed, (regionEnd || barDuration) - 0.1)
+      const snapped = snapTime(parsed)
+      const newStart = Math.min(snapped, (regionEnd || barDuration) - 0.1)
       onRegionChange(Math.max(0, newStart), regionEnd || barDuration)
     }
     setEditingStart(false)
@@ -220,7 +267,8 @@ function TransportBar({
   const handleEndInputBlur = () => {
     const parsed = parseTimeInput(endInputValue)
     if (parsed !== null && parsed > 0 && parsed <= barDuration) {
-      const newEnd = Math.max(parsed, (regionStart || 0) + 0.1)
+      const snapped = snapTime(parsed)
+      const newEnd = Math.max(snapped, (regionStart || 0) + 0.1)
       onRegionChange(regionStart || 0, Math.min(barDuration, newEnd))
     }
     setEditingEnd(false)
@@ -236,21 +284,21 @@ function TransportBar({
   }
 
   return (
-    <div className="glass rounded-xl p-4 animate-fade-in">
+    <div className="bg-surface border-t border-white/[0.08] px-5 py-3">
       {/* Main transport controls */}
-      <div className="flex items-center gap-4">
+      <div className="flex items-center gap-3">
         {/* Play/Pause button */}
         <button
           onClick={isPlaying ? onPause : onPlay}
-          className="w-14 h-14 rounded-full bg-gradient-to-r from-primary-600 to-accent-600 hover:from-primary-500 hover:to-accent-500 flex items-center justify-center transition-all hover:scale-105"
+          className="w-10 h-10 rounded-full bg-accent-500 hover:bg-accent-400 flex items-center justify-center transition-all"
         >
           {isPlaying ? (
-            <svg className="w-6 h-6 fill-white" viewBox="0 0 24 24">
+            <svg className="w-4 h-4 fill-white" viewBox="0 0 24 24">
               <rect x="6" y="4" width="4" height="16" />
               <rect x="14" y="4" width="4" height="16" />
             </svg>
           ) : (
-            <svg className="w-6 h-6 fill-white ml-1" viewBox="0 0 24 24">
+            <svg className="w-4 h-4 fill-white ml-0.5" viewBox="0 0 24 24">
               <polygon points="5,3 19,12 5,21" />
             </svg>
           )}
@@ -259,9 +307,9 @@ function TransportBar({
         {/* Stop button */}
         <button
           onClick={onStop}
-          className="w-10 h-10 rounded-lg bg-gray-700/50 hover:bg-gray-600/50 flex items-center justify-center transition-colors"
+          className="w-8 h-8 rounded-full bg-white/[0.06] hover:bg-white/[0.1] flex items-center justify-center transition-colors"
         >
-          <svg className="w-4 h-4 fill-white" viewBox="0 0 24 24">
+          <svg className="w-3 h-3 fill-white" viewBox="0 0 24 24">
             <rect x="4" y="4" width="16" height="16" />
           </svg>
         </button>
@@ -269,7 +317,7 @@ function TransportBar({
 
         {/* Progress bar with region selection */}
         <div className="flex-1 flex items-center gap-3">
-          <span className="text-sm text-gray-400 w-12 text-right">
+          <span className="text-xs text-gray-400 w-10 text-right font-mono">
             {formatTime(currentTime)}
           </span>
 
@@ -281,10 +329,32 @@ function TransportBar({
             className="flex-1 cursor-crosshair overflow-visible relative select-none py-3"
           >
             {/* Visual progress bar */}
-            <div className="h-3 bg-gray-700/50 rounded-full relative">
+            <div className="h-1.5 bg-white/[0.08] rounded-full relative overflow-hidden">
+              {/* Bar grid lines */}
+              {bpm && snapMode !== 'off' && barDuration > 0 && (() => {
+                const beatDuration = 60.0 / bpm
+                const barDurationSecs = beatDuration * 4
+                const numBars = Math.floor(barDuration / barDurationSecs)
+                // Only show if reasonable number of bars (avoid thousands of lines)
+                if (numBars > 200) return null
+                const lines = []
+                for (let i = 1; i <= numBars; i++) {
+                  const pct = (i * barDurationSecs / barDuration) * 100
+                  if (pct >= 100) break
+                  lines.push(
+                    <div
+                      key={i}
+                      className="absolute top-0 h-full w-px bg-white/[0.1] pointer-events-none"
+                      style={{ left: `${pct}%` }}
+                    />
+                  )
+                }
+                return lines
+              })()}
+
               {/* Playback progress fill */}
               <div
-                className="absolute top-0 left-0 h-full bg-gradient-to-r from-primary-500 to-accent-500 rounded-full pointer-events-none"
+                className="absolute top-0 left-0 h-full bg-accent-500 rounded-full pointer-events-none"
                 style={{
                   width: `${progress}%`,
                   transition: isDragging ? 'none' : 'width 0.1s linear'
@@ -295,7 +365,7 @@ function TransportBar({
               {hasRegion && (
                 <>
                   <div
-                    className="absolute top-0 h-full bg-yellow-400/30 border-y border-yellow-400/50 pointer-events-none"
+                    className="absolute top-0 h-full bg-accent-500/20 border-y border-accent-500/40 pointer-events-none"
                     style={{
                       left: `${regionStartPct}%`,
                       width: `${regionEndPct - regionStartPct}%`
@@ -303,12 +373,12 @@ function TransportBar({
                   />
                   {/* Start handle */}
                   <div
-                    className="absolute top-1/2 -translate-y-1/2 w-1.5 h-5 bg-yellow-400 rounded-sm cursor-ew-resize hover:bg-yellow-300 transition-colors"
+                    className="absolute top-1/2 -translate-y-1/2 w-1.5 h-5 bg-accent-400 rounded-sm cursor-ew-resize hover:bg-accent-300 transition-colors"
                     style={{ left: `${regionStartPct}%`, transform: `translateX(-50%) translateY(-50%)` }}
                   />
                   {/* End handle */}
                   <div
-                    className="absolute top-1/2 -translate-y-1/2 w-1.5 h-5 bg-yellow-400 rounded-sm cursor-ew-resize hover:bg-yellow-300 transition-colors"
+                    className="absolute top-1/2 -translate-y-1/2 w-1.5 h-5 bg-accent-400 rounded-sm cursor-ew-resize hover:bg-accent-300 transition-colors"
                     style={{ left: `${regionEndPct}%`, transform: `translateX(-50%) translateY(-50%)` }}
                   />
                 </>
@@ -316,7 +386,7 @@ function TransportBar({
             </div>
           </div>
 
-          <span className="text-sm text-gray-400 w-12">
+          <span className="text-xs text-gray-400 w-10 font-mono">
             {formatTime(barDuration)}
           </span>
         </div>
@@ -325,11 +395,11 @@ function TransportBar({
       {/* Region controls row — shown when a region is selected */}
       {hasRegion && (
         <div className="mt-3 flex items-center gap-4 flex-wrap">
-          {/* Region time inputs */}
+          {/* Region display */}
           <div className="flex items-center gap-2 text-sm">
             <span className="text-gray-400">Region:</span>
 
-            {/* Start time */}
+            {/* Start */}
             {editingStart ? (
               <input
                 type="text"
@@ -338,7 +408,7 @@ function TransportBar({
                 onChange={(e) => setStartInputValue(e.target.value)}
                 onBlur={handleStartInputBlur}
                 onKeyDown={(e) => handleInputKeyDown(e, handleStartInputBlur)}
-                className="w-16 bg-gray-800 border border-yellow-400/50 rounded px-1.5 py-0.5 text-yellow-300 text-sm font-mono text-center focus:outline-none"
+                className="w-16 bg-surface-elevated border border-accent-500/40 rounded px-1.5 py-0.5 text-accent-400 text-sm font-mono text-center focus:outline-none"
               />
             ) : (
               <button
@@ -346,15 +416,17 @@ function TransportBar({
                   setStartInputValue(formatTimeDetailed(regionStart))
                   setEditingStart(true)
                 }}
-                className="px-1.5 py-0.5 bg-gray-800/80 rounded text-yellow-300 font-mono hover:bg-gray-700 transition-colors"
+                className="px-1.5 py-0.5 bg-surface-elevated rounded text-accent-400 font-mono hover:bg-white/[0.08] transition-colors"
               >
-                {formatTimeDetailed(regionStart)}
+                {snapMode !== 'off' && bpm
+                  ? formatBarBeatDetailed(regionStart, bpm)
+                  : formatTimeDetailed(regionStart)}
               </button>
             )}
 
             <span className="text-gray-500">-</span>
 
-            {/* End time */}
+            {/* End */}
             {editingEnd ? (
               <input
                 type="text"
@@ -363,7 +435,7 @@ function TransportBar({
                 onChange={(e) => setEndInputValue(e.target.value)}
                 onBlur={handleEndInputBlur}
                 onKeyDown={(e) => handleInputKeyDown(e, handleEndInputBlur)}
-                className="w-16 bg-gray-800 border border-yellow-400/50 rounded px-1.5 py-0.5 text-yellow-300 text-sm font-mono text-center focus:outline-none"
+                className="w-16 bg-surface-elevated border border-accent-500/40 rounded px-1.5 py-0.5 text-accent-400 text-sm font-mono text-center focus:outline-none"
               />
             ) : (
               <button
@@ -371,14 +443,19 @@ function TransportBar({
                   setEndInputValue(formatTimeDetailed(regionEnd))
                   setEditingEnd(true)
                 }}
-                className="px-1.5 py-0.5 bg-gray-800/80 rounded text-yellow-300 font-mono hover:bg-gray-700 transition-colors"
+                className="px-1.5 py-0.5 bg-surface-elevated rounded text-accent-400 font-mono hover:bg-white/[0.08] transition-colors"
               >
-                {formatTimeDetailed(regionEnd)}
+                {snapMode !== 'off' && bpm
+                  ? formatBarBeatDetailed(regionEnd, bpm)
+                  : formatTimeDetailed(regionEnd)}
               </button>
             )}
 
+            {/* Duration in bars or time */}
             <span className="text-gray-500 text-xs">
-              ({formatTimeDetailed(regionEnd - regionStart)})
+              ({snapMode !== 'off' && bpm
+                ? formatDurationBars(regionEnd - regionStart, bpm)
+                : formatTimeDetailed(regionEnd - regionStart)})
             </span>
           </div>
 
@@ -386,7 +463,7 @@ function TransportBar({
           {playbackMode !== 'region' && (
             <button
               onClick={onPlaySection}
-              className="flex items-center gap-1.5 px-3 py-1 rounded-lg bg-yellow-500/20 hover:bg-yellow-500/30 border border-yellow-500/40 text-yellow-300 text-xs font-medium transition-colors"
+              className="flex items-center gap-1.5 px-3 py-1 rounded-lg bg-accent-500/20 hover:bg-accent-500/30 border border-accent-500/40 text-accent-400 text-xs font-medium transition-colors"
             >
               <svg className="w-3 h-3 fill-current" viewBox="0 0 24 24">
                 <polygon points="5,3 19,12 5,21" />
@@ -395,10 +472,30 @@ function TransportBar({
             </button>
           )}
 
+          {/* Snap mode toggle */}
+          {bpm && (
+            <div className="flex items-center gap-1 text-xs">
+              <span className="text-gray-500">Snap:</span>
+              {['off', 'beat', 'bar'].map((mode) => (
+                <button
+                  key={mode}
+                  onClick={() => setSnapMode(mode)}
+                  className={`px-2 py-0.5 rounded transition-colors capitalize ${
+                    snapMode === mode
+                      ? 'bg-cyan-500/30 text-cyan-300 border border-cyan-500/40'
+                      : 'text-gray-400 hover:text-gray-200 hover:bg-white/[0.06]'
+                  }`}
+                >
+                  {mode}
+                </button>
+              ))}
+            </div>
+          )}
+
           {/* Clear region button */}
           <button
             onClick={onClearRegion}
-            className="text-xs text-gray-400 hover:text-red-400 transition-colors px-2 py-1 rounded hover:bg-gray-700/50"
+            className="text-xs text-gray-400 hover:text-red-400 transition-colors px-2 py-1 rounded hover:bg-white/[0.06]"
           >
             Clear Selection
           </button>
@@ -406,7 +503,7 @@ function TransportBar({
           {/* Looping indicator + Play Full Song button — shown when section is looping */}
           {(playbackMode === 'region' || isRawRegionActive) && (
             <>
-              <span className="text-xs text-yellow-400 flex items-center gap-1">
+              <span className="text-xs text-accent-400 flex items-center gap-1">
                 <svg className="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                   <path d="M17 2l4 4-4 4" />
                   <path d="M3 11V9a4 4 0 014-4h14" />
@@ -418,7 +515,7 @@ function TransportBar({
 
               <button
                 onClick={onPlayFullSong}
-                className="text-xs bg-gray-700/70 hover:bg-gray-600/70 text-gray-300 hover:text-white px-3 py-1 rounded transition-colors border border-gray-600"
+                className="text-xs bg-white/[0.06] hover:bg-white/[0.1] text-gray-400 hover:text-white px-3 py-1 rounded transition-colors border border-white/[0.08]"
               >
                 Play Full Song
               </button>

frontend/src/hooks/useAudioEngine.js

@@ -245,7 +245,7 @@ export function useAudioEngine() {
     const newReverbs = {}
     const newPans = {}
     Object.keys(buffersRef.current).forEach(stem => {
-      newReverbs[stem] = 0.15  // 15% reverb by default for studio sound
+      newReverbs[stem] = 0.0  // 0% reverb by default — stems typically have reverb baked in
       newPans[stem] = pannersRef.current[stem]?.pan.value || 0
     })
 
@@ -337,7 +337,7 @@ export function useAudioEngine() {
     const newReverbs = {}
     const newPans = {}
     Object.keys(buffersRef.current).forEach(stem => {
-      newReverbs[stem] = 0.15
+      newReverbs[stem] = 0.0
       newPans[stem] = pannersRef.current[stem]?.pan.value || 0
     })
 
@@ -483,7 +483,7 @@ export function useAudioEngine() {
   useEffect(() => {
     Object.entries(reverbSendsRef.current).forEach(([stem, reverbSend]) => {
       if (!reverbSend) return
-      const reverbAmount = reverbs[stem] ?? 0.15
+      const reverbAmount = reverbs[stem] ?? 0.0
       reverbSend.gain.setValueAtTime(reverbAmount, audioContextRef.current?.currentTime || 0)
     })
 

frontend/src/hooks/useSession.js

@@ -4,6 +4,7 @@ export function useSession() {
   const [sessionId, setSessionId] = useState(null)
   const [stems, setStems] = useState([])
   const [detection, setDetection] = useState(null)
+  const [chordsData, setChordsData] = useState(null)
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState(null)
 
@@ -48,6 +49,12 @@ export function useSession() {
       console.log('Detection response:', detectData)
       setDetection(detectData)
 
+      // Auto-fetch chord progression and scale suggestions
+      fetch(`/api/chords/${uploadData.session_id}`)
+        .then(r => r.ok ? r.json() : null)
+        .then(data => { if (data) setChordsData(data) })
+        .catch(() => {})
+
       return { upload: uploadData, detection: detectData }
     } catch (err) {
       console.error('Error:', err)
@@ -169,6 +176,12 @@ export function useSession() {
       const detectData = await detectResponse.json()
       setDetection(detectData)
 
+      // Auto-fetch chord progression and scale suggestions
+      fetch(`/api/chords/${uploadData.session_id}`)
+        .then(r => r.ok ? r.json() : null)
+        .then(data => { if (data) setChordsData(data) })
+        .catch(() => {})
+
       return { upload: uploadData, detection: detectData }
     } catch (err) {
       setError(err.message)
@@ -178,6 +191,22 @@ export function useSession() {
     }
   }, [])
 
+  const fetchChords = useCallback(async (sid = null) => {
+    const id = sid || sessionId
+    if (!id) return null
+    try {
+      const response = await fetch(`/api/chords/${id}`)
+      if (response.ok) {
+        const data = await response.json()
+        setChordsData(data)
+        return data
+      }
+    } catch (err) {
+      console.warn('Chord detection failed:', err.message)
+    }
+    return null
+  }, [sessionId])
+
   const generate = useCallback(async (regionStart, regionEnd, duration = 15.0, prompt = null) => {
     if (!sessionId) {
       setError('No session to generate')
@@ -220,12 +249,14 @@ export function useSession() {
     sessionId,
     stems,
     detection,
+    chordsData,
     loading,
     error,
     upload,
     detect,
     process,
     generate,
+    fetchChords,
     getStems,
     loadPreset,
     clearError

frontend/src/index.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -5,37 +7,33 @@
 body {
   margin: 0;
   min-height: 100vh;
-  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
+  background: #0D0F1A;
   color: white;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-}
-
-.glass {
-  background: rgba(255, 255, 255, 0.05);
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
 }
 
-.glass-hover:hover {
-  background: rgba(255, 255, 255, 0.1);
+.card {
+  background: #141726;
+  border: 1px solid rgba(255, 255, 255, 0.08);
 }
 
 /* Custom scrollbar */
 ::-webkit-scrollbar {
-  width: 8px;
+  width: 6px;
+  height: 6px;
 }
 
 ::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.05);
+  background: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(139, 92, 246, 0.5);
-  border-radius: 4px;
+  background: rgba(20, 184, 166, 0.3);
+  border-radius: 3px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: rgba(139, 92, 246, 0.7);
+  background: rgba(20, 184, 166, 0.5);
 }
 
 /* Slider styling */
@@ -46,17 +44,17 @@ input[type="range"] {
 }
 
 input[type="range"]::-webkit-slider-track {
-  height: 6px;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 3px;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 2px;
 }
 
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
-  width: 16px;
-  height: 16px;
-  background: #8b5cf6;
+  width: 14px;
+  height: 14px;
+  background: #14B8A6;
   border-radius: 50%;
   cursor: pointer;
   margin-top: -5px;
@@ -64,17 +62,17 @@ input[type="range"]::-webkit-slider-thumb {
 }
 
 input[type="range"]::-webkit-slider-thumb:hover {
-  transform: scale(1.2);
+  transform: scale(1.15);
 }
 
 /* Animation keyframes */
 @keyframes fadeIn {
-  from { opacity: 0; transform: translateY(10px); }
+  from { opacity: 0; transform: translateY(8px); }
   to { opacity: 1; transform: translateY(0); }
 }
 
 .animate-fade-in {
-  animation: fadeIn 0.3s ease-out;
+  animation: fadeIn 0.25s ease-out;
 }
 
 @keyframes spin-slow {
@@ -86,10 +84,9 @@ input[type="range"]::-webkit-slider-thumb:hover {
   animation: spin-slow 3s linear infinite;
 }
 
-/* Pulsing border animation */
 @keyframes pulse-border {
-  0%, 100% { border-color: rgba(139, 92, 246, 0.3); }
-  50% { border-color: rgba(139, 92, 246, 0.8); }
+  0%, 100% { border-color: rgba(20, 184, 166, 0.3); }
+  50% { border-color: rgba(20, 184, 166, 0.8); }
 }
 
 .animate-pulse-border {

frontend/tailwind.config.js

@@ -7,24 +7,20 @@ export default {
   theme: {
     extend: {
       colors: {
-        primary: {
-          50: '#eff6ff',
-          100: '#dbeafe',
-          200: '#bfdbfe',
-          300: '#93c5fd',
-          400: '#60a5fa',
-          500: '#3b82f6',
-          600: '#2563eb',
-          700: '#1d4ed8',
-          800: '#1e40af',
-          900: '#1e3a8a',
+        surface: {
+          DEFAULT: '#0D0F1A',
+          card: '#141726',
+          elevated: '#1C1F33',
         },
         accent: {
-          400: '#a78bfa',
-          500: '#8b5cf6',
-          600: '#7c3aed',
+          400: '#2DD4BF',
+          500: '#14B8A6',
+          600: '#0D9488',
         }
       },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
+      },
       animation: {
         'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
         'bounce-slow': 'bounce 2s infinite',