loop station

.github/workflows/release.yml

@@ -9,33 +9,69 @@ permissions:
   contents: write
 
 jobs:
-  build-windows:
-    runs-on: windows-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-      - run: npm install
-      - run: npm run electron:build:win
-        env:
-          CSC_IDENTITY_AUTO_DISCOVERY: false
-          WIN_CSC_LINK: ''
-      - uses: softprops/action-gh-release@v2
-        with:
-          files: releases/*.exe
+  build:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      fail-fast: false # Ensures one OS failing doesn't kill the others
+      matrix:
+        include:
+          - os: windows-latest
+            command: npm run electron:build:win
+            artifact_pattern: "release/*.exe"
+          - os: macos-latest
+            # Added --universal here if you want to support both Intel and Apple Silicon
+            command: npm run electron:build:mac -- --universal 
+            artifact_pattern: "release/*.dmg"
+          - os: ubuntu-latest
+            command: npm run electron:build:linux
+            artifact_pattern: "release/*.AppImage"
+    
+    env:
+      # This fixes the "GitHub Personal Access Token is not set" error
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      # Prevents errors related to missing code-signing certificates
+      CSC_IDENTITY_AUTO_DISCOVERY: false
 
-  build-mac:
-    runs-on: macos-latest
     steps:
       - uses: actions/checkout@v4
+      
       - uses: actions/setup-node@v4
         with:
           node-version: 20
-      - run: npm install
-      - run: npm run electron:build:mac
-        env:
-          CSC_IDENTITY_AUTO_DISCOVERY: false
-      - uses: softprops/action-gh-release@v2
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build Application
+        run: ${{ matrix.command }}
+
+      - name: Upload Artifacts
+        uses: actions/upload-artifact@v4
         with:
-          files: releases/*.dmg
+          name: artifacts-${{ matrix.os }}
+          path: ${{ matrix.artifact_pattern }}
+          if-no-files-found: error
+
+  publish:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Download all artifacts
+        uses: actions/download-artifact@v4
+        with:
+          # This downloads all "artifacts-*" into a folder named 'all-outputs'
+          path: all-outputs 
+          merge-multiple: true
+
+      - name: List files for debugging
+        run: ls -R all-outputs
+
+      - name: Create GitHub Release
+        uses: softprops/action-gh-release@v2
+        with:
+          # Point directly to the folder where all OS builds are merged
+          files: all-outputs/*
+          generate_release_notes: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -70,6 +70,42 @@ npm run electron:build:linux
 
 Output is placed in `frontend/release/`.
 
+## Releasing / Tagging
+
+To create a GitHub release and trigger the CI build pipeline, create an annotated tag and push it to origin. The release workflow runs on tags matching `v*` (for example `v0.6.1`).
+
+Local tagging example:
+
+```bash
+# update package.json version first if desired
+git tag -a v0.6.1 -m "Release v0.6.1"
+git push origin v0.6.1
+```
+
+What the GitHub Action does (`.github/workflows/release.yml`):
+
+- Listens for pushed tags `v*` and runs a matrix build across Windows, macOS and Linux.
+- macOS is built as a universal binary (`--universal`) so a single DMG supports both Intel and Apple Silicon.
+- Each matrix job builds the installer using `electron-builder`, uploads its artifacts, and a final `publish` job aggregates all artifacts into one GitHub release.
+
+If you prefer to run builds locally before tagging, use the npm scripts in the repository root:
+
+```bash
+# Windows NSIS
+npm run electron:build:win
+
+# macOS DMG (universal)
+npm run electron:build:mac -- --universal
+
+# Linux AppImage
+npm run electron:build:linux
+```
+
+CI notes / troubleshooting
+- The workflow uploads artifacts from `release/` into the release. Ensure `package.json` build `directories.output` matches the workflow's expected `release/` folder.
+- If mac packaging for x64 on ARM-hosted runners fails, switch to `--universal` (already configured) or build x64 on an Intel runner.
+- To test the workflow locally, consider using `nektos/act` or push a temporary tag like `vtest`.
+
 ## Design Tokens
 
 All colors are defined in `frontend/tailwind.config.js` and can be referenced by name in any component.

electron/main.cjs

@@ -23,7 +23,7 @@ function createWindow() {
     height: 900,
     minWidth: 620,
     minHeight: 600,
-    title: 'WhatTheFlat',
+    title: 'WhatTheFlat ♭? - JamBuddy',
     icon: path.join(__dirname, '../assets/whattheflat-logo.png'),
     webPreferences: {
       preload: path.join(__dirname, 'preload.cjs'),

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-eval'; connect-src 'self' http://localhost:5173 ws://localhost:5173; style-src 'self' 'unsafe-inline'; img-src 'self' data:;">
-    <title>WhatTheFlat</title>
+    <title>WhatTheFlat ♭? - JamBuddy</title>
   </head>
   <body>
     <div id="root"></div>

package-lock.json

@@ -1,12 +1,12 @@
 {
-  "name": "whattheflat",
-  "version": "0.1.0",
+  "name": "jambuddy",
+  "version": "0.6.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "whattheflat",
-      "version": "0.1.0",
+      "name": "jambuddy",
+      "version": "0.6.2",
       "dependencies": {
         "audiomotion-analyzer": "^4.5.4",
         "pitchy": "^4.1.0",
@@ -2189,6 +2189,70 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/core": {
+      "version": "1.8.1",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.1.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/runtime": {
+      "version": "1.8.1",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
+      "version": "1.1.0",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.1",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1",
+        "@tybys/wasm-util": "^0.10.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@tybys/wasm-util": {
+      "version": "0.10.1",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/tslib": {
+      "version": "2.8.1",
+      "dev": true,
+      "inBundle": true,
+      "license": "0BSD",
+      "optional": true
+    },
     "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.2.1.tgz",

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "whattheflat",
+  "name": "jambuddy",
   "description": "A jam session companion app that provides a chromatic tuner, chord progressions, and more.",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "private": true,
   "type": "module",
   "main": "electron/main.cjs",
@@ -13,7 +13,7 @@
     "electron:build": "vite build && electron-builder",
     "electron:build:win": "vite build && electron-builder --win --publish never",
     "electron:build:mac": "vite build && electron-builder --mac --publish never",
-    "electron:build:linux": "vite build && electron-builder --linux"
+    "electron:build:linux": "vite build && electron-builder --linux --publish never"
   },
   "dependencies": {
     "audiomotion-analyzer": "^4.5.4",
@@ -34,8 +34,8 @@
     "wait-on": "^9.0.4"
   },
   "build": {
-    "appId": "com.whattheflat.app",
-    "productName": "WhatTheFlat",
+    "appId": "com.jambuddy.app",
+    "productName": "JamBuddy",
     "files": [
       "dist/**/*",
       "electron/**/*",

src/App.jsx

@@ -3,13 +3,18 @@ import AudioCapture from './components/AudioCapture'
 import ProgressionBanner from './components/ProgressionBanner'
 import ProgressionSuggestions from './components/ProgressionSuggestions'
 import Fretboard from './components/Fretboard'
+import BassFretboard from './components/BassFretboard'
 import Tuner from './components/Tuner'
 import Piano from './components/Piano'
 import Settings from './components/Settings'
 import DebugView from './components/DebugView'
+import DrumView from './components/DrumView'
 import { NOTES, detectKey, detectTopKeys, matchChordFromChroma, detectRepeatingProgression, getChordTones, getChordCandidates, getNoteHistoryAnalysis } from './lib/theory'
+import ChordDetailModal from './components/ChordDetailModal'
+import CurrentJamPanel from './components/CurrentJamPanel'
+import LoopStation from './components/LoopStation'
+import { useLoopEngine } from './services/loopEngine'
 import settingIcon from './assets/setting-icon.png'
-import viewIcon from './assets/view.png'
 
 const DEFAULTS = {
   // Key detection
@@ -24,13 +29,20 @@ const DEFAULTS = {
   // Audio input
   minClarity:         0.80,
   minVolume:          0.01,
+  // Selected device (null = system default)
+  audioDeviceId:      null,
+}
+
+function loadStored(key, fallback) {
+  try { const v = localStorage.getItem(key); return v !== null ? JSON.parse(v) : fallback }
+  catch { return fallback }
 }
 
 export default function App() {
   // ── Config ───────────────────────────────────────────────────────────────────
-  const [config, setConfig] = useState(DEFAULTS)
-  const configRef = useRef(DEFAULTS)
-  useEffect(() => { configRef.current = config }, [config])
+  const [config, setConfig] = useState(() => ({ ...DEFAULTS, ...loadStored('wtf_config', {}) }))
+  const configRef = useRef(config)
+  useEffect(() => { configRef.current = config; localStorage.setItem('wtf_config', JSON.stringify(config)) }, [config])
 
   const [showSettings, setShowSettings] = useState(false)
 
@@ -42,10 +54,11 @@ export default function App() {
   const [isListening, setIsListening] = useState(false)
 
   // ── Instrument view + tuner ───────────────────────────────────────────────────
-  const [instrument, setInstrument] = useState('guitar')  // 'guitar' | 'piano'
+  const [instrument, setInstrument] = useState('piano')  // 'piano' | 'guitar' | 'bass'
   const [showTuner, setShowTuner]   = useState(false)
-  const [showDebug, setShowDebug]   = useState(false)
-  const [monoColor, setMonoColor]   = useState(false)
+  const [showDebug, setShowDebug]       = useState(false)
+  const [showDrumView, setShowDrumView] = useState(false)
+  const [monoColor, setMonoColor]   = useState(() => loadStored('wtf_monoColor', false))
 
   // ── Mic permission error ──────────────────────────────────────────────────────
   const [micError, setMicError] = useState(null)
@@ -54,17 +67,40 @@ export default function App() {
   const [debugChroma,       setDebugChroma]       = useState(null)
   const [debugCandidates,   setDebugCandidates]   = useState([])
   const [debugNoteAnalysis, setDebugNoteAnalysis] = useState(null)
+  const [debugWaveform,     setDebugWaveform]     = useState(null)
 
   // ── Stable refs for values used inside callbacks ──────────────────────────────
-  const showDebugRef  = useRef(showDebug)
-  const lockedKeyRef  = useRef(null)
+  const showDebugRef    = useRef(showDebug)
+  const showDrumViewRef = useRef(showDrumView)
+  const lockedKeyRef    = useRef(null)
+  const listenStartRef  = useRef(null)
   useEffect(() => { showDebugRef.current = showDebug }, [showDebug])
+  useEffect(() => { showDrumViewRef.current = showDrumView }, [showDrumView])
+  useEffect(() => { localStorage.setItem('wtf_monoColor', JSON.stringify(monoColor)) }, [monoColor])
+  useEffect(() => { if (isListening) listenStartRef.current = Date.now() }, [isListening])
 
   // ── BPM estimation from onset timestamps ─────────────────────────────────────
   const [bpm, setBpm]           = useState(null)
   const onsetTimestampsRef      = useRef([])
   const bpmSmoothRef            = useRef(null)
 
+  // ── Loop station ─────────────────────────────────────────────────────────────
+  const {
+    slots,
+    masterLen,
+    setStream:     loopSetStream,
+    handleSlotClick,
+    commitTrim,
+    cancelRecord,
+    retrimSlot,
+    deleteSlot,
+    setVolume:      loopSetVolume,
+    addSlot:        loopAddSlot,
+    audioCtxRef:    loopAudioCtxRef,
+    masterStartRef: loopMasterStartRef,
+    masterLenRef:   loopMasterLenRef,
+  } = useLoopEngine(bpm)
+
   // ── Key: auto-detected + optional lock ───────────────────────────────────────
   const [keyInfo, setKeyInfo]     = useState(null)     // auto-detected
   const [lockedKey, setLockedKey] = useState(null)     // { root, mode } or null
@@ -77,6 +113,7 @@ export default function App() {
   // ── Chord state ───────────────────────────────────────────────────────────────
   const [chordHistory, setChordHistory]               = useState([])
   const [detectedProgression, setDetectedProgression] = useState(null)
+  const [selectedChord, setSelectedChord]             = useState(null)
 
   // ── Top key candidates (shown as quick-lock chips) ────────────────────────────
   const [topKeyCandidates, setTopKeyCandidates] = useState([])
@@ -91,6 +128,7 @@ export default function App() {
   const chromaIdxRef         = useRef(0)
   const chordVotesRef        = useRef([])
   const progressionVoteRef   = useRef(null)
+  const progressionMissRef   = useRef(0)
   const pendingKeyRef        = useRef(null)
 
   // Keep refs in sync
@@ -108,7 +146,16 @@ export default function App() {
   // ── Detect progression — require 2 consecutive identical results to commit ────
   useEffect(() => {
     const detected = detectRepeatingProgression(chordHistory)
-    if (!detected) return
+    if (!detected) {
+      progressionMissRef.current++
+      // Clear stale loop after 4 chord changes with no pattern found
+      if (progressionMissRef.current >= 4) {
+        setDetectedProgression(null)
+        progressionVoteRef.current = null
+      }
+      return
+    }
+    progressionMissRef.current = 0
     const key = detected.join(',')
     if (progressionVoteRef.current === key) {
       setDetectedProgression(detected)
@@ -124,11 +171,13 @@ export default function App() {
     keyVotesRef.current        = []
     chordVotesRef.current      = []
     progressionVoteRef.current = null
+    progressionMissRef.current = 0
     pendingKeyRef.current      = null
     chromaIdxRef.current       = 0
     chromaRingRef.current      = Array.from({ length: cfg.chromaSmooth }, () => new Float32Array(12))
     onsetTimestampsRef.current = []
     bpmSmoothRef.current       = null
+    listenStartRef.current     = Date.now()
     setKeyInfo(null)
     setLockedKey(null)
     effectiveKeyRef.current    = null
@@ -140,6 +189,7 @@ export default function App() {
     setDebugChroma(null)
     setDebugCandidates([])
     setDebugNoteAnalysis(null)
+    setDebugWaveform(null)
   }
 
   // ── Key lock handlers ─────────────────────────────────────────────────────────
@@ -162,6 +212,13 @@ export default function App() {
     effectiveKeyRef.current = keyInfo
   }
 
+  // ── Waveform handler: feeds oscilloscope / drum view ─────────────────────────
+  const handleWaveform = useCallback((data) => {
+    if (showDebugRef.current || showDrumViewRef.current) {
+      setDebugWaveform({ ...data, onsets: [...onsetTimestampsRef.current] })
+    }
+  }, [])
+
   // ── Note handler: drives key detection (pitch-based) ──────────────────────────
   const handleNote = useCallback(({ pitchClass }) => {
     const cfg = configRef.current
@@ -173,7 +230,11 @@ export default function App() {
 
     const result = detectKey(history)
     setTopKeyCandidates(detectTopKeys(history))
-    if (showDebugRef.current) setDebugNoteAnalysis(getNoteHistoryAnalysis(history))
+    if (showDebugRef.current) {
+      const analysis = getNoteHistoryAnalysis(history)
+      analysis.sessionSecs = listenStartRef.current ? Math.floor((Date.now() - listenStartRef.current) / 1000) : 0
+      setDebugNoteAnalysis(analysis)
+    }
     if (result.confidence < 0.5) return
 
     const votes = keyVotesRef.current
@@ -225,7 +286,7 @@ export default function App() {
 
     if (showDebugRef.current) {
       setDebugChroma([...avg])
-      setDebugCandidates(getChordCandidates(avg, key, bassPC))
+      setDebugCandidates(getChordCandidates(avg, key, bassPC, 5))
     }
 
     // Stability gate — if chroma is still changing across frames, we're mid-transition.
@@ -236,10 +297,7 @@ export default function App() {
       for (const frame of ring) { const d = frame[i] - avg[i]; v += d * d }
       if (v / cfg.chromaSmooth > maxVar) maxVar = v / cfg.chromaSmooth
     }
-    if (maxVar > 0.05) {
-      chordVotesRef.current = []
-      return
-    }
+    if (maxVar > 0.05) return
 
     const chord = matchChordFromChroma(avg, key, bassPC, false, cfg.chordMinScore)
     if (!chord) {
@@ -255,7 +313,7 @@ export default function App() {
       const winner = votes[0]
       setChordHistory(prev => {
         if (prev[prev.length - 1] === winner) return prev
-        return [...prev.slice(-30), winner]
+        return [...prev.slice(-48), winner]
       })
 
       // Inject chord tones into note history to anchor key detection
@@ -322,7 +380,9 @@ export default function App() {
         config={config}
         onChange={updateConfig}
         onClose={() => setShowSettings(false)}
-        onReset={() => setConfig(DEFAULTS)}
+        onReset={() => { setConfig(DEFAULTS); setMonoColor(false) }}
+        monoColor={monoColor}
+        onMonoColorChange={setMonoColor}
       />
     )
   }
@@ -334,28 +394,11 @@ export default function App() {
       <header className="mb-2 flex items-center justify-between">
         <div>
           <h1 className="text-xl font-bold text-accent">
-            WhatTheFlat <span className="text-gray-600">&#9837;?</span>
+            WhatTheFlat <span className="text-gray-600">&#9837;?</span> <span className="text-amber-400">- JamBuddy</span>
           </h1>
           <p className="text-xs text-gray-600">Real-time key detection for live jams</p>
         </div>
         <div className="flex gap-2 items-center">
-          <button
-            onClick={() => setMonoColor(v => !v)}
-            className={`p-2 rounded-full border transition-all ${monoColor ? 'border-accent bg-accent/10' : 'border-border hover:border-gray-400'}`}
-            title="Mono color mode"
-          >
-            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" style={{ opacity: 0.75 }}>
-              <circle cx="6"  cy="10" r="4" fill={monoColor ? '#a855f7' : '#a855f7'} />
-              <circle cx="13" cy="10" r="4" fill={monoColor ? '#c084fc' : '#f59e0b'} />
-            </svg>
-          </button>
-          <button
-            onClick={() => setShowDebug(v => !v)}
-            className={`p-2 rounded-full border transition-all ${showDebug ? 'border-accent bg-accent/10' : 'border-border hover:border-gray-400'}`}
-            title="Behind the scenes"
-          >
-            <img src={viewIcon} alt="Debug view" className="w-5 h-5" style={{ filter: 'invert(1) opacity(0.75)' }} />
-          </button>
           <button
             onClick={() => setShowSettings(true)}
             className="p-2 rounded-full border border-border hover:border-gray-400 transition-all"
@@ -393,8 +436,9 @@ export default function App() {
             onChange={e => setInstrument(e.target.value)}
             className="appearance-none bg-surface border border-border hover:border-gray-500 focus:border-accent focus:outline-none rounded-lg pl-3 pr-7 py-1 text-sm text-gray-200 cursor-pointer transition-colors"
           >
-            <option value="guitar">Guitar</option>
             <option value="piano">Piano</option>
+            <option value="guitar">Guitar</option>
+            <option value="bass">Bass</option>
           </select>
           <span className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 text-xs">▾</span>
         </div>
@@ -490,13 +534,16 @@ export default function App() {
         onNote={handleNote}
         onChroma={handleChroma}
         onOnset={handleOnset}
+        onWaveform={handleWaveform}
         isListening={isListening}
         minClarity={config.minClarity}
         minVolume={config.minVolume}
+        audioDeviceId={config.audioDeviceId}
         onPermissionError={() => {
           setMicError(true)
           setIsListening(false)
         }}
+        onStreamReady={loopSetStream}
       />
 
       {micError && (
@@ -506,21 +553,24 @@ export default function App() {
         </div>
       )}
 
+      {/* ── Chord detail modal ── */}
+      <ChordDetailModal chord={selectedChord} onClose={() => setSelectedChord(null)} onChordClick={setSelectedChord} keyInfo={effectiveKey} chordHistory={chordHistory} />
+
       {/* ── Progression banner ── */}
       <ProgressionBanner
         chordHistory={chordHistory}
         keyInfo={effectiveKey}
         detectedProgression={detectedProgression}
         currentChord={currentChord}
+        onChordClick={setSelectedChord}
       />
 
       {/* ── Instrument + progressions row ── */}
       <div className="flex gap-3 mb-3 items-stretch">
         <div className="w-full lg:w-[70%] min-w-0">
-          {instrument === 'guitar'
-            ? <Fretboard keyInfo={effectiveKey} currentChord={currentChord} pentatonicOnly={false} monoColor={monoColor} />
-            : <Piano keyInfo={effectiveKey} currentChord={currentChord} monoColor={monoColor} />
-          }
+          {instrument === 'guitar' && <Fretboard keyInfo={effectiveKey} currentChord={currentChord} pentatonicOnly={false} monoColor={monoColor} />}
+          {instrument === 'bass'   && <BassFretboard keyInfo={effectiveKey} currentChord={currentChord} monoColor={monoColor} />}
+          {instrument === 'piano'  && <Piano keyInfo={effectiveKey} currentChord={currentChord} monoColor={monoColor} />}
         </div>
 
         <div className="hidden lg:block w-[30%] min-w-0 relative">
@@ -530,30 +580,83 @@ export default function App() {
         </div>
       </div>
 
-      {/* ── Behind the scenes debug view ── */}
-      {showDebug && (
-        <div className="mb-3">
-          <DebugView
-            chroma={debugChroma}
-            chordCandidates={debugCandidates}
-            noteAnalysis={debugNoteAnalysis}
-            keyInfo={effectiveKey}
-            currentChord={currentChord}
-            instrument={instrument}
-          />
-        </div>
-      )}
+
+      {/* ── Current jam — collapsible ── */}
+      <CurrentJamPanel
+        keyInfo={effectiveKey}
+        chordHistory={chordHistory}
+        detectedProgression={detectedProgression}
+        onChordClick={setSelectedChord}
+      />
+
+      {/* ── Loop station ── */}
+      <LoopStation
+        slots={slots}
+        bpm={bpm}
+        masterLen={masterLen}
+        audioCtxRef={loopAudioCtxRef}
+        masterStartRef={loopMasterStartRef}
+        masterLenRef={loopMasterLenRef}
+        onSlotClick={handleSlotClick}
+        onCommitTrim={commitTrim}
+        onCancelRecord={cancelRecord}
+        onRetrim={retrimSlot}
+        onDelete={deleteSlot}
+        onVolumeChange={loopSetVolume}
+        onAddSlot={loopAddSlot}
+      />
+
+      {/* ── Behind the scenes — collapsible ── */}
+      <div className="mb-3 bg-panel border border-border rounded-xl overflow-hidden">
+        <button
+          onClick={() => setShowDebug(v => !v)}
+          className="w-full flex items-center justify-between px-4 py-2 text-sm text-gray-400 hover:text-gray-200 transition-all"
+        >
+          <span>BEHIND THE SCENES</span>
+          <span>{showDebug ? '▲' : '▼'}</span>
+        </button>
+        {showDebug && (
+          <div className="border-t border-border p-4">
+            <DebugView
+              chroma={debugChroma}
+              chordCandidates={debugCandidates}
+              noteAnalysis={debugNoteAnalysis}
+              waveform={debugWaveform}
+              keyInfo={effectiveKey}
+              currentChord={currentChord}
+              instrument={instrument}
+              monoColor={monoColor}
+            />
+          </div>
+        )}
+      </div>
+
+      {/* ── Rhythm / drum analyser — collapsible ── */}
+      <div className="mb-3 bg-panel border border-border rounded-xl overflow-hidden">
+        <button
+          onClick={() => setShowDrumView(v => !v)}
+          className="w-full flex items-center justify-between px-4 py-2 text-sm text-gray-400 hover:text-gray-200 transition-all"
+        >
+          <span>RHYTHM ANALYSER</span>
+          <span>{showDrumView ? '▲' : '▼'}</span>
+        </button>
+        {showDrumView && (
+          <div className="border-t border-border p-4">
+            <DrumView waveform={debugWaveform} bpm={bpm} />
+          </div>
+        )}
+      </div>
 
       {/* ── Tuner — collapsible ── */}
-      <div>
+      <div className="bg-panel border border-border rounded-xl overflow-hidden">
         <button
           onClick={() => setShowTuner(v => !v)}
-          className="w-full flex items-center justify-between px-4 py-2 bg-panel border border-border rounded-xl text-sm text-gray-400 hover:text-gray-200 hover:border-gray-500 transition-all"
+          className="w-full flex items-center justify-between px-4 py-2 text-sm text-gray-400 hover:text-gray-200 transition-all"
         >
-          <span>Tuner</span>
+          <span>TUNER</span>
           <span>{showTuner ? '▲' : '▼'}</span>
         </button>
-        {showTuner && <div className="mt-2"><Tuner /></div>}
+        {showTuner && <div className="border-t border-border"><Tuner /></div>}
       </div>
     </div>
   )

src/components/AudioCapture.jsx

@@ -81,7 +81,7 @@ function detectBassPC(freqData, sampleRate, fftSize) {
   return ((bestMidi % 12) + 12) % 12
 }
 
-export default function AudioCapture({ onNote, onChroma, onOnset, isListening, minClarity = 0.80, minVolume = 0.01, onPermissionError }) {
+export default function AudioCapture({ onNote, onChroma, onOnset, onWaveform, isListening, minClarity = 0.80, minVolume = 0.01, onPermissionError, audioDeviceId = null, onStreamReady = null }) {
   const audioCtxRef   = useRef(null)
   const timeBufRef    = useRef(null)
   const freqBufRef    = useRef(null)
@@ -94,20 +94,26 @@ export default function AudioCapture({ onNote, onChroma, onOnset, isListening, m
   const onNoteRef            = useRef(onNote)
   const onChromaRef          = useRef(onChroma)
   const onOnsetRef           = useRef(onOnset)
+  const onWaveformRef        = useRef(onWaveform)
   const onPermissionErrorRef = useRef(onPermissionError)
+  const onStreamReadyRef     = useRef(onStreamReady)
   const minClarityRef        = useRef(minClarity)
   const minVolumeRef         = useRef(minVolume)
   const smoothRmsRef         = useRef(0)
   const lastOnsetRef         = useRef(0)
+  const specPeakRef          = useRef(null)   // peak-hold spectrum for display lingering
   useEffect(() => { onNoteRef.current            = onNote            }, [onNote])
   useEffect(() => { onChromaRef.current          = onChroma          }, [onChroma])
   useEffect(() => { onOnsetRef.current           = onOnset           }, [onOnset])
+  useEffect(() => { onWaveformRef.current        = onWaveform        }, [onWaveform])
   useEffect(() => { onPermissionErrorRef.current = onPermissionError }, [onPermissionError])
+  useEffect(() => { onStreamReadyRef.current     = onStreamReady     }, [onStreamReady])
   useEffect(() => { minClarityRef.current        = minClarity        }, [minClarity])
   useEffect(() => { minVolumeRef.current         = minVolume         }, [minVolume])
 
   const stop = useCallback(() => {
     activeRef.current = false
+    specPeakRef.current = null
     if (rafRef.current)    { cancelAnimationFrame(rafRef.current); rafRef.current = null }
     if (streamRef.current) { streamRef.current.getTracks().forEach(t => t.stop()); streamRef.current = null }
     if (audioCtxRef.current) { audioCtxRef.current.close(); audioCtxRef.current = null }
@@ -117,13 +123,40 @@ export default function AudioCapture({ onNote, onChroma, onOnset, isListening, m
     stop()
     let stream
     try {
-      stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+      // Helpful debug: list available media devices before requesting permission
+      try {
+        if (navigator.mediaDevices && navigator.mediaDevices.enumerateDevices) {
+          const devices = await navigator.mediaDevices.enumerateDevices()
+          const audioIns = devices.filter(d => d.kind === 'audioinput')
+          console.log('Audio inputs available:', audioIns)
+        }
+      } catch (e) {
+        console.warn('enumerateDevices failed', e)
+      }
+
+      const constraints = audioDeviceId
+        ? { audio: { deviceId: { exact: audioDeviceId } } }
+        : { audio: true }
+
+      console.log('Requesting getUserMedia with constraints:', constraints)
+      stream = await navigator.mediaDevices.getUserMedia(constraints)
     } catch (err) {
+      // If permission denied or other error, surface extra diagnostics when possible
+      console.warn('getUserMedia failed', err)
+      try {
+        if (navigator.permissions && navigator.permissions.query) {
+          const p = await navigator.permissions.query({ name: 'microphone' })
+          console.log('microphone permission state:', p.state)
+        }
+      } catch (e) {
+        // ignore; not all environments support Permissions API for microphone
+      }
       onPermissionErrorRef.current?.(err)
       return
     }
     streamRef.current  = stream
     activeRef.current  = true
+    onStreamReadyRef.current?.(stream)
     smoothRmsRef.current  = 0
     lastOnsetRef.current  = 0
 
@@ -131,6 +164,14 @@ export default function AudioCapture({ onNote, onChroma, onOnset, isListening, m
     audioCtxRef.current = ctx
     const source = ctx.createMediaStreamSource(stream)
 
+    // Debug: log the acquired audio tracks and labels/deviceIds
+    try {
+      const tracks = stream.getAudioTracks()
+      console.log('Acquired audio tracks:', tracks.map(t => ({ label: t.label, id: t.id, enabled: t.enabled, muted: t.muted })))
+    } catch (e) {
+      console.warn('Could not inspect stream tracks', e)
+    }
+
     // Small analyser — pitch detection needs fast time-domain data
     const pa = ctx.createAnalyser()
     pa.fftSize = PITCH_FFT
@@ -163,6 +204,46 @@ export default function AudioCapture({ onNote, onChroma, onOnset, isListening, m
         onOnsetRef.current?.()
       }
 
+      // Always fire waveform callback — downsample 4096 → 512 points + log-binned spectrum
+      if (onWaveformRef.current) {
+        const stride = 8   // 4096 / 8 = 512 points
+        const wave = new Float32Array(PITCH_FFT / stride)
+        for (let i = 0; i < wave.length; i++) wave[i] = timeBuf[i * stride]
+
+        // Log-binned frequency spectrum: 256 bins from 40 Hz → 4000 Hz
+        const LOG_BINS = 256
+        const F_MIN = 40, F_MAX = 4000
+        const binHz  = ctx.sampleRate / ca.fftSize
+        const freqBuf = freqBufRef.current
+        ca.getFloatFrequencyData(freqBuf)
+        const spectrum = new Float32Array(LOG_BINS)
+        for (let b = 0; b < LOG_BINS; b++) {
+          const f   = F_MIN * Math.pow(F_MAX / F_MIN, b / (LOG_BINS - 1))
+          const bin = Math.round(f / binHz)
+          if (bin < freqBuf.length) {
+            const db = freqBuf[bin]
+            spectrum[b] = db < NOISE_FLOOR ? 0 : Math.max(0, (db - NOISE_FLOOR) / (-NOISE_FLOOR))
+          }
+        }
+
+        // Peak-hold with exponential decay — spectrum rises instantly, falls slowly
+        if (!specPeakRef.current) specPeakRef.current = new Float32Array(LOG_BINS)
+        const peak = specPeakRef.current
+        for (let b = 0; b < LOG_BINS; b++) {
+          peak[b] = spectrum[b] > peak[b] ? spectrum[b] : peak[b] * 0.92
+        }
+
+        let detectedFreq = null, detectedNote = null
+        if (rms >= minVolumeRef.current) {
+          const [f, c] = detectorRef.current.findPitch(timeBuf, ctx.sampleRate)
+          if (c >= minClarityRef.current && f > 60 && f < 4200) {
+            detectedFreq = f
+            detectedNote = NOTES[((Math.round(12 * Math.log2(f / 440) + 69) % 12) + 12) % 12]
+          }
+        }
+        onWaveformRef.current({ wave, rms, detectedFreq, detectedNote, spectrum: peak })
+      }
+
       if (rms >= minVolumeRef.current) {
         const [freq, clarity] = detectorRef.current.findPitch(timeBuf, ctx.sampleRate)
         if (clarity >= minClarityRef.current && freq > 60 && freq < 4200) {

src/components/BassFretboard.jsx

@@ -0,0 +1,149 @@
+import { getPentatonicScale, getFullScale, getChordTones, NOTES } from '../lib/theory'
+
+// Standard bass tuning (top of diagram = highest string)
+const STRINGS = [
+  { label: 'G', root: 7,  thickness: 1.5 },
+  { label: 'D', root: 2,  thickness: 2   },
+  { label: 'A', root: 9,  thickness: 2.5 },
+  { label: 'E', root: 4,  thickness: 3   },
+]
+
+const NUM_FRETS     = 13
+const FRET_MARKERS  = [3, 5, 7, 9]
+const DOUBLE_MARKER = 12
+
+// Layout
+const NUT_X    = 40
+const OPEN_X   = 18
+const FRET_W   = 52
+const STRING_H = 36   // wider spacing than guitar — 4 strings feel more spread
+const PAD_T    = 28
+const PAD_B    = 18
+const BOARD_W  = NUT_X + (NUM_FRETS - 1) * FRET_W + 10
+const BOARD_H  = PAD_T + 3 * STRING_H + PAD_B
+const DOT_R    = 10
+
+const fretX   = f  => NUT_X + (f - 0.5) * FRET_W
+const stringY = si => PAD_T + si * STRING_H
+
+function noteColor(isChordTone, isPenta, isScale, mono = false) {
+  if (isChordTone) return { fill: '#a855f7', text: '#fff' }
+  if (isPenta)     return mono ? { fill: '#c084fc', text: '#1e1b4b' } : { fill: '#f59e0b', text: '#000' }
+  if (isScale)     return mono ? { fill: '#e9d5ff', text: '#581c87' } : { fill: '#374151', text: '#d1d5db' }
+  return null
+}
+
+export default function BassFretboard({ keyInfo, currentChord, monoColor = false }) {
+  const { root, mode } = keyInfo ?? {}
+
+  if (!root) return null
+
+  const pentaSet = new Set(getPentatonicScale(root, mode).map(n => NOTES.indexOf(n)))
+  const scaleSet = new Set(getFullScale(root, mode).map(n => NOTES.indexOf(n)))
+  const chordSet = currentChord
+    ? new Set(getChordTones(currentChord).map(n => NOTES.indexOf(n)))
+    : new Set()
+
+  return (
+    <div className="bg-panel border border-border rounded-2xl p-6">
+      <p className="text-sm text-gray-500 uppercase tracking-widest mb-4">
+        Bass — {root} {mode}
+        {currentChord && <span className="text-amber-400 ml-2">/ {currentChord}</span>}
+      </p>
+
+      <div>
+        <svg
+          viewBox={`0 0 ${BOARD_W} ${BOARD_H}`}
+          width="100%"
+          height="auto"
+          style={{ display: 'block' }}
+        >
+          {/* Fretboard background */}
+          <rect x={NUT_X} y={PAD_T - 6} width={BOARD_W - NUT_X - 4} height={3 * STRING_H + 12}
+            fill="#1a120b" rx={2} />
+
+          {/* Position marker dots (centred between strings 1–2) */}
+          {FRET_MARKERS.map(f => (
+            <circle key={f}
+              cx={fretX(f)} cy={PAD_T + 1.5 * STRING_H}
+              r={5} fill="#3a2a1a" />
+          ))}
+          {/* Double dot at 12 */}
+          <circle cx={fretX(DOUBLE_MARKER)} cy={PAD_T + 0.5 * STRING_H} r={5} fill="#3a2a1a" />
+          <circle cx={fretX(DOUBLE_MARKER)} cy={PAD_T + 2.5 * STRING_H} r={5} fill="#3a2a1a" />
+
+          {/* Fret lines */}
+          {Array.from({ length: NUM_FRETS - 1 }, (_, i) => i + 1).map(f => (
+            <line key={f}
+              x1={NUT_X + f * FRET_W} y1={PAD_T - 6}
+              x2={NUT_X + f * FRET_W} y2={PAD_T + 3 * STRING_H + 6}
+              stroke={f === DOUBLE_MARKER ? '#888' : '#4a3a2a'}
+              strokeWidth={f === DOUBLE_MARKER ? 2 : 1} />
+          ))}
+
+          {/* Nut */}
+          <line x1={NUT_X} y1={PAD_T - 6} x2={NUT_X} y2={PAD_T + 3 * STRING_H + 6}
+            stroke="#c0b090" strokeWidth={4} />
+
+          {/* Strings — thicker as pitch drops */}
+          {STRINGS.map((s, si) => (
+            <line key={si}
+              x1={OPEN_X - DOT_R - 2} y1={stringY(si)}
+              x2={BOARD_W - 8}        y2={stringY(si)}
+              stroke="#9ca3af"
+              strokeWidth={s.thickness} />
+          ))}
+
+          {/* Fret numbers */}
+          {[3, 5, 7, 9, 12].map(f => (
+            <text key={f}
+              x={fretX(f)} y={PAD_T - 10}
+              textAnchor="middle" fontSize={10} fill="#6b7280"
+            >{f}</text>
+          ))}
+
+          {/* String labels */}
+          {STRINGS.map((s, si) => (
+            <text key={si}
+              x={6} y={stringY(si) + 4}
+              textAnchor="middle" fontSize={10} fill="#6b7280"
+            >{s.label}</text>
+          ))}
+
+          {/* Note dots */}
+          {STRINGS.flatMap((str, si) =>
+            Array.from({ length: NUM_FRETS }, (_, fi) => {
+              const pc    = (str.root + fi) % 12
+              const color = noteColor(chordSet.has(pc), pentaSet.has(pc), scaleSet.has(pc), monoColor)
+              if (!color) return null
+
+              const cx = fi === 0 ? OPEN_X : fretX(fi)
+              const cy = stringY(si)
+
+              return (
+                <g key={`${si}-${fi}`}>
+                  <circle cx={cx} cy={cy} r={DOT_R} fill={color.fill} />
+                  <text
+                    x={cx} y={cy + 4}
+                    textAnchor="middle"
+                    fontSize={9}
+                    fontWeight="600"
+                    fill={color.text}
+                  >
+                    {NOTES[pc]}
+                  </text>
+                </g>
+              )
+            })
+          )}
+        </svg>
+      </div>
+
+      <div className="mt-3 flex gap-5 text-xs text-gray-500">
+        <span><span className="text-accent">●</span> Chord tone</span>
+        <span style={{ color: monoColor ? '#c084fc' : '#f59e0b' }}>●</span><span> Pentatonic</span>
+        <span style={{ color: monoColor ? '#e9d5ff' : '#6b7280' }}>●</span><span> Scale</span>
+      </div>
+    </div>
+  )
+}

src/components/ChordBox.jsx

@@ -0,0 +1,137 @@
+// SVG chord diagram — 6 strings × 5 visible frets
+// Props:
+//   frets[]   — [s6…s1]: fret number or 'x' (muted)
+//   fingers[] — [s6…s1]: finger 1-4, 0 = open/barre indicator
+//   barre     — { fret, fromStr, toStr } or null
+//   baseFret  — which fret number is at the top of the diagram (1 = standard)
+//   label     — caption below the box
+
+const STRINGS  = 6
+const ROWS     = 5          // visible frets
+const SX       = 32         // left margin (open/mute indicators)
+const SY       = 28         // top margin (nut / baseFret label)
+const GX       = 26         // gap between strings
+const GY       = 22         // gap between frets
+const DOT_R    = 9          // dot radius
+const W        = SX + GX * (STRINGS - 1) + 24   // total width
+const H        = SY + GY * ROWS + 20            // total height
+
+function strX(s) { return SX + (STRINGS - 1 - s) * GX }  // s=0 is s6 (low E, leftmost)
+function fretY(f) { return SY + f * GY }                  // f=0 is above first fret, f=1…5 are fret centers
+
+export default function ChordBox({ frets, fingers, barre, baseFret = 1, label }) {
+  const isOpen = baseFret === 1
+
+  // Map fret numbers to diagram row (0-indexed from top)
+  function toRow(absF) {
+    return absF - baseFret + 1   // fret at baseFret → row 1 (center of first fret)
+  }
+
+  // Barre bar: draw a rounded rect across strings
+  function renderBarre() {
+    if (!barre) return null
+    const row = toRow(barre.fret)
+    if (row < 1 || row > ROWS) return null
+    const x1 = strX(STRINGS - barre.toStr)    // toStr is highest string number = leftmost
+    const x2 = strX(STRINGS - barre.fromStr)  // fromStr is lowest string number = rightmost
+    const cy = fretY(row) - GY / 2
+    return (
+      <rect
+        key="barre"
+        x={x1 - DOT_R}
+        y={cy - DOT_R}
+        width={x2 - x1 + DOT_R * 2}
+        height={DOT_R * 2}
+        rx={DOT_R}
+        fill="#a855f7"
+        opacity={0.9}
+      />
+    )
+  }
+
+  return (
+    <div className="flex flex-col items-center gap-1">
+      <svg width={W} height={H} viewBox={`0 0 ${W} ${H}`} className="overflow-visible">
+
+        {/* ── Nut or baseFret indicator ── */}
+        {isOpen ? (
+          <rect x={SX - 2} y={SY - 4} width={GX * (STRINGS - 1) + 4} height={4} rx={2} fill="#e5e7eb" />
+        ) : (
+          <text x={SX - 6} y={SY + GY * 0.5} textAnchor="end" dominantBaseline="middle"
+            fill="#9ca3af" fontSize={10} fontFamily="monospace">
+            {baseFret}
+          </text>
+        )}
+
+        {/* ── Fret lines ── */}
+        {Array.from({ length: ROWS + 1 }, (_, i) => (
+          <line key={`fl${i}`}
+            x1={SX} y1={fretY(i) - GY / 2}
+            x2={SX + GX * (STRINGS - 1)} y2={fretY(i) - GY / 2}
+            stroke="#374151" strokeWidth={i === 0 && isOpen ? 3 : 1}
+          />
+        ))}
+
+        {/* ── String lines ── */}
+        {Array.from({ length: STRINGS }, (_, s) => (
+          <line key={`sl${s}`}
+            x1={strX(s)} y1={SY - GY / 2}
+            x2={strX(s)} y2={fretY(ROWS) - GY / 2}
+            stroke="#4b5563" strokeWidth={1}
+          />
+        ))}
+
+        {/* ── Barre ── */}
+        {renderBarre()}
+
+        {/* ── Dots + open/mute indicators ── */}
+        {frets.map((f, s) => {
+          const cx = strX(STRINGS - 1 - s)
+          if (f === 'x') {
+            return (
+              <text key={`m${s}`} x={cx} y={SY - GY / 2 - 7}
+                textAnchor="middle" fill="#6b7280" fontSize={12} fontWeight="bold">
+                ×
+              </text>
+            )
+          }
+          if (f === 0) {
+            return (
+              <circle key={`o${s}`} cx={cx} cy={SY - GY / 2 - 7}
+                r={5} fill="none" stroke="#6b7280" strokeWidth={1.5} />
+            )
+          }
+          const row = toRow(f)
+          if (row < 1 || row > ROWS) return null
+          const cy = fretY(row) - GY / 2
+          const finger = fingers?.[s] ?? 0
+          return (
+            <g key={`d${s}`}>
+              <circle cx={cx} cy={cy} r={DOT_R} fill="#a855f7" />
+              {finger > 0 && (
+                <text x={cx} y={cy} textAnchor="middle" dominantBaseline="middle"
+                  fill="white" fontSize={9} fontWeight="bold">
+                  {finger}
+                </text>
+              )}
+            </g>
+          )
+        })}
+
+        {/* ── String name labels ── */}
+        {['e','B','G','D','A','E'].map((n, i) => (
+          <text key={`sn${i}`}
+            x={strX(i)} y={H - 4}
+            textAnchor="middle" fill="#4b5563" fontSize={8}>
+            {n}
+          </text>
+        ))}
+
+      </svg>
+
+      {label && (
+        <p className="text-[11px] text-gray-400 text-center leading-tight max-w-[120px]">{label}</p>
+      )}
+    </div>
+  )
+}

src/components/ChordDetailModal.jsx

@@ -0,0 +1,789 @@
+import { useState, useEffect } from 'react'
+import ChordBox from './ChordBox'
+import MiniPiano from './MiniPiano'
+import { getGuitarVoicings, getPianoTechniques, parseChord } from '../lib/voicings'
+import { CHORD_TYPES, NOTES, getChordsInKey, toRomanNumeral, getSuggestedProgressions } from '../lib/theory'
+import { FAMOUS_PROGRESSIONS, progressionInKey, getChordSubstitutions, CHORD_PLAYBOOK } from '../lib/education'
+
+const CHORD_SUFFIX_OPTIONS = [
+  { key: 'maj',      label: 'Major' },
+  { key: 'min',      label: 'Minor' },
+  { key: 'dom7',     label: '7' },
+  { key: 'maj7',     label: 'maj7' },
+  { key: 'min7',     label: 'm7' },
+  { key: 'dim',      label: 'dim' },
+  { key: 'dim7',     label: 'dim7' },
+  { key: 'half_dim', label: 'm7♭5' },
+  { key: 'aug',      label: 'aug' },
+  { key: 'sus4',     label: 'sus4' },
+  { key: 'sus2',     label: 'sus2' },
+  { key: 'maj6',     label: '6' },
+  { key: 'min6',     label: 'm6' },
+  { key: 'add9',     label: 'add9' },
+]
+
+function chordDisplayName(root, typeKey) {
+  const type = CHORD_TYPES[typeKey]
+  if (!type) return root
+  return root + type.suffix
+}
+
+function GuitarTab({ chordName }) {
+  const voicings = getGuitarVoicings(chordName)
+  if (!voicings.length) {
+    return <p className="text-gray-500 text-sm text-center py-8">No guitar voicings found for {chordName}.</p>
+  }
+  return (
+    <div>
+      <p className="text-xs text-gray-500 mb-4">
+        Click any voicing to learn it. Purple = chord tones. Finger numbers inside dots (1=index, 4=pinky).
+        Barre chords show the fret number on the left.
+      </p>
+      <div className="flex flex-wrap gap-6 justify-start">
+        {voicings.map((v, i) => (
+          <div key={i} className="flex flex-col items-center gap-1 p-3 rounded-xl bg-surface border border-border hover:border-accent/40 transition-colors">
+            <ChordBox
+              frets={v.frets}
+              fingers={v.fingers}
+              barre={v.barre}
+              baseFret={v.baseFret}
+            />
+            <p className="text-[11px] text-gray-400 text-center mt-1 max-w-[120px] leading-tight">{v.label}</p>
+          </div>
+        ))}
+      </div>
+      <div className="mt-4 p-3 rounded-lg bg-surface border border-border">
+        <p className="text-xs text-gray-500">
+          <span className="text-accent font-semibold">Pro tip:</span> Learn the E-shape and A-shape barres first
+          — they cover all 12 roots. Then add open voicings for the keys you play in most.
+          High-fret voicings (above fret 7) work great as jazz comping shapes in a band mix.
+        </p>
+      </div>
+    </div>
+  )
+}
+
+function PianoTab({ chordName }) {
+  const parsed = parseChord(chordName)
+  const techniques = getPianoTechniques(chordName)
+  const rootPc = parsed?.rootPc ?? 0
+
+  if (!techniques.length) {
+    return <p className="text-gray-500 text-sm text-center py-8">No piano techniques for {chordName}.</p>
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <p className="text-xs text-gray-500">
+        <span className="text-blue-400 font-semibold">Blue = Left hand</span> &nbsp;·&nbsp;
+        <span className="text-accent font-semibold">Purple = Right hand</span> &nbsp;·&nbsp;
+        R marks the root.
+      </p>
+      {techniques.map((t, i) => (
+        <div key={i} className="p-4 rounded-xl bg-surface border border-border hover:border-accent/30 transition-colors">
+          <div className="flex flex-col lg:flex-row gap-4 items-start">
+            <div className="shrink-0 overflow-x-auto">
+              <MiniPiano rootPc={rootPc} lh={t.lh} rh={t.rh} />
+            </div>
+            <div className="flex flex-col gap-1.5 min-w-0">
+              <h3 className="font-bold text-white text-sm">{t.name}</h3>
+              <p className="text-gray-400 text-xs">{t.desc}</p>
+              <p className="text-xs text-amber-400/80 mt-1">
+                <span className="text-amber-400 font-semibold">Tip:</span> {t.tip}
+              </p>
+              <div className="flex gap-3 mt-1 text-xs text-gray-600">
+                {t.lh.length > 0 && (
+                  <span className="text-blue-400">LH: {t.lh.map(iv => {
+                    const n = NOTES[(rootPc + iv) % 12]
+                    return iv === 0 ? `${n} (root)` : n
+                  }).join(', ')}</span>
+                )}
+                {t.rh.length > 0 && (
+                  <span className="text-accent">RH: {t.rh.map(iv => {
+                    const n = NOTES[(rootPc + iv) % 12]
+                    return n
+                  }).join(', ')}</span>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function ChordQuickPick({ label, chords, active, keyInfo, onSelect }) {
+  if (!chords.length) return null
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <span className="text-[11px] text-gray-600 uppercase tracking-wider shrink-0 w-20">{label}</span>
+      <div className="flex flex-wrap gap-1.5">
+        {chords.map(chord => {
+          const rn = keyInfo?.root ? toRomanNumeral(chord, keyInfo.root, keyInfo.mode) : ''
+          return (
+            <button key={chord}
+              onClick={() => onSelect(chord)}
+              className={`flex flex-col items-center px-2.5 py-1 rounded-lg border text-xs font-bold transition-all ${
+                active === chord
+                  ? 'bg-accent border-accent text-white'
+                  : 'bg-surface border-border text-gray-300 hover:border-accent/50 hover:text-white'
+              }`}>
+              <span>{chord}</span>
+              {rn && <span className="text-[9px] font-normal opacity-60 leading-none">{rn}</span>}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+// ─── Progressions sub-tab ─────────────────────────────────────────────────────
+// Determine whether a chord type is major-ish or minor-ish for matching
+const MAJOR_TYPES = new Set(['maj','maj7','maj6','add9','sus4','sus2','aug','dom7'])
+const MINOR_TYPES = new Set(['min','min7','min6','half_dim','dim','dim7'])
+
+function isMajorType(t) { return MAJOR_TYPES.has(t) }
+function isMinorType(t) { return MINOR_TYPES.has(t) }
+
+function ProgressionsSubTab({ chordName, onChordClick }) {
+  const parsed = parseChord(chordName)
+  if (!parsed) return null
+  const { rootPc, type } = parsed
+  const root = NOTES[rootPc]
+
+  // Famous progressions where this chord can be the tonic (degree 0)
+  const isMajor = isMajorType(type)
+  const isMinor = isMinorType(type)
+  const tonicProgs = FAMOUS_PROGRESSIONS.filter(p => {
+    const q0 = p.qualities[0]
+    if (isMajor && isMajorType(q0)) return true
+    if (isMinor && isMinorType(q0)) return true
+    return false
+  })
+
+  // Genre-based suggestions from theory.js
+  const genreProgs = getSuggestedProgressions(root, isMajor ? 'major' : 'minor')
+
+  // Roles this chord plays in other keys
+  const ROLES = []
+  for (let keyPc = 0; keyPc < 12; keyPc++) {
+    for (const mode of ['major', 'minor']) {
+      const diatonicChords = getChordsInKey(NOTES[keyPc], mode)
+      const idx = diatonicChords.indexOf(chordName)
+      if (idx !== -1) {
+        const rn = toRomanNumeral(chordName, NOTES[keyPc], mode)
+        ROLES.push({ keyRoot: NOTES[keyPc], mode, rn, diatonicChords })
+        break
+      }
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-5">
+
+      {/* ── Famous progressions starting from this chord ── */}
+      <div>
+        <p className="text-[11px] uppercase tracking-wider text-gray-600 mb-3">
+          Famous progressions — {chordName} as tonic
+        </p>
+        {tonicProgs.length === 0 && (
+          <p className="text-gray-600 text-sm">No exact matches — try a major or minor chord.</p>
+        )}
+        <div className="flex flex-col gap-3">
+          {tonicProgs.slice(0, 6).map(prog => {
+            const chordsHere = progressionInKey(prog, root)
+            return (
+              <div key={prog.id} className="p-3 bg-surface border border-border rounded-xl hover:border-accent/30 transition-colors">
+                <div className="flex items-center gap-2 flex-wrap mb-2">
+                  <span className="font-bold text-white text-sm">{prog.name}</span>
+                  <span className="text-[10px] font-mono text-gray-500">{prog.pattern}</span>
+                  {prog.genre.map(g => (
+                    <span key={g} className="px-1.5 py-0.5 bg-accent/10 border border-accent/20 rounded text-[10px] text-accent">{g}</span>
+                  ))}
+                </div>
+                {/* Chord sequence */}
+                <div className="flex flex-wrap gap-1.5 items-center mb-2">
+                  {chordsHere.map((c, i) => (
+                    <span key={i} className="flex items-center gap-1">
+                      <button
+                        onClick={() => onChordClick?.(c)}
+                        className={`px-2.5 py-1 rounded-lg font-bold text-sm border transition-all ${
+                          i === 0
+                            ? 'bg-accent border-accent text-white'
+                            : 'bg-panel border-border text-gray-200 hover:border-accent/50 hover:text-accent'
+                        }`}
+                        title={`Voicings for ${c}`}
+                      >
+                        {c}
+                      </button>
+                      {i < chordsHere.length - 1 && <span className="text-gray-700 text-xs">→</span>}
+                    </span>
+                  ))}
+                </div>
+                <p className="text-xs text-gray-500 leading-snug">{prog.description}</p>
+                {prog.songs[0] && (
+                  <p className="text-[11px] text-gray-600 mt-1">e.g. {prog.songs.slice(0, 3).join(' · ')}</p>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* ── Genre-based next-chord suggestions ── */}
+      {genreProgs.length > 0 && (
+        <div>
+          <p className="text-[11px] uppercase tracking-wider text-gray-600 mb-3">
+            Genre suggestions — starting from {chordName}
+          </p>
+          <div className="flex flex-col gap-2">
+            {genreProgs.slice(0, 6).map((prog, pi) => (
+              <div key={pi} className="flex items-center gap-2 p-2 bg-surface border border-border rounded-lg flex-wrap">
+                <span className="text-[10px] font-bold text-gray-500 w-14 shrink-0">{prog.genre}</span>
+                <div className="flex gap-1.5 flex-wrap items-center">
+                  {prog.chords.map((c, i) => (
+                    <span key={i} className="flex items-center gap-1">
+                      <button
+                        onClick={() => onChordClick?.(c)}
+                        className="px-2 py-0.5 bg-panel border border-border hover:border-accent/50 rounded text-xs font-bold text-gray-200 hover:text-accent transition-all"
+                        title={`Voicings for ${c}`}
+                      >
+                        {c}
+                      </button>
+                      {i < prog.chords.length - 1 && <span className="text-gray-700 text-[10px]">→</span>}
+                    </span>
+                  ))}
+                </div>
+                <span className="text-[10px] text-gray-600 font-mono ml-1">{prog.rn?.join(' – ')}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* ── Roles this chord plays ── */}
+      {ROLES.length > 0 && (
+        <div>
+          <p className="text-[11px] uppercase tracking-wider text-gray-600 mb-3">
+            {chordName} appears in these keys
+          </p>
+          <div className="flex flex-wrap gap-2">
+            {ROLES.slice(0, 8).map(({ keyRoot, mode, rn, diatonicChords }) => (
+              <div key={`${keyRoot}-${mode}`}
+                className="px-3 py-2 bg-surface border border-border rounded-xl text-xs flex flex-col gap-1">
+                <div className="flex items-center gap-1.5">
+                  <span className="font-bold text-white">{keyRoot}</span>
+                  <span className="text-gray-500 capitalize">{mode}</span>
+                  <span className="text-amber-400 font-bold">{rn}</span>
+                </div>
+                <div className="flex gap-1 flex-wrap">
+                  {diatonicChords.map((c, i) => (
+                    <button key={i}
+                      onClick={() => onChordClick?.(c)}
+                      className={`px-1.5 py-0.5 rounded text-[10px] font-bold transition-all ${
+                        c === chordName
+                          ? 'bg-accent text-white'
+                          : 'text-gray-500 hover:text-gray-300'
+                      }`}>
+                      {c}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ─── Theory tab ───────────────────────────────────────────────────────────────
+
+const CHORD_THEORY = {
+  maj: {
+    name: 'Major',
+    formula: 'Root  +  Major 3rd (4 semitones)  +  Perfect 5th (7 semitones)',
+    vibe: 'Bright, happy, resolved. The most "complete" sound in Western music.',
+    beginner: 'Major chords are the foundation of almost every song you know. They feel stable and uplifting — like a musical full stop.',
+    tension: 'Low — very stable',
+    color: 'text-yellow-400',
+  },
+  min: {
+    name: 'Minor',
+    formula: 'Root  +  Minor 3rd (3 semitones)  +  Perfect 5th (7 semitones)',
+    vibe: 'Dark, melancholic, introspective. The 3rd is lowered by just one semitone — that one note changes everything.',
+    beginner: 'One note separates major from minor. Minor chords carry emotion and depth — sadness, mystery, tension.',
+    tension: 'Low-medium — stable but moody',
+    color: 'text-blue-400',
+  },
+  dom7: {
+    name: 'Dominant 7th',
+    formula: 'Major triad  +  Minor 7th (10 semitones)',
+    vibe: 'Tense, bluesy, urgent. Wants desperately to resolve to a chord a 5th lower.',
+    beginner: 'The 7th chord is the engine of blues and jazz. It creates tension that begs to resolve — like holding your breath. Play G7 then C to feel it.',
+    tension: 'High — strongly pulls to resolution',
+    color: 'text-red-400',
+  },
+  maj7: {
+    name: 'Major 7th',
+    formula: 'Major triad  +  Major 7th (11 semitones)',
+    vibe: 'Dreamy, lush, sophisticated. Jazz-infused warmth without the tension of a dominant 7th.',
+    beginner: 'The major 7th is the note just below the octave. Adding it to a major chord gives you that smooth jazz-bossa nova sound — think "Autumn Leaves".',
+    tension: 'Very low — ethereal and floating',
+    color: 'text-purple-400',
+  },
+  min7: {
+    name: 'Minor 7th',
+    formula: 'Minor triad  +  Minor 7th (10 semitones)',
+    vibe: 'Smooth, soulful, relaxed. Darker than major 7th but less tense than a dominant 7th.',
+    beginner: 'Minor 7ths are everywhere in soul, R&B, and jazz. They\'re minor chords with added warmth — moody but not harsh.',
+    tension: 'Low-medium — smooth and flowing',
+    color: 'text-indigo-400',
+  },
+  dim: {
+    name: 'Diminished',
+    formula: 'Root  +  Minor 3rd (3 semitones)  +  Diminished 5th (6 semitones)',
+    vibe: 'Dark, tense, unstable. The flattened 5th creates a tritone interval — historically called "diabolus in musica" (the devil in music).',
+    beginner: 'Diminished chords are passing chords — they create maximum tension so the next chord feels like a huge relief. Like a musical cliffhanger.',
+    tension: 'Very high — wants to resolve immediately',
+    color: 'text-orange-400',
+  },
+  dim7: {
+    name: 'Diminished 7th',
+    formula: 'Diminished triad  +  Diminished 7th (9 semitones) — fully symmetric, all minor 3rds',
+    vibe: 'Extremely tense and dramatic. Used in horror film scores and dramatic classical passages.',
+    beginner: 'All four notes are equally spaced (all minor 3rds apart), making it the most symmetrical and unstable chord. Classic "villain arrives" sound.',
+    tension: 'Extreme — maximum instability',
+    color: 'text-red-600',
+  },
+  half_dim: {
+    name: 'Half-Diminished (m7♭5)',
+    formula: 'Diminished triad  +  Minor 7th (10 semitones)',
+    vibe: 'Dark and tense but with slightly more resolution than full dim7. The "ii" chord in minor ii–V–i jazz progressions.',
+    beginner: 'Half-diminished sits between a minor 7th and a fully diminished chord. It\'s the moody jazz workhorse — think the intro to "Autumn Leaves".',
+    tension: 'High — tense but musical',
+    color: 'text-orange-500',
+  },
+  aug: {
+    name: 'Augmented',
+    formula: 'Root  +  Major 3rd (4 semitones)  +  Augmented 5th (8 semitones) — all major 3rds',
+    vibe: 'Eerie, floating, dreamlike. The raised 5th creates instability that can resolve either up or down.',
+    beginner: 'Augmented chords sound like something is about to happen. They\'re often used as a passing chord between major and minor — the 5th feels like it\'s "reaching" upward.',
+    tension: 'High — ambiguous direction',
+    color: 'text-emerald-400',
+  },
+  sus4: {
+    name: 'Suspended 4th',
+    formula: 'Root  +  Perfect 4th (5 semitones)  +  Perfect 5th (7 semitones)',
+    vibe: 'Open, unresolved, expectant. The 3rd is replaced by a 4th — neither major nor minor, just floating.',
+    beginner: '"Sus" means suspended — the 3rd is suspended in mid-air. It wants to drop down to a major or minor chord. Classic rock move: sus4 → major.',
+    tension: 'Medium — pleasant tension, easy on the ear',
+    color: 'text-cyan-400',
+  },
+  sus2: {
+    name: 'Suspended 2nd',
+    formula: 'Root  +  Major 2nd (2 semitones)  +  Perfect 5th (7 semitones)',
+    vibe: 'Airy, spacious, ambiguous. Like sus4 but lighter — the 2nd sits high above the root.',
+    beginner: 'Sus2 is a favourite of modern pop and ambient music. Without a 3rd, it has no major/minor quality — it just floats. Think Sting, U2, Coldplay.',
+    tension: 'Low-medium — open and spacious',
+    color: 'text-teal-400',
+  },
+  maj6: {
+    name: 'Major 6th',
+    formula: 'Major triad  +  Major 6th (9 semitones)',
+    vibe: 'Sweet, vintage, nostalgic. The 6th adds a note from the scale without the tension of a 7th.',
+    beginner: "The 6th is a colour tone that sweetens a major chord. Common in jazz, bossa nova, and 50s pop — \"Misty\" and \"Fly Me To The Moon\" territory.",
+    tension: 'Very low — sweeter than major triad',
+    color: 'text-amber-300',
+  },
+  min6: {
+    name: 'Minor 6th',
+    formula: 'Minor triad  +  Major 6th (9 semitones)',
+    vibe: 'Bittersweet, exotic, dramatic. A major 6th over a minor chord creates a striking contrast.',
+    beginner: 'Minor 6ths have a flamenco/tango feel. The bright 6th sitting on top of a dark minor chord creates a sophisticated tension — think Django Reinhardt.',
+    tension: 'Medium — intriguing contrast',
+    color: 'text-amber-400',
+  },
+  add9: {
+    name: 'Add 9',
+    formula: 'Major triad  +  Major 9th (14 semitones = octave + 2)',
+    vibe: 'Open, modern, slightly epic. The 9th adds colour without the smoothness of a 7th.',
+    beginner: 'Add9 is the chord of modern rock and pop. Unlike maj9 (which also has a 7th), add9 keeps things clean and direct. Coldplay, Radiohead, and U2 love it.',
+    tension: 'Very low — bright and open',
+    color: 'text-lime-400',
+  },
+}
+
+const INTERVAL_NAMES = {
+  0: 'Root', 2: 'Major 2nd', 3: 'Minor 3rd', 4: 'Major 3rd',
+  5: 'Perfect 4th', 6: 'Tritone (♭5)', 7: 'Perfect 5th',
+  8: 'Aug 5th', 9: 'Major 6th', 10: 'Minor 7th', 11: 'Major 7th',
+  14: 'Major 9th',
+}
+
+function TheoryTab({ chordName }) {
+  const parsed = parseChord(chordName)
+  if (!parsed) return <p className="text-gray-500 text-sm text-center py-8">Could not parse chord.</p>
+
+  const { rootPc, type } = parsed
+  const typeInfo = CHORD_TYPES[type]
+  const theory = CHORD_THEORY[type]
+  const subs = getChordSubstitutions(chordName)
+
+  // Actual note names
+  const noteNames = (typeInfo?.intervals ?? []).map(iv => NOTES[(rootPc + iv) % 12])
+
+  // Roles this chord can play
+  const ROLES = []
+  for (let keyPc = 0; keyPc < 12; keyPc++) {
+    for (const mode of ['major', 'minor']) {
+      const diatonicChords = getChordsInKey(NOTES[keyPc], mode)
+      const idx = diatonicChords.indexOf(chordName)
+      if (idx !== -1) {
+        const rn = toRomanNumeral(chordName, NOTES[keyPc], mode)
+        ROLES.push({ keyRoot: NOTES[keyPc], mode, rn })
+      }
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-5">
+
+      {/* ── What is this chord? ── */}
+      <div className="p-4 bg-surface border border-border rounded-xl">
+        <div className="flex items-baseline gap-3 mb-3">
+          <span className={`text-lg font-black ${theory?.color ?? 'text-accent'}`}>{chordName}</span>
+          <span className="text-sm text-gray-400">{theory?.name ?? type}</span>
+        </div>
+        {theory && (
+          <>
+            <p className="text-sm text-gray-200 leading-relaxed mb-2">{theory.beginner}</p>
+            <p className="text-xs text-gray-500 italic leading-relaxed">{theory.vibe}</p>
+          </>
+        )}
+      </div>
+
+      {/* ── Notes & Formula ── */}
+      <div className="p-4 bg-surface border border-border rounded-xl">
+        <p className="text-[11px] uppercase tracking-wider text-gray-600 mb-3">Notes in this chord</p>
+        <div className="flex flex-wrap gap-2 mb-3">
+          {(typeInfo?.intervals ?? []).map((iv, i) => (
+            <div key={i} className={`flex flex-col items-center px-3 py-2 rounded-xl border ${
+              i === 0 ? 'bg-accent/20 border-accent text-accent' : 'bg-panel border-border text-gray-300'
+            }`}>
+              <span className="text-base font-black">{noteNames[i]}</span>
+              <span className="text-[10px] text-gray-500 leading-none mt-0.5">{INTERVAL_NAMES[iv] ?? `+${iv}`}</span>
+            </div>
+          ))}
+        </div>
+        {theory && (
+          <div className="text-xs text-gray-600 font-mono bg-panel/50 rounded-lg px-3 py-2 border border-border">
+            {theory.formula}
+          </div>
+        )}
+        {theory && (
+          <div className="flex items-center gap-2 mt-2">
+            <span className="text-[10px] uppercase tracking-wider text-gray-600">Tension:</span>
+            <span className="text-xs text-gray-400">{theory.tension}</span>
+          </div>
+        )}
+      </div>
+
+      {/* ── Chord substitutions ── */}
+      {subs.length > 0 && (
+        <div>
+          <p className="text-[11px] uppercase tracking-wider text-gray-600 mb-3">Colour swaps — try these instead</p>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+            {subs.map((sub, i) => (
+              <div key={i} className="flex items-start gap-3 p-3 bg-surface border border-border rounded-xl hover:border-accent/30 transition-colors">
+                <span className="text-sm font-black text-accent shrink-0 w-16">{sub.chord}</span>
+                <p className="text-xs text-gray-400 leading-snug">{sub.tip}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* ── Keys this chord belongs to ── */}
+      {ROLES.length > 0 && (
+        <div>
+          <p className="text-[11px] uppercase tracking-wider text-gray-600 mb-3">{chordName} appears in these keys</p>
+          <div className="flex flex-wrap gap-2">
+            {ROLES.slice(0, 10).map(({ keyRoot, mode, rn }) => (
+              <div key={`${keyRoot}-${mode}`}
+                className="px-3 py-2 bg-surface border border-border rounded-xl text-xs flex items-center gap-2">
+                <span className="font-bold text-white">{keyRoot}</span>
+                <span className="text-gray-500 capitalize">{mode}</span>
+                <span className="text-amber-400 font-bold">{rn}</span>
+              </div>
+            ))}
+          </div>
+          <p className="text-[11px] text-gray-700 mt-2">
+            Roman numerals show the chord's role: I/i = home, IV = subdominant, V = dominant tension, vi/♭VI = relative minor/major, etc.
+          </p>
+        </div>
+      )}
+
+    </div>
+  )
+}
+
+// ─── Learn tab ────────────────────────────────────────────────────────────────
+
+function LearnTab({ chordName }) {
+  const parsed = parseChord(chordName)
+  const playbook = parsed ? CHORD_PLAYBOOK[parsed.type] : null
+
+  if (!playbook) {
+    return <p className="text-gray-500 text-sm text-center py-8">No jam content for {chordName} yet.</p>
+  }
+
+  return (
+    <div className="flex flex-col gap-5">
+
+      {/* ── Jam role ── */}
+      <div className="px-4 py-3 bg-accent/10 border border-accent/20 rounded-xl">
+        <p className="text-[10px] uppercase tracking-wider text-accent/60 mb-1">Your role in the jam</p>
+        <p className="text-sm text-white leading-relaxed">{playbook.jamRole}</p>
+      </div>
+
+      {/* ── Voicings for jamming ── */}
+      <div>
+        <p className="text-[11px] uppercase tracking-wider text-gray-600 mb-2">Voicings — when to use which</p>
+        <div className="flex flex-col gap-2">
+          {playbook.voicings.map((v, i) => (
+            <div key={i} className="flex gap-3 p-3 bg-surface border border-border rounded-xl hover:border-accent/20 transition-colors">
+              <span className="text-accent font-black text-lg shrink-0 leading-none mt-0.5">{i + 1}</span>
+              <div>
+                <p className="text-xs font-bold text-white mb-0.5">{v.name}</p>
+                <p className="text-xs text-gray-400 leading-relaxed">{v.use}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+        <p className="text-[10px] text-gray-700 mt-2">See the Guitar tab for the actual fingerings of each shape.</p>
+      </div>
+
+      {/* ── Licks & fills ── */}
+      <div>
+        <p className="text-[11px] uppercase tracking-wider text-gray-600 mb-2">Licks &amp; fills</p>
+        <div className="flex flex-col gap-3">
+          {playbook.licks.map((l, i) => (
+            <div key={i} className="p-4 bg-surface border border-border rounded-xl hover:border-accent/30 transition-colors">
+              <div className="flex items-center gap-2 mb-2 flex-wrap">
+                <p className="text-sm font-bold text-white">{l.title}</p>
+                <span className="text-[9px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full bg-accent/10 border border-accent/20 text-accent">{l.style}</span>
+              </div>
+              <pre className="text-[10px] font-mono text-accent/70 bg-black/40 border border-border rounded-lg px-3 py-2 overflow-x-auto leading-relaxed whitespace-pre mb-2">{l.tab}</pre>
+              <p className="text-xs text-amber-400/80">
+                <span className="font-semibold text-amber-400">Key insight: </span>{l.tip}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* ── Jam tips ── */}
+      <div>
+        <p className="text-[11px] uppercase tracking-wider text-gray-600 mb-2">Jam tips</p>
+        <div className="flex flex-col gap-2">
+          {playbook.jamTips.map((tip, i) => (
+            <div key={i} className="flex gap-2.5 text-xs text-gray-300 leading-relaxed p-2.5 rounded-lg bg-surface border border-border">
+              <span className="text-accent shrink-0 font-bold mt-0.5">→</span>
+              <p>{tip}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* ── Loop station practice ── */}
+      {playbook.loopPractice?.length > 0 && (
+        <div>
+          <p className="text-[11px] uppercase tracking-wider text-gray-600 mb-2">Loop station practice</p>
+          <div className="flex flex-col gap-2">
+            {playbook.loopPractice.map((lp, i) => (
+              <div key={i} className="p-3 bg-surface border border-border rounded-xl border-l-2 border-l-accent/40">
+                <p className="text-xs font-bold text-white mb-1">🔁 {lp.title}</p>
+                <p className="text-xs text-gray-400 leading-relaxed">{lp.body}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+    </div>
+  )
+}
+
+// ─── Explore tab ──────────────────────────────────────────────────────────────
+function ExploreTab({ initialChord, keyInfo, chordHistory }) {
+  const parsed = parseChord(initialChord)
+  const [root, setRoot]       = useState(parsed ? NOTES[parsed.rootPc] : 'C')
+  const [typeKey, setTypeKey] = useState(parsed?.type ?? 'maj')
+  const [subTab, setSubTab]   = useState('guitar')
+  const [active, setActive]   = useState(initialChord ?? '')
+
+  const chordName = chordDisplayName(root, typeKey)
+
+  function selectChord(chord) {
+    setActive(chord)
+    const p = parseChord(chord)
+    if (p) { setRoot(NOTES[p.rootPc]); setTypeKey(p.type) }
+  }
+
+  const recentChords = [...new Set([...(chordHistory ?? [])].reverse())].slice(0, 12)
+  const keyChords = keyInfo?.root ? getChordsInKey(keyInfo.root, keyInfo.mode ?? 'major') : []
+
+  return (
+    <div className="flex flex-col gap-4">
+
+      {/* ── Contextual quick-picks ── */}
+      {(recentChords.length > 0 || keyChords.length > 0) && (
+        <div className="flex flex-col gap-3 p-3 bg-surface border border-border rounded-xl">
+          <ChordQuickPick label="History" chords={recentChords} active={active} keyInfo={keyInfo} onSelect={selectChord} />
+          {keyChords.length > 0 && (
+            <>
+              {recentChords.length > 0 && <div className="h-px bg-border" />}
+              <ChordQuickPick
+                label={`${keyInfo.root} ${keyInfo.mode ?? ''}`}
+                chords={keyChords} active={active} keyInfo={keyInfo} onSelect={selectChord}
+              />
+            </>
+          )}
+        </div>
+      )}
+
+      {/* ── Manual picker ── */}
+      <div className="flex flex-wrap gap-2 items-center p-3 bg-surface border border-border rounded-xl">
+        <span className="text-xs text-gray-500 shrink-0">Root:</span>
+        <div className="flex flex-wrap gap-1">
+          {NOTES.map(n => (
+            <button key={n}
+              onClick={() => { setRoot(n); setActive('') }}
+              className={`px-2 py-0.5 rounded text-xs font-bold transition-all ${
+                root === n ? 'bg-accent text-white' : 'bg-border text-gray-400 hover:text-white'
+              }`}>
+              {n}
+            </button>
+          ))}
+        </div>
+        <div className="w-px h-4 bg-border shrink-0" />
+        <span className="text-xs text-gray-500 shrink-0">Type:</span>
+        <div className="relative">
+          <select
+            value={typeKey}
+            onChange={e => { setTypeKey(e.target.value); setActive('') }}
+            className="appearance-none bg-panel border border-border rounded-lg pl-2 pr-6 py-1 text-xs text-gray-200 cursor-pointer focus:outline-none focus:border-accent"
+          >
+            {CHORD_SUFFIX_OPTIONS.map(o => (
+              <option key={o.key} value={o.key}>{o.label}</option>
+            ))}
+          </select>
+          <span className="pointer-events-none absolute right-1.5 top-1/2 -translate-y-1/2 text-gray-500 text-xs">▾</span>
+        </div>
+        <div className="ml-auto text-xl font-black text-accent">{chordName}</div>
+      </div>
+
+      {/* ── Sub-tabs ── */}
+      <div className="flex gap-1 bg-surface border border-border rounded-xl p-1 overflow-x-auto">
+        {[
+          { key: 'guitar', label: '🎸 Guitar' },
+          { key: 'piano',  label: '🎹 Piano'  },
+        ].map(t => (
+          <button key={t.key}
+            onClick={() => setSubTab(t.key)}
+            className={`px-4 py-1.5 rounded-lg text-sm font-semibold transition-all whitespace-nowrap ${
+              subTab === t.key ? 'bg-accent text-white' : 'text-gray-400 hover:text-white'
+            }`}>
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      {subTab === 'guitar' && <GuitarTab chordName={chordName} />}
+      {subTab === 'piano'  && <PianoTab  chordName={chordName} />}
+    </div>
+  )
+}
+
+// ─── Main modal ───────────────────────────────────────────────────────────────
+
+export default function ChordDetailModal({ chord, onClose, onChordClick, keyInfo, chordHistory }) {
+  const [tab, setTab] = useState('guitar')
+
+  // Reset tab when chord changes
+  useEffect(() => { setTab('guitar') }, [chord])
+
+  // Close on Escape
+  useEffect(() => {
+    function onKey(e) { if (e.key === 'Escape') onClose() }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [onClose])
+
+  if (!chord) return null
+
+  const parsed = parseChord(chord)
+  const typeName = parsed ? (CHORD_SUFFIX_OPTIONS.find(o => o.key === parsed.type)?.label ?? parsed.type) : ''
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-start justify-center bg-black/70 backdrop-blur-sm p-4 overflow-y-auto"
+      onClick={e => { if (e.target === e.currentTarget) onClose() }}
+    >
+      <div className="w-full max-w-3xl bg-panel border border-border rounded-2xl shadow-2xl mt-8 mb-8">
+
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-border">
+          <div>
+            <h2 className="text-3xl font-black text-accent leading-none">{chord}</h2>
+            <p className="text-xs text-gray-500 mt-0.5">{typeName} chord · tap a voicing to study it</p>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-2 text-gray-500 hover:text-white transition-colors text-xl leading-none"
+            aria-label="Close"
+          >
+            ×
+          </button>
+        </div>
+
+        {/* Tab bar */}
+        <div className="flex gap-1 px-6 pt-4 overflow-x-auto">
+          {[
+            { key: 'guitar',       label: '🎸 Guitar'       },
+            { key: 'piano',        label: '🎹 Piano'         },
+            { key: 'theory',       label: '📚 Theory'        },
+            { key: 'learn',        label: '🎓 Learn'         },
+            { key: 'progressions', label: '🎵 Progressions'  },
+            { key: 'explore',      label: '🔍 Explore'       },
+          ].map(t => (
+            <button key={t.key}
+              onClick={() => setTab(t.key)}
+              className={`px-4 py-2 rounded-t-xl text-sm font-semibold transition-all border-b-2 whitespace-nowrap ${
+                tab === t.key
+                  ? 'text-accent border-accent bg-accent/10'
+                  : 'text-gray-500 border-transparent hover:text-gray-300'
+              }`}>
+              {t.label}
+            </button>
+          ))}
+        </div>
+
+        {/* Content */}
+        <div className="px-6 py-5">
+          {tab === 'guitar'       && <GuitarTab           chordName={chord} />}
+          {tab === 'piano'        && <PianoTab             chordName={chord} />}
+          {tab === 'theory'       && <TheoryTab            chordName={chord} />}
+          {tab === 'learn'        && <LearnTab             chordName={chord} />}
+          {tab === 'progressions' && <ProgressionsSubTab   chordName={chord} onChordClick={c => { onChordClick?.(c) }} />}
+          {tab === 'explore'      && <ExploreTab initialChord={chord} keyInfo={keyInfo} chordHistory={chordHistory} />}
+        </div>
+
+      </div>
+    </div>
+  )
+}

src/components/CurrentJamPanel.jsx

@@ -0,0 +1,367 @@
+import { useState } from 'react'
+import ChordBox from './ChordBox'
+import RiffDiagram from './RiffDiagram'
+import { getGuitarVoicings, parseChord } from '../lib/voicings'
+import { CHORD_TYPES, NOTES, toRomanNumeral } from '../lib/theory'
+import { findSimilarProgressions, progressionInKey } from '../lib/education'
+
+// ─── Scale ideas per mode ─────────────────────────────────────────────────────
+const SCALE_IDEAS = {
+  major: [
+    { name: 'Major Pentatonic', intervals: '1–2–3–5–6',         scaleIntervals: [0,2,4,7,9],          desc: 'Safe and bright. Everything you play will land. Start on the root, end on the root.' },
+    { name: 'Mixolydian',       intervals: '1–2–3–4–5–6–♭7',    scaleIntervals: [0,2,4,5,7,9,10],     desc: 'Major with a bluesy ♭7. The defining sound of classic rock — Sweet Home Alabama lives here.' },
+    { name: 'Lydian',           intervals: '1–2–3–♯4–5–6–7',    scaleIntervals: [0,2,4,6,7,9,11],     desc: 'Dreamy and floating. The ♯4 is the magic note — use it on long sustained notes for instant wonder.' },
+  ],
+  minor: [
+    { name: 'Minor Pentatonic', intervals: '1–♭3–4–5–♭7',       scaleIntervals: [0,3,5,7,10],         desc: 'The blues box. Bends on ♭3 and slides to 5 are gold. Start here every time.' },
+    { name: 'Natural Minor',    intervals: '1–2–♭3–4–5–♭6–♭7',  scaleIntervals: [0,2,3,5,7,8,10],     desc: 'Full Aeolian scale. Melodic and dark. The ♭6 gives it a cinematic quality.' },
+    { name: 'Dorian',           intervals: '1–2–♭3–4–5–6–♭7',   scaleIntervals: [0,2,3,5,7,9,10],     desc: "Minor with a raised 6th — smooth and soulful. Santana's go-to. That major 6th is everything." },
+  ],
+  dorian: [
+    { name: 'Dorian Mode',      intervals: '1–2–♭3–4–5–6–♭7',   scaleIntervals: [0,2,3,5,7,9,10],     desc: "The raised 6th over minor is the colour. Mix freely with minor pentatonic and touch that 6th note." },
+    { name: 'Minor Pentatonic', intervals: '1–♭3–4–5–♭7',       scaleIntervals: [0,3,5,7,10],         desc: 'Safe backbone in Dorian. You can ignore the 6th — or highlight it for that Dorian sparkle.' },
+    { name: 'Blues Scale',      intervals: '1–♭3–4–♭5–5–♭7',    scaleIntervals: [0,3,5,6,7,10],       desc: 'Add the ♭5 passing tone through the 5 — that slide is the essence of blues expression.' },
+  ],
+  mixolydian: [
+    { name: 'Mixolydian Mode',  intervals: '1–2–3–4–5–6–♭7',    scaleIntervals: [0,2,4,5,7,9,10],     desc: 'The ♭7 is your signature note. Hit it and slide down — instant swagger.' },
+    { name: 'Major Pentatonic', intervals: '1–2–3–5–6',         scaleIntervals: [0,2,4,7,9],          desc: 'Works beautifully over the I chord. Clean and reliable when you need to land safely.' },
+    { name: 'Blues Scale',      intervals: '1–♭3–3–4–5–♭7',     scaleIntervals: [0,3,4,5,7,10],       desc: 'The hybrid blues scale. Bend the ♭3 up to the 3 — that tension and release is everything.' },
+  ],
+  phrygian: [
+    { name: 'Phrygian Mode',    intervals: '1–♭2–♭3–4–5–♭6–♭7', scaleIntervals: [0,1,3,5,7,8,10],     desc: 'That ♭2 is the spine-chilling note. Lean on it. Spanish fire and metal darkness in one scale.' },
+    { name: 'Phrygian Dominant',intervals: '1–♭2–3–4–5–♭6–♭7',  scaleIntervals: [0,1,4,5,7,8,10],     desc: 'Raise the ♭3 to a major 3rd. Flamenco and Middle-Eastern intensity. Dramatic every time.' },
+    { name: 'Minor Pentatonic', intervals: '1–♭3–4–5–♭7',       scaleIntervals: [0,3,5,7,10],         desc: 'Avoid the ♭2 and play safe pentatonic runs — then hit the ♭2 as a surprise.' },
+  ],
+  lydian: [
+    { name: 'Lydian Mode',      intervals: '1–2–3–♯4–5–6–7',    scaleIntervals: [0,2,4,6,7,9,11],     desc: 'Float on the ♯4. John Williams writes entire film scores in Lydian. Sustain everything.' },
+    { name: 'Major Pentatonic', intervals: '1–2–3–5–6',         scaleIntervals: [0,2,4,7,9],          desc: 'The reliable base. Use Lydian mode sparingly on top for colour.' },
+    { name: 'Lydian Dominant',  intervals: '1–2–3–♯4–5–6–♭7',   scaleIntervals: [0,2,4,6,7,9,10],     desc: 'Lydian with a ♭7 — the jazz/fusion ♯4 chord sound. Herbie Hancock territory.' },
+  ],
+}
+
+// Fallback
+const SCALE_FALLBACK = SCALE_IDEAS.major
+
+// ─── Style variations for a progression ──────────────────────────────────────
+const STYLE_VARIATIONS = [
+  {
+    key:     'open',
+    label:   'Open & Spacious',
+    desc:    'Sus2 and add9 voicings — airy, gentle. Great for quiet intros and ambient sections.',
+    typeMap: { maj: 'sus2', min: 'sus2', dom7: 'sus4', maj7: 'add9', min7: 'sus2', add9: 'sus2', sus4: 'sus4', sus2: 'sus2', dim: 'dim', aug: 'aug', half_dim: 'half_dim', maj6: 'sus2', min6: 'sus2' },
+    color:   'text-blue-400',
+    border:  'border-blue-900/40',
+  },
+  {
+    key:     'jazz',
+    label:   'Jazz Upgrade',
+    desc:    'Triads → 7ths — instant sophistication. Works at any tempo, in any band context.',
+    typeMap: { maj: 'maj7', min: 'min7', dom7: 'dom7', add9: 'maj7', sus2: 'sus2', sus4: 'sus4', dim: 'dim7', aug: 'aug', half_dim: 'half_dim', maj6: 'maj6', min6: 'min6' },
+    color:   'text-amber-400',
+    border:  'border-amber-900/40',
+  },
+  {
+    key:     'blues',
+    label:   'Blues Stomp',
+    desc:    'Everything → dom7. Gritty, raw, powerful. All three chords want to slide and bend.',
+    typeMap: { maj: 'dom7', min: 'dom7', maj7: 'dom7', min7: 'dom7', add9: 'dom7', sus2: 'dom7', sus4: 'dom7', dim: 'dim7', aug: 'aug', half_dim: 'dom7', maj6: 'dom7', min6: 'dom7' },
+    color:   'text-red-400',
+    border:  'border-red-900/40',
+  },
+  {
+    key:     'modern',
+    label:   'Neo-Soul / Modern',
+    desc:    "Add9 on majors, m7 on minors. D'Angelo, Thundercat, Childish Gambino territory.",
+    typeMap: { maj: 'add9', min: 'min7', dom7: 'dom7', maj7: 'add9', min7: 'min7', add9: 'add9', sus2: 'sus2', sus4: 'sus4', dim: 'dim', aug: 'aug', half_dim: 'half_dim', maj6: 'add9', min6: 'min7' },
+    color:   'text-purple-400',
+    border:  'border-purple-900/40',
+  },
+]
+
+// Transform a chord via a type map
+function transformChord(chordStr, typeMap) {
+  const p = parseChord(chordStr)
+  if (!p) return chordStr
+  const newType = typeMap[p.type] ?? p.type
+  return NOTES[p.rootPc] + (CHORD_TYPES[newType]?.suffix ?? '')
+}
+
+// Get best voicings for a chord — prefer open shapes, then low-fret barre
+function getBestVoicings(chordStr, max = 4) {
+  const all = getGuitarVoicings(chordStr)
+  // Sort: open shapes first (label contains "Open"), then barre
+  const open  = all.filter(v => v.label.includes('Open'))
+  const barre = all.filter(v => !v.label.includes('Open'))
+  return [...open, ...barre].slice(0, max)
+}
+
+// ─── Per-chord voicing strip ──────────────────────────────────────────────────
+function ChordStrip({ chordStr, keyInfo, onChordClick }) {
+  const voicings = getBestVoicings(chordStr, 4)
+  const rn = keyInfo?.root ? toRomanNumeral(chordStr, keyInfo.root, keyInfo.mode) : ''
+  return (
+    <div className="flex flex-col gap-2 p-3 bg-surface border border-border rounded-xl">
+      <div className="flex items-center gap-2">
+        <button onClick={() => onChordClick?.(chordStr)}
+          className="px-3 py-1 bg-accent/10 border border-accent/40 rounded-lg font-black text-lg text-accent hover:bg-accent/20 transition-colors">
+          {chordStr}
+        </button>
+        {rn && <span className="text-amber-400 text-sm font-semibold">{rn}</span>}
+        <span className="text-[11px] text-gray-600 ml-auto">click for all voicings</span>
+      </div>
+      {voicings.length > 0 ? (
+        <div className="flex flex-wrap gap-3">
+          {voicings.map((v, i) => (
+            <div key={i} className="flex flex-col items-center">
+              <ChordBox frets={v.frets} fingers={v.fingers} barre={v.barre} baseFret={v.baseFret} />
+              <p className="text-[10px] text-gray-600 text-center mt-1 max-w-[100px]">{v.label}</p>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <p className="text-gray-600 text-xs">No voicings available.</p>
+      )}
+    </div>
+  )
+}
+
+// ─── Style variation section ──────────────────────────────────────────────────
+function StyleSection({ progression, onChordClick }) {
+  const [expanded, setExpanded] = useState(null)
+
+  return (
+    <div className="flex flex-col gap-2">
+      {STYLE_VARIATIONS.map(style => {
+        const isOpen = expanded === style.key
+        const transformed = progression.map(c => transformChord(c, style.typeMap))
+
+        return (
+          <div key={style.key} className={`border rounded-xl overflow-hidden transition-colors ${style.border} hover:border-opacity-70`}>
+            <button onClick={() => setExpanded(isOpen ? null : style.key)}
+              className="w-full flex items-center justify-between px-4 py-3 text-left">
+              <div className="flex flex-col gap-0.5">
+                <div className="flex items-center gap-2">
+                  <span className={`font-bold text-sm ${style.color}`}>{style.label}</span>
+                  <div className="flex gap-1">
+                    {transformed.map((c, i) => (
+                      <span key={i} className="text-xs font-bold text-gray-300">{c}{i < transformed.length - 1 ? ' →' : ''}</span>
+                    ))}
+                  </div>
+                </div>
+                <span className="text-[11px] text-gray-500">{style.desc}</span>
+              </div>
+              <span className="text-gray-600 shrink-0 ml-3">{isOpen ? '▲' : '▼'}</span>
+            </button>
+
+            {isOpen && (
+              <div className="border-t border-border/50 px-4 py-4">
+                <div className="flex flex-wrap gap-4">
+                  {transformed.map((c, i) => {
+                    const voicings = getBestVoicings(c, 2)
+                    return (
+                      <div key={i} className="flex flex-col items-center gap-2">
+                        <button onClick={() => onChordClick?.(c)}
+                          className="px-2 py-0.5 bg-panel border border-border hover:border-accent/50 rounded-lg font-bold text-sm text-gray-200 hover:text-accent transition-all">
+                          {c}
+                        </button>
+                        <div className="flex gap-2">
+                          {voicings.map((v, vi) => (
+                            <div key={vi} className="flex flex-col items-center">
+                              <ChordBox frets={v.frets} fingers={v.fingers} barre={v.barre} baseFret={v.baseFret} />
+                              <p className="text-[9px] text-gray-700 text-center mt-0.5 max-w-[90px]">{v.label}</p>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    )
+                  })}
+                </div>
+              </div>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+// ─── Similar famous progressions ─────────────────────────────────────────────
+function SimilarSection({ progression, keyInfo, onChordClick }) {
+  const similar = findSimilarProgressions(progression, keyInfo)
+  if (!similar.length) return (
+    <p className="text-gray-600 text-sm text-center py-3">Play more and lock a key — similar progressions will appear here.</p>
+  )
+  return (
+    <div className="flex flex-col gap-2">
+      {similar.slice(0, 3).map(prog => {
+        const chordsHere = keyInfo?.root ? progressionInKey(prog, keyInfo.root) : []
+        return (
+          <div key={prog.id} className="p-3 bg-surface border border-border rounded-xl">
+            <div className="flex items-center flex-wrap gap-2 mb-2">
+              <span className="font-bold text-white text-sm">{prog.name}</span>
+              <span className="text-[10px] font-mono text-gray-600">{prog.pattern}</span>
+              <span className="text-xs text-gray-600 ml-auto">{Math.round(prog.score * 100)}% match</span>
+            </div>
+            {chordsHere.length > 0 && (
+              <div className="flex flex-wrap gap-1.5 items-center mb-2">
+                {chordsHere.map((c, i) => (
+                  <span key={i} className="flex items-center gap-1">
+                    <button onClick={() => onChordClick?.(c)}
+                      className={`px-2 py-0.5 rounded-lg font-bold text-xs border transition-all ${
+                        i === 0 ? 'bg-accent border-accent text-white' : 'bg-panel border-border text-gray-300 hover:border-accent/50 hover:text-accent'
+                      }`}>
+                      {c}
+                    </button>
+                    {i < chordsHere.length - 1 && <span className="text-gray-700 text-xs">→</span>}
+                  </span>
+                ))}
+                <span className="text-[10px] text-gray-600 ml-1">in {keyInfo?.root} {keyInfo?.mode}</span>
+              </div>
+            )}
+            <p className="text-[11px] text-gray-600">{prog.songs.slice(0, 3).join(' · ')}</p>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+// ─── Main panel ───────────────────────────────────────────────────────────────
+export default function CurrentJamPanel({ keyInfo, chordHistory, detectedProgression, onChordClick }) {
+  const [open, setOpen]   = useState(false)
+  const [view, setView]   = useState('voicings')   // voicings | scales | styles | similar
+
+  const { root, mode } = keyInfo ?? {}
+
+  // Working progression: detected loop or last 4 unique chords
+  const workingProgression = detectedProgression?.length
+    ? detectedProgression
+    : [...new Set([...chordHistory].reverse())].reverse().slice(-4)
+
+  const scaleIdeas = SCALE_IDEAS[mode] ?? SCALE_FALLBACK
+  const rootPc = root ? NOTES.indexOf(root) : null
+  const hasSession = workingProgression.length > 0
+
+  return (
+    <div className="mb-3 bg-panel border border-border rounded-xl overflow-hidden">
+      <button onClick={() => setOpen(v => !v)}
+        className="w-full flex items-center justify-between px-4 py-2 text-sm text-gray-400 hover:text-gray-200 transition-all">
+        <div className="flex items-center gap-3">
+          <span>CURRENT JAM</span>
+          {root && (
+            <span className="text-[10px] px-2 py-0.5 bg-accent/10 border border-accent/30 rounded text-accent">
+              {root} {mode} {detectedProgression?.length ? `· ${workingProgression.join(' → ')}` : ''}
+            </span>
+          )}
+        </div>
+        <span>{open ? '▲' : '▼'}</span>
+      </button>
+
+      {open && (
+        <div className="border-t border-border p-4 flex flex-col gap-4">
+
+          {!hasSession ? (
+            <p className="text-gray-600 text-sm text-center py-6">Start listening and play some chords — your jam will appear here.</p>
+          ) : (
+            <>
+              {/* ── Progression summary ── */}
+              <div className="flex flex-wrap items-center gap-2 px-3 py-2 bg-surface border border-border rounded-xl">
+                {root ? (
+                  <span className="text-accent font-bold text-sm">{root} {mode}</span>
+                ) : (
+                  <span className="text-gray-600 text-sm">Key detecting…</span>
+                )}
+                {workingProgression.length > 0 && (
+                  <>
+                    <span className="text-gray-700">·</span>
+                    {workingProgression.map((c, i) => (
+                      <span key={i} className="flex items-center gap-1">
+                        <span className="text-gray-300 font-bold text-sm">{c}</span>
+                        {root && <span className="text-amber-400/60 text-[10px]">{toRomanNumeral(c, root, mode)}</span>}
+                        {i < workingProgression.length - 1 && <span className="text-gray-700">→</span>}
+                      </span>
+                    ))}
+                  </>
+                )}
+              </div>
+
+              {/* ── View tabs ── */}
+              <div className="flex gap-1 bg-surface border border-border rounded-xl p-1 overflow-x-auto">
+                {[
+                  { key: 'voicings', label: '🎸 Open Voicings' },
+                  { key: 'scales',   label: '🎵 Scales to Solo' },
+                  { key: 'styles',   label: '🎨 Style Options' },
+                  { key: 'similar',  label: '🔗 Similar Progressions' },
+                ].map(t => (
+                  <button key={t.key} onClick={() => setView(t.key)}
+                    className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition-all whitespace-nowrap ${
+                      view === t.key ? 'bg-accent text-white' : 'text-gray-400 hover:text-white'
+                    }`}>
+                    {t.label}
+                  </button>
+                ))}
+              </div>
+
+              {/* ── Voicings: per chord open shapes ── */}
+              {view === 'voicings' && (
+                <div className="flex flex-col gap-3">
+                  <p className="text-xs text-gray-500">
+                    Best open and barre voicings for each chord in your jam. Click a chord name to see all its voicings.
+                  </p>
+                  {workingProgression.map(chord => (
+                    <ChordStrip key={chord} chordStr={chord} keyInfo={keyInfo} onChordClick={onChordClick} />
+                  ))}
+                </div>
+              )}
+
+              {/* ── Scales ── */}
+              {view === 'scales' && (
+                <div className="flex flex-col gap-3">
+                  <p className="text-xs text-gray-500">
+                    Scales and modes that fit {root ? `${root} ${mode}` : 'your current key'}.
+                    Start with the pentatonic — add the extra notes once you feel comfortable.
+                  </p>
+                  {scaleIdeas.map(idea => (
+                    <div key={idea.name} className="p-3 bg-surface border border-border rounded-xl">
+                      <div className="flex items-center gap-3 mb-2">
+                        <span className="font-bold text-white text-sm">{idea.name}</span>
+                        <span className="font-mono text-xs text-accent">{idea.intervals}</span>
+                      </div>
+                      {rootPc !== null && idea.scaleIntervals && (
+                        <div className="mb-2 overflow-x-auto">
+                          <RiffDiagram rootPc={rootPc} scaleIntervals={idea.scaleIntervals} />
+                          <p className="text-[10px] text-gray-600 mt-1">
+                            Purple = root · Grey = scale tone · Fret numbers above
+                          </p>
+                        </div>
+                      )}
+                      <p className="text-xs text-gray-400 leading-snug">{idea.desc}</p>
+                    </div>
+                  ))}
+                  <p className="text-[11px] text-gray-700 text-center">
+                    Pro tip: always resolve to a chord tone at the end of a phrase — ♭7 leading to root, or 3rd landing on the 1.
+                  </p>
+                </div>
+              )}
+
+              {/* ── Style options ── */}
+              {view === 'styles' && (
+                <div className="flex flex-col gap-2">
+                  <p className="text-xs text-gray-500">
+                    Your progression re-voiced four ways. Expand any style to see the chord boxes.
+                  </p>
+                  <StyleSection progression={workingProgression} onChordClick={onChordClick} />
+                </div>
+              )}
+
+              {/* ── Similar progressions ── */}
+              {view === 'similar' && (
+                <SimilarSection progression={workingProgression} keyInfo={keyInfo} onChordClick={onChordClick} />
+              )}
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

src/components/DebugView.jsx

@@ -1,3 +1,4 @@
+import { useRef } from 'react'
 import { getScale, getChordTones, NOTES } from '../lib/theory'
 
 // ─── SVG Piano — 2 octaves (C3–B4) ───────────────────────────────────────────
@@ -14,7 +15,7 @@ const BLACK_OCT = [
 ]
 const WHITE_LABELS = ['C3','D3','E3','F3','G3','A3','B3','C4','D4','E4','F4','G4','A4','B4']
 
-function PianoSVG({ values, keyNotes, chordNotes, keyH = KEY_H, showPct = false }) {
+function PianoSVG({ values, keyNotes, chordNotes, keyH = KEY_H, showPct = false, monoColor = false }) {
   const max = Math.max(...values, 0.01)
   const wKeys = []
   const bKeys = []
@@ -35,7 +36,7 @@ function PianoSVG({ values, keyNotes, chordNotes, keyH = KEY_H, showPct = false
         const fillColor = inChord
           ? `rgba(167,139,250,${0.12 + energy * 0.88})`
           : inKey
-          ? `rgba(251,191,36,${0.1 + energy * 0.7})`
+          ? monoColor ? `rgba(192,132,252,${0.1 + energy * 0.7})` : `rgba(251,191,36,${0.1 + energy * 0.7})`
           : `rgba(180,180,190,${0.05 + energy * 0.2})`
         const pct = showPct ? Math.round(values[pc] * 100) : 0
 
@@ -43,7 +44,7 @@ function PianoSVG({ values, keyNotes, chordNotes, keyH = KEY_H, showPct = false
           <g key={`w${wi}`}>
             <rect x={x+1} y={3} width={KEY_W-2} height={keyH}
               rx={3} fill="rgb(20,20,26)" stroke="rgba(255,255,255,0.08)" strokeWidth={1} />
-            {energy > 0.04 && (
+            {energy > (inChord || inKey ? 0.12 : 0.35) && (
               <rect
                 x={x+1} y={3 + keyH * (1 - Math.min(energy, 1) * 0.85)}
                 width={KEY_W-2} height={keyH * Math.min(energy, 1) * 0.85}
@@ -55,7 +56,7 @@ function PianoSVG({ values, keyNotes, chordNotes, keyH = KEY_H, showPct = false
             </text>
             {showPct && pct > 0 && (
               <text x={x + KEY_W/2} y={keyH + 14} textAnchor="middle" fontSize={8}
-                fill={inKey ? 'rgb(251,191,36)' : 'rgba(100,100,110,0.8)'}>
+                fill={inKey ? (monoColor ? 'rgb(192,132,252)' : 'rgb(251,191,36)') : 'rgba(100,100,110,0.8)'}>
                 {pct}%
               </text>
             )}
@@ -69,17 +70,34 @@ function PianoSVG({ values, keyNotes, chordNotes, keyH = KEY_H, showPct = false
         const inChord = chordNotes?.has(pc)
         const inKey   = keyNotes?.has(pc)
         const x = wi * KEY_W + KEY_W - BLACK_W / 2
-        const bg = inChord
-          ? `rgba(139,92,246,${0.4 + energy * 0.6})`
+        const fillColor = inChord
+          ? 'rgba(139,92,246,0.9)'
           : inKey
-          ? `rgba(180,130,0,${0.35 + energy * 0.55})`
-          : `rgba(12,12,16,0.95)`
+          ? monoColor ? 'rgba(192,132,252,0.85)' : 'rgba(180,130,0,0.85)'
+          : 'rgba(70,70,80,0.75)'
+        const pct = showPct ? Math.round(values[pc] * 100) : 0
 
         return (
           <g key={`b${i}`}>
+            {/* Base */}
             <rect x={x} y={3} width={BLACK_W} height={BLACK_H}
-              rx={2} fill={bg} stroke="rgba(255,255,255,0.06)" strokeWidth={1} />
-            <text x={x + BLACK_W/2} y={BLACK_H - 5} textAnchor="middle" fontSize={7}
+              rx={2} fill="rgb(14,14,18)" stroke="rgba(255,255,255,0.06)" strokeWidth={1} />
+            {/* Partial fill from bottom — same mechanic as white keys */}
+            {energy > (inChord || inKey ? 0.05 : 0.35) && (
+              <rect
+                x={x} y={3 + BLACK_H * (1 - Math.min(energy, 1) * 0.9)}
+                width={BLACK_W} height={BLACK_H * Math.min(energy, 1) * 0.9}
+                rx={1} fill={fillColor} />
+            )}
+            {/* % label near top of key (inside) */}
+            {showPct && pct > 0 && (
+              <text x={x + BLACK_W/2} y={3 + 10} textAnchor="middle" fontSize={7}
+                fill={inKey || inChord ? 'rgba(220,220,230,0.9)' : 'rgba(110,110,120,0.7)'}>
+                {pct}%
+              </text>
+            )}
+            {/* Note name near bottom of key */}
+            <text x={x + BLACK_W/2} y={3 + BLACK_H - 5} textAnchor="middle" fontSize={7}
               fill={inKey || inChord ? 'rgba(210,210,220,0.85)' : 'rgba(110,110,120,0.6)'}>
               {NOTES[pc]}
             </text>
@@ -113,7 +131,7 @@ const MF_H = MF_PAD_T + 5 * MF_STR_H + MF_PAD_B
 const mfFretX   = f  => MF_NUT_X + (f - 0.5) * MF_FRET_W
 const mfStringY = si => MF_PAD_T + si * MF_STR_H
 
-function MiniFretboard({ values, keyNotes, chordNotes }) {
+function MiniFretboard({ values, keyNotes, chordNotes, monoColor = false }) {
   const max = Math.max(...values, 0.01)
 
   return (
@@ -170,7 +188,8 @@ function MiniFretboard({ values, keyNotes, chordNotes }) {
           const energy  = values[pc] / max
           const inChord = chordNotes?.has(pc)
           const inKey   = keyNotes?.has(pc)
-          if (!inChord && !inKey && energy < 0.12) return null
+          if (!inChord && !inKey && energy < 0.35) return null
+          if ((inChord || inKey) && energy < 0.08) return null
 
           const cx = fi === 0 ? MF_OPEN_X : mfFretX(fi)
           const cy = mfStringY(si)
@@ -180,8 +199,8 @@ function MiniFretboard({ values, keyNotes, chordNotes }) {
             fill = `rgba(168,85,247,${0.3 + energy * 0.7})`
             textFill = '#fff'
           } else if (inKey) {
-            fill = `rgba(245,158,11,${0.2 + energy * 0.75})`
-            textFill = 'rgba(0,0,0,0.85)'
+            fill = monoColor ? `rgba(192,132,252,${0.2 + energy * 0.75})` : `rgba(245,158,11,${0.2 + energy * 0.75})`
+            textFill = monoColor ? '#fff' : 'rgba(0,0,0,0.85)'
           } else {
             fill = `rgba(100,100,120,${energy * 0.7})`
             textFill = 'rgba(180,180,190,0.7)'
@@ -191,7 +210,7 @@ function MiniFretboard({ values, keyNotes, chordNotes }) {
             <g key={`${si}-${fi}`}>
               {energy > 0.3 && (inChord || inKey) && (
                 <circle cx={cx} cy={cy} r={MF_DOT_R + 4}
-                  fill={inChord ? 'rgba(168,85,247,0.25)' : 'rgba(245,158,11,0.2)'}
+                  fill={inChord ? 'rgba(168,85,247,0.25)' : monoColor ? 'rgba(192,132,252,0.2)' : 'rgba(245,158,11,0.2)'}
                   style={{ filter: 'blur(4px)' }} />
               )}
               <circle cx={cx} cy={cy} r={MF_DOT_R} fill={fill} />
@@ -206,27 +225,338 @@ function MiniFretboard({ values, keyNotes, chordNotes }) {
   )
 }
 
+// ─── Oscilloscope strip ───────────────────────────────────────────────────────
+const OSC_W = 600
+const OSC_H = 110
+
+function Oscilloscope({ waveform }) {
+  const { wave, rms, detectedFreq, detectedNote } = waveform || {}
+  const silent = !rms || rms < 0.005
+
+  // ── Note scroll history — last 5 distinct notes ───────────────────────────
+  const noteHistoryRef = useRef([])   // [{ note, freq, id }, ...] oldest first
+  const lastNoteRef    = useRef(null)
+  const noteIdRef      = useRef(0)
+  const lastDisplayRef = useRef(null) // last detected note shown in header — never flickers
+  if (detectedNote && detectedNote !== lastNoteRef.current) {
+    lastNoteRef.current = detectedNote
+    lastDisplayRef.current = { note: detectedNote, freq: detectedFreq }
+    noteHistoryRef.current.push({ note: detectedNote, freq: detectedFreq, id: noteIdRef.current++ })
+    if (noteHistoryRef.current.length > 5) noteHistoryRef.current.shift()
+  } else if (detectedFreq && detectedNote) {
+    lastDisplayRef.current = { note: detectedNote, freq: detectedFreq }
+  }
+
+  // ── Ghost waveform — holds the last clear-pitch shape, fades slowly ───────
+  const ghostRef = useRef({ path: '', fill: '', opacity: 0 })
+  if (detectedFreq) {
+    ghostRef.current = { path: '', fill: '', opacity: 1 }   // will be filled below
+  } else {
+    ghostRef.current = { ...ghostRef.current, opacity: ghostRef.current.opacity * 0.97 }
+  }
+
+  let path = '', sinePath = ''
+  if (wave?.length) {
+    const mid     = OSC_H / 2
+    const waveAmp = Math.max(...wave.map(Math.abs), 0.001)
+    const gain    = Math.min((OSC_H * 0.44) / waveAmp, OSC_H * 0.44)
+
+    const lo = Math.floor(wave.length / 4)
+    const hi = Math.floor(wave.length / 2)
+    let offset = lo
+    for (let i = lo; i < hi - 1; i++) {
+      if (wave[i] <= 0 && wave[i + 1] > 0) { offset = i; break }
+    }
+    const drawLen = Math.min(wave.length - offset, Math.floor(wave.length * 0.85))
+    const step    = OSC_W / drawLen
+
+    path = Array.from({ length: drawLen }, (_, i) => {
+      const v = wave[offset + i]
+      return `${i === 0 ? 'M' : 'L'}${(i * step).toFixed(1)},${(mid - v * gain).toFixed(1)}`
+    }).join(' ')
+
+    // Capture ghost path when we have a clear pitch
+    if (detectedFreq) {
+      ghostRef.current.path = path
+      ghostRef.current.fill = path + ` L${OSC_W},${mid} L0,${mid} Z`
+    }
+
+    if (detectedFreq) {
+      const effectiveSR = 44100 / 8
+      const sineAmp = Math.min(waveAmp * gain * 0.55, OSC_H * 0.38)
+      sinePath = Array.from({ length: 300 }, (_, i) => {
+        const t     = i / 299
+        const x     = (t * OSC_W).toFixed(1)
+        const phase = ((offset + t * drawLen) / effectiveSR) * detectedFreq * Math.PI * 2
+        const y     = (mid - Math.sin(phase) * sineAmp).toFixed(1)
+        return `${i === 0 ? 'M' : 'L'}${x},${y}`
+      }).join(' ')
+    }
+  }
+
+  const lineColor = detectedFreq
+    ? 'rgba(168,85,247,0.9)'
+    : silent ? 'rgba(50,50,60,0.8)' : 'rgba(100,200,140,0.75)'
+
+  const ghost       = ghostRef.current
+  const ghostOp     = ghost.opacity
+  const noteHistory = noteHistoryRef.current
+  const lastDisplay = lastDisplayRef.current
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-1">
+        <p className="text-xs text-gray-600 uppercase tracking-widest">Oscilloscope — raw mic input</p>
+        <div className="flex items-center gap-3">
+          {lastDisplay && (
+            <>
+              <span className={`text-xs font-bold ${detectedFreq ? 'text-accent' : 'text-gray-500'}`}>{lastDisplay.note}</span>
+              <span className="text-xs text-gray-500 tabular-nums">{lastDisplay.freq.toFixed(1)} Hz</span>
+              <span className="text-xs text-gray-600 tabular-nums">{(1000 / lastDisplay.freq).toFixed(2)} ms / cycle</span>
+            </>
+          )}
+          {silent && <span className="text-xs text-gray-700">silence</span>}
+          <span className="text-xs text-gray-700 tabular-nums">rms {rms ? (rms * 100).toFixed(1) : '0.0'}%</span>
+        </div>
+      </div>
+      <svg viewBox={`0 0 ${OSC_W} ${OSC_H}`} width="100%" style={{ display: 'block' }}
+        className="rounded-lg bg-surface border border-border">
+        {/* Zero line */}
+        <line x1={0} y1={OSC_H / 2} x2={OSC_W} y2={OSC_H / 2}
+          stroke="rgba(255,255,255,0.05)" strokeWidth={0.5} />
+
+        {/* Ghost waveform — previous clear-pitch shape fading out */}
+        {ghost.path && ghostOp > 0.04 && !detectedFreq && (
+          <>
+            <path d={ghost.fill} fill={`rgba(168,85,247,${(ghostOp * 0.06).toFixed(3)})`} />
+            <path d={ghost.path} fill="none"
+              stroke={`rgba(150,120,200,${(ghostOp * 0.35).toFixed(3)})`}
+              strokeWidth={0.8} strokeLinejoin="round" strokeLinecap="round" />
+          </>
+        )}
+
+        {/* Fill body */}
+        {path && (
+          <path
+            d={`${path} L${OSC_W},${OSC_H / 2} L0,${OSC_H / 2} Z`}
+            fill={detectedFreq
+              ? 'rgba(168,85,247,0.08)'
+              : silent ? 'none' : 'rgba(90,190,130,0.07)'}
+          />
+        )}
+        {/* Waveform line */}
+        {path && <path d={path} fill="none" stroke={lineColor} strokeWidth={0.9}
+          strokeLinejoin="round" strokeLinecap="round" />}
+        {/* Sine overlay */}
+        {sinePath && <path d={sinePath} fill="none"
+          stroke="rgba(168,85,247,0.28)" strokeWidth={0.9}
+          strokeLinejoin="round" strokeDasharray="5 4" />}
+
+        {/* Scrolling note history — newest on right, slides left on each new note */}
+        {noteHistory.map((entry, i) => {
+          const age   = noteHistory.length - 1 - i   // 0 = newest
+          const x     = OSC_W - 28 - age * 100
+          const op    = (1 - age * 0.18).toFixed(2)
+          const isNew = age === 0
+          return (
+            <g key={entry.id}
+              style={{ transform: `translateX(${x}px)`, transition: 'transform 0.45s cubic-bezier(0.4,0,0.2,1)' }}>
+              <text x={0} y={OSC_H - 18} textAnchor="middle"
+                fontSize={isNew ? 13 : 11} fontWeight={isNew ? '700' : '400'}
+                fill={isNew ? `rgba(168,85,247,${op})` : `rgba(160,130,210,${op})`}>
+                {entry.note}
+              </text>
+              <text x={0} y={OSC_H - 7} textAnchor="middle" fontSize={7}
+                fill={`rgba(120,100,160,${(parseFloat(op) * 0.7).toFixed(2)})`}>
+                {entry.freq ? entry.freq.toFixed(0) : ''}Hz
+              </text>
+            </g>
+          )
+        })}
+      </svg>
+    </div>
+  )
+}
+
+// ─── Frequency spectrum ───────────────────────────────────────────────────────
+const SPEC_H   = 130
+const SPEC_F_MIN = 40
+const SPEC_F_MAX = 4000
+const SPEC_LOG   = Math.log(SPEC_F_MAX / SPEC_F_MIN)
+
+// Map a frequency in Hz to an x pixel position (log scale)
+function specX(f, w) {
+  if (f <= SPEC_F_MIN) return 0
+  if (f >= SPEC_F_MAX) return w
+  return w * Math.log(f / SPEC_F_MIN) / SPEC_LOG
+}
+
+const SPEC_GRID = [
+  { label: 'E2', freq: 82.4  },
+  { label: 'C3', freq: 130.8 },
+  { label: 'E3', freq: 164.8 },
+  { label: 'A3', freq: 220   },
+  { label: 'C4', freq: 261.6 },
+  { label: 'E4', freq: 329.6 },
+  { label: 'A4', freq: 440   },
+  { label: 'C5', freq: 523.3 },
+  { label: 'C6', freq: 1046.5},
+  { label: 'C7', freq: 2093  },
+]
+
+function SpectrumPanel({ spectrum, detectedFreq }) {
+  const W = OSC_W
+  const ghostRef    = useRef(null)
+  const ghostFreqRef = useRef(null)  // { freq, opacity }
+
+  // Ghost frequency lines — lock on detection, decay slowly when gone
+  if (detectedFreq) {
+    ghostFreqRef.current = { freq: detectedFreq, opacity: 1 }
+  } else if (ghostFreqRef.current) {
+    ghostFreqRef.current = { freq: ghostFreqRef.current.freq, opacity: ghostFreqRef.current.opacity * 0.97 }
+  }
+  const ghostFreq    = ghostFreqRef.current?.opacity > 0.04 ? ghostFreqRef.current.freq : null
+  const ghostOpacity = ghostFreqRef.current?.opacity ?? 0
+
+  // Ghost: rises instantly with signal, decays very slowly — lingers as grey
+  if (spectrum?.length) {
+    if (!ghostRef.current) ghostRef.current = new Float32Array(spectrum.length)
+    const ghost = ghostRef.current
+    for (let i = 0; i < spectrum.length; i++) {
+      ghost[i] = spectrum[i] > ghost[i] ? spectrum[i] : ghost[i] * 0.988
+    }
+  }
+
+  let fillPath = '', strokePath = '', ghostFill = '', ghostStroke = ''
+
+  if (spectrum?.length) {
+    const n = spectrum.length
+    const pts = Array.from({ length: n }, (_, i) => {
+      const x = ((i / (n - 1)) * W).toFixed(1)
+      const y = (SPEC_H * (1 - spectrum[i])).toFixed(1)
+      return `${i === 0 ? 'M' : 'L'}${x},${y}`
+    }).join(' ')
+    strokePath = pts
+    fillPath   = pts + ` L${W},${SPEC_H} L0,${SPEC_H} Z`
+
+    const ghost = ghostRef.current
+    if (ghost) {
+      const gpts = Array.from({ length: n }, (_, i) => {
+        const x = ((i / (n - 1)) * W).toFixed(1)
+        const y = (SPEC_H * (1 - ghost[i])).toFixed(1)
+        return `${i === 0 ? 'M' : 'L'}${x},${y}`
+      }).join(' ')
+      ghostStroke = gpts
+      ghostFill   = gpts + ` L${W},${SPEC_H} L0,${SPEC_H} Z`
+    }
+  }
+
+  return (
+    <div>
+      <p className="text-xs text-gray-600 uppercase tracking-widest mb-1">
+        Frequency spectrum — 40 Hz → 4 kHz (log scale)
+      </p>
+      <svg viewBox={`0 0 ${W} ${SPEC_H}`} width="100%" style={{ display: 'block' }}
+        className="rounded-lg bg-surface border border-border">
+
+        {/* Note grid lines */}
+        {SPEC_GRID.map(({ label, freq }) => {
+          const x = specX(freq, W).toFixed(1)
+          return (
+            <g key={label}>
+              <line x1={x} y1={0} x2={x} y2={SPEC_H - 14}
+                stroke="rgba(255,255,255,0.06)" strokeWidth={1} />
+              <text x={x} y={SPEC_H - 3} textAnchor="middle" fontSize={7.5}
+                fill="rgba(80,80,95,0.9)">{label}</text>
+            </g>
+          )
+        })}
+
+        {/* Ghost — slow-decaying grey residue from previous peaks */}
+        {ghostFill && (
+          <>
+            <path d={ghostFill} fill="rgba(120,120,130,0.08)" />
+            <path d={ghostStroke} fill="none" stroke="rgba(130,130,145,0.30)" strokeWidth={0.7} />
+          </>
+        )}
+
+        {/* Live spectrum fill + stroke */}
+        {fillPath && (
+          <>
+            <path d={fillPath} fill="rgba(80,180,130,0.13)" />
+            <path d={strokePath} fill="none" stroke="rgba(90,200,145,0.55)" strokeWidth={0.8} />
+          </>
+        )}
+
+        {/* Fundamental + harmonics */}
+        {ghostFreq && [1, 2, 3, 4, 5].map(h => {
+          const hf = ghostFreq * h
+          if (hf > SPEC_F_MAX) return null
+          const xNum  = specX(hf, W)
+          const x     = xNum.toFixed(1)
+          const midi  = Math.round(12 * Math.log2(hf / 440) + 69)
+          const note  = NOTES[((midi % 12) + 12) % 12]
+          const oct   = Math.floor(midi / 12) - 1
+          // Place label left of line near the right edge, right of line elsewhere
+          const labelX  = xNum > W - 40 ? xNum - 3 : xNum + 3
+          const anchor  = xNum > W - 40 ? 'end' : 'start'
+
+          if (h === 1) {
+            const op     = (0.9 * ghostOpacity).toFixed(3)
+            const textOp = (ghostOpacity * 0.95).toFixed(3)
+            return (
+              <g key={h}>
+                <line x1={x} y1={0} x2={x} y2={SPEC_H - 14}
+                  stroke={`rgba(168,85,247,${op})`} strokeWidth={1.2} />
+                <text x={labelX} y={10} textAnchor={anchor} fontSize={8} fontWeight="700"
+                  fill={`rgba(168,85,247,${textOp})`}>{note}{oct}</text>
+                <text x={labelX} y={20} textAnchor={anchor} fontSize={7}
+                  fill={`rgba(168,85,247,${(ghostOpacity * 0.55).toFixed(3)})`}>f</text>
+              </g>
+            )
+          }
+
+          const op = ((0.5 - (h - 2) * 0.1) * ghostOpacity).toFixed(3)
+          return (
+            <g key={h}>
+              <line x1={x} y1={0} x2={x} y2={SPEC_H - 14}
+                stroke={`rgba(168,85,247,${op})`} strokeWidth={0.7} strokeDasharray="3 4" />
+              <text x={labelX} y={10} textAnchor={anchor} fontSize={7.5}
+                fill={`rgba(168,85,247,${op})`}>{note}{oct}</text>
+              <text x={labelX} y={19} textAnchor={anchor} fontSize={7}
+                fill={`rgba(168,85,247,${(parseFloat(op) * 0.7).toFixed(3)})`}>{h}f</text>
+            </g>
+          )
+        })}
+      </svg>
+    </div>
+  )
+}
+
 // ─── Main component ───────────────────────────────────────────────────────────
-export default function DebugView({ chroma, chordCandidates, noteAnalysis, keyInfo, currentChord, instrument = 'guitar' }) {
+export default function DebugView({ chroma, chordCandidates, noteAnalysis, waveform, keyInfo, currentChord, instrument = 'guitar', monoColor = false }) {
   const keyPCs   = new Set(keyInfo ? getScale(keyInfo.root, keyInfo.mode).map(n => NOTES.indexOf(n)) : [])
   const chordPCs = new Set(currentChord ? getChordTones(currentChord).map(n => NOTES.indexOf(n)) : [])
 
-  const chromaArr   = chroma       ? [...chroma]       : new Array(12).fill(0)
-  const histFreq    = noteAnalysis ? noteAnalysis.freq  : new Array(12).fill(0)
-  const topKeys     = noteAnalysis ? noteAnalysis.topKeys : []
+  const chromaArr    = chroma       ? [...chroma]            : new Array(12).fill(0)
+  const histFreq     = noteAnalysis ? noteAnalysis.freq       : new Array(12).fill(0)
+  const topKeys      = noteAnalysis ? noteAnalysis.topKeys    : []
+  const totalNotes   = noteAnalysis?.total      ?? 0
+  const sessionSecs  = noteAnalysis?.sessionSecs ?? 0
+  const sessionLabel = sessionSecs >= 60
+    ? `${Math.floor(sessionSecs / 60)}m ${sessionSecs % 60}s`
+    : `${sessionSecs}s`
   const topScore    = chordCandidates[0]?.score ?? 1
   const topKeyScore = topKeys[0]?.score ?? 1
 
   return (
-    <div className="bg-panel border border-border rounded-2xl p-4 flex flex-col gap-4">
-      <p className="text-xs text-gray-500 uppercase tracking-widest shrink-0">Behind the Scenes</p>
-
-      {/* ── Live chroma visualization (instrument-synced) ── */}
+    <div className="flex flex-col gap-4">
+{/* ── Live chroma visualization (instrument-synced) ── */}
       <div>
         <p className="text-xs text-gray-600 uppercase tracking-widest mb-2">Live chroma — what the engine hears right now</p>
         {instrument === 'guitar'
-          ? <MiniFretboard values={chromaArr} keyNotes={keyPCs} chordNotes={chordPCs} />
-          : <PianoSVG values={chromaArr} keyNotes={keyPCs} chordNotes={chordPCs} keyH={90} />
+          ? <MiniFretboard values={chromaArr} keyNotes={keyPCs} chordNotes={chordPCs} monoColor={monoColor} />
+          : <PianoSVG values={chromaArr} keyNotes={keyPCs} chordNotes={chordPCs} keyH={90} monoColor={monoColor} />
         }
       </div>
 
@@ -269,8 +599,15 @@ export default function DebugView({ chroma, chordCandidates, noteAnalysis, keyIn
 
         {/* Col 2: Note history piano with % labels */}
         <div>
-          <p className="text-xs text-gray-600 uppercase tracking-widest mb-2">Note history — key evidence</p>
-          <PianoSVG values={histFreq} keyNotes={keyPCs} chordNotes={chordPCs} keyH={70} showPct={true} />
+          <div className="flex items-baseline justify-between mb-2">
+            <p className="text-xs text-gray-600 uppercase tracking-widest">Note history</p>
+            {totalNotes > 0 && (
+              <span className="text-[10px] text-gray-600 tabular-nums">
+                {totalNotes.toLocaleString()} notes · {sessionLabel}
+              </span>
+            )}
+          </div>
+          <PianoSVG values={histFreq} keyNotes={keyPCs} chordNotes={chordPCs} keyH={70} showPct={true} monoColor={monoColor} />
         </div>
 
         {/* Col 3: Key candidates */}
@@ -298,6 +635,12 @@ export default function DebugView({ chroma, chordCandidates, noteAnalysis, keyIn
         </div>
 
       </div>
+
+      {/* ── Oscilloscope + spectrum ── */}
+      <div className="flex flex-col gap-3">
+        <Oscilloscope waveform={waveform} />
+        <SpectrumPanel spectrum={waveform?.spectrum} detectedFreq={waveform?.detectedFreq} />
+      </div>
     </div>
   )
 }

src/components/DrumView.jsx

@@ -0,0 +1,181 @@
+import { useRef, useEffect } from 'react'
+
+// Map a frequency (Hz) to a bin index in the 256-bin log spectrum (40–4000 Hz)
+function freqToBin(freq) {
+  return Math.round(255 * Math.log(freq / 40) / Math.log(4000 / 40))
+}
+
+function bandMax(spectrum, lo, hi) {
+  if (!spectrum) return 0
+  const a = freqToBin(lo)
+  const b = Math.min(freqToBin(hi), spectrum.length - 1)
+  let max = 0
+  for (let i = a; i <= b; i++) if (spectrum[i] > max) max = spectrum[i]
+  return max
+}
+
+const BANDS = [
+  { label: 'Kick',     lo: 40,   hi: 120,  color: '#ef4444' },
+  { label: 'Snare',    lo: 120,  hi: 300,  color: '#f59e0b' },
+  { label: 'Mid',      lo: 300,  hi: 1000, color: '#22c55e' },
+  { label: 'Presence', lo: 1000, hi: 4000, color: '#60a5fa' },
+]
+
+const TIMELINE_MS = 4000   // onset timeline window
+const RMS_HISTORY = 180    // ~3s at 60fps
+
+export default function DrumView({ waveform, bpm }) {
+  const rmsHistRef    = useRef([])
+  const beatCanvasRef = useRef(null)
+  const rmsCanvasRef  = useRef(null)
+
+  const spectrum = waveform?.spectrum ?? null
+  const bandLevels = BANDS.map(b => bandMax(spectrum, b.lo, b.hi))
+
+  // Accumulate RMS history
+  useEffect(() => {
+    if (waveform == null) return
+    const h = rmsHistRef.current
+    h.push(Math.min(waveform.rms * 10, 1))
+    if (h.length > RMS_HISTORY) h.shift()
+  }, [waveform])
+
+  // Draw onset / beat timeline
+  useEffect(() => {
+    const canvas = beatCanvasRef.current
+    if (!canvas) return
+    const ctx = canvas.getContext('2d')
+    const W = canvas.width, H = canvas.height
+
+    ctx.fillStyle = '#0a0a0a'
+    ctx.fillRect(0, 0, W, H)
+
+    const onsets = waveform?.onsets ?? []
+    const now = performance.now()
+
+    // Beat grid aligned to the most recent onset
+    if (bpm) {
+      const beatMs = 60000 / bpm
+      const numBeats = Math.ceil(TIMELINE_MS / beatMs) + 1
+      const latest = onsets[onsets.length - 1]
+      const phase = latest != null ? (now - latest) % beatMs : 0
+      for (let b = 0; b <= numBeats; b++) {
+        const ageMs = b * beatMs - phase
+        if (ageMs < 0 || ageMs > TIMELINE_MS) continue
+        const x = W * (1 - ageMs / TIMELINE_MS)
+        ctx.strokeStyle = 'rgba(255,255,255,0.07)'
+        ctx.lineWidth = 1
+        ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke()
+      }
+    }
+
+    // Onset dots + vertical tails
+    const recent = onsets.filter(t => now - t <= TIMELINE_MS)
+    for (const t of recent) {
+      const age = now - t
+      const x = W * (1 - age / TIMELINE_MS)
+      const alpha = Math.pow(1 - age / TIMELINE_MS, 0.4)
+      ctx.strokeStyle = `rgba(168,85,247,${(alpha * 0.35).toFixed(2)})`
+      ctx.lineWidth = 1
+      ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke()
+      ctx.fillStyle = `rgba(168,85,247,${alpha.toFixed(2)})`
+      ctx.beginPath(); ctx.arc(x, H / 2, 5, 0, Math.PI * 2); ctx.fill()
+    }
+
+    // "Now" edge
+    ctx.strokeStyle = 'rgba(255,255,255,0.18)'
+    ctx.lineWidth = 2
+    ctx.beginPath(); ctx.moveTo(W - 1, 0); ctx.lineTo(W - 1, H); ctx.stroke()
+  }, [waveform, bpm])
+
+  // Draw RMS envelope
+  useEffect(() => {
+    const canvas = rmsCanvasRef.current
+    if (!canvas) return
+    const ctx = canvas.getContext('2d')
+    const W = canvas.width, H = canvas.height
+    const h = rmsHistRef.current
+
+    ctx.fillStyle = '#0a0a0a'
+    ctx.fillRect(0, 0, W, H)
+    if (h.length < 2) return
+
+    const barW = W / RMS_HISTORY
+    for (let i = 0; i < h.length; i++) {
+      const x = W * (i / RMS_HISTORY)
+      const barH = h[i] * H
+      const v = Math.round(h[i] * 160 + 60)
+      ctx.fillStyle = `rgb(${v},30,${v})`
+      ctx.fillRect(x, H - barH, Math.max(barW - 0.5, 1), barH)
+    }
+  }, [waveform])
+
+  const noData = !waveform
+
+  return (
+    <div className="space-y-5">
+
+      {/* Band meters */}
+      <div>
+        <p className="text-xs text-gray-600 font-mono uppercase tracking-widest mb-2">Frequency Bands</p>
+        <div className="flex gap-3" style={{ height: 96 }}>
+          {BANDS.map((b, i) => (
+            <div key={b.label} className="flex flex-col items-center gap-1 flex-1">
+              <div className="flex-1 w-full bg-gray-900 rounded-sm relative overflow-hidden">
+                {noData ? (
+                  <div className="absolute inset-0 flex items-center justify-center">
+                    <span className="text-[9px] text-gray-700 font-mono">—</span>
+                  </div>
+                ) : (
+                  <div
+                    className="absolute bottom-0 left-0 right-0 rounded-sm"
+                    style={{
+                      height: `${bandLevels[i] * 100}%`,
+                      backgroundColor: b.color,
+                      transition: 'height 60ms linear',
+                    }}
+                  />
+                )}
+              </div>
+              <span className="text-[10px] font-mono text-gray-500 uppercase">{b.label}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Onset timeline */}
+      <div>
+        <p className="text-xs text-gray-600 font-mono uppercase tracking-widest mb-2">
+          Onset Timeline{bpm ? ` · ${bpm} BPM` : ''}
+          <span className="ml-2 text-gray-700 normal-case">← 4 seconds</span>
+        </p>
+        <canvas
+          ref={beatCanvasRef}
+          width={800}
+          height={56}
+          className="w-full rounded"
+          style={{ height: 56 }}
+        />
+        {noData && (
+          <p className="text-xs text-gray-700 font-mono mt-1 text-center">Start listening to see hits</p>
+        )}
+      </div>
+
+      {/* Volume envelope */}
+      <div>
+        <p className="text-xs text-gray-600 font-mono uppercase tracking-widest mb-2">
+          Volume Envelope
+          <span className="ml-2 text-gray-700 normal-case">← ~3 seconds</span>
+        </p>
+        <canvas
+          ref={rmsCanvasRef}
+          width={800}
+          height={56}
+          className="w-full rounded"
+          style={{ height: 56 }}
+        />
+      </div>
+
+    </div>
+  )
+}

src/components/EducationPanel.jsx

@@ -0,0 +1,397 @@
+import { useState } from 'react'
+import { toRomanNumeral, CHORD_TYPES, NOTES } from '../lib/theory'
+import {
+  findSimilarProgressions,
+  getChordSubstitutions,
+  progressionInKey,
+  styleVariationInKey,
+  parseChord,
+} from '../lib/education'
+
+// ─── Session Snapshot ─────────────────────────────────────────────────────────
+function SessionSnapshot({ keyInfo, detectedProgression, chordHistory }) {
+  const { root, mode, confidence } = keyInfo ?? {}
+  const uniqueChords = [...new Set(chordHistory)]
+  const totalPlayed  = chordHistory.length
+
+  return (
+    <div className="flex flex-wrap gap-4 p-4 bg-surface border border-border rounded-xl">
+      <div className="flex flex-col gap-1 min-w-[120px]">
+        <p className="text-[11px] uppercase tracking-wider text-gray-600">Key</p>
+        {root ? (
+          <div className="flex items-baseline gap-1.5">
+            <span className="text-2xl font-black text-accent">{root}</span>
+            <span className="text-sm text-gray-400 capitalize">{mode}</span>
+            {confidence && <span className="text-xs text-gray-600">{Math.round(confidence * 100)}%</span>}
+          </div>
+        ) : (
+          <span className="text-gray-600 text-sm">Detecting…</span>
+        )}
+      </div>
+
+      <div className="w-px bg-border shrink-0" />
+
+      <div className="flex flex-col gap-1">
+        <p className="text-[11px] uppercase tracking-wider text-gray-600">Detected Loop</p>
+        {detectedProgression?.length ? (
+          <div className="flex flex-wrap gap-1">
+            {detectedProgression.map((chord, i) => (
+              <span key={i} className="px-2 py-0.5 bg-accent/10 border border-accent/30 rounded text-xs font-bold text-accent">
+                {chord}
+                {root && <span className="text-amber-400/70 ml-1 font-normal text-[10px]">
+                  {toRomanNumeral(chord, root, mode)}
+                </span>}
+              </span>
+            ))}
+          </div>
+        ) : (
+          <span className="text-gray-600 text-sm">None yet — keep playing!</span>
+        )}
+      </div>
+
+      <div className="w-px bg-border shrink-0" />
+
+      <div className="flex flex-col gap-1">
+        <p className="text-[11px] uppercase tracking-wider text-gray-600">Session</p>
+        <p className="text-sm text-gray-300">
+          <span className="font-bold text-white">{totalPlayed}</span> chords &nbsp;·&nbsp;
+          <span className="font-bold text-white">{uniqueChords.length}</span> unique
+        </p>
+        {uniqueChords.length > 0 && (
+          <div className="flex flex-wrap gap-1 mt-0.5">
+            {uniqueChords.slice(0, 10).map(c => (
+              <span key={c} className="text-[10px] text-gray-500 bg-border px-1.5 py-0.5 rounded">{c}</span>
+            ))}
+            {uniqueChords.length > 10 && <span className="text-[10px] text-gray-600">+{uniqueChords.length - 10}</span>}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// ─── Similar Progressions ─────────────────────────────────────────────────────
+function SimilarProgressions({ similar, keyInfo, onChordClick }) {
+  const [expanded, setExpanded] = useState(null)
+  if (!similar.length) return (
+    <p className="text-gray-600 text-sm text-center py-4">
+      Play more chords and lock a key to find similar famous progressions.
+    </p>
+  )
+
+  return (
+    <div className="flex flex-col gap-3">
+      {similar.map(prog => {
+        const isOpen = expanded === prog.id
+        const chordsInKey = keyInfo?.root ? progressionInKey(prog, keyInfo.root) : []
+
+        return (
+          <div key={prog.id}
+            className="border border-border rounded-xl overflow-hidden hover:border-accent/30 transition-colors">
+
+            {/* Header row */}
+            <button
+              onClick={() => setExpanded(isOpen ? null : prog.id)}
+              className="w-full flex items-start justify-between gap-3 px-4 py-3 text-left"
+            >
+              <div className="flex flex-col gap-1 min-w-0">
+                <div className="flex items-center gap-2 flex-wrap">
+                  <span className="font-bold text-white text-sm">{prog.name}</span>
+                  {prog.genre.map(g => (
+                    <span key={g} className="px-1.5 py-0.5 bg-accent/10 border border-accent/20 rounded text-[10px] text-accent">{g}</span>
+                  ))}
+                  <span className="text-[11px] text-gray-500 font-mono">{prog.pattern}</span>
+                  <span className="ml-auto text-xs text-gray-600">{Math.round(prog.score * 100)}% match</span>
+                </div>
+                {/* Chords in current key */}
+                {chordsInKey.length > 0 && (
+                  <div className="flex gap-1 flex-wrap">
+                    {chordsInKey.map((c, i) => (
+                      <button key={i}
+                        onClick={e => { e.stopPropagation(); onChordClick?.(c) }}
+                        className="px-2 py-0.5 bg-surface border border-border hover:border-accent/50 rounded text-xs font-bold text-gray-200 hover:text-accent transition-colors"
+                        title={`See voicings for ${c}`}
+                      >
+                        {c}
+                      </button>
+                    ))}
+                    <span className="text-[10px] text-gray-600 self-center ml-1">in {keyInfo.root} {keyInfo.mode}</span>
+                  </div>
+                )}
+              </div>
+              <span className="text-gray-600 shrink-0 text-sm mt-0.5">{isOpen ? '▲' : '▼'}</span>
+            </button>
+
+            {/* Expanded detail */}
+            {isOpen && (
+              <div className="border-t border-border px-4 py-4 flex flex-col gap-4">
+                <p className="text-sm text-gray-400">{prog.description}</p>
+                {prog.tip && (
+                  <p className="text-xs text-amber-400/80">
+                    <span className="text-amber-400 font-semibold">Insight:</span> {prog.tip}
+                  </p>
+                )}
+
+                {/* Song examples */}
+                <div>
+                  <p className="text-[11px] uppercase tracking-wider text-gray-600 mb-2">Famous examples</p>
+                  <div className="flex flex-wrap gap-1.5">
+                    {prog.songs.map(s => (
+                      <span key={s} className="px-2 py-1 bg-surface border border-border rounded-lg text-xs text-gray-400">{s}</span>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Style variations */}
+                {prog.styleVariations.length > 0 && (
+                  <div>
+                    <p className="text-[11px] uppercase tracking-wider text-gray-600 mb-2">Style variations</p>
+                    <div className="flex flex-col gap-2">
+                      {prog.styleVariations.map(sv => {
+                        const svChords = keyInfo?.root ? styleVariationInKey(sv, prog, keyInfo.root) : []
+                        return (
+                          <div key={sv.label} className="flex items-start gap-3 p-2 bg-surface rounded-lg border border-border">
+                            <span className="text-xs font-bold text-accent shrink-0 w-16">{sv.label}</span>
+                            <div className="flex flex-col gap-1 min-w-0">
+                              <span className="text-xs text-gray-500 font-mono">{sv.pattern}</span>
+                              {svChords.length > 0 && (
+                                <div className="flex gap-1 flex-wrap">
+                                  {svChords.map((c, i) => (
+                                    <button key={i}
+                                      onClick={() => onChordClick?.(c)}
+                                      className="px-1.5 py-0.5 bg-accent/10 border border-accent/20 hover:border-accent rounded text-[11px] font-bold text-accent/90 hover:text-accent transition-colors"
+                                      title={`See voicings for ${c}`}
+                                    >
+                                      {c}
+                                    </button>
+                                  ))}
+                                  <span className="text-[10px] text-gray-600 self-center ml-1">in {keyInfo.root}</span>
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        )
+                      })}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+// ─── Play It Differently ──────────────────────────────────────────────────────
+function PlayDifferently({ progression, onChordClick }) {
+  if (!progression?.length) return (
+    <p className="text-gray-600 text-sm text-center py-4">
+      Keep playing — a repeating progression will appear here with substitution ideas.
+    </p>
+  )
+
+  return (
+    <div className="flex flex-col gap-3">
+      <p className="text-xs text-gray-500">
+        Tap any substitution to see how to play it. These are harmonic replacements — same role, different colour.
+      </p>
+      {progression.map(chord => {
+        const subs = getChordSubstitutions(chord)
+        return (
+          <div key={chord} className="flex flex-wrap items-start gap-3 p-3 bg-surface border border-border rounded-xl">
+            {/* Original chord */}
+            <button
+              onClick={() => onChordClick?.(chord)}
+              className="px-3 py-1.5 bg-accent text-white font-black rounded-lg text-sm shrink-0 hover:bg-purple-600 transition-colors"
+              title="See voicings"
+            >
+              {chord}
+            </button>
+
+            <span className="text-gray-700 self-center">→</span>
+
+            {/* Substitutions */}
+            <div className="flex flex-wrap gap-2">
+              {subs.map(sub => (
+                <div key={sub.chord} className="relative group">
+                  <button
+                    onClick={() => onChordClick?.(sub.chord)}
+                    className="px-2.5 py-1.5 bg-panel border border-border hover:border-accent/50 hover:text-accent rounded-lg text-sm font-bold text-gray-300 transition-all"
+                  >
+                    {sub.chord}
+                  </button>
+                  {/* Tooltip */}
+                  <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 w-48 px-2 py-1.5 bg-gray-900 border border-border rounded-lg text-[11px] text-gray-300 leading-snug opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10 shadow-xl">
+                    {sub.tip}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )
+      })}
+      <p className="text-[11px] text-gray-700 text-center">
+        Hover substitutions to see what they change · click to see voicings
+      </p>
+    </div>
+  )
+}
+
+// ─── Chord Variation Ideas ────────────────────────────────────────────────────
+const VARIATION_ROWS = [
+  {
+    label: '7th Upgrade',
+    desc: 'Add 7ths throughout — jazz and soul texture',
+    typeMap: { maj: 'maj7', min: 'min7', dom7: 'dom7', maj7: 'maj7', min7: 'min7', dim: 'dim7', add9: 'maj7', sus2: 'sus2', sus4: 'sus4', aug: 'aug', half_dim: 'half_dim', maj6: 'maj6', min6: 'min6' },
+  },
+  {
+    label: 'Sus2 Wash',
+    desc: 'Replace triads with sus2 — ambient and spacious',
+    typeMap: { maj: 'sus2', min: 'sus2', dom7: 'sus4', maj7: 'sus2', min7: 'sus2', add9: 'sus2', dim: 'dim', aug: 'aug', sus4: 'sus4', sus2: 'sus2', half_dim: 'half_dim', maj6: 'sus2', min6: 'sus2' },
+  },
+  {
+    label: 'Add9 Modern',
+    desc: 'Add9 on majors, m7 on minors — indie and neo-soul',
+    typeMap: { maj: 'add9', min: 'min7', dom7: 'dom7', maj7: 'add9', min7: 'min7', add9: 'add9', sus2: 'sus2', sus4: 'sus4', dim: 'dim', aug: 'aug', half_dim: 'half_dim', maj6: 'add9', min6: 'min7' },
+  },
+  {
+    label: 'Blues Dominant',
+    desc: 'All chords → dom7 — instant 12-bar blues energy',
+    typeMap: { maj: 'dom7', min: 'dom7', dom7: 'dom7', maj7: 'dom7', min7: 'dom7', add9: 'dom7', sus2: 'dom7', sus4: 'dom7', dim: 'dim7', aug: 'aug', half_dim: 'dom7', maj6: 'dom7', min6: 'dom7' },
+  },
+]
+
+function ProgressionVariationIdeas({ progression, onChordClick }) {
+  if (!progression?.length) return (
+    <p className="text-gray-600 text-sm text-center py-4">
+      Keep playing — your progression will appear here.
+    </p>
+  )
+
+  return (
+    <div className="flex flex-col gap-3">
+      <p className="text-xs text-gray-500">
+        Your progression re-harmonised four ways. Click any chord to open its voicing explorer.
+      </p>
+      {VARIATION_ROWS.map(row => {
+        const transformed = progression.map(chord => {
+          const p = parseChord(chord)
+          if (!p) return chord
+          const newType = row.typeMap[p.type] ?? p.type
+          return NOTES[p.rootPc] + (CHORD_TYPES[newType]?.suffix ?? '')
+        })
+        return (
+          <div key={row.label} className="p-3 bg-surface border border-border rounded-xl">
+            <div className="flex items-center gap-2 mb-2.5">
+              <span className="text-xs font-bold text-accent">{row.label}</span>
+              <span className="text-[11px] text-gray-500">{row.desc}</span>
+            </div>
+            <div className="flex flex-wrap gap-2 items-center">
+              {progression.map((orig, i) => (
+                <span key={i} className="flex items-center gap-1.5">
+                  <span className="text-[10px] text-gray-600">{orig}</span>
+                  <span className="text-gray-700 text-xs">→</span>
+                  <button
+                    onClick={() => onChordClick?.(transformed[i])}
+                    className="px-2.5 py-1 bg-panel border border-border hover:border-accent/50 hover:text-accent rounded-lg font-bold text-sm text-gray-200 transition-all"
+                  >
+                    {transformed[i]}
+                  </button>
+                  {i < progression.length - 1 && <span className="text-gray-700">·</span>}
+                </span>
+              ))}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+// ─── Main ─────────────────────────────────────────────────────────────────────
+export default function EducationPanel({ chordHistory, keyInfo, detectedProgression, onChordClick }) {
+  const [open, setOpen] = useState(false)
+  const [section, setSection] = useState('similar')
+
+  // Use detected progression if available, else last 4 unique chords from history
+  const workingProgression = detectedProgression?.length
+    ? detectedProgression
+    : [...new Set([...chordHistory].reverse())].reverse().slice(-4)
+
+  const similar = findSimilarProgressions(workingProgression, keyInfo)
+
+  return (
+    <div className="mb-3 bg-panel border border-border rounded-xl overflow-hidden">
+      <button
+        onClick={() => setOpen(v => !v)}
+        className="w-full flex items-center justify-between px-4 py-2 text-sm text-gray-400 hover:text-gray-200 transition-all"
+      >
+        <div className="flex items-center gap-3">
+          <span>EDUCATION</span>
+          {similar.length > 0 && (
+            <span className="text-[10px] px-1.5 py-0.5 bg-accent/20 border border-accent/30 rounded text-accent">
+              {similar.length} match{similar.length !== 1 ? 'es' : ''}
+            </span>
+          )}
+        </div>
+        <span>{open ? '▲' : '▼'}</span>
+      </button>
+
+      {open && (
+        <div className="border-t border-border">
+
+          {/* Section nav */}
+          <div className="flex gap-1 px-4 pt-4 pb-0 border-b border-border overflow-x-auto">
+            {[
+              { key: 'snapshot',  label: '📊 Session' },
+              { key: 'similar',   label: `🎵 Similar Progressions${similar.length ? ` (${similar.length})` : ''}` },
+              { key: 'play',      label: '🎨 Play Differently' },
+              { key: 'variations',label: '🔀 Progression Variations' },
+            ].map(s => (
+              <button key={s.key}
+                onClick={() => setSection(s.key)}
+                className={`px-3 py-2 text-xs font-semibold whitespace-nowrap border-b-2 transition-all shrink-0 ${
+                  section === s.key
+                    ? 'border-accent text-accent'
+                    : 'border-transparent text-gray-500 hover:text-gray-300'
+                }`}>
+                {s.label}
+              </button>
+            ))}
+          </div>
+
+          <div className="p-4">
+            {section === 'snapshot'   && (
+              <SessionSnapshot
+                keyInfo={keyInfo}
+                detectedProgression={detectedProgression}
+                chordHistory={chordHistory}
+              />
+            )}
+            {section === 'similar'    && (
+              <SimilarProgressions
+                similar={similar}
+                keyInfo={keyInfo}
+                onChordClick={onChordClick}
+              />
+            )}
+            {section === 'play'       && (
+              <PlayDifferently
+                progression={workingProgression}
+                onChordClick={onChordClick}
+              />
+            )}
+            {section === 'variations' && (
+              <ProgressionVariationIdeas
+                progression={workingProgression}
+                onChordClick={onChordClick}
+              />
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

src/components/ExplorePanel.jsx

@@ -0,0 +1,249 @@
+import { useState } from 'react'
+import ChordBox from './ChordBox'
+import MiniPiano from './MiniPiano'
+import { getGuitarVoicings, getPianoTechniques, parseChord } from '../lib/voicings'
+import { CHORD_TYPES, NOTES, getChordsInKey, toRomanNumeral } from '../lib/theory'
+import { FAMOUS_PROGRESSIONS, progressionInKey } from '../lib/education'
+
+const CHORD_TYPE_OPTIONS = [
+  { key: 'maj',      label: 'Major'  },
+  { key: 'min',      label: 'Minor'  },
+  { key: 'dom7',     label: '7'      },
+  { key: 'maj7',     label: 'maj7'   },
+  { key: 'min7',     label: 'm7'     },
+  { key: 'dim',      label: 'dim'    },
+  { key: 'dim7',     label: 'dim7'   },
+  { key: 'half_dim', label: 'm7♭5'   },
+  { key: 'aug',      label: 'aug'    },
+  { key: 'sus4',     label: 'sus4'   },
+  { key: 'sus2',     label: 'sus2'   },
+  { key: 'maj6',     label: '6'      },
+  { key: 'min6',     label: 'm6'     },
+  { key: 'add9',     label: 'add9'   },
+]
+
+const MAJOR_TYPES = new Set(['maj','maj7','maj6','add9','sus4','sus2','aug','dom7'])
+
+// ─── Quick-pick chip row ──────────────────────────────────────────────────────
+function ChipRow({ label, chords, active, keyInfo, onSelect }) {
+  if (!chords?.length) return null
+  return (
+    <div className="flex items-start gap-2 flex-wrap">
+      <span className="text-[10px] uppercase tracking-wider text-gray-600 w-16 pt-1 shrink-0">{label}</span>
+      <div className="flex flex-wrap gap-1.5">
+        {chords.map(chord => {
+          const rn = keyInfo?.root ? toRomanNumeral(chord, keyInfo.root, keyInfo.mode) : ''
+          return (
+            <button key={chord} onClick={() => onSelect(chord)}
+              className={`flex flex-col items-center px-2.5 py-1 rounded-lg border text-xs font-bold transition-all ${
+                active === chord
+                  ? 'bg-accent border-accent text-white'
+                  : 'bg-surface border-border text-gray-300 hover:border-accent/50 hover:text-accent'
+              }`}>
+              <span>{chord}</span>
+              {rn && <span className="text-[9px] font-normal opacity-60 leading-none mt-0.5">{rn}</span>}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+// ─── Guitar voicings grid ─────────────────────────────────────────────────────
+function GuitarGrid({ chordName }) {
+  const voicings = getGuitarVoicings(chordName)
+  if (!voicings.length) return <p className="text-gray-600 text-sm py-4">No voicings for {chordName}.</p>
+  return (
+    <div>
+      <div className="flex flex-wrap gap-4">
+        {voicings.map((v, i) => (
+          <div key={i} className="flex flex-col items-center p-3 rounded-xl bg-surface border border-border hover:border-accent/30 transition-colors">
+            <ChordBox frets={v.frets} fingers={v.fingers} barre={v.barre} baseFret={v.baseFret} />
+            <p className="text-[11px] text-gray-500 text-center mt-1 max-w-[110px] leading-tight">{v.label}</p>
+          </div>
+        ))}
+      </div>
+      <p className="text-[11px] text-gray-700 mt-3">
+        Purple = chord tone · finger numbers inside dots (1=index 4=pinky) · fret number on left if not starting at fret 1
+      </p>
+    </div>
+  )
+}
+
+// ─── Piano techniques grid ────────────────────────────────────────────────────
+function PianoGrid({ chordName }) {
+  const parsed = parseChord(chordName)
+  const techniques = getPianoTechniques(chordName)
+  const rootPc = parsed?.rootPc ?? 0
+  if (!techniques.length) return <p className="text-gray-600 text-sm py-4">No techniques for {chordName}.</p>
+  return (
+    <div className="flex flex-col gap-3">
+      {techniques.map((t, i) => (
+        <div key={i} className="flex flex-col lg:flex-row gap-3 p-3 bg-surface border border-border rounded-xl hover:border-accent/30 transition-colors">
+          <div className="shrink-0 overflow-x-auto">
+            <MiniPiano rootPc={rootPc} lh={t.lh} rh={t.rh} />
+          </div>
+          <div className="flex flex-col gap-1 min-w-0 justify-center">
+            <p className="font-bold text-white text-sm">{t.name}</p>
+            <p className="text-gray-400 text-xs">{t.desc}</p>
+            <p className="text-xs text-amber-400/80 mt-0.5">
+              <span className="text-amber-400 font-semibold">Tip:</span> {t.tip}
+            </p>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// ─── Famous progressions using this chord as tonic ───────────────────────────
+function ProgressionCards({ chordName, onChordClick }) {
+  const parsed = parseChord(chordName)
+  if (!parsed) return null
+  const { rootPc, type } = parsed
+  const root = NOTES[rootPc]
+  const isMajor = MAJOR_TYPES.has(type)
+
+  const matching = FAMOUS_PROGRESSIONS.filter(p => {
+    const q0 = p.qualities[0]
+    return isMajor ? MAJOR_TYPES.has(q0) : !MAJOR_TYPES.has(q0)
+  }).slice(0, 6)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <p className="text-xs text-gray-500">
+        Famous progressions with <span className="text-accent font-bold">{chordName}</span> as the tonic.
+        Click any chord to see its voicings.
+      </p>
+      {matching.map(prog => {
+        const chordsHere = progressionInKey(prog, root)
+        return (
+          <div key={prog.id} className="p-3 bg-surface border border-border rounded-xl">
+            <div className="flex items-center flex-wrap gap-2 mb-2">
+              <span className="font-bold text-white text-sm">{prog.name}</span>
+              <span className="text-[10px] font-mono text-gray-600">{prog.pattern}</span>
+              {prog.genre.slice(0, 2).map(g => (
+                <span key={g} className="px-1.5 py-0.5 bg-accent/10 border border-accent/20 rounded text-[10px] text-accent">{g}</span>
+              ))}
+            </div>
+            <div className="flex flex-wrap gap-1.5 items-center mb-2">
+              {chordsHere.map((c, i) => (
+                <span key={i} className="flex items-center gap-1">
+                  <button onClick={() => onChordClick?.(c)}
+                    className={`px-2.5 py-1 rounded-lg font-bold text-sm border transition-all ${
+                      i === 0
+                        ? 'bg-accent border-accent text-white'
+                        : 'bg-panel border-border text-gray-200 hover:border-accent/50 hover:text-accent'
+                    }`}>
+                    {c}
+                  </button>
+                  {i < chordsHere.length - 1 && <span className="text-gray-700 text-xs">→</span>}
+                </span>
+              ))}
+            </div>
+            <p className="text-xs text-gray-600 leading-snug">{prog.description}</p>
+            {prog.songs.length > 0 && (
+              <p className="text-[11px] text-gray-700 mt-1">{prog.songs.slice(0, 3).join(' · ')}</p>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+// ─── Main panel ───────────────────────────────────────────────────────────────
+export default function ExplorePanel({ keyInfo, chordHistory, onChordClick }) {
+  const [open, setOpen] = useState(false)
+  const [root, setRoot]       = useState('C')
+  const [typeKey, setTypeKey] = useState('maj')
+  const [view, setView]       = useState('guitar')   // guitar | piano | progressions
+  const [active, setActive]   = useState('')
+
+  const chordName = root + (CHORD_TYPES[typeKey]?.suffix ?? '')
+
+  function selectChord(chord) {
+    setActive(chord)
+    const p = parseChord(chord)
+    if (p) { setRoot(NOTES[p.rootPc]); setTypeKey(p.type) }
+  }
+
+  // Context-aware quick-picks
+  const recentChords  = [...new Set([...(chordHistory ?? [])].reverse())].slice(0, 12)
+  const keyChords     = keyInfo?.root ? getChordsInKey(keyInfo.root, keyInfo.mode ?? 'major') : []
+
+  return (
+    <div className="mb-3 bg-panel border border-border rounded-xl overflow-hidden">
+      <button onClick={() => setOpen(v => !v)}
+        className="w-full flex items-center justify-between px-4 py-2 text-sm text-gray-400 hover:text-gray-200 transition-all">
+        <span>EXPLORE ANY CHORD</span>
+        <span>{open ? '▲' : '▼'}</span>
+      </button>
+
+      {open && (
+        <div className="border-t border-border p-4 flex flex-col gap-4">
+
+          {/* ── Context quick-picks ── */}
+          {(recentChords.length > 0 || keyChords.length > 0) && (
+            <div className="flex flex-col gap-2.5 p-3 bg-surface border border-border rounded-xl">
+              <ChipRow label="History" chords={recentChords} active={active} keyInfo={keyInfo} onSelect={selectChord} />
+              {keyChords.length > 0 && recentChords.length > 0 && <div className="h-px bg-border" />}
+              {keyChords.length > 0 && (
+                <ChipRow
+                  label={keyInfo.root + ' ' + (keyInfo.mode ?? '')}
+                  chords={keyChords} active={active} keyInfo={keyInfo} onSelect={selectChord}
+                />
+              )}
+            </div>
+          )}
+
+          {/* ── Manual chord picker ── */}
+          <div className="flex flex-wrap gap-2 items-center p-3 bg-surface border border-border rounded-xl">
+            <div className="flex flex-wrap gap-1">
+              {NOTES.map(n => (
+                <button key={n} onClick={() => { setRoot(n); setActive('') }}
+                  className={`px-2 py-0.5 rounded text-xs font-bold transition-all ${
+                    root === n ? 'bg-accent text-white' : 'bg-border text-gray-400 hover:text-white'
+                  }`}>
+                  {n}
+                </button>
+              ))}
+            </div>
+            <div className="w-px h-5 bg-border shrink-0" />
+            <div className="relative">
+              <select value={typeKey} onChange={e => { setTypeKey(e.target.value); setActive('') }}
+                className="appearance-none bg-panel border border-border rounded-lg pl-2 pr-6 py-1 text-xs text-gray-200 cursor-pointer focus:outline-none focus:border-accent">
+                {CHORD_TYPE_OPTIONS.map(o => <option key={o.key} value={o.key}>{o.label}</option>)}
+              </select>
+              <span className="pointer-events-none absolute right-1.5 top-1/2 -translate-y-1/2 text-gray-500 text-xs">▾</span>
+            </div>
+            <div className="text-2xl font-black text-accent ml-2">{chordName}</div>
+          </div>
+
+          {/* ── View tabs ── */}
+          <div className="flex gap-1 bg-surface border border-border rounded-xl p-1 w-fit">
+            {[
+              { key: 'guitar',       label: '🎸 Guitar Voicings' },
+              { key: 'piano',        label: '🎹 Piano Techniques' },
+              { key: 'progressions', label: '🎵 Progressions' },
+            ].map(t => (
+              <button key={t.key} onClick={() => setView(t.key)}
+                className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition-all whitespace-nowrap ${
+                  view === t.key ? 'bg-accent text-white' : 'text-gray-400 hover:text-white'
+                }`}>
+                {t.label}
+              </button>
+            ))}
+          </div>
+
+          {/* ── Content ── */}
+          {view === 'guitar'       && <GuitarGrid       chordName={chordName} />}
+          {view === 'piano'        && <PianoGrid         chordName={chordName} />}
+          {view === 'progressions' && <ProgressionCards  chordName={chordName} onChordClick={c => { selectChord(c); onChordClick?.(c) }} />}
+
+        </div>
+      )}
+    </div>
+  )
+}

src/components/LoopSlot.jsx

@@ -0,0 +1,169 @@
+import { useRef, useEffect, useState, useCallback } from 'react'
+
+const STYLE = {
+  empty:     { border: 'border-border',    bg: 'bg-surface',       icon: '●', iconColor: 'text-gray-700' },
+  recording: { border: 'border-red-500',   bg: 'bg-red-950/20',    icon: '⏺', iconColor: 'text-red-400'  },
+  trimming:  { border: 'border-amber-400', bg: 'bg-amber-950/20',  icon: '✂', iconColor: 'text-amber-400'},
+  playing:   { border: 'border-accent',    bg: 'bg-accent/10',     icon: '▶', iconColor: 'text-accent'   },
+  muted:     { border: 'border-border',    bg: 'bg-surface',       icon: '⏸', iconColor: 'text-gray-500' },
+}
+
+const LABEL = {
+  empty:     'tap to rec',
+  recording: 'tap to stop',
+  trimming:  'trimming…',
+  playing:   'tap to mute',
+  muted:     'tap to play',
+}
+
+export default function LoopSlot({ slot, slotIdx, audioCtxRef, masterStartRef, masterLenRef, onClick, onRetrim, onDelete, onVolumeChange }) {
+  const progressRef = useRef(null)
+  const rafRef      = useRef(null)
+  const [showVol,   setShowVol]   = useState(false)
+  const [holdTimer, setHoldTimer] = useState(null)
+  const [deleting,  setDeleting]  = useState(false)
+
+  const { status, recordingDuration, volume, originalBuffer } = slot
+  const style = STYLE[status] ?? STYLE.empty
+  const isActive = status === 'playing' || status === 'muted'
+
+  // ── Progress bar via rAF ─────────────────────────────────────────────────
+  useEffect(() => {
+    if (!isActive) {
+      if (progressRef.current) progressRef.current.style.width = '0%'
+      return
+    }
+    function tick() {
+      const ctx    = audioCtxRef.current
+      const mStart = masterStartRef.current
+      const mLen   = masterLenRef.current
+      if (ctx && mStart !== null && mLen && progressRef.current) {
+        const pos = ((ctx.currentTime - mStart) % mLen) / mLen * 100
+        progressRef.current.style.width = `${pos}%`
+      }
+      rafRef.current = requestAnimationFrame(tick)
+    }
+    rafRef.current = requestAnimationFrame(tick)
+    return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current) }
+  }, [isActive, audioCtxRef, masterStartRef, masterLenRef])
+
+  // ── Long-press to delete ──────────────────────────────────────────────────
+  const onPointerDown = useCallback((e) => {
+    e.preventDefault()
+    const t = setTimeout(() => setDeleting(true), 500)
+    setHoldTimer(t)
+  }, [])
+
+  const onPointerUp = useCallback(() => {
+    if (holdTimer) { clearTimeout(holdTimer); setHoldTimer(null) }
+    if (!deleting) onClick(slotIdx)
+  }, [holdTimer, deleting, onClick, slotIdx])
+
+  const onPointerLeave = useCallback(() => {
+    if (holdTimer) { clearTimeout(holdTimer); setHoldTimer(null) }
+  }, [holdTimer])
+
+  const confirmDelete = useCallback(() => {
+    setDeleting(false)
+    onDelete(slotIdx)
+  }, [onDelete, slotIdx])
+
+  return (
+    <div className="flex flex-col items-center gap-1 select-none relative">
+
+      {/* Delete confirmation overlay (long-press) */}
+      {deleting && (
+        <div className="absolute inset-0 z-20 flex flex-col items-center justify-center gap-1 rounded-xl bg-black/90 border border-red-500">
+          <button
+            className="text-[10px] font-bold text-red-400 px-2 py-0.5 rounded bg-red-900/50 hover:bg-red-900"
+            onClick={confirmDelete}
+          >
+            Delete
+          </button>
+          <button
+            className="text-[10px] text-gray-500 hover:text-gray-300"
+            onClick={() => setDeleting(false)}
+          >
+            Cancel
+          </button>
+        </div>
+      )}
+
+      {/* Quick clear button — visible on non-empty slots */}
+      {status !== 'empty' && !deleting && (
+        <button
+          className="absolute -top-1.5 -right-1.5 z-10 w-4 h-4 rounded-full bg-gray-800 border border-border text-gray-500 hover:bg-red-900/60 hover:text-red-400 hover:border-red-700 text-[9px] leading-none flex items-center justify-center transition-colors"
+          onClick={(e) => { e.stopPropagation(); onDelete(slotIdx) }}
+          title="Clear slot"
+        >
+          ×
+        </button>
+      )}
+
+      {/* Main button */}
+      <button
+        className={`relative w-[76px] h-[54px] rounded-xl border-2 overflow-hidden flex flex-col items-center justify-center gap-0.5 transition-colors cursor-pointer ${style.bg} ${style.border} ${status === 'recording' ? 'animate-pulse' : ''}`}
+        onPointerDown={onPointerDown}
+        onPointerUp={onPointerUp}
+        onPointerLeave={onPointerLeave}
+      >
+        <span className={`text-lg leading-none ${style.iconColor}`}>
+          {style.icon}
+        </span>
+        <span className={`text-[9px] font-bold uppercase tracking-widest leading-none ${style.iconColor} opacity-70`}>
+          {status === 'recording'
+            ? `${(recordingDuration ?? 0).toFixed(1)}s`
+            : `Loop ${slotIdx + 1}`}
+        </span>
+
+        {/* Progress bar */}
+        {isActive && (
+          <div className="absolute bottom-0 left-0 right-0 h-[3px] bg-border">
+            <div
+              ref={progressRef}
+              className="h-full bg-accent"
+              style={{ width: '0%', transition: 'none' }}
+            />
+          </div>
+        )}
+      </button>
+
+      {/* Controls row (playing/muted only) */}
+      {isActive && (
+        <div className="flex items-center gap-1.5">
+          {/* Volume toggle */}
+          <button
+            className={`text-[11px] transition-colors ${showVol ? 'text-accent' : 'text-gray-600 hover:text-gray-400'}`}
+            onClick={() => setShowVol(v => !v)}
+            title="Volume"
+          >
+            🔊
+          </button>
+          {showVol && (
+            <input
+              type="range" min={0} max={1} step={0.05}
+              value={volume}
+              onChange={e => onVolumeChange(slotIdx, parseFloat(e.target.value))}
+              className="w-12 h-1 cursor-pointer accent-purple-500"
+            />
+          )}
+          {/* Re-trim button — only when original recording exists */}
+          {originalBuffer && (
+            <button
+              className="text-[11px] text-gray-600 hover:text-amber-400 transition-colors"
+              onClick={() => onRetrim(slotIdx)}
+              title="Re-trim this loop"
+            >
+              ✂
+            </button>
+          )}
+        </div>
+      )}
+
+      {/* Status label */}
+      <span className={`text-[9px] uppercase tracking-wider leading-none ${style.iconColor} opacity-50`}>
+        {LABEL[status] ?? ''}
+      </span>
+    </div>
+  )
+}

src/components/LoopStation.jsx

@@ -0,0 +1,508 @@
+import { useState, useRef, useEffect } from 'react'
+import LoopTrimmer from './LoopTrimmer'
+
+const H_TRACK  = 56   // track canvas height px
+const H_MASTER = 26   // master timeline height px
+
+// ── Canvas draw helpers ───────────────────────────────────────────────────────
+
+function drawGrid(canvas, totalSec, bpm) {
+  const rect = canvas.getBoundingClientRect()
+  if (!rect.width || !rect.height) return
+  const dpr = window.devicePixelRatio ?? 1
+  canvas.width  = rect.width  * dpr
+  canvas.height = rect.height * dpr
+  const ctx = canvas.getContext('2d')
+  ctx.scale(dpr, dpr)
+  const W = rect.width, H = rect.height
+
+  ctx.fillStyle = '#0f0f0f'
+  ctx.fillRect(0, 0, W, H)
+  if (!bpm || !totalSec) return
+
+  const beatSec = 60 / bpm
+  const barSec  = beatSec * 4
+
+  // Beat lines
+  ctx.strokeStyle = 'rgba(255,255,255,0.06)'
+  ctx.lineWidth = 1
+  for (let t = beatSec; t < totalSec; t += beatSec) {
+    if ((t % barSec) < beatSec * 0.4) continue
+    const x = (t / totalSec) * W
+    ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke()
+  }
+  // Bar lines + numbers
+  for (let t = 0; t <= totalSec; t += barSec) {
+    ctx.strokeStyle = 'rgba(168,85,247,0.45)'
+    ctx.lineWidth = 1.5
+    const x = (t / totalSec) * W
+    ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke()
+    const n = Math.round(t / barSec)
+    if (n > 0) {
+      ctx.fillStyle = 'rgba(168,85,247,0.55)'
+      ctx.font = '9px monospace'
+      ctx.textAlign = 'left'
+      ctx.fillText(String(n), x + 3, H - 2)
+    }
+  }
+}
+
+function drawWaveform(canvas, waveform, muted) {
+  const rect = canvas.getBoundingClientRect()
+  if (!rect.width || !rect.height) return
+  const dpr = window.devicePixelRatio ?? 1
+  canvas.width  = rect.width  * dpr
+  canvas.height = rect.height * dpr
+  const ctx = canvas.getContext('2d')
+  ctx.scale(dpr, dpr)
+  const W = rect.width, H = rect.height
+
+  ctx.fillStyle = '#0f0f0f'
+  ctx.fillRect(0, 0, W, H)
+
+  const N   = waveform.length
+  const mid = H / 2
+  for (let i = 0; i < N; i++) {
+    const x    = (i / N) * W
+    const barW = Math.max(1, W / N - 0.3)
+    ctx.fillStyle = muted ? '#3b1f55' : '#a855f7'
+    const h = waveform[i] * mid * 0.85
+    ctx.fillRect(x, mid - h, barW, h * 2)
+  }
+}
+
+function drawRecording(canvas, duration, bpm) {
+  const rect = canvas.getBoundingClientRect()
+  if (!rect.width || !rect.height) return
+  const dpr = window.devicePixelRatio ?? 1
+  canvas.width  = rect.width  * dpr
+  canvas.height = rect.height * dpr
+  const ctx = canvas.getContext('2d')
+  ctx.scale(dpr, dpr)
+  const W = rect.width, H = rect.height
+
+  ctx.fillStyle = '#0f0f0f'
+  ctx.fillRect(0, 0, W, H)
+
+  const beatSec = bpm ? 60 / bpm : null
+  const barSec  = beatSec ? beatSec * 4 : null
+  const viewDur = barSec
+    ? Math.max(barSec * 4, Math.ceil(duration / barSec + 1) * barSec)
+    : Math.max(8, duration * 1.4)
+
+  // Grid
+  if (beatSec) {
+    ctx.strokeStyle = 'rgba(255,255,255,0.06)'
+    ctx.lineWidth = 1
+    for (let t = beatSec; t < viewDur; t += beatSec) {
+      if (barSec && (t % barSec) < beatSec * 0.4) continue
+      const x = (t / viewDur) * W
+      ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke()
+    }
+    if (barSec) {
+      for (let t = barSec; t <= viewDur; t += barSec) {
+        ctx.strokeStyle = 'rgba(239,68,68,0.3)'
+        ctx.lineWidth = 1.5
+        const x = (t / viewDur) * W
+        ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke()
+        const n = Math.round(t / barSec)
+        ctx.fillStyle = 'rgba(239,68,68,0.45)'
+        ctx.font = '9px monospace'
+        ctx.textAlign = 'left'
+        ctx.fillText(String(n), x + 2, H - 2)
+      }
+    }
+  }
+
+  // Growing fill + cursor
+  const fillX = (duration / viewDur) * W
+  ctx.fillStyle = 'rgba(239,68,68,0.18)'
+  ctx.fillRect(0, 0, fillX, H)
+  ctx.strokeStyle = 'rgba(239,68,68,0.85)'
+  ctx.lineWidth = 1.5
+  ctx.beginPath(); ctx.moveTo(fillX, 0); ctx.lineTo(fillX, H); ctx.stroke()
+
+  // Counter label
+  const bars  = barSec ? Math.floor(duration / barSec) + 1 : null
+  const label = bars !== null
+    ? `● REC   BAR ${bars}   ${duration.toFixed(1)}s  —  tap to stop`
+    : `● REC   ${duration.toFixed(1)}s  —  tap to stop`
+  ctx.fillStyle = 'rgba(239,68,68,0.9)'
+  ctx.font = 'bold 11px monospace'
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'middle'
+  ctx.fillText(label, W / 2, H / 2)
+}
+
+// ── Master Timeline ───────────────────────────────────────────────────────────
+
+function MasterTimeline({ masterStartRef, masterLenRef, audioCtxRef, bpm, masterLen }) {
+  const canvasRef   = useRef(null)
+  const playheadRef = useRef(null)
+  const rafRef      = useRef(null)
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const id = requestAnimationFrame(() => drawGrid(canvas, masterLen, bpm))
+    return () => cancelAnimationFrame(id)
+  }, [masterLen, bpm])
+
+  useEffect(() => {
+    if (!masterLen) { cancelAnimationFrame(rafRef.current); return }
+    function tick() {
+      const ac  = audioCtxRef.current
+      const t0  = masterStartRef.current
+      const len = masterLenRef.current
+      if (ac && t0 !== null && len && playheadRef.current) {
+        const pos = ((ac.currentTime - t0) % len) / len
+        playheadRef.current.style.left = `${pos * 100}%`
+      }
+      rafRef.current = requestAnimationFrame(tick)
+    }
+    rafRef.current = requestAnimationFrame(tick)
+    return () => cancelAnimationFrame(rafRef.current)
+  }, [masterLen, audioCtxRef, masterStartRef, masterLenRef])
+
+  return (
+    <div className="relative mx-4 mb-3 rounded overflow-hidden bg-surface border border-border"
+         style={{ height: `${H_MASTER}px` }}>
+      <canvas ref={canvasRef} className="w-full h-full block" />
+      {!masterLen && (
+        <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+          <span className="text-[10px] text-gray-700">
+            record first loop to set master length
+          </span>
+        </div>
+      )}
+      {masterLen && (
+        <div
+          ref={playheadRef}
+          className="absolute top-0 bottom-0 w-px bg-white/50 pointer-events-none"
+          style={{ left: '0%' }}
+        />
+      )}
+    </div>
+  )
+}
+
+// ── Track Row ─────────────────────────────────────────────────────────────────
+
+function TrackRow({ slot, slotIdx, bpm, audioCtxRef, masterStartRef, masterLenRef,
+                    onSlotClick, onRetrim, onDelete, onVolumeChange }) {
+  const [showVol, setShowVol] = useState(false)
+  const canvasRef   = useRef(null)
+  const playheadRef = useRef(null)
+  const rafRef      = useRef(null)
+
+  const DOT_CLASS = {
+    empty:     'bg-gray-700',
+    recording: 'bg-red-500 animate-pulse',
+    trimming:  'bg-amber-500',
+    playing:   'bg-accent',
+    muted:     'bg-gray-500',
+  }
+  const BORDER_CLASS = {
+    empty:     'border-border',
+    recording: 'border-red-800',
+    trimming:  'border-amber-800/60',
+    playing:   'border-accent/40',
+    muted:     'border-border',
+  }
+
+  const dotClass    = DOT_CLASS[slot.status]    ?? 'bg-gray-700'
+  const borderClass = BORDER_CLASS[slot.status] ?? 'border-border'
+
+  // Draw waveform when data arrives or mute state changes
+  useEffect(() => {
+    if (!slot.waveform) return
+    if (slot.status === 'recording' || slot.status === 'trimming') return
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const id = requestAnimationFrame(() =>
+      drawWaveform(canvas, slot.waveform, slot.status === 'muted')
+    )
+    return () => cancelAnimationFrame(id)
+  }, [slot.waveform, slot.status])
+
+  // Draw recording progress on each duration tick
+  useEffect(() => {
+    if (slot.status !== 'recording') return
+    const canvas = canvasRef.current
+    if (!canvas) return
+    drawRecording(canvas, slot.recordingDuration, bpm)
+  }, [slot.recordingDuration, slot.status, bpm])
+
+  // Playhead animation
+  useEffect(() => {
+    const active = slot.status === 'playing' || slot.status === 'muted'
+    if (!active) {
+      cancelAnimationFrame(rafRef.current)
+      if (playheadRef.current) playheadRef.current.style.left = '-2px'
+      return
+    }
+    function tick() {
+      const ac  = audioCtxRef.current
+      const t0  = masterStartRef.current
+      const len = masterLenRef.current
+      if (ac && t0 !== null && len && playheadRef.current) {
+        const pos = ((ac.currentTime - t0) % len) / len
+        playheadRef.current.style.left = `${pos * 100}%`
+      }
+      rafRef.current = requestAnimationFrame(tick)
+    }
+    rafRef.current = requestAnimationFrame(tick)
+    return () => cancelAnimationFrame(rafRef.current)
+  }, [slot.status, audioCtxRef, masterStartRef, masterLenRef])
+
+  const isClickable = slot.status !== 'trimming'
+  const isActive    = slot.status === 'playing' || slot.status === 'muted'
+
+  return (
+    <div className={`flex items-stretch border rounded-lg mb-1.5 overflow-hidden transition-colors ${borderClass}`}>
+
+      {/* Left: tap button (state dot + track number) */}
+      <button
+        onClick={() => isClickable && onSlotClick(slotIdx)}
+        disabled={!isClickable}
+        title={
+          slot.status === 'empty'     ? 'Tap to record'  :
+          slot.status === 'recording' ? 'Tap to stop'    :
+          slot.status === 'playing'   ? 'Tap to mute'    :
+          slot.status === 'muted'     ? 'Tap to unmute'  : ''
+        }
+        className="flex flex-col items-center justify-center gap-1 px-3 bg-surface border-r border-border shrink-0 hover:bg-white/5 transition-colors disabled:cursor-default"
+        style={{ width: '44px' }}
+      >
+        <span className={`w-2 h-2 rounded-full shrink-0 ${dotClass}`} />
+        <span className="text-[10px] text-gray-600 font-mono">{slotIdx + 1}</span>
+      </button>
+
+      {/* Canvas: waveform / recording / empty */}
+      <div
+        className="relative flex-1 cursor-pointer"
+        style={{ height: `${H_TRACK}px` }}
+        onClick={() => isClickable && onSlotClick(slotIdx)}
+      >
+        <canvas ref={canvasRef} className="w-full h-full block" />
+
+        {slot.status === 'empty' && (
+          <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+            <span className="text-xs text-gray-700">tap to record</span>
+          </div>
+        )}
+        {slot.status === 'trimming' && (
+          <div className="absolute inset-0 flex items-center justify-center bg-amber-950/20 pointer-events-none">
+            <span className="text-xs text-amber-500/60">trimming ↓</span>
+          </div>
+        )}
+
+        {/* Moving playhead */}
+        {isActive && (
+          <div
+            ref={playheadRef}
+            className="absolute top-0 bottom-0 w-px bg-white/40 pointer-events-none"
+            style={{ left: '-2px' }}
+          />
+        )}
+      </div>
+
+      {/* Right: controls */}
+      <div className="flex items-center gap-1 px-2 bg-surface border-l border-border shrink-0">
+        {showVol && (
+          <input
+            type="range"
+            min={0} max={1} step={0.01}
+            value={slot.volume}
+            onChange={e => onVolumeChange(slotIdx, parseFloat(e.target.value))}
+            className="w-14 accent-purple-500"
+            title="Volume"
+          />
+        )}
+        <button
+          onClick={() => setShowVol(v => !v)}
+          className={`w-7 h-7 flex items-center justify-center rounded text-base transition-colors ${
+            showVol ? 'text-accent' : 'text-gray-600 hover:text-gray-300'
+          }`}
+          title="Volume"
+        >
+          {slot.status === 'muted' ? '🔇' : '🔊'}
+        </button>
+        {isActive && slot.originalBuffer && (
+          <button
+            onClick={() => onRetrim(slotIdx)}
+            className="w-7 h-7 flex items-center justify-center rounded text-gray-600 hover:text-amber-400 transition-colors text-sm"
+            title="Re-trim loop"
+          >
+            ✂
+          </button>
+        )}
+        <button
+          onClick={() => onDelete(slotIdx)}
+          className="w-7 h-7 flex items-center justify-center rounded text-gray-700 hover:text-red-400 transition-colors text-sm"
+          title="Clear track"
+        >
+          ✕
+        </button>
+      </div>
+    </div>
+  )
+}
+
+// ── Main ──────────────────────────────────────────────────────────────────────
+
+export default function LoopStation({
+  slots,
+  bpm,
+  masterLen,
+  audioCtxRef,
+  masterStartRef,
+  masterLenRef,
+  onSlotClick,
+  onCommitTrim,
+  onCancelRecord,
+  onRetrim,
+  onDelete,
+  onVolumeChange,
+  onAddSlot,
+}) {
+  const [open,    setOpen]    = useState(false)
+  const [gridBpm, setGridBpm] = useState(bpm ?? '')
+
+  // Pre-fill BPM when detection arrives
+  useEffect(() => {
+    if (bpm && !gridBpm) setGridBpm(bpm)
+  }, [bpm]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const gridBpmNum  = parseFloat(gridBpm) || null
+  const trimmingIdx = slots.findIndex(s => s.status === 'trimming')
+
+  const recordingCount = slots.filter(s => s.status === 'recording').length
+  const playingCount   = slots.filter(s => s.status === 'playing').length
+
+  const dotClass = recordingCount > 0
+    ? 'bg-red-500 animate-pulse'
+    : playingCount > 0
+      ? 'bg-accent'
+      : 'bg-gray-700'
+
+  const masterLabel = (() => {
+    if (!masterLen) return null
+    if (gridBpmNum) {
+      const bars = Math.round(masterLen / ((60 / gridBpmNum) * 4))
+      return `${bars} bar${bars !== 1 ? 's' : ''} · ${masterLen.toFixed(2)}s`
+    }
+    return masterLen.toFixed(2) + 's'
+  })()
+
+  return (
+    <div className="mb-3 bg-panel border border-border rounded-xl overflow-hidden">
+      {/* ── Header ──────────────────────────────────────────────────────────── */}
+      <div className="flex items-center justify-between px-4 py-2 text-sm text-gray-400">
+        <button
+          onClick={() => setOpen(v => !v)}
+          className="flex items-center gap-2 hover:text-gray-200 transition-colors text-left"
+        >
+          <span className={`w-2 h-2 rounded-full shrink-0 ${dotClass}`} />
+          <span>LOOP STATION</span>
+          {masterLabel && (
+            <span className="text-[11px] text-gray-600 font-mono">{masterLabel}</span>
+          )}
+          {recordingCount > 0 && (
+            <span className="text-[11px] text-red-400">● rec</span>
+          )}
+          {playingCount > 0 && recordingCount === 0 && (
+            <span className="text-[11px] text-accent">
+              {playingCount} loop{playingCount !== 1 ? 's' : ''}
+            </span>
+          )}
+        </button>
+
+        <div className="flex items-center gap-2">
+          <div className="flex items-center gap-1 bg-surface border border-border rounded-lg px-2 py-1">
+            <span className="text-[10px] text-gray-600 uppercase tracking-wider">BPM</span>
+            <input
+              type="number"
+              min={40} max={300} step={1}
+              value={gridBpm}
+              onChange={e => setGridBpm(e.target.value)}
+              placeholder={bpm ? String(Math.round(bpm)) : '—'}
+              className="w-10 bg-transparent text-xs text-gray-300 text-center focus:outline-none focus:text-white"
+              style={{ MozAppearance: 'textfield' }}
+            />
+          </div>
+          <button
+            onClick={() => setOpen(v => !v)}
+            className="w-6 h-6 flex items-center justify-center rounded text-gray-500 hover:text-gray-300 hover:bg-white/5 transition-all"
+            title={open ? 'Collapse' : 'Expand'}
+          >
+            <svg width="12" height="12" viewBox="0 0 12 12" fill="none"
+                 stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              {open
+                ? <polyline points="2,8 6,4 10,8" />
+                : <polyline points="2,4 6,8 10,4" />
+              }
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {/* ── Body ────────────────────────────────────────────────────────────── */}
+      {open && (
+        <div className="border-t border-border pt-3">
+
+          {/* Master timeline */}
+          <MasterTimeline
+            masterStartRef={masterStartRef}
+            masterLenRef={masterLenRef}
+            audioCtxRef={audioCtxRef}
+            bpm={gridBpmNum}
+            masterLen={masterLen}
+          />
+
+          {/* Track rows */}
+          <div className="px-4">
+            {slots.map((slot, i) => (
+              <TrackRow
+                key={i}
+                slot={slot}
+                slotIdx={i}
+                bpm={gridBpmNum}
+                audioCtxRef={audioCtxRef}
+                masterStartRef={masterStartRef}
+                masterLenRef={masterLenRef}
+                onSlotClick={onSlotClick}
+                onRetrim={onRetrim}
+                onDelete={onDelete}
+                onVolumeChange={onVolumeChange}
+              />
+            ))}
+          </div>
+
+          {/* Add track */}
+          <div className="px-4 pb-3">
+            <button
+              onClick={onAddSlot}
+              className="w-full py-1.5 rounded-lg border border-dashed border-border text-gray-700 hover:border-accent/40 hover:text-accent/60 transition-colors text-xs flex items-center justify-center gap-2"
+            >
+              <span className="text-base leading-none">+</span>
+              <span>Add Track</span>
+            </button>
+          </div>
+
+          {/* LoopTrimmer — shown below tracks when trimming */}
+          {trimmingIdx !== -1 && (
+            <LoopTrimmer
+              slot={slots[trimmingIdx]}
+              slotIdx={trimmingIdx}
+              bpm={gridBpmNum}
+              audioCtxRef={audioCtxRef}
+              onCommit={onCommitTrim}
+              onCancel={onCancelRecord}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

src/components/LoopTrimmer.jsx

@@ -0,0 +1,337 @@
+import { useRef, useState, useEffect, useCallback } from 'react'
+
+function fmtMs(sec) {
+  return `${(sec * 1000).toFixed(0)}ms`
+}
+
+function fmtSec(sec) {
+  return sec < 10 ? `${sec.toFixed(2)}s` : `${sec.toFixed(1)}s`
+}
+
+export default function LoopTrimmer({ slot, slotIdx, bpm, audioCtxRef, onCommit, onCancel }) {
+  const canvasRef    = useRef(null)
+  const containerRef = useRef(null)
+  const previewRef   = useRef(null)   // AudioBufferSourceNode for preview
+
+  const [trimStart, setTrimStart] = useState(slot.trimStart)
+  const [trimEnd,   setTrimEnd]   = useState(slot.trimEnd)
+  const [previewing, setPreviewing] = useState(false)
+
+  // Refs so drag closures always have current values
+  const trimStartRef = useRef(trimStart)
+  const trimEndRef   = useRef(trimEnd)
+  useEffect(() => { trimStartRef.current = trimStart }, [trimStart])
+  useEffect(() => { trimEndRef.current   = trimEnd   }, [trimEnd])
+
+  const duration    = slot.audioBuffer?.duration ?? 0
+  const startSec    = trimStart * duration
+  const endSec      = trimEnd   * duration
+  const selectedSec = endSec - startSec
+
+  // Beat grid info — visual reference only, no snapping
+  const beatSec = bpm ? 60 / bpm : null
+  const barSec  = beatSec ? beatSec * 4 : null
+
+  // Stop preview when handles change
+  useEffect(() => {
+    if (previewing) stopPreview()
+  }, [trimStart, trimEnd]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => stopPreview()
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  function stopPreview() {
+    try { previewRef.current?.stop() } catch {}
+    previewRef.current = null
+    setPreviewing(false)
+  }
+
+  function togglePreview() {
+    if (previewing) { stopPreview(); return }
+    const ctx = audioCtxRef?.current
+    const buf = slot.audioBuffer
+    if (!ctx || !buf) return
+
+    // Resume context if suspended
+    if (ctx.state === 'suspended') ctx.resume().catch(() => {})
+
+    const sr          = buf.sampleRate
+    const startSample = Math.floor(trimStartRef.current * buf.length)
+    const endSample   = Math.ceil(trimEndRef.current   * buf.length)
+    const len         = Math.max(1, endSample - startSample)
+    const data        = buf.getChannelData(0).slice(startSample, endSample)
+
+    const previewBuf  = ctx.createBuffer(1, len, sr)
+    previewBuf.copyToChannel(data, 0)
+
+    const node = ctx.createBufferSource()
+    node.buffer    = previewBuf
+    node.loop      = true
+    node.loopStart = 0
+    node.loopEnd   = len / sr
+    node.connect(ctx.destination)
+    node.start()
+    node.onended = () => { previewRef.current = null; setPreviewing(false) }
+
+    previewRef.current = node
+    setPreviewing(true)
+  }
+
+  // Snap end handle to N bars from current start
+  function snapBars(n) {
+    if (!barSec || !duration) return
+    const newEnd = Math.min(1, trimStartRef.current + (n * barSec) / duration)
+    setTrimEnd(newEnd)
+    trimEndRef.current = newEnd
+    draw()
+  }
+
+  // ── Canvas draw ─────────────────────────────────────────────────────────────
+  const draw = useCallback(() => {
+    const canvas = canvasRef.current
+    if (!canvas || !slot.waveform) return
+    const rect = canvas.getBoundingClientRect()
+    if (rect.width === 0) return
+    const dpr = window.devicePixelRatio ?? 1
+    canvas.width  = rect.width  * dpr
+    canvas.height = rect.height * dpr
+    const ctx = canvas.getContext('2d')
+    ctx.scale(dpr, dpr)
+    const W  = rect.width
+    const H  = rect.height
+    const wf = slot.waveform
+    const N  = wf.length
+    const ts = trimStartRef.current
+    const te = trimEndRef.current
+
+    // Background
+    ctx.fillStyle = '#0f0f0f'
+    ctx.fillRect(0, 0, W, H)
+
+    // Dim regions outside selection
+    ctx.fillStyle = 'rgba(0,0,0,0.6)'
+    ctx.fillRect(0, 0, ts * W, H)
+    ctx.fillRect(te * W, 0, W - te * W, H)
+
+    // Beat grid — visual only, beat lines then bar lines (bars on top)
+    if (beatSec && duration) {
+      // Beat lines
+      ctx.strokeStyle = 'rgba(255,255,255,0.10)'
+      ctx.lineWidth   = 1
+      for (let t = 0; t <= duration; t += beatSec) {
+        const isBar = barSec ? (t % barSec) < beatSec * 0.4 : false
+        if (!isBar) {
+          const x = (t / duration) * W
+          ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke()
+        }
+      }
+      // Bar lines (brighter, thicker)
+      if (barSec) {
+        ctx.strokeStyle = 'rgba(168,85,247,0.55)'
+        ctx.lineWidth   = 1.5
+        for (let t = 0; t <= duration; t += barSec) {
+          const x = (t / duration) * W
+          ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke()
+          // Bar number label
+          const barNum = Math.round(t / barSec)
+          if (barNum > 0) {
+            ctx.fillStyle = 'rgba(168,85,247,0.5)'
+            ctx.font = `${9 * dpr / dpr}px monospace`
+            ctx.fillText(`${barNum}`, x + 3, 10)
+          }
+        }
+      }
+    }
+
+    // Waveform bars
+    const mid = H / 2
+    for (let i = 0; i < N; i++) {
+      const x     = (i / N) * W
+      const barW  = Math.max(1, W / N - 0.5)
+      const inSel = (i / N) >= ts && (i / N) <= te
+      ctx.fillStyle = inSel ? '#a855f7' : '#3b0764'
+      const h = wf[i] * mid * 0.88
+      ctx.fillRect(x, mid - h, barW, h * 2)
+    }
+
+    // Handle lines
+    ctx.strokeStyle = '#a855f7'
+    ctx.lineWidth   = 2
+    ctx.beginPath(); ctx.moveTo(ts * W, 0); ctx.lineTo(ts * W, H); ctx.stroke()
+    ctx.beginPath(); ctx.moveTo(te * W, 0); ctx.lineTo(te * W, H); ctx.stroke()
+  }, [slot.waveform, beatSec, barSec, duration])
+
+  useEffect(() => { draw() }, [draw, trimStart, trimEnd])
+  useEffect(() => {
+    const id = requestAnimationFrame(() => draw())
+    return () => cancelAnimationFrame(id)
+  }, [draw])
+
+  // ── Pointer → fraction ──────────────────────────────────────────────────────
+  function fracFromClientX(clientX) {
+    const el = containerRef.current
+    if (!el) return 0
+    const rect = el.getBoundingClientRect()
+    return Math.max(0, Math.min(1, (clientX - rect.left) / rect.width))
+  }
+
+  // ── Drag handles — free movement, no snapping ───────────────────────────────
+  function handleMouseDown(handle) {
+    return (e) => {
+      e.preventDefault()
+      function onMove(ev) {
+        const raw = fracFromClientX(ev.clientX)
+        if (handle === 'start') {
+          const c = Math.max(0, Math.min(raw, trimEndRef.current - 0.01))
+          setTrimStart(c); trimStartRef.current = c
+        } else {
+          const c = Math.max(trimStartRef.current + 0.01, Math.min(1, raw))
+          setTrimEnd(c); trimEndRef.current = c
+        }
+        draw()
+      }
+      function onUp() {
+        window.removeEventListener('mousemove', onMove)
+        window.removeEventListener('mouseup', onUp)
+      }
+      window.addEventListener('mousemove', onMove)
+      window.addEventListener('mouseup', onUp)
+    }
+  }
+
+  // Click canvas to move nearest handle
+  function handleCanvasClick(e) {
+    if (e.target !== canvasRef.current) return
+    const raw = fracFromClientX(e.clientX)
+    if (Math.abs(raw - trimStart) <= Math.abs(raw - trimEnd)) {
+      const c = Math.max(0, Math.min(raw, trimEndRef.current - 0.01))
+      setTrimStart(c); trimStartRef.current = c
+    } else {
+      const c = Math.max(trimStartRef.current + 0.01, Math.min(1, raw))
+      setTrimEnd(c); trimEndRef.current = c
+    }
+    draw()
+  }
+
+  return (
+    <div className="border-t border-border">
+      {/* Header row */}
+      <div className="flex items-center justify-between px-4 pt-3 pb-1">
+        <span className="text-[11px] uppercase tracking-wider text-gray-500">
+          Trim — Loop {slotIdx + 1}
+        </span>
+        <div className="flex items-center gap-3 text-xs text-gray-500 font-mono">
+          <span className="text-gray-600">{fmtMs(startSec)} → {fmtMs(endSec)}</span>
+          <span className="text-accent font-semibold">{fmtSec(selectedSec)}</span>
+        </div>
+      </div>
+
+      {/* Waveform + handles */}
+      <div
+        ref={containerRef}
+        className="relative mx-4 h-20 rounded-lg overflow-visible cursor-crosshair select-none"
+        onClick={handleCanvasClick}
+      >
+        <canvas ref={canvasRef} className="w-full h-full block rounded-lg" />
+
+        {/* Left handle */}
+        <div
+          className="absolute top-0 bottom-0 w-5 -translate-x-1/2 cursor-ew-resize flex items-center justify-center group z-10"
+          style={{ left: `${trimStart * 100}%` }}
+          onMouseDown={handleMouseDown('start')}
+          onClick={e => e.stopPropagation()}
+        >
+          <div className="w-0.5 h-full bg-accent/70 group-hover:bg-accent group-hover:w-1 transition-all" />
+          <div className="absolute w-3.5 h-3.5 rounded-full bg-accent border-2 border-white/20 shadow-lg top-1/2 -translate-y-1/2" />
+          <div className="absolute bottom-full mb-1 text-[9px] font-mono text-accent bg-panel border border-border rounded px-1 py-0.5 whitespace-nowrap pointer-events-none">
+            {fmtMs(startSec)}
+          </div>
+        </div>
+
+        {/* Right handle */}
+        <div
+          className="absolute top-0 bottom-0 w-5 -translate-x-1/2 cursor-ew-resize flex items-center justify-center group z-10"
+          style={{ left: `${trimEnd * 100}%` }}
+          onMouseDown={handleMouseDown('end')}
+          onClick={e => e.stopPropagation()}
+        >
+          <div className="w-0.5 h-full bg-accent/70 group-hover:bg-accent group-hover:w-1 transition-all" />
+          <div className="absolute w-3.5 h-3.5 rounded-full bg-accent border-2 border-white/20 shadow-lg top-1/2 -translate-y-1/2" />
+          <div className="absolute bottom-full mb-1 text-[9px] font-mono text-accent bg-panel border border-border rounded px-1 py-0.5 whitespace-nowrap pointer-events-none">
+            {fmtMs(endSec)}
+          </div>
+        </div>
+      </div>
+
+      {/* Toolbar: preview + bar snap + hint */}
+      <div className="flex items-center gap-2 px-4 pt-2 pb-1 flex-wrap">
+        {/* Preview play/stop */}
+        <button
+          onClick={togglePreview}
+          className={`flex items-center gap-1 px-2.5 py-1 rounded-lg border text-xs font-medium transition-all ${
+            previewing
+              ? 'bg-accent/20 border-accent text-accent'
+              : 'bg-surface border-border text-gray-400 hover:text-white hover:border-gray-500'
+          }`}
+          title="Preview loop selection"
+        >
+          {previewing
+            ? <><span>⏹</span><span>Stop</span></>
+            : <><span>▶</span><span>Preview</span></>
+          }
+        </button>
+
+        {/* Bar snap buttons — only if BPM is set */}
+        {barSec && duration && (
+          <div className="flex items-center gap-1 ml-1">
+            <span className="text-[10px] text-gray-600 uppercase tracking-wider mr-0.5">snap end →</span>
+            {[1, 2, 4].map(n => {
+              const endFrac = trimStart + (n * barSec) / duration
+              const fits    = endFrac <= 1.02
+              return (
+                <button
+                  key={n}
+                  onClick={() => snapBars(n)}
+                  disabled={!fits}
+                  className="px-2 py-0.5 rounded border border-border text-[10px] text-gray-400 hover:text-accent hover:border-accent/50 transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+                  title={`Set end to ${n} bar${n > 1 ? 's' : ''} from start`}
+                >
+                  {n} bar{n > 1 ? 's' : ''}
+                </button>
+              )
+            })}
+          </div>
+        )}
+
+        <span className="ml-auto text-[10px] text-gray-700">
+          {bpm ? `${bpm} BPM grid` : 'no BPM — trim freely'}
+        </span>
+      </div>
+
+      {/* Action buttons */}
+      <div className="flex gap-2 px-4 pb-3">
+        <button
+          onClick={() => { stopPreview(); onCommit(slotIdx, trimStart, trimEnd) }}
+          className="px-5 py-1.5 bg-accent text-white text-sm font-bold rounded-lg hover:bg-accent/80 transition-colors"
+        >
+          Set Loop ▶
+        </button>
+        <button
+          onClick={() => { stopPreview(); onCommit(slotIdx, 0, 1) }}
+          className="px-4 py-1.5 bg-surface border border-border text-gray-400 text-sm rounded-lg hover:text-white hover:border-gray-500 transition-colors"
+          title="Use the full recording without trimming"
+        >
+          Use Full
+        </button>
+        <button
+          onClick={() => { stopPreview(); onCancel(slotIdx) }}
+          className="px-4 py-1.5 bg-surface border border-border text-gray-500 text-sm rounded-lg hover:text-red-400 hover:border-red-800 transition-colors ml-auto"
+        >
+          Re-record
+        </button>
+      </div>
+    </div>
+  )
+}

src/components/MiniPiano.jsx

@@ -0,0 +1,134 @@
+// 2-octave mini piano keyboard showing technique notes
+// Props:
+//   rootPc  — root pitch class 0-11
+//   lh      — array of semitone intervals above root (left hand, shown in blue)
+//   rh      — array of semitone intervals above root (right hand, shown in purple)
+
+const OCTAVES = 2
+const WW = 22    // white key width
+const WH = 60    // white key height
+const BW = 14    // black key width
+const BH = 38    // black key height
+
+// White key pitch classes within an octave, in order
+const WHITE_PCS = [0, 2, 4, 5, 7, 9, 11]  // C D E F G A B
+const WHITE_NAMES = ['C','D','E','F','G','A','B']
+// Black key offsets (x position relative to white key 0) and pitch classes
+const BLACK_OFFSETS = [
+  { pc: 1,  afterWhite: 0 },  // C#
+  { pc: 3,  afterWhite: 1 },  // D#
+  { pc: 6,  afterWhite: 3 },  // F#
+  { pc: 8,  afterWhite: 4 },  // G#
+  { pc: 10, afterWhite: 5 },  // A#
+]
+
+const TOTAL_WHITES = WHITE_PCS.length * OCTAVES  // 14
+const SVG_W = WW * TOTAL_WHITES + 2
+const SVG_H = WH + 24
+
+function noteColor(interval) {
+  // interval < 12 → first octave (root region), ≥12 → second octave
+  return interval < 12 ? '#a855f7' : '#c084fc'
+}
+
+function handLabel(hand) {
+  return hand === 'L' ? 'LH' : 'RH'
+}
+
+export default function MiniPiano({ rootPc, lh = [], rh = [] }) {
+  // Build a set of highlighted notes: pc → { hand, interval }
+  // We span 2 octaves (semitones 0…23 above root), mapped to absolute pitch classes
+  const highlights = new Map()  // absIdx → { color, label }
+
+  function addNotes(intervals, hand) {
+    for (const iv of intervals) {
+      const octave = Math.floor(iv / 12)
+      const pc = (rootPc + iv) % 12
+      const absIdx = octave * 12 + pc  // unique index per octave slot
+      highlights.set(`${octave}-${pc}`, { color: hand === 'L' ? '#3b82f6' : '#a855f7', label: handLabel(hand) })
+    }
+  }
+  addNotes(lh, 'L')
+  addNotes(rh, 'R')
+
+  function isHighlighted(octave, pc) {
+    return highlights.get(`${octave}-${pc}`)
+  }
+
+  // White keys
+  const whites = []
+  for (let oct = 0; oct < OCTAVES; oct++) {
+    for (let wi = 0; wi < WHITE_PCS.length; wi++) {
+      const pc = WHITE_PCS[wi]
+      const absWi = oct * WHITE_PCS.length + wi
+      const x = absWi * WW + 1
+      const hl = isHighlighted(oct, pc)
+      whites.push({ x, pc, oct, wi, absWi, hl, name: WHITE_NAMES[wi] + (oct + 4) })
+    }
+  }
+
+  // Black keys
+  const blacks = []
+  for (let oct = 0; oct < OCTAVES; oct++) {
+    for (const { pc, afterWhite } of BLACK_OFFSETS) {
+      const absWi = oct * WHITE_PCS.length + afterWhite
+      const x = absWi * WW + WW - BW / 2
+      const hl = isHighlighted(oct, pc)
+      blacks.push({ x, pc, oct, hl })
+    }
+  }
+
+  return (
+    <svg width={SVG_W} height={SVG_H} viewBox={`0 0 ${SVG_W} ${SVG_H}`} className="overflow-visible">
+      {/* White keys */}
+      {whites.map(({ x, hl, name, absWi }) => (
+        <g key={`w${absWi}`}>
+          <rect
+            x={x} y={1} width={WW - 1} height={WH}
+            rx={2}
+            fill={hl ? hl.color : '#f5f5f5'}
+            stroke="#374151"
+            strokeWidth={0.5}
+          />
+          {hl && (
+            <text x={x + (WW - 1) / 2} y={WH - 8}
+              textAnchor="middle" fill="white" fontSize={7} fontWeight="bold">
+              {hl.label}
+            </text>
+          )}
+        </g>
+      ))}
+
+      {/* Black keys */}
+      {blacks.map(({ x, pc, oct, hl }, i) => (
+        <g key={`b${oct}-${pc}`}>
+          <rect
+            x={x} y={1} width={BW} height={BH}
+            rx={2}
+            fill={hl ? hl.color : '#1f2937'}
+            stroke="#111827"
+            strokeWidth={0.5}
+          />
+          {hl && (
+            <text x={x + BW / 2} y={BH - 5}
+              textAnchor="middle" fill="white" fontSize={6} fontWeight="bold">
+              {hl.label}
+            </text>
+          )}
+        </g>
+      ))}
+
+      {/* Root label at bottom */}
+      {whites.map(({ x, pc, oct, name, absWi }) => {
+        const isRoot = pc === rootPc && oct === 0
+        if (!isRoot) return null
+        return (
+          <text key={`lbl${absWi}`} x={x + (WW - 1) / 2} y={WH + 14}
+            textAnchor="middle" fill="#a855f7" fontSize={8} fontWeight="bold">
+            R
+          </text>
+        )
+      })}
+    </svg>
+  )
+}

src/components/MusicTeacher.jsx

@@ -0,0 +1,410 @@
+import { useState, useRef, useEffect, useCallback } from 'react'
+
+const MODEL = 'claude-sonnet-4-6'
+const API_URL = 'https://api.anthropic.com/v1/messages'
+const LS_KEY = 'wtf_teacher_key'
+
+// ── System prompt — rebuilt with live session context on every request ────────
+function buildSystemPrompt({ keyInfo, currentChord, bpm, chordHistory }) {
+  const keyStr   = keyInfo   ? `${keyInfo.root} ${keyInfo.mode}` : 'not detected yet'
+  const chordStr = currentChord?.name ?? 'none detected'
+  const bpmStr   = bpm       ? `${Math.round(bpm)} BPM` : 'not detected'
+  const histStr  = chordHistory?.length
+    ? chordHistory.map(c => c.name).join(' → ')
+    : 'none yet'
+
+  return `You are an expert music teacher and session musician embedded in JamBuddy, a real-time chord and key detection app for guitarists and keyboard players at live jam sessions.
+
+LIVE SESSION CONTEXT (updated in real time):
+• Detected key: ${keyStr}
+• Current chord: ${chordStr}
+• BPM: ${bpmStr}
+• Recent chord history: ${histStr}
+
+YOUR ROLE:
+- Explain chords, scales, and music theory in plain, friendly language
+- Suggest what to practice based on the current key and chord progression
+- Teach playing techniques: fretting, strumming patterns, chord voicings, fingerpicking
+- Help musicians understand WHY things sound the way they do
+- Suggest progressions that work with whatever the user is currently playing
+- Adjust depth to the user — explain basics if they seem new, go deep if they ask for it
+- Point out interesting connections: "that Dm7 works here because it's the ii chord in C major"
+
+STYLE:
+- Keep responses focused and practical — this is a live jam, not a classroom
+- Use plain text, not markdown. Short paragraphs. Bullet points with "-" are fine.
+- If someone asks about the current chord or key, use the live context above
+- Max ~150 words unless someone asks for a deep dive`
+}
+
+// ── Quick-action chips ────────────────────────────────────────────────────────
+const CHIPS = [
+  { label: 'What should I practice?',    msg: 'Based on what I\'m playing right now, what\'s the most useful thing I could practice?' },
+  { label: 'Explain current chord',       msg: 'Explain the current chord I\'m playing — what it is, why it sounds the way it does, and where it tends to appear.' },
+  { label: 'Scales that work here',       msg: 'What scales work over the current key and chord? Which notes sound best to improvise with?' },
+  { label: 'Suggest a progression',       msg: 'Suggest a chord progression that fits the current key. Give me something interesting to try.' },
+  { label: 'Technique tip',              msg: 'Give me one technique tip — something I can work on in the next few minutes to sound better.' },
+  { label: 'Why does this sound good?',  msg: 'Looking at my recent chord history, why do these chords sound good together? What\'s the music theory behind it?' },
+]
+
+// ── Simple text renderer (bold + line breaks) ─────────────────────────────────
+function MessageText({ text }) {
+  const lines = text.split('\n')
+  return (
+    <div className="space-y-1">
+      {lines.map((line, i) => {
+        if (!line.trim()) return <div key={i} className="h-1" />
+        // Bold: **text**
+        const parts = line.split(/(\*\*[^*]+\*\*)/)
+        return (
+          <p key={i} className="leading-relaxed">
+            {parts.map((part, j) =>
+              part.startsWith('**') && part.endsWith('**')
+                ? <strong key={j} className="text-white font-semibold">{part.slice(2, -2)}</strong>
+                : part
+            )}
+          </p>
+        )
+      })}
+    </div>
+  )
+}
+
+// ── Main component ────────────────────────────────────────────────────────────
+export default function MusicTeacher({ keyInfo, currentChord, bpm, chordHistory }) {
+  const [open,       setOpen]       = useState(false)
+  const [apiKey,     setApiKey]     = useState(() => localStorage.getItem(LS_KEY) ?? '')
+  const [showKeyInput, setShowKeyInput] = useState(false)
+  const [messages,   setMessages]   = useState([])      // [{role, content}]
+  const [input,      setInput]      = useState('')
+  const [loading,    setLoading]    = useState(false)
+  const [streaming,  setStreaming]  = useState('')      // partial response being streamed
+  const [error,      setError]      = useState(null)
+
+  const scrollRef    = useRef(null)
+  const inputRef     = useRef(null)
+  const abortRef     = useRef(null)
+
+  // Always scroll to bottom on new content
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight
+    }
+  }, [messages, streaming])
+
+  // Focus input when panel opens
+  useEffect(() => {
+    if (open && apiKey && inputRef.current) {
+      setTimeout(() => inputRef.current?.focus(), 50)
+    }
+  }, [open, apiKey])
+
+  function saveKey(k) {
+    setApiKey(k)
+    localStorage.setItem(LS_KEY, k)
+  }
+
+  function clearKey() {
+    setApiKey('')
+    localStorage.removeItem(LS_KEY)
+    setShowKeyInput(true)
+  }
+
+  const sendMessage = useCallback(async (userText) => {
+    if (!userText.trim() || loading || !apiKey) return
+
+    setError(null)
+    const userMsg = { role: 'user', content: userText.trim() }
+    const nextMessages = [...messages, userMsg]
+    setMessages(nextMessages)
+    setInput('')
+    setLoading(true)
+    setStreaming('')
+
+    const context = { keyInfo, currentChord, bpm, chordHistory }
+
+    try {
+      const ctrl = new AbortController()
+      abortRef.current = ctrl
+
+      const res = await fetch(API_URL, {
+        method: 'POST',
+        signal: ctrl.signal,
+        headers: {
+          'x-api-key':                              apiKey,
+          'anthropic-version':                      '2023-06-01',
+          'anthropic-dangerous-direct-browser-access': 'true',
+          'content-type':                           'application/json',
+        },
+        body: JSON.stringify({
+          model:      MODEL,
+          max_tokens: 1024,
+          stream:     true,
+          system:     buildSystemPrompt(context),
+          messages:   nextMessages,
+        }),
+      })
+
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}))
+        throw new Error(body?.error?.message ?? `API error ${res.status}`)
+      }
+
+      const reader  = res.body.getReader()
+      const decoder = new TextDecoder()
+      let full = ''
+
+      while (true) {
+        const { done, value } = await reader.read()
+        if (done) break
+        const chunk = decoder.decode(value, { stream: true })
+        for (const line of chunk.split('\n')) {
+          if (!line.startsWith('data: ')) continue
+          const data = line.slice(6).trim()
+          if (data === '[DONE]' || !data) continue
+          try {
+            const ev = JSON.parse(data)
+            if (ev.type === 'content_block_delta' && ev.delta?.type === 'text_delta') {
+              full += ev.delta.text
+              setStreaming(full)
+            }
+          } catch {}
+        }
+      }
+
+      setMessages(prev => [...prev, { role: 'assistant', content: full }])
+      setStreaming('')
+    } catch (err) {
+      if (err.name !== 'AbortError') {
+        setError(err.message)
+      }
+    } finally {
+      setLoading(false)
+      abortRef.current = null
+    }
+  }, [messages, loading, apiKey, keyInfo, currentChord, bpm, chordHistory])
+
+  function stopGeneration() {
+    abortRef.current?.abort()
+    if (streaming) {
+      setMessages(prev => [...prev, { role: 'assistant', content: streaming }])
+      setStreaming('')
+    }
+    setLoading(false)
+  }
+
+  function handleKeyDown(e) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      sendMessage(input)
+    }
+  }
+
+  const hasKey = apiKey.trim().length > 0
+
+  // Dot: purple when API key set, gray otherwise
+  const dotClass = hasKey ? 'bg-accent' : 'bg-gray-700'
+
+  return (
+    <div className="mb-3 bg-panel border border-border rounded-xl overflow-hidden">
+      {/* ── Header ─────────────────────────────────────────────────────────── */}
+      <div className="flex items-center justify-between px-4 py-2 text-sm text-gray-400">
+        <button
+          onClick={() => setOpen(v => !v)}
+          className="flex items-center gap-2 hover:text-gray-200 transition-colors text-left"
+        >
+          <span className={`w-2 h-2 rounded-full shrink-0 ${dotClass}`} />
+          <span>MUSIC TEACHER</span>
+          <span className="text-[11px] text-gray-600">AI · Claude</span>
+        </button>
+        <div className="flex items-center gap-2">
+          {/* Key indicator */}
+          <button
+            onClick={() => setShowKeyInput(v => !v)}
+            className="text-[10px] text-gray-600 hover:text-gray-400 transition-colors px-1.5 py-0.5 rounded border border-transparent hover:border-border"
+            title={hasKey ? 'API key set — click to change' : 'Set API key'}
+          >
+            {hasKey ? '🔑 key set' : '🔑 add key'}
+          </button>
+          <button
+            onClick={() => setOpen(v => !v)}
+            className="w-6 h-6 flex items-center justify-center rounded text-gray-500 hover:text-gray-300 hover:bg-white/5 transition-all"
+          >
+            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              {open
+                ? <polyline points="2,8 6,4 10,8" />
+                : <polyline points="2,4 6,8 10,4" />
+              }
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {/* ── Body ───────────────────────────────────────────────────────────── */}
+      {open && (
+        <div className="border-t border-border">
+
+          {/* API key input (shown when no key or user wants to change) */}
+          {(!hasKey || showKeyInput) && (
+            <div className="px-4 py-3 bg-surface/50 border-b border-border">
+              <p className="text-xs text-gray-500 mb-2">
+                Enter your <a className="text-accent underline" href="https://console.anthropic.com/keys" target="_blank" rel="noreferrer">Anthropic API key</a> to enable the music teacher. Stored locally on your device only.
+              </p>
+              <div className="flex gap-2">
+                <input
+                  type="password"
+                  value={apiKey}
+                  onChange={e => setApiKey(e.target.value)}
+                  placeholder="sk-ant-..."
+                  className="flex-1 px-2.5 py-1.5 bg-surface border border-border rounded-lg text-xs text-gray-300 focus:outline-none focus:border-accent font-mono"
+                />
+                <button
+                  onClick={() => { saveKey(apiKey); setShowKeyInput(false) }}
+                  disabled={!apiKey.trim()}
+                  className="px-3 py-1.5 bg-accent text-white text-xs font-bold rounded-lg hover:bg-accent/80 transition-colors disabled:opacity-40"
+                >
+                  Save
+                </button>
+                {hasKey && (
+                  <button
+                    onClick={() => setShowKeyInput(false)}
+                    className="px-3 py-1.5 text-xs text-gray-500 hover:text-gray-300 transition-colors"
+                  >
+                    Cancel
+                  </button>
+                )}
+              </div>
+            </div>
+          )}
+
+          {hasKey && (
+            <>
+              {/* Live session context strip */}
+              <div className="flex items-center gap-3 px-4 py-2 border-b border-border text-[10px] font-mono">
+                <span className="text-gray-600 uppercase tracking-wider">Now:</span>
+                {keyInfo ? (
+                  <span className="text-accent">{keyInfo.root} {keyInfo.mode}</span>
+                ) : (
+                  <span className="text-gray-700">no key</span>
+                )}
+                <span className="text-gray-800">·</span>
+                {currentChord ? (
+                  <span className="text-white">{currentChord.name}</span>
+                ) : (
+                  <span className="text-gray-700">no chord</span>
+                )}
+                <span className="text-gray-800">·</span>
+                <span className="text-gray-500">{bpm ? `${Math.round(bpm)} bpm` : '— bpm'}</span>
+                {messages.length > 0 && (
+                  <button
+                    onClick={() => { setMessages([]); setError(null) }}
+                    className="ml-auto text-gray-700 hover:text-gray-400 transition-colors"
+                    title="Clear conversation"
+                  >
+                    clear chat
+                  </button>
+                )}
+              </div>
+
+              {/* Chat messages */}
+              {messages.length > 0 || streaming ? (
+                <div
+                  ref={scrollRef}
+                  className="max-h-72 overflow-y-auto px-4 py-3 space-y-3 text-xs"
+                >
+                  {messages.map((m, i) => (
+                    <div key={i} className={m.role === 'user' ? 'flex justify-end' : ''}>
+                      {m.role === 'user' ? (
+                        <div className="max-w-[80%] bg-accent/20 border border-accent/30 rounded-xl rounded-tr-sm px-3 py-2 text-gray-200">
+                          {m.content}
+                        </div>
+                      ) : (
+                        <div className="text-gray-300 leading-relaxed">
+                          <MessageText text={m.content} />
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                  {streaming && (
+                    <div className="text-gray-300 text-xs leading-relaxed">
+                      <MessageText text={streaming} />
+                      <span className="inline-block w-1.5 h-3.5 bg-accent/70 animate-pulse ml-0.5 align-middle" />
+                    </div>
+                  )}
+                  {error && (
+                    <div className="text-red-400 text-xs bg-red-950/30 border border-red-900/50 rounded-lg px-3 py-2">
+                      {error}
+                    </div>
+                  )}
+                </div>
+              ) : (
+                /* Quick-action chips (shown when no chat history yet) */
+                <div className="px-4 py-3">
+                  <p className="text-[10px] text-gray-700 mb-2 uppercase tracking-wider">Ask something</p>
+                  <div className="flex flex-wrap gap-1.5">
+                    {CHIPS.map(chip => (
+                      <button
+                        key={chip.label}
+                        onClick={() => sendMessage(chip.msg)}
+                        className="px-2.5 py-1 bg-surface border border-border rounded-full text-[10px] text-gray-400 hover:text-white hover:border-accent/50 hover:bg-accent/10 transition-all"
+                      >
+                        {chip.label}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Input row */}
+              <div className="px-4 py-3 border-t border-border flex gap-2 items-end">
+                <textarea
+                  ref={inputRef}
+                  value={input}
+                  onChange={e => setInput(e.target.value)}
+                  onKeyDown={handleKeyDown}
+                  placeholder="Ask anything about music theory, technique, or what to play…"
+                  rows={1}
+                  className="flex-1 px-3 py-2 bg-surface border border-border rounded-xl text-xs text-gray-300 placeholder-gray-700 focus:outline-none focus:border-accent resize-none leading-relaxed"
+                  style={{ maxHeight: '80px', overflowY: 'auto' }}
+                />
+                {loading ? (
+                  <button
+                    onClick={stopGeneration}
+                    className="px-3 py-2 bg-surface border border-border text-gray-500 hover:text-red-400 hover:border-red-800 text-xs rounded-xl transition-colors shrink-0"
+                    title="Stop"
+                  >
+                    ⏹
+                  </button>
+                ) : (
+                  <button
+                    onClick={() => sendMessage(input)}
+                    disabled={!input.trim()}
+                    className="px-3 py-2 bg-accent text-white text-xs font-bold rounded-xl hover:bg-accent/80 transition-colors disabled:opacity-40 shrink-0"
+                  >
+                    Send
+                  </button>
+                )}
+              </div>
+
+              {/* Quick chips after first message */}
+              {messages.length > 0 && (
+                <div className="px-4 pb-3 flex flex-wrap gap-1.5">
+                  {CHIPS.slice(0, 4).map(chip => (
+                    <button
+                      key={chip.label}
+                      onClick={() => sendMessage(chip.msg)}
+                      disabled={loading}
+                      className="px-2 py-0.5 bg-surface border border-border rounded-full text-[9px] text-gray-600 hover:text-gray-300 hover:border-accent/30 transition-all disabled:opacity-30"
+                    >
+                      {chip.label}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

src/components/ProgressionBanner.jsx

@@ -17,7 +17,7 @@ function findLoopPosition(chordHistory, progression) {
   return progression.indexOf(last)
 }
 
-export default function ProgressionBanner({ chordHistory, keyInfo, detectedProgression, currentChord }) {
+export default function ProgressionBanner({ chordHistory, keyInfo, detectedProgression, currentChord, onChordClick }) {
   const { root, mode, confidence } = keyInfo ?? {}
 
   const visible = chordHistory.slice(-HISTORY_SHOWN)
@@ -75,10 +75,11 @@ export default function ProgressionBanner({ chordHistory, keyInfo, detectedProgr
                     key={i}
                     ref={isCurrent ? currentRef : null}
                     style={{ opacity }}
-                    className={`flex flex-col items-center shrink-0 px-2 py-1 rounded-xl transition-colors duration-200 ${
+                    onClick={() => onChordClick?.(chord)}
+                    className={`flex flex-col items-center shrink-0 px-2 py-1 rounded-xl transition-colors duration-200 cursor-pointer ${
                       isCurrent
-                        ? 'bg-accent/10 border border-accent/40 ring-1 ring-accent/20'
-                        : 'border border-transparent'
+                        ? 'bg-accent/10 border border-accent/40 ring-1 ring-accent/20 hover:bg-accent/20'
+                        : 'border border-transparent hover:border-border hover:bg-panel'
                     }`}
                   >
                     <span className={`font-black leading-none tracking-tight ${
@@ -108,10 +109,11 @@ export default function ProgressionBanner({ chordHistory, keyInfo, detectedProgr
               return (
                 <div
                   key={i}
-                  className={`flex flex-col items-center px-2 py-0.5 rounded-lg border transition-all duration-200 ${
+                  onClick={() => onChordClick?.(chord)}
+                  className={`flex flex-col items-center px-2 py-0.5 rounded-lg border transition-all duration-200 cursor-pointer ${
                     isActive
-                      ? 'bg-accent/20 border-accent shadow-[0_0_10px_rgba(168,85,247,0.3)]'
-                      : 'bg-border border-border'
+                      ? 'bg-accent/20 border-accent shadow-[0_0_10px_rgba(168,85,247,0.3)] hover:bg-accent/30'
+                      : 'bg-border border-border hover:border-gray-500'
                   }`}
                 >
                   <span className={`text-sm font-bold leading-none ${isActive ? 'text-accent' : 'text-gray-300'}`}>
@@ -132,11 +134,16 @@ export default function ProgressionBanner({ chordHistory, keyInfo, detectedProgr
       {/* ── Right: big chord ── */}
       <div className="hidden lg:flex w-[30%] flex-col items-center justify-center gap-1">
         {current ? (
-          <>
+          <button
+            onClick={() => onChordClick?.(current)}
+            className="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-accent/10 transition-colors group"
+            title="Click to see voicings"
+          >
             <p className="text-xs text-gray-600 uppercase tracking-widest">Now Playing</p>
-            <div className="text-6xl font-black text-amber-400 leading-none">{current}</div>
+            <div className="text-6xl font-black text-amber-400 leading-none group-hover:text-accent transition-colors">{current}</div>
             <div className="text-sm text-gray-500">{currentRN}</div>
-          </>
+            <p className="text-[10px] text-gray-700 group-hover:text-gray-500 transition-colors">tap for voicings</p>
+          </button>
         ) : (
           <p className="text-gray-600 text-xs text-center">Play a chord</p>
         )}

src/components/RiffDiagram.jsx

@@ -0,0 +1,98 @@
+// ─── Mini fretboard scale diagram ─────────────────────────────────────────────
+// Shows a 6-string × 5-fret window of scale tones.
+// Root notes → purple fill. Scale tones → dark grey fill.
+// Strings: top = s6 (low E), bottom = s1 (high e).
+// Window starts at the root fret on string 6.
+
+const OPEN_PITCHES = [4, 9, 2, 7, 11, 4]  // E A D G B e  (s6 … s1)
+const FRETS = 5
+
+export default function RiffDiagram({ rootPc, scaleIntervals = [0, 3, 5, 7, 10] }) {
+  if (rootPc === undefined || rootPc === null) return null
+
+  // Fret window starts where the root lands on s6 (low E)
+  const startFret = (rootPc - OPEN_PITCHES[0] + 12) % 12
+
+  // Which pitch classes are in the scale?
+  const scaleSet = new Set(scaleIntervals.map(i => (rootPc + i) % 12))
+
+  // Collect dots: { s (0=s6…5=s1), f (0-4 within window), isRoot }
+  const dots = []
+  for (let s = 0; s < 6; s++) {
+    for (let f = 0; f < FRETS; f++) {
+      const pc = (OPEN_PITCHES[s] + startFret + f) % 12
+      if (scaleSet.has(pc)) {
+        dots.push({ s, f, isRoot: pc === rootPc })
+      }
+    }
+  }
+
+  // SVG layout
+  const W = 152, H = 70
+  const mL = 6, mT = 14, mR = 6, mB = 4
+  const innerW = W - mL - mR   // 140
+  const innerH = H - mT - mB   // 52
+
+  const cellW = innerW / FRETS         // 28
+  const strGap = innerH / 5           // gap between 6 strings (5 gaps)
+
+  const sx = (f) => mL + f * cellW        // left edge of fret cell
+  const cx = (f) => mL + (f + 0.5) * cellW  // centre of fret cell
+  const sy = (s) => mT + s * strGap         // y of string s
+
+  return (
+    <svg width={W} height={H} className="shrink-0 overflow-visible">
+      {/* Fret separators (vertical lines) */}
+      {Array.from({ length: FRETS + 1 }, (_, f) => (
+        <line key={f}
+          x1={sx(f)} y1={mT - 2}
+          x2={sx(f)} y2={H - mB}
+          stroke={f === 0 ? '#555' : '#2a2a2a'}
+          strokeWidth={f === 0 ? 2 : 1}
+        />
+      ))}
+
+      {/* String lines (horizontal) */}
+      {Array.from({ length: 6 }, (_, s) => (
+        <line key={s}
+          x1={mL} y1={sy(s)}
+          x2={W - mR} y2={sy(s)}
+          stroke="#3a3a3a"
+          strokeWidth={s === 0 ? 1.5 : 1}
+        />
+      ))}
+
+      {/* Fret numbers above */}
+      {Array.from({ length: FRETS }, (_, f) => (
+        <text key={f}
+          x={cx(f)} y={9}
+          textAnchor="middle" fontSize={8}
+          fill={f === 0 && startFret > 0 ? '#a855f7' : '#555'}
+          fontWeight={f === 0 && startFret > 0 ? 'bold' : 'normal'}>
+          {startFret + f === 0 ? 'O' : startFret + f}
+        </text>
+      ))}
+
+      {/* Scale dots */}
+      {dots.map((d, i) => (
+        <circle key={i}
+          cx={cx(d.f)} cy={sy(d.s)}
+          r={4.5}
+          fill={d.isRoot ? '#a855f7' : '#3d3d3d'}
+          stroke={d.isRoot ? '#c084fc' : '#606060'}
+          strokeWidth={1}
+        />
+      ))}
+
+      {/* Root labels */}
+      {dots.filter(d => d.isRoot).map((d, i) => (
+        <text key={i}
+          x={cx(d.f)} y={sy(d.s) + 3.5}
+          textAnchor="middle" fontSize={6}
+          fill="white" fontWeight="bold">
+          R
+        </text>
+      ))}
+    </svg>
+  )
+}

src/components/Settings.jsx

@@ -1,3 +1,5 @@
+import { useRef, useEffect, useState } from 'react'
+
 const SETTINGS = [
   {
     section: 'Chord Detection',
@@ -70,7 +72,52 @@ const SETTINGS = [
   },
 ]
 
-export default function Settings({ config, onChange, onClose, onReset }) {
+export default function Settings({ config, onChange, onClose, onReset, monoColor, onMonoColorChange }) {
+  // Snapshot on mount so Cancel can restore
+  const savedConfig = useRef(config)
+  const savedMono = useRef(monoColor)
+
+  function handleCancel() {
+    Object.entries(savedConfig.current).forEach(([k, v]) => onChange(k, v))
+    onMonoColorChange(savedMono.current)
+    onClose()
+  }
+
+  function DeviceSelector({ config, onChange }) {
+    const [devices, setDevices] = useState([])
+
+    async function refresh() {
+      try {
+        if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) return
+        const list = await navigator.mediaDevices.enumerateDevices()
+        setDevices(list.filter(d => d.kind === 'audioinput'))
+      } catch (e) {
+        console.warn('enumerateDevices failed', e)
+      }
+    }
+
+    useEffect(() => { refresh() }, [])
+
+    return (
+      <div className="space-y-3">
+        <div className="flex gap-3 items-center">
+          <select
+            value={config.audioDeviceId ?? ''}
+            onChange={e => onChange('audioDeviceId', e.target.value === '' ? null : e.target.value)}
+            className="appearance-none bg-surface border border-border hover:border-gray-500 focus:border-accent focus:outline-none rounded-lg pl-3 pr-7 py-1 text-sm text-gray-200 cursor-pointer transition-colors w-full"
+          >
+            <option value="">System default</option>
+            {devices.map((d, i) => (
+              <option key={d.deviceId || i} value={d.deviceId}>{d.label || `Microphone ${i + 1}`}</option>
+            ))}
+          </select>
+          <button onClick={refresh} className="px-3 py-1 rounded-lg border border-border text-sm text-gray-400">Refresh</button>
+        </div>
+        <div className="text-xs text-gray-600">If device labels are empty, grant microphone permission first and hit Refresh.</div>
+      </div>
+    )
+  }
+
   return (
     <div className="fixed inset-0 bg-surface z-50 overflow-y-auto">
       <div className="max-w-2xl mx-auto px-6 py-8">
@@ -87,16 +134,42 @@ export default function Settings({ config, onChange, onClose, onReset }) {
             >
               Reset defaults
             </button>
+            <button
+              onClick={handleCancel}
+              className="px-4 py-2 rounded-lg text-sm border border-border text-gray-500 hover:text-gray-300 hover:border-gray-400 transition-all"
+            >
+              Cancel
+            </button>
             <button
               onClick={onClose}
               className="px-5 py-2 rounded-lg text-sm bg-accent hover:bg-purple-600 text-white font-semibold transition-all"
             >
-              Done
+              Save
             </button>
           </div>
         </div>
 
         <div className="space-y-8">
+
+          {/* ── Display ── */}
+          <div>
+            <h3 className="text-xs uppercase tracking-widest text-gray-500 mb-4 border-b border-border pb-2">
+              Display
+            </h3>
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-semibold text-gray-200">Mono Color Mode</p>
+                <p className="text-xs text-gray-600 mt-0.5">Use a single purple palette instead of purple + amber for note tiers.</p>
+              </div>
+              <button
+                onClick={() => onMonoColorChange(v => !v)}
+                className={`relative w-11 h-6 rounded-full transition-colors ${monoColor ? 'bg-accent' : 'bg-gray-700'}`}
+              >
+                <span className={`absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow transition-transform ${monoColor ? 'translate-x-5' : 'translate-x-0'}`} />
+              </button>
+            </div>
+          </div>
+
           {SETTINGS.map(section => (
             <div key={section.section}>
               <h3 className="text-xs uppercase tracking-widest text-gray-500 mb-4 border-b border-border pb-2">
@@ -137,6 +210,14 @@ export default function Settings({ config, onChange, onClose, onReset }) {
               </div>
             </div>
           ))}
+
+          {/* Audio device selector */}
+          <div>
+            <h3 className="text-xs uppercase tracking-widest text-gray-500 mb-4 border-b border-border pb-2">
+              Microphone
+            </h3>
+            <DeviceSelector config={config} onChange={onChange} />
+          </div>
         </div>
 
       </div>

src/components/Tuner.jsx

@@ -108,17 +108,14 @@ export default function Tuner() {
 
 
   return (
-    <div className="p-6 bg-panel border border-border rounded-xl text-center">
-      <div className="flex items-start justify-between mb-4">
-        <h3 className="text-lg font-semibold">Tuner</h3>
-        <div>
-          <button
-            onClick={() => (isListening ? stopListening() : startListening())}
-            className={`px-4 py-2 rounded-full text-sm font-semibold ${isListening ? 'bg-red-600' : 'bg-accent'}`}
-          >
-            {isListening ? 'Stop' : 'Start'}
-          </button>
-        </div>
+    <div className="p-6 text-center">
+      <div className="flex items-start justify-end mb-4">
+        <button
+          onClick={() => (isListening ? stopListening() : startListening())}
+          className={`px-4 py-2 rounded-full text-sm font-semibold ${isListening ? 'bg-red-600' : 'bg-accent'}`}
+        >
+          {isListening ? 'Stop' : 'Start'}
+        </button>
       </div>
 
       <div className="w-full flex flex-col items-center">

src/lib/education.js

@@ -0,0 +1,873 @@
+import { NOTES, CHORD_TYPES } from './theory'
+
+// ─── Parse helper (self-contained, mirrors voicings.js) ───────────────────────
+export function parseChord(name) {
+  if (!name) return null
+  const FLAT = ['C','Db','D','Eb','E','F','Gb','G','Ab','A','Bb','B']
+  let rest = name
+  let root = rest.length > 1 && (rest[1] === '#' || rest[1] === 'b')
+    ? (rest = rest.slice(2), name.slice(0, 2))
+    : (rest = rest.slice(1), name.slice(0, 1))
+  let rootPc = NOTES.indexOf(root)
+  if (rootPc === -1) rootPc = FLAT.indexOf(root)
+  if (rootPc === -1) return null
+  const suffixMap = {
+    '': 'maj', 'm': 'min', 'min': 'min', 'maj': 'maj',
+    '7': 'dom7', 'maj7': 'maj7', 'm7': 'min7', 'min7': 'min7',
+    'dim': 'dim', 'dim7': 'dim7', 'm7b5': 'half_dim', 'ø': 'half_dim',
+    'aug': 'aug', '+': 'aug',
+    'sus4': 'sus4', 'sus2': 'sus2',
+    '6': 'maj6', 'm6': 'min6', 'add9': 'add9',
+  }
+  return { rootPc, type: suffixMap[rest] ?? 'maj' }
+}
+
+function chordName(rootPc, type) {
+  return NOTES[rootPc] + (CHORD_TYPES[type]?.suffix ?? '')
+}
+
+// ─── Famous progressions ──────────────────────────────────────────────────────
+// degrees[] — semitone offsets from tonic
+// qualities[] — chord type keys (CHORD_TYPES) for each degree
+// mode — the mode this progression is naturally written in
+// styleVariations — how genre players re-harmonise these chords
+
+export const FAMOUS_PROGRESSIONS = [
+  {
+    id: 'axis',
+    name: 'Axis Progression',
+    pattern: 'I – V – vi – IV',
+    degrees: [0, 7, 9, 5],
+    qualities: ['maj', 'maj', 'min', 'maj'],
+    mode: 'major',
+    genre: ['Pop', 'Rock'],
+    songs: ['Let It Be — Beatles', 'With or Without You — U2', 'Someone Like You — Adele', "Don't Stop Believin' — Journey", 'Wonderwall — Oasis', 'Demons — Imagine Dragons'],
+    description: 'The defining progression of modern pop. Works in every genre and tempo.',
+    tip: 'Try starting on the vi instead — suddenly it feels darker and more yearning.',
+    styleVariations: [
+      { label: 'Jazz',    pattern: 'Imaj7 – V7 – vim7 – IVmaj7',  qualities: ['maj7','dom7','min7','maj7'] },
+      { label: 'Soul',    pattern: 'Imaj9 – V9 – vim9 – IVmaj9',   qualities: ['maj7','dom7','min7','maj7'] },
+      { label: 'Blues',   pattern: 'I7 – V7 – vi7 – IV7',           qualities: ['dom7','dom7','dom7','dom7'] },
+      { label: 'Ambient', pattern: 'Isus2 – Vsus2 – vim7 – IVadd9', qualities: ['sus2','sus2','min7','add9'] },
+    ],
+  },
+  {
+    id: 'fifties',
+    name: '50s / Doo-Wop',
+    pattern: 'I – vi – IV – V',
+    degrees: [0, 9, 5, 7],
+    qualities: ['maj', 'min', 'maj', 'maj'],
+    mode: 'major',
+    genre: ['Pop', 'Doo-Wop', 'Rock'],
+    songs: ['Stand By Me — Ben E. King', 'Earth Angel', 'Blue Moon', 'Unchained Melody', 'Every Breath You Take — Police'],
+    description: 'The doo-wop backbone. Sweet, nostalgic, universally singable and timeless.',
+    tip: "The vi chord is the emotional pivot — it's the same root as in the Axis, just a different order.",
+    styleVariations: [
+      { label: 'Jazz',   pattern: 'Imaj7 – vim7 – IVmaj7 – V7',    qualities: ['maj7','min7','maj7','dom7'] },
+      { label: 'Soul',   pattern: 'I6 – vim7 – IV – V7sus4',        qualities: ['maj6','min7','maj','sus4'] },
+      { label: 'Funk',   pattern: 'Imaj9 – vim9 – IV9 – V9',        qualities: ['maj7','min7','dom7','dom7'] },
+    ],
+  },
+  {
+    id: 'canon',
+    name: 'Canon / Pachelbel',
+    pattern: 'I – V – vi – iii – IV – I – IV – V',
+    degrees: [0, 7, 9, 4, 5, 0, 5, 7],
+    qualities: ['maj','maj','min','min','maj','maj','maj','maj'],
+    mode: 'major',
+    genre: ['Classical', 'Pop', 'Rock'],
+    songs: ['Canon in D — Pachelbel', 'Basket Case — Green Day', 'Go West — Pet Shop Boys', 'Graduation — Vitamin C'],
+    description: 'Baroque timelessness. The descending bass line creates inevitable forward motion.',
+    tip: 'The iii chord is the secret ingredient — it bridges vi and IV with aristocratic weight.',
+    styleVariations: [
+      { label: 'Rock',    pattern: 'Power chords all the way down', qualities: [] },
+      { label: 'Neo-soul',pattern: 'Imaj9 – V9 – vim9 – iiim7 – IVmaj9', qualities: ['maj7','dom7','min7','min7','maj7'] },
+    ],
+  },
+  {
+    id: 'two_five_one',
+    name: 'ii – V – I (Jazz)',
+    pattern: 'iim7 – V7 – Imaj7',
+    degrees: [2, 7, 0],
+    qualities: ['min7', 'dom7', 'maj7'],
+    mode: 'major',
+    genre: ['Jazz', 'Bossa Nova'],
+    songs: ['Autumn Leaves', 'All The Things You Are', 'Fly Me To The Moon', 'The Girl From Ipanema', 'Misty'],
+    description: 'The bedrock of jazz harmony. The tritone in V7 resolves to I with beautiful tension.',
+    tip: 'The ii chord pre-resolves the V — together they create an inevitable pull to the I.',
+    styleVariations: [
+      { label: 'Bossa',   pattern: 'iim7 – V7(9) – Imaj9',          qualities: ['min7','dom7','maj7'] },
+      { label: 'Bebop',   pattern: 'iim7 – V7(♭9) – Imaj7(#11)',    qualities: ['min7','dom7','maj7'] },
+      { label: 'Modal',   pattern: 'im7 – IV7 (Dorian vamp)',        qualities: ['min7','dom7'] },
+    ],
+  },
+  {
+    id: 'blues_12',
+    name: '12-Bar Blues',
+    pattern: 'I – I – I – I – IV – IV – I – I – V – IV – I – V',
+    degrees: [0, 0, 0, 0, 5, 5, 0, 0, 7, 5, 0, 7],
+    qualities: ['dom7','dom7','dom7','dom7','dom7','dom7','dom7','dom7','dom7','dom7','dom7','dom7'],
+    mode: 'major',
+    genre: ['Blues', 'Rock', 'Jazz'],
+    songs: ['Johnny B. Goode — Chuck Berry', 'Pride & Joy — SRV', 'Crossroads — Robert Johnson', 'Hound Dog', 'Folsom Prison Blues — Cash'],
+    description: 'The foundation of rock and blues. Master this and you can jam with anyone on Earth.',
+    tip: 'All three chords are dominant 7ths — that dissonance is what makes blues feel so restless.',
+    styleVariations: [
+      { label: 'Shuffle',  pattern: 'I7 – IV7 – V7 with shuffle rhythm', qualities: ['dom7','dom7','dom7'] },
+      { label: 'Jazz',     pattern: 'Imaj7 – IV7 – iim7 – V7 quick changes', qualities: ['maj7','dom7','min7','dom7'] },
+      { label: 'Minor',    pattern: 'im7 – ivm7 – vm7 (minor blues)',   qualities: ['min7','min7','min7'] },
+    ],
+  },
+  {
+    id: 'andalusian',
+    name: 'Andalusian Cadence',
+    pattern: 'i – ♭VII – ♭VI – V',
+    degrees: [0, 10, 8, 7],
+    qualities: ['min', 'maj', 'maj', 'maj'],
+    mode: 'minor',
+    genre: ['Flamenco', 'Rock', 'Classical'],
+    songs: ['Stairway to Heaven intro — Led Zeppelin', 'Hit the Road Jack', 'Sultans of Swing — Dire Straits', 'White Christmas'],
+    description: 'Descending bass line creates unstoppable forward motion. Timeless, dramatic, inevitable.',
+    tip: 'The final V chord (major) is the harmonic surprise in a minor context — forces resolution.',
+    styleVariations: [
+      { label: 'Flamenco', pattern: 'im – ♭VII – ♭VI – V7',          qualities: ['min','maj','maj','dom7'] },
+      { label: 'Rock',     pattern: 'im5 – ♭VII5 – ♭VI5 – V5 (power)', qualities: ['min','maj','maj','maj'] },
+      { label: 'Jazz',     pattern: 'im(maj7) – ♭VIImaj7 – ♭VImaj7 – V7(#9)', qualities: ['min7','maj7','maj7','dom7'] },
+    ],
+  },
+  {
+    id: 'minor_anthem',
+    name: 'Minor Anthem',
+    pattern: 'i – ♭VI – ♭III – ♭VII',
+    degrees: [0, 8, 3, 10],
+    qualities: ['min', 'maj', 'maj', 'maj'],
+    mode: 'minor',
+    genre: ['Rock', 'Pop', 'Metal'],
+    songs: ['Numb — Linkin Park', 'In The End — Linkin Park', 'Boulevard of Broken Dreams — Green Day', 'Creep — Radiohead', 'Smells Like Teen Spirit — Nirvana'],
+    description: 'The anthem of angst. Powerful, relentless, emotionally direct.',
+    tip: 'Every chord is major except the tonic — the contrast makes the i feel even more desperate.',
+    styleVariations: [
+      { label: 'Stripped', pattern: 'im7 – ♭VImaj7 – ♭IIImaj7 – ♭VIImaj7', qualities: ['min7','maj7','maj7','maj7'] },
+      { label: 'Epic',     pattern: 'im – ♭VI – ♭III – ♭VII with sus2 variants', qualities: ['min','maj','maj','maj'] },
+    ],
+  },
+  {
+    id: 'minor_oscillate',
+    name: 'Minor Oscillation',
+    pattern: 'i – ♭VII – ♭VI – ♭VII',
+    degrees: [0, 10, 8, 10],
+    qualities: ['min', 'maj', 'maj', 'maj'],
+    mode: 'minor',
+    genre: ['Rock', 'Folk', 'Pop'],
+    songs: ['All Along the Watchtower — Dylan/Hendrix', "Knockin' on Heaven's Door — Dylan", 'Pumped Up Kicks — Foster the People', 'Africa — Toto'],
+    description: 'The ♭VII oscillates back and forth — creates hypnotic looping energy.',
+    tip: 'Works as a 2-bar vamp (i – ♭VII) or a full 4-bar loop. The ♭VI adds breathing room.',
+    styleVariations: [
+      { label: 'Folk',  pattern: 'im – ♭VII – ♭VI – ♭VII fingerpicked', qualities: ['min','maj','maj','maj'] },
+      { label: 'Rock',  pattern: 'im – ♭VII – ♭VI power chords',        qualities: ['min','maj','maj','maj'] },
+    ],
+  },
+  {
+    id: 'mixolydian',
+    name: 'Mixolydian Rock',
+    pattern: 'I – ♭VII – IV',
+    degrees: [0, 10, 5],
+    qualities: ['maj', 'maj', 'maj'],
+    mode: 'major',
+    genre: ['Rock', 'Folk', 'Celtic'],
+    songs: ['Sweet Home Alabama — Lynyrd Skynyrd', 'La Grange — ZZ Top', 'Werewolves of London — Warren Zevon', 'Norwegian Wood — Beatles'],
+    description: 'The ♭VII chord defines Mixolydian mode. Swagger and swagger only.',
+    tip: 'In standard major, the VII is diminished. Flattening it to ♭VII gives you a major chord — that shift is everything.',
+    styleVariations: [
+      { label: 'Celtic',   pattern: 'I – ♭VII – IV – I alternating',   qualities: ['maj','maj','maj','maj'] },
+      { label: 'Funk',     pattern: 'I9 – ♭VII9 – IV9 dominant 9ths',  qualities: ['dom7','dom7','dom7'] },
+    ],
+  },
+  {
+    id: 'dorian_vamp',
+    name: 'Dorian Vamp',
+    pattern: 'i – IV',
+    degrees: [0, 5],
+    qualities: ['min', 'maj'],
+    mode: 'minor',
+    genre: ['Rock', 'Jazz', 'Funk'],
+    songs: ['Oye Como Va — Santana', 'So What — Miles Davis', 'Scarborough Fair', 'Eleanor Rigby verse — Beatles', 'Mad World — Tears for Fears'],
+    description: 'The major IV over a minor i chord signals Dorian mode. Smooth, open, sophisticated.',
+    tip: 'Natural minor would have a minor iv. The major IV is Dorian\'s signature — it feels both sad and groovy.',
+    styleVariations: [
+      { label: 'Jazz',  pattern: 'im7 – IV7 (comp beneath a soloist)',    qualities: ['min7','dom7'] },
+      { label: 'Funk',  pattern: 'im9 – IV13 (layered synth and guitar)', qualities: ['min7','dom7'] },
+      { label: 'Rock',  pattern: 'im – IV – im – IV (guitar riff)',        qualities: ['min','maj'] },
+    ],
+  },
+  {
+    id: 'jazz_turnaround',
+    name: 'Jazz Turnaround',
+    pattern: 'I – vi – ii – V',
+    degrees: [0, 9, 2, 7],
+    qualities: ['maj7', 'min7', 'min7', 'dom7'],
+    mode: 'major',
+    genre: ['Jazz', 'Swing'],
+    songs: ['I Got Rhythm — Gershwin', 'Rhythm Changes', 'How High the Moon', 'countless jazz standards'],
+    description: 'The jazz turnaround — loops back to the top of the form with elegant inevitability.',
+    tip: 'Each chord resolves down a fifth to the next. That chain of fifths is what makes jazz sound "right".',
+    styleVariations: [
+      { label: 'Bebop',   pattern: 'Imaj7 – vim7 – iim7 – V7(♭9)',    qualities: ['maj7','min7','min7','dom7'] },
+      { label: 'Tritone', pattern: 'Imaj7 – ♭III7 – iim7 – ♭II7 (tritone subs)', qualities: ['maj7','dom7','min7','dom7'] },
+    ],
+  },
+  {
+    id: 'phrygian',
+    name: 'Phrygian Tension',
+    pattern: 'i – ♭II',
+    degrees: [0, 1],
+    qualities: ['min', 'maj'],
+    mode: 'minor',
+    genre: ['Flamenco', 'Metal', 'Film'],
+    songs: ['Game of Thrones theme', 'Spanish flamenco standards', 'heavy metal riffs', 'El Tango de Roxanne'],
+    description: 'The ♭II (Neapolitan) chord creates extreme tension. Spanish fire and metal darkness.',
+    tip: 'Just two chords — the half-step relationship between roots is what makes it feel so tense.',
+    styleVariations: [
+      { label: 'Flamenco', pattern: 'im – ♭II – im with fast strumming', qualities: ['min','maj','min'] },
+      { label: 'Metal',    pattern: 'im5 – ♭II5 power chord riff',       qualities: ['min','maj'] },
+    ],
+  },
+  {
+    id: 'minor_pop',
+    name: 'Sad Pop Minor',
+    pattern: 'vi – IV – I – V',
+    degrees: [9, 5, 0, 7],
+    qualities: ['min', 'maj', 'maj', 'maj'],
+    mode: 'major',
+    genre: ['Pop', 'Rock', 'Indie'],
+    songs: ['Zombie — Cranberries', 'Torn — Natalie Imbruglia', 'Apologize — Timbaland', 'Fix You — Coldplay'],
+    description: 'Same chords as the Axis — just starting on the vi. Instantly feels darker and more yearning.',
+    tip: 'Which chord you start on changes everything emotionally. This is the Axis heard through minor eyes.',
+    styleVariations: [
+      { label: 'Soul',   pattern: 'vim7 – IVmaj7 – Imaj7 – V9',        qualities: ['min7','maj7','maj7','dom7'] },
+      { label: 'Indie',  pattern: 'vim7 – IVadd9 – Iadd9 – Vsus4',     qualities: ['min7','add9','add9','sus4'] },
+    ],
+  },
+  {
+    id: 'lydian_float',
+    name: 'Lydian Float',
+    pattern: 'I – II',
+    degrees: [0, 2],
+    qualities: ['maj', 'maj'],
+    mode: 'major',
+    genre: ['Film', 'Jazz', 'Pop'],
+    songs: ['The Simpsons theme', 'Joe Satriani — Flying in a Blue Dream', 'many John Williams cues', 'Man or Muppet'],
+    description: 'The raised ♯4 in Lydian makes the II chord major instead of minor. Dreamy, floating, magical.',
+    tip: 'In normal major, the II chord is minor. Making it major (Lydian) lifts the whole progression off the ground.',
+    styleVariations: [
+      { label: 'Film',   pattern: 'Imaj7 – IImaj7 slowly held',         qualities: ['maj7','maj7'] },
+      { label: 'Jazz',   pattern: 'Imaj7(#11) — the Lydian 7th chord',  qualities: ['maj7','maj7'] },
+    ],
+  },
+  {
+    id: 'sensitive',
+    name: 'Sensitive Oscillation',
+    pattern: 'vi – V – IV – V',
+    degrees: [9, 7, 5, 7],
+    qualities: ['min', 'maj', 'maj', 'maj'],
+    mode: 'major',
+    genre: ['Pop', 'Indie'],
+    songs: ['Mad World — Tears for Fears', 'Every Breath You Take — Police', 'Losing My Religion — REM'],
+    description: 'Oscillates between vi and IV through V. Aching, introspective, perpetually unresolved.',
+    tip: 'The V never quite resolves to I — it keeps bouncing back to the IV or vi. That suspension is the emotion.',
+    styleVariations: [
+      { label: 'Indie',  pattern: 'vim7 – Vsus4 – IVadd9 – V',         qualities: ['min7','sus4','add9','maj'] },
+    ],
+  },
+]
+
+// ─── Chord substitution options ───────────────────────────────────────────────
+// For each chord type: array of { type, label, tip } suggestions
+export const CHORD_SUBSTITUTIONS = {
+  maj: [
+    { type: 'maj7',  tip: 'Add the major 7th — dreamy jazz colour' },
+    { type: 'add9',  tip: 'Add the 9th — modern, open, Coldplay-ish' },
+    { type: 'maj6',  tip: 'Add major 6th — vintage Django jazz sweetness' },
+    { type: 'sus2',  tip: 'Replace 3rd with 2nd — airy and ambiguous' },
+    { type: 'sus4',  tip: 'Suspend then resolve — creates rhythmic motion' },
+  ],
+  min: [
+    { type: 'min7',  tip: 'Add the minor 7th — smooth soul and jazz' },
+    { type: 'add9',  tip: 'Add 9th over minor — bittersweet modern ache (Radiohead)' },
+    { type: 'min6',  tip: 'Add major 6th over minor — flamenco and tango colour' },
+    { type: 'sus2',  tip: 'Remove 3rd entirely — ambiguous and floating' },
+    { type: 'half_dim', tip: 'Flatten the 5th — half-diminished, much darker' },
+  ],
+  dom7: [
+    { type: 'maj7',  tip: 'Raise the 7th — softer, much less tension' },
+    { type: 'min7',  tip: 'Lower the 3rd too — darkens the dominant' },
+    { type: 'sus4',  tip: 'Replace 3rd with 4th — funky unresolved suspension' },
+    { type: 'dim7',  tip: 'Diminished substitute — extreme tension before resolution' },
+  ],
+  maj7: [
+    { type: 'maj',   tip: 'Simplify — strip back to triad, rawer feel' },
+    { type: 'add9',  tip: 'Drop 7th, add 9th — brighter and more open' },
+    { type: 'maj6',  tip: 'Swap 7th for 6th — retro jazz, less ethereal' },
+    { type: 'dom7',  tip: 'Flatten 7th — suddenly bluesy with tension' },
+  ],
+  min7: [
+    { type: 'min',   tip: 'Strip back — rawer, more aggressive feel' },
+    { type: 'half_dim', tip: 'Flatten the 5th — half-dim, darker and more tense' },
+    { type: 'min6',  tip: 'Add major 6th — sophisticated jazz minor colour' },
+    { type: 'dom7',  tip: 'Make it dominant — strong pull to resolve' },
+  ],
+  dim: [
+    { type: 'dim7',     tip: 'Add dim7 — fully symmetric, equally unstable' },
+    { type: 'half_dim', tip: 'Half-dim — softer, more melodic tension' },
+    { type: 'min',      tip: 'Simplify to minor — much less dissonant' },
+  ],
+  dim7: [
+    { type: 'dim',      tip: 'Remove 7th — triad version, slightly less tense' },
+    { type: 'half_dim', tip: 'Raise one note to half-dim — softer resolution' },
+    { type: 'min7',     tip: 'Raise ♭5 — from dark to smooth in one note' },
+  ],
+  aug: [
+    { type: 'maj',  tip: 'Resolve the aug5 down to 5 — release the tension' },
+    { type: 'dom7', tip: 'Add ♭7 over aug — double tension before a big resolution' },
+  ],
+  sus4: [
+    { type: 'maj',  tip: 'Resolve — drop the 4th to the 3rd (classic sus → maj)' },
+    { type: 'sus2', tip: 'Switch suspension — from 4th to 2nd, different feel' },
+    { type: 'dom7', tip: 'Add ♭7 too — 7sus4, funky and unresolved' },
+  ],
+  sus2: [
+    { type: 'maj',  tip: 'Fill in the 3rd — resolve the suspension clearly' },
+    { type: 'sus4', tip: 'Swap 2nd for 4th — different flavour of openness' },
+    { type: 'add9', tip: 'Add the 3rd back — sus2 becomes a richer add9' },
+  ],
+  half_dim: [
+    { type: 'dim7', tip: 'Add dim7 — more symmetric and tense' },
+    { type: 'min7', tip: 'Raise the ♭5 to 5 — suddenly much smoother' },
+    { type: 'min',  tip: 'Strip back — simple minor triad' },
+  ],
+  maj6: [
+    { type: 'maj7', tip: 'Swap 6th for 7th — more modern jazz, more ethereal' },
+    { type: 'add9', tip: 'Replace 6th with 9th — brighter, contemporary feel' },
+  ],
+  min6: [
+    { type: 'min7',     tip: 'Swap 6th for 7th — smoother, less exotic' },
+    { type: 'half_dim', tip: 'Enharmonic trick — min6 and half-dim share notes' },
+  ],
+  add9: [
+    { type: 'maj7', tip: 'Add the 7th — full maj9 sound, very lush' },
+    { type: 'sus2', tip: 'Remove the 3rd — purely suspended' },
+    { type: 'maj',  tip: 'Strip the 9th — clean triad' },
+  ],
+}
+
+// ─── Compute chord names for a famous progression in a given key ──────────────
+export function progressionInKey(famousProg, keyRoot) {
+  const rootPc = NOTES.indexOf(keyRoot)
+  if (rootPc === -1) return []
+  return famousProg.degrees.map((d, i) => {
+    const pc = (rootPc + d) % 12
+    const type = famousProg.qualities[i] ?? 'maj'
+    return chordName(pc, type)
+  })
+}
+
+// Style variation chords in a given key
+export function styleVariationInKey(styleVar, famousProg, keyRoot) {
+  if (!styleVar.qualities?.length) return []
+  const rootPc = NOTES.indexOf(keyRoot)
+  if (rootPc === -1) return []
+  return famousProg.degrees.slice(0, styleVar.qualities.length).map((d, i) => {
+    const pc = (rootPc + d) % 12
+    return chordName(pc, styleVar.qualities[i] ?? 'maj')
+  })
+}
+
+// ─── Similarity matching ──────────────────────────────────────────────────────
+export function findSimilarProgressions(detectedChords, keyInfo) {
+  if (!detectedChords?.length || !keyInfo?.root) return []
+  const rootPc = NOTES.indexOf(keyInfo.root)
+  if (rootPc === -1) return []
+
+  // Convert detected chords to semitone offsets from key root
+  const detectedPcs = detectedChords
+    .map(c => { const p = parseChord(c); return p ? (p.rootPc - rootPc + 12) % 12 : null })
+    .filter(v => v !== null)
+  if (!detectedPcs.length) return []
+
+  const detectedSet = new Set(detectedPcs)
+  const results = []
+
+  for (const prog of FAMOUS_PROGRESSIONS) {
+    const progPcs = prog.degrees.map(d => d % 12)
+    const progSet = new Set(progPcs)
+
+    // Rotation match: does detected sequence appear in famous prog (as cyclic rotation)?
+    let rotScore = 0
+    const compareLen = Math.min(detectedPcs.length, progPcs.length)
+    for (let rot = 0; rot < progPcs.length; rot++) {
+      let hits = 0
+      for (let i = 0; i < compareLen; i++) {
+        if (detectedPcs[i] === progPcs[(rot + i) % progPcs.length]) hits++
+      }
+      rotScore = Math.max(rotScore, hits / compareLen)
+    }
+
+    // Jaccard similarity (chord-set overlap regardless of order)
+    const inter = [...detectedSet].filter(d => progSet.has(d)).length
+    const union = new Set([...detectedSet, ...progSet]).size
+    const jaccardScore = inter / union
+
+    const score = Math.max(rotScore, jaccardScore * 0.8)
+    if (score >= 0.35) results.push({ ...prog, score })
+  }
+
+  return results.sort((a, b) => b.score - a.score).slice(0, 4)
+}
+
+// ─── Substitutions for a chord name ──────────────────────────────────────────
+export function getChordSubstitutions(chordName) {
+  const p = parseChord(chordName)
+  if (!p) return []
+  const subs = CHORD_SUBSTITUTIONS[p.type] ?? []
+  return subs.map(sub => ({
+    ...sub,
+    chord: NOTES[p.rootPc] + (CHORD_TYPES[sub.type]?.suffix ?? ''),
+  }))
+}
+
+// ─── Chord Playbook ───────────────────────────────────────────────────────────
+// Jam-focused knowledge base per chord type.
+// jamRole    — one sentence on this chord's role in a live jam
+// voicings   — 2-3 voicings with their jam use-case (not fingering lessons)
+// licks      — 2-3 fills/licks with ASCII tab, style-labelled
+// jamTips    — 3 tight bullet points for live playing
+// loopPractice — 1-2 concrete loop station exercises
+
+export const CHORD_PLAYBOOK = {
+  maj: {
+    jamRole: 'The home chord in a major key — everything resolves here. Your job is to lock in the groove and hold the harmonic centre while others explore around you.',
+    voicings: [
+      { name: 'Open position', use: 'Full, resonant. Use when you\'re the only chordal instrument — fills the room. Avoid it in a dense band (too much low-end clash with bass).' },
+      { name: 'Barre mid-neck (E or A shape)', use: 'Controlled and punchy. Use in a band — you\'re sitting above the bassist\'s register. Good for rock and funk comping.' },
+      { name: 'Partial 4-string (strings 1–4, upper neck)', use: 'Jazz and funk comping. Stays completely out of the low end. Ideal when there\'s a keys player — you add texture without competing.' },
+    ],
+    licks: [
+      {
+        title: 'Major pentatonic walkup',
+        style: 'Rock / Country',
+        tab: 'e|-------------------------------5-7-|\nB|---------------------5-7-8---------|\nG|-----------4-5-7-------------------|\nD|-----4-5-7-------------------------|\nA|-5-7-------------------------------|\n  (G major pentatonic — position shift for any key)',
+        tip: 'End on the root or the 3rd for a resolved feel. Use this as a fill between chord changes.',
+      },
+      {
+        title: 'Chord tone arpeggio fill',
+        style: 'Jazz / Funk',
+        tab: 'e|-----5-----------|\nB|---5---8---------|\nG|-5-------7-5-----|\nD|-----------------|\n  (C major: R–3–5–high root)',
+        tip: 'Highlight the 3rd and 5th — these define the chord. Avoid the root on a strong beat to keep it moving.',
+      },
+    ],
+    jamTips: [
+      'If a bassist is locking down the root, move your voicing up the neck — let them own the low end.',
+      'Behind a soloist: comp short stabs on beats 2 and 4. Full strums on every beat will drown them out.',
+      'Pedal point trick: hold one string on the root and let the chord move underneath — creates harmonic motion without a chord change.',
+    ],
+    loopPractice: [
+      { title: 'Comp loop + fill swap', body: 'Record a 2-bar major chord comp (stabs on beats 2 and 4). Loop it. Improvise fills over the top using the major pentatonic — aim to respond to the rhythm, not just run scales. Swap between "comping mode" and "fill mode" every 4 bars.' },
+    ],
+  },
+
+  min: {
+    jamRole: 'Sets the emotional temperature of the jam. Minor chords invite exploration — soloists will look to you for the harmonic anchor. Hold it firmly and let the mood develop.',
+    voicings: [
+      { name: 'Open minor (Em, Am, Dm)', use: 'Resonant and sustaining. Use when the jam is sparse or acoustic — let it ring while others move around it.' },
+      { name: 'Barre mid-neck', use: 'Rock and pop jams. Punchy and controlled. Roll slightly onto the index bony edge for clean barres. Palm-mute lightly for a tighter comp.' },
+      { name: 'Partial upper voicing (4 strings)', use: 'Jazz-funk context. Stays completely out of the bass. Add light muting for a percussive comp that doesn\'t muddy the mix.' },
+    ],
+    licks: [
+      {
+        title: 'Minor pentatonic box 1',
+        style: 'Blues / Rock',
+        tab: 'e|--8-5-----------|\nB|------8-5-6-5---|\nG|------------7-5-|\nD|---------7------|\nA|----------------|\n  (A minor pentatonic at position 5)',
+        tip: 'The b3 and b7 are your strongest notes over any minor chord. End phrases on one of them.',
+      },
+      {
+        title: 'Dorian groove phrase',
+        style: 'Jazz / Funk',
+        tab: 'e|-------------------|\nB|-------------------|\nG|--2-4-2-4-5-4-2----|\nD|--2-4-2-4---4-2----|\nA|--0----------------|\n  (A Dorian — note the F# = natural 6th)',
+        tip: 'The natural 6th (F# in Am Dorian) is what gives Santana, Stevie Wonder, and jazz-funk their brightness over a minor chord.',
+      },
+    ],
+    jamTips: [
+      'The minor pentatonic (5 notes) is the safe zone — you can\'t go wrong with it over any minor chord.',
+      'On a long minor vamp, try the Dorian mode (raise the 6th by one semitone) — it shifts the feel from melancholic to funky.',
+      'When the jam sits on a minor chord, play fewer chord tones and more single-note fills in the gaps — let the sustain breathe.',
+    ],
+    loopPractice: [
+      { title: 'Minor vamp + Dorian exploration', body: 'Record a 4-bar minor chord groove with gaps (e.g. hit on beat 1, let it ring, stab again on beat 3). Loop it. Solo over it with minor pentatonic for 2 laps. Then raise the 6th by one semitone (into Dorian) on the next 2 laps. Hear the shift from dark to groove.' },
+    ],
+  },
+
+  dom7: {
+    jamRole: 'THE blues chord — in a 12-bar blues jam, every chord is a dom7. In jazz, it\'s the maximum-tension V chord. Either way: play with attitude and resolve with purpose.',
+    voicings: [
+      { name: 'Full dom7 barre', use: 'Blues rhythm guitar. Combine with the shuffle pattern — bass note then top strings alternating. This IS the sound of a blues jam.' },
+      { name: 'Shell voicing (root + 3rd + b7, 3 strings only)', use: 'Jazz comping. Three notes, right in the pocket. Leaves room for piano, sax, everything — the most polite voicing you can play.' },
+      { name: '9th voicing (add the 2nd on top)', use: 'R&B and blues-rock upgrade. One extra note transforms the barre into something sophisticated without changing the function.' },
+    ],
+    licks: [
+      {
+        title: 'Blues shuffle figure',
+        style: 'Blues',
+        tab: 'e|--------------------|\nB|--------------------|\nG|--------------------|\nD|--2-4--2-4----------|\nA|--2-4--2-4----------|\nE|--0----0------------|\n  (E7 shuffle — repeat; move to A string for A7)',
+        tip: 'The shuffle feel is long-short, long-short (triplet with the middle note removed). Lock this in before speed.',
+      },
+      {
+        title: 'Mixolydian fill',
+        style: 'Jazz / Rock',
+        tab: 'e|--10-8---8-10-8--7---------|\nB|---------10---------10-8---|\nG|---------------------------|\n  (G mixolydian: G A B C D E F)',
+        tip: 'Mixolydian = major scale with b7. It\'s the natural scale over any dominant 7th chord — the b7 note is the defining colour.',
+      },
+    ],
+    jamTips: [
+      'In a 12-bar blues, every chord is a dom7. The notes that shift between I7, IV7, and V7 are just the 3rd and b7 — learn those for each chord and you can navigate the whole form.',
+      'The b7 note is the single best note to target in a fill over a dom7. It\'s immediately recognisable as the "blues note."',
+      'On the V7 (the most tense moment), one well-placed phrase hits harder than ten frantic notes. Listen to what B.B. King leaves out.',
+    ],
+    loopPractice: [
+      { title: '12-bar blues loop', body: 'Record a 2-bar I7 chord shuffle (e.g. E7 for 2 bars). Loop it and solo using the minor pentatonic. Then add the major 3rd occasionally (in E: G#) — you\'re now mixing major and minor pentatonic, which is the blues scale. Notice how that one note shifts the whole flavour.' },
+    ],
+  },
+
+  maj7: {
+    jamRole: 'The sophisticated home chord of jazz, bossa nova, and soul. It floats rather than resolves — gives the jam a dreamy, suspended quality. Play it quietly and let it hang.',
+    voicings: [
+      { name: 'Open Cmaj7 / Amaj7 / Emaj7', use: 'Acoustic and light electric jams. Beautiful resonance. Let it ring — the maj7 note needs space to project.' },
+      { name: '4-string mid-neck (no 5th)', use: 'Jazz comping. Drop the 5th — it clutters. Root, 3rd, and maj7 is more elegant and sits better under a soloist.' },
+      { name: 'High-neck partial (strings 1–4)', use: 'Comping behind a vocalist. High, bright, completely out of the bass range. Keeps you from competing with anything.' },
+    ],
+    licks: [
+      {
+        title: 'Maj7 arpeggio climb',
+        style: 'Jazz / Bossa',
+        tab: 'e|--------9----------|\nB|------9---9--------|\nG|----9-------9------|\nD|--10-----------10--|\nA|------------------|\n  (Cmaj7: C–E–G–B)',
+        tip: 'Land on the maj7 (the B over Cmaj7) — it\'s the characteristic note. Resolve it gently, don\'t snap down.',
+      },
+      {
+        title: 'Lydian colour phrase',
+        style: 'Jazz',
+        tab: 'e|--9-10-12-10--9---------|\nB|----------------10-9----|\nG|----------------------9-|\n  (#4 = Lydian mode over maj7 — the raised 4th creates a dreamy, floating quality)',
+        tip: 'The #4 (raised 4th) is the Lydian note — one semitone above the perfect 4th. It creates instant "floating" colour over any maj7 chord.',
+      },
+    ],
+    jamTips: [
+      'Maj7 sounds strongest quiet — dial back your volume. It\'s a listening chord that rewards the band for playing softly.',
+      'In bossa nova, emphasise the bass note on beat 1 with your thumb and comp the chord on the upbeats with your fingers. No plectrum.',
+      'The maj7 is one semitone below the root. If you play the root too prominently in the voicing, the 7th disappears. Favour the 3rd and 7th in your note choices.',
+    ],
+    loopPractice: [
+      { title: 'Bossa nova comp loop', body: 'Record a 4-bar maj7 chord using bossa rhythm (bass on beat 1, chord on the "and"). Play it at half the volume you think you need. Then improvise a simple 3–4 note melody over it. Fewer notes = more space = better bossa feel.' },
+    ],
+  },
+
+  min7: {
+    jamRole: 'The smoothed-out minor — soul, R&B, funk, and jazz all live here. It invites groove without demanding resolution. Great for long vamps and ii chord setups in jazz.',
+    voicings: [
+      { name: 'Open Am7 / Em7 / Dm7', use: 'Folk, acoustic, and light jazz. Clean and resonant. Good starting point — the open strings blend naturally with the chord.' },
+      { name: 'Barre mid-neck (muted)', use: 'Rock-funk. Mute slightly with your palm for a tighter, more percussive sound. Useful for rhythmic comping in a band.' },
+      { name: '4-string funk stab (high position)', use: 'THE funk voicing. 4 strings, quick stab and mute. Stay high on the neck — leave the low end for the bass. This is how you comp in a funk jam.' },
+    ],
+    licks: [
+      {
+        title: 'Dorian funk phrase',
+        style: 'Funk / Jazz',
+        tab: 'e|---------------------|\nB|---------------------|\nG|--5-7-5-7-9-7-5------|\nD|--5-7-5-7---7-5------|\nA|--3------------------|\n  (Am Dorian: natural 6th = F# = fret 9 on G string)',
+        tip: 'The natural 6th (raised from the plain minor) is the single note that turns a minor vamp into a funk groove. Target it.',
+      },
+      {
+        title: 'Min7 arpeggio fill',
+        style: 'Jazz / Soul',
+        tab: 'e|------8----------|\nB|----8---8--------|\nG|--7-------7-5----|\nD|--7-----------7--|\n  (Am7: A–C–E–G)',
+        tip: 'In jazz, the b7 (G over Am7) is the departure note — it creates the sense of movement to the V chord. Let it hang.',
+      },
+    ],
+    jamTips: [
+      'In a funk jam, min7 stabs go on the upbeats. The muted scratches between are as musical as the chords themselves — they hold the groove.',
+      'In jazz, min7 is almost always the ii chord — expect a dom7 to follow. Your job on ii is to build tension so the V chord feels even better.',
+      'On a long minor 7th vamp, the Dorian mode (natural 6th) is your key. It\'s what separates "sad minor" from "soulful groove".',
+    ],
+    loopPractice: [
+      { title: 'Funk stab loop', body: 'Record a 2-bar pattern: stab the min7 on the "and" of each beat, leaving the beats empty. Loop it. Add a second loop layer with a single bass note on beats 1 and 3. Hear how it locks into a groove. Then try improvising single notes on top.' },
+    ],
+  },
+
+  dim: {
+    jamRole: 'Almost never a destination — diminished is a bridge. In a live jam, use it to glide chromatically from one chord to another a half step away. One beat, maximum drama, then move.',
+    voicings: [
+      { name: 'Chromatic passing shape', use: 'Move any dim shape up one fret to arrive at the next chord. This is how diminished works in practice — a one-fret slide between two stable chords.' },
+      { name: 'Compact 4-string voicing', use: 'Jazz context where you want the dim colour without full 6-string weight. Cleaner in a dense mix.' },
+    ],
+    licks: [
+      {
+        title: 'Chromatic approach line',
+        style: 'Jazz / Classical',
+        tab: 'e|--8-9-10-----------|\nB|------10-11-12-----|\nG|---------------11--|\n  (chromatic passing: approach Cmaj7 from B dim)',
+        tip: 'Each note moves up by exactly one semitone. The half-step motion is what creates the magnetic pull toward the landing chord.',
+      },
+      {
+        title: 'Symmetric dim arpeggio',
+        style: 'Jazz',
+        tab: 'e|--4-7-10-----------|\nB|------10-13--------|\nG|---------12--------|\nD|--5-8--------------|\n  (B dim: B–D–F–Ab — all minor 3rds apart)',
+        tip: 'Move this pattern up 3 frets and you have the same chord in a new inversion. Exploit the symmetry.',
+      },
+    ],
+    jamTips: [
+      'Use dim as a chromatic approach: going from G to Am, insert G#dim for one beat. The half-step movement makes the landing feel inevitable.',
+      'In jazz, you can substitute a dim7 a half step above the V chord — it creates even more tension before the resolution.',
+      'Diminished chords are brief. Never sit on one in a jam — play it quickly and move. It\'s a dramatic pivot, not a home.',
+    ],
+    loopPractice: [
+      { title: 'Chromatic approach exercise', body: 'Record a 2-bar Am loop. On the last beat before the loop repeats, land on G#dim for just one beat before the Am hits. Loop it. Feel how the approach makes the Am feel like a release. Try with different target chords.' },
+    ],
+  },
+
+  dim7: {
+    jamRole: 'The most symmetric chord in music — one shape, four roots. Use it as a dramatic pivot or tension builder before any chord. In a jazz jam it\'s a secret harmonic weapon.',
+    voicings: [
+      { name: 'Moveable box (any position)', use: 'Move up 3 frets for each inversion — same notes, different voice. Use whichever inversion sits closest to the chord you\'re resolving to.' },
+      { name: 'High-neck 4-string', use: 'Clean and tight. Good for jazz where you want the tension colour without orchestral weight. The top string carries the characteristic tritone.' },
+    ],
+    licks: [
+      {
+        title: 'Dim7 arpeggio (symmetric)',
+        style: 'Jazz / Classical',
+        tab: 'e|--1-4-7-10--------|\nB|----------10-13---|\nG|------1-4---------|\nD|--2-5-------------|\n  (Bdim7: all notes 3 semitones apart)',
+        tip: 'Every note is an equal minor 3rd apart. Moving up 3 frets lands you on the same chord — use this to shift register dramatically.',
+      },
+      {
+        title: 'Chromatic resolution',
+        style: 'Jazz',
+        tab: 'e|--1-0--|\nB|--2-1--|\nG|--1-0--|\nD|--3-2--|\nA|--3-3--|\n  Bdim7 → Cmaj7 (half-step resolution)',
+        tip: 'Each voice moves by just one semitone. This is why dim7 resolves so smoothly — voice leading at its most efficient.',
+      },
+    ],
+    jamTips: [
+      'A dim7 shape a half step above your target chord creates maximum tension before resolution. Before Cmaj7, play Bdim7 for one beat — the release will feel enormous.',
+      'Every dim7 is an inversion of 3 others. Learn one shape and you have 12 roots covered — just move 3 frets at a time.',
+      'In a jazz jam, place dim7 on the last beat of a phrase, not the first. The tension arrives just before the new section resolves.',
+    ],
+    loopPractice: [
+      { title: 'Resolution contrast loop', body: 'Record a 4-bar loop: 3 bars Cmaj7, then exactly 1 beat of Bdim7 on the final "and" before the loop repeats. The contrast will be striking every time. Try different dim7 → resolution pairs to hear how universally this works.' },
+    ],
+  },
+
+  half_dim: {
+    jamRole: 'The ii chord in minor key jazz — where the tension journey begins. When you play this in a jam, you\'re saying "we\'re heading somewhere" and everyone leans in to hear where.',
+    voicings: [
+      { name: 'Standard (5th-string root)', use: 'Most common voicing. The b5 on top is the characteristic tension note — let it ring clearly so everyone hears the harmonic direction.' },
+      { name: 'Compact 4-string (b3–b5–b7)', use: 'Jazz comping. Root, b3, b5, b7 — tight and dark. Perfect when comping behind a soloist who needs space.' },
+    ],
+    licks: [
+      {
+        title: 'Locrian colour phrase',
+        style: 'Jazz',
+        tab: 'e|--7-8-10--------|\nB|--------10-8-7--|\nG|--7-8-----------|\nD|--7-------------|\n  (Bm7b5: Locrian mode — b2, b3, b5, b7)',
+        tip: 'The b5 is the defining note. Feature it in your phrase — it\'s what signals "half-diminished" to every musician in the room.',
+      },
+      {
+        title: 'ii–V–i connection line',
+        style: 'Jazz',
+        tab: 'e|------7-8-10----------10-9---------|\nB|----8---------8-10-12------12-10---|\nG|--9---------------------------------|\n  (Bm7b5 → E7 → Am: melodic line through the ii–V–i)',
+        tip: 'This phrase flows across all three chords. That\'s the goal: melodic lines that connect chords, not stop-start at each change.',
+      },
+    ],
+    jamTips: [
+      'The m7b5 almost always precedes a dominant 7th a 4th above it. If you\'re on Bm7b5, expect E7 next. Learn to anticipate — comp toward the V before it arrives.',
+      'The characteristic note is the b5. Target it in your fills — it\'s the note that makes the chord sound "yearning" rather than just dark.',
+      'In jazz comping, your chord stab on the ii should feel like tension loading. Don\'t resolve early — let the V chord do that work.',
+    ],
+    loopPractice: [
+      { title: 'Minor ii–V–i drill', body: 'Record a 4-bar loop: 2 bars Bm7b5, 1 bar E7, 1 bar Am7. Practise this in Am until it\'s automatic, then transpose to other keys. Every jazz standard is built on variations of this — knowing it in all 12 keys is the single biggest unlock in jazz.' },
+    ],
+  },
+
+  aug: {
+    jamRole: 'A single beat of suspended tension. Augmented chords are almost always passing — one beat before resolving. In a jam, use one to add forward harmonic motion between two stable chords.',
+    voicings: [
+      { name: 'Standard augmented shape (moveable)', use: 'It\'s symmetric — any inversion works. Use whichever position sits closest to where you\'re going next.' },
+      { name: 'Partial 4-string', use: 'Lighter touch. Use in a sparse jam where you want the aug colour without weight. The raised 5th on top is the defining note — keep it.' },
+    ],
+    licks: [
+      {
+        title: 'Whole-tone run',
+        style: 'Jazz',
+        tab: 'e|--5-7-9-10-12------|\nB|-------------12----|\nG|--4-6-8------------|\n  (whole-tone scale: all major 2nds — the natural scale over augmented)',
+        tip: 'Every interval is a whole step. The scale has no "home" and sounds disorienting — which is exactly the aug chord feeling. Use it briefly then land on something stable.',
+      },
+      {
+        title: 'I → aug → IV resolution',
+        style: 'Jazz / Pop',
+        tab: 'e|--0---0---1--|\nB|--1---1---1--|\nG|--0---1---2--|\nD|--2---2---3--|\nA|--3---3---3--|\nE|--x---x---x--|\n  Cmaj  Caug  F',
+        tip: 'The aug chord is only one note different from the major — the 5th raised by one semitone. That one note creates all the forward motion into the IV.',
+      },
+    ],
+    jamTips: [
+      'The raised 5th wants to move up by a half step — follow it. C aug → F: the G# in Caug resolves naturally to A (the 3rd of F). That voice leading is the whole point.',
+      'In jazz, if you hear an aug chord, stay light and brief. One voicing, then move — it\'s a raised eyebrow, not a full statement.',
+      'Augmented works as a substitute for the V chord — both create tension that resolves to I. Try it in a major key jam as an unexpected colour.',
+    ],
+    loopPractice: [
+      { title: 'I → aug → IV loop', body: 'Record a 4-bar loop: 1.5 bars C major, 0.5 bar Caug, 2 bars F. The augmented is just a moment — practise landing cleanly on the F. Once locked in, add a melodic phrase that follows the aug note (G#) upward to A on the F chord.' },
+    ],
+  },
+
+  sus4: {
+    jamRole: 'Creates anticipation without committing to major or minor. In a jam, use it to build tension before a major resolution, or sustain it for a floating open feel that invites any scale.',
+    voicings: [
+      { name: 'Open sus4 (Dsus4, Asus4)', use: 'Ring out beautifully. Best for creating space and expectation — especially effective in acoustic and ambient jams.' },
+      { name: 'Barre sus4 → major', use: 'Rock and pop jams. Use the sus4 → major resolution as a rhythmic gesture: sus4 on the upbeat, major on the downbeat. The landing feels like a musical exhale.' },
+      { name: 'Open string drone + sus4 shape', use: 'Andy Summers / Sting technique. Let high E or B ring open while the fretted notes move. Lush complexity from simple shapes — works beautifully with delay.' },
+    ],
+    licks: [
+      {
+        title: 'Sus4 → major rhythmic gesture',
+        style: 'Rock / Pop',
+        tab: 'e|--3---2---3---2--|\nB|--3---3---3---3--|\nG|--2---2---2---2--|\nD|--0---0---0---0--|\n  (Dsus4 → D → Dsus4 → D)',
+        tip: 'The 4th (that one suspended note) resolves down to the 3rd. Let the sus4 hang for a full beat before resolving — the longer the tension, the sweeter the landing.',
+      },
+      {
+        title: 'Open drone riff',
+        style: 'Ambient / Rock',
+        tab: 'e|--0---0---0---0--|\nB|--5---5---3---3--|\nG|--6---6---4---4--|\nD|--7---7---5---5--|\nA|--7---7---5---5--|\nE|--5---5---3---3--|\n  (C#sus4 riff — open high E rings throughout)',
+        tip: 'The open high E string is the constant — it creates the suspension as the chord changes underneath it. This is The Police\'s entire harmonic language.',
+      },
+    ],
+    jamTips: [
+      'Sus4 is most powerful just before resolving — the longer you hold it, the more satisfying the major landing. Use it on the upbeat, resolve on the downbeat.',
+      'In a jam, switching to sus4 on the I chord while others keep playing instantly changes the feel without a real chord change. Subtle and powerful.',
+      'Pair sus4 with a delay effect (or the loop station reverb tail) for ambient, textural comping that leaves maximum space for other musicians.',
+    ],
+    loopPractice: [
+      { title: 'Tension-release loop', body: 'Record a 2-bar loop: 1 bar sus4, 1 bar major (e.g. Dsus4 → D). Improvise over it, emphasising the 4th over the sus4 bar and resolving to the 3rd on the major bar — your melody mirrors the exact motion of the chord. Teach your ear to hear and resolve suspension.' },
+    ],
+  },
+
+  sus2: {
+    jamRole: 'The neutral canvas. Sus2 removes the 3rd — it\'s neither major nor minor. In a jam, it gives any soloist total freedom and creates a floating, modern texture that never clashes.',
+    voicings: [
+      { name: 'Open Asus2 / Dsus2', use: 'Key voicings. Open strings ring freely and the chord floats. Best in quieter or ambient jams — don\'t fight it with a heavy strum.' },
+      { name: 'Capo + open sus2 shape', use: 'Any key, same open feel. Capo up and play Dsus2 or Asus2 shapes. Constant by Sting, Coldplay, The Edge — sus2 resonance in any key.' },
+    ],
+    licks: [
+      {
+        title: 'Sus2 arpeggio (floating)',
+        style: 'Ambient / Pop',
+        tab: 'e|--0-----------0--|\nB|--0---0---0------|\nG|----2---2--------|\nD|------2----------|\nA|--0-----------0--|\n  (Asus2: A–B–E — root, 2nd, 5th)',
+        tip: 'The 2nd (9th) is the highest note — feature it in your voicing. It\'s the note that makes the chord float.',
+      },
+      {
+        title: 'Single note melody over sus2 drone',
+        style: 'Ambient',
+        tab: 'e|--0-2-3-5-3-2-0--|\nB|--0-----------0--|\nG|--2-----------2--|\nD|--2-----------2--|\nA|--0-----------0--|\n  (Asus2 held, melody on string 1)',
+        tip: 'Because there\'s no 3rd in the sus2, any major or minor scale note works as a melody. Total harmonic freedom.',
+      },
+    ],
+    jamTips: [
+      'Sus2 has no 3rd — soloists can play major OR minor scales over it and neither will clash. Use it as a harmonic reset between more defined chords.',
+      'In a dense jam, switching from a full major chord to a sus2 is like opening a window — everyone hears and appreciates the space.',
+      'The 9th (the 2nd up an octave) is your featured note. Build your voicing so it sits on top — that\'s what gives the chord its shimmer.',
+    ],
+    loopPractice: [
+      { title: 'Neutral canvas loop', body: 'Record a sparse 4-bar sus2 loop — just a few arpeggiated notes, played quietly. Then add a second loop layer with a single sustained melody note. Try different melody notes and notice that none of them clash. That\'s the power of the sus2 as a backdrop.' },
+    ],
+  },
+
+  maj6: {
+    jamRole: 'Sweetened major — used in jazz, bossa nova, and vintage pop where a plain major feels too simple. Lush and nostalgic, it sits perfectly under a vocalist or a soloist\'s upper-register lines.',
+    voicings: [
+      { name: 'Open C6 / A6', use: 'Classic jazz and bossa starting points. Bright and warm — good comp chord for a vocalist. The 6th sits naturally on top.' },
+      { name: '4-string voicing (no 5th, 6th on top)', use: 'Jazz comping — elegant and uncluttered. Drop the 5th, feature the 6th as the top note. This is how the chord sings in a jazz context.' },
+    ],
+    licks: [
+      {
+        title: 'Maj6 arpeggio',
+        style: 'Jazz / Bossa',
+        tab: 'e|--5-----------|\nB|----5---------|\nG|------5-4-2---|\nD|----------4-2-|\nA|--3-----------|\n  (C6: C–E–G–A, target the 6th = A)',
+        tip: 'The 6th (A over C6) is the top of the arpeggio — treat it as the melody note and let everything else support it.',
+      },
+      {
+        title: 'Bossa comp rhythm',
+        style: 'Bossa Nova',
+        tab: 'Thumb (T) on bass string, fingers (f) on chord:\n  T . f . T f . f | T . f . T f . f\n  1 . + . 2 + . + | 1 . + . 2 + . +\n  (the classic João Gilberto bossa strum)',
+        tip: 'The thumb bass is as important as the chord — it defines the bossa feel. Keep it locked with the kick drum if there is one.',
+      },
+    ],
+    jamTips: [
+      'Maj6 and min7 are inversions of each other — C6 and Am7 share the same four notes. This means you can substitute one for the other in many contexts.',
+      'Voice the chord so the 6th sits on top — it\'s the melody note. A maj6 with the root on top just sounds like a major chord with extra notes.',
+      'In bossa nova, the I chord is often maj6 (not maj7). The 6th is sweeter and less mysterious than the 7th — it resolves more completely.',
+    ],
+    loopPractice: [
+      { title: 'Bossa ii–V–I loop', body: 'Record a 4-bar loop: 1 bar Dm7, 1 bar G7, 2 bars Cmaj6. The most common jazz cadence. Practise until each change is effortless, then improvise a simple melody that lands on the 6th of the Cmaj6 as its final note — the sweetest possible resolution.' },
+    ],
+  },
+
+  min6: {
+    jamRole: 'Minor with unexpected brightness — the Dorian chord. The major 6th over a minor chord creates emotional complexity: dark and light at once. Essential in flamenco, tango, jazz, and anything Dorian.',
+    voicings: [
+      { name: 'Open Am6 (x02212)', use: 'The classic voicing. The F# on top is the 6th — it must ring clearly. This is the chord that defines the flamenco-jazz crossover sound.' },
+      { name: 'Jazz tonic min6 (4-string)', use: 'In jazz minor jams, use min6 as the tonic instead of plain minor. It sounds resolved but never bland — more sophisticated than a plain triad.' },
+    ],
+    licks: [
+      {
+        title: 'Dorian descending line',
+        style: 'Jazz / Funk',
+        tab: 'e|--5-3-----------|\nB|------5-3-2-----|\nG|----------4-2---|\nD|-----------4-2--|\nA|--0-------------|\n  (A Dorian descending: A G F# E D C# B A)',
+        tip: 'The F# (natural 6th) is what makes this Dorian, not natural minor. Feature it — it\'s the brightness inside the darkness.',
+      },
+      {
+        title: 'Flamenco approach (Am → Am6)',
+        style: 'Flamenco / Spanish',
+        tab: 'e|--0---1---0------|\nB|--1---2---1------|\nG|--2---2---2------|\nD|--2---2---2------|\nA|--0---0---0------|\n  Am  Am6  Am  (the 6th appears and disappears)',
+        tip: 'Letting the Am6 appear for just one beat creates the characteristic Spanish colour — like a flash of sunlight inside the minor mood.',
+      },
+    ],
+    jamTips: [
+      'The natural 6th in a minor chord IS the Dorian mode marker. If the jam is in Dorian (minor with raised 6th), min6 is the correct tonic — play it instead of plain minor.',
+      'In a jazz minor jam, use min6 as the final resting point of a phrase. It sounds more resolved than min7 (which still wants to move) but darker than a plain major.',
+      'The contrast between min6 and plain minor in the same phrase is a device — use it intentionally. Go to Am, then Am6, then back. The harmonic colour shifts are micro-movements of emotion.',
+    ],
+    loopPractice: [
+      { title: 'Dorian vamp loop', body: 'Record a 4-bar Am loop — but on bar 3, switch to Am6 instead of plain Am. Notice how the F# lifts the sound. Improvise using the Dorian scale (natural minor with raised 6th) and specifically target the F# in your phrases. That note IS the sound.' },
+    ],
+  },
+
+  add9: {
+    jamRole: 'The modern open chord — spacious, unambiguous, never clashes. Add9 keeps the clarity of a triad but adds one note of colour. The sound of contemporary rock, pop, and folk jams.',
+    voicings: [
+      { name: 'Open Cadd9 (x32033)', use: 'The quintessential modern voicing. Ring and middle fingers on 3rd fret, open G and high E ring as the 9th. Perfect for pop and acoustic jams.' },
+      { name: 'G / Cadd9 (anchor fingers 3–4)', use: 'Keep ring and pinky on strings 1–2 (fret 3) for BOTH G and Cadd9. Only your first two fingers move between the chords. This anchor technique is what makes the two chords sound seamless.' },
+      { name: 'High position with open string drone', use: 'Use open strings as drones while fretting the add9 shape further up. Creates lush textural layers — very effective in ambient or layered jams.' },
+    ],
+    licks: [
+      {
+        title: 'Cadd9 arpeggio (the 9th rings)',
+        style: 'Pop / Folk',
+        tab: 'e|--3-----------3--|\nB|----3-------3----|\nG|------0---0------|\nD|--------2--------|\nA|--3-----------3--|\n  (Cadd9: root → 3rd → 9th — let the 9th ring over the whole phrase)',
+        tip: 'The 9th (D over C) is the featured note — let it ring as long as possible. It\'s the note that makes the chord feel modern and open.',
+      },
+      {
+        title: 'Melodic fill on string 1 between stabs',
+        style: 'Rock / Pop',
+        tab: 'e|--3---5---3---0---3--|\nB|--3-----------3---3--|\nG|--0-----------0---0--|\nD|--2-----------2---2--|\n  (Cadd9 chord stab, melody fill, back to chord)',
+        tip: 'The fill on string 1 sits over the same chord shape — you\'re comping and filling at the same time. This technique makes you sound like two guitarists.',
+      },
+    ],
+    jamTips: [
+      'The Cadd9 ↔ G movement with anchored fingers 3–4 is the single most useful two-chord pattern in modern pop guitar. Master the anchor first.',
+      'Unlike maj9, add9 has no 7th — it stays clean and unambiguous in a dense mix. Great when there\'s a keys player already adding 7ths.',
+      'Let the 9th ring as a pedal note in your fills. The 2nd degree of the scale — heard an octave up — sounds modern every time and never conflicts with the harmony.',
+    ],
+    loopPractice: [
+      { title: 'Anchor pattern loop', body: 'Record a 2-bar loop alternating Cadd9 and G, using the anchor technique (fingers 3–4 never lift). When the transition is smooth, start adding single-note fills on string 1 between the chord stabs — a lick on the "and" of beat 2, back to the chord on beat 3. You\'re now comping and leading simultaneously.' },
+    ],
+  },
+}

src/lib/theory.js

@@ -360,40 +360,72 @@ export function toRomanNumeral(chordName, keyRoot, keyMode) {
 
 // ─── Repeating progression detection ─────────────────────────────────────────
 
+// Returns true if arr is made of a shorter repeating unit (e.g. [A,B,A,B] → true)
+function isPeriodicPattern(arr) {
+  for (let p = 1; p <= Math.floor(arr.length / 2); p++) {
+    if (arr.length % p !== 0) continue
+    const unit = arr.slice(0, p)
+    if (arr.every((v, i) => v === unit[i % p])) return true
+  }
+  return false
+}
+
+// Returns the lexicographically smallest rotation so the same loop always
+// produces the same string regardless of where in the cycle we currently are.
+function canonicalize(pattern) {
+  let best = pattern
+  for (let i = 1; i < pattern.length; i++) {
+    const rot = [...pattern.slice(i), ...pattern.slice(0, i)]
+    if (rot.join('\0') < best.join('\0')) best = rot
+  }
+  return best
+}
+
 /**
  * detectRepeatingProgression(history) → chord[] or null
- * Returns the most-recently-completed repeating pattern (length 2–6).
- * Uses non-overlapping match counting to avoid over-counting.
+ *
+ * Tests every unique subsequence of every length (not just the tail) so the
+ * result is stable regardless of where in the loop the musician currently is.
+ * Returns the canonical (rotation-normalised) form of the best pattern found.
  */
 export function detectRepeatingProgression(history) {
-  if (!history || history.length < 4) return null
+  if (!history || history.length < 6) return null
 
-  const window = history.slice(-20)
+  const win = history.slice(-32)
   let best = null, bestScore = 0
 
   for (let len = 2; len <= 6; len++) {
-    if (len * 2 > window.length) break
+    if (len * 2 > win.length) break
 
-    const candidate = window.slice(-len)
-    let reps = 0, i = 0
+    const seen = new Set()
 
-    while (i <= window.length - len) {
-      if (candidate.every((c, j) => c === window[i + j])) {
-        reps++
-        i += len  // skip past match — non-overlapping
-      } else {
-        i++
+    for (let start = 0; start <= win.length - len; start++) {
+      const candidate = win.slice(start, start + len)
+      const key = candidate.join('\0')
+      if (seen.has(key)) continue
+      seen.add(key)
+
+      // A pattern that is itself a repetition of something shorter will be
+      // found at that shorter length — skip it here to avoid inflating scores.
+      if (len >= 4 && isPeriodicPattern(candidate)) continue
+
+      let reps = 0, i = 0
+      while (i <= win.length - len) {
+        if (candidate.every((c, j) => c === win[i + j])) { reps++; i += len }
+        else i++
       }
-    }
 
-    const score = reps * len
-    if (reps >= 2 && score > bestScore) {
-      bestScore = score
-      best      = candidate
+      if (reps < 2) continue
+
+      const score = reps * len * len  // square length — prevents sub-patterns from beating full loop
+      if (score > bestScore) {
+        bestScore = score
+        best = candidate
+      }
     }
   }
 
-  return best
+  return best ? canonicalize(best) : null
 }
 
 // ─── Debug / analysis helpers ─────────────────────────────────────────────────
@@ -450,6 +482,7 @@ export function getNoteHistoryAnalysis(noteHistory) {
   }
   return {
     freq:    normalized,
+    total,
     topKeys: candidates.sort((a, b) => b.score - a.score).slice(0, 5),
   }
 }

src/lib/voicings.js

@@ -0,0 +1,563 @@
+// ─── Guitar voicing shapes ────────────────────────────────────────────────────
+// Open string pitches (standard tuning): E A D G B e
+const OPEN = [4, 9, 2, 7, 11, 4]  // pitch class per string [s6 … s1]
+
+// Barre shape: offsets[] are fret distances from the root fret, per string [s6…s1].
+// 'x' = muted.  rootStr = 1-indexed string that holds the root (6=low E, 5=A…).
+// Open shape: frets[] are absolute fret numbers (0=open, 'x'=muted) for a specific root key.
+
+const GUITAR_SHAPES = {
+  maj: [
+    { label: 'E Barre',     type: 'barre', rootStr: 6, offsets: [0,2,2,1,0,0], fingers: [1,3,4,2,1,1], barre: { fromStr: 1, toStr: 6, fo: 0 } },
+    { label: 'A Barre',     type: 'barre', rootStr: 5, offsets: ['x',0,2,2,2,0], fingers: [0,1,3,4,2,1], barre: { fromStr: 1, toStr: 5, fo: 0 } },
+    { label: 'D Shape',     type: 'barre', rootStr: 4, offsets: ['x','x',0,2,3,2], fingers: [0,0,1,3,4,2] },
+    { label: 'G Shape',     type: 'barre', rootStr: 6, offsets: [0,-1,-3,-3,-3,0], fingers: [4,3,1,1,1,4] },
+    { label: 'Open E',      type: 'open',  onlyRoot: 4,  frets: [0,2,2,1,0,0], fingers: [0,2,3,1,0,0] },
+    { label: 'Open A',      type: 'open',  onlyRoot: 9,  frets: ['x',0,2,2,2,0], fingers: [0,0,1,2,3,0] },
+    { label: 'Open G',      type: 'open',  onlyRoot: 7,  frets: [3,2,0,0,0,3], fingers: [2,1,0,0,0,3] },
+    { label: 'Open C',      type: 'open',  onlyRoot: 0,  frets: ['x',3,2,0,1,0], fingers: [0,3,2,0,1,0] },
+    { label: 'Open D',      type: 'open',  onlyRoot: 2,  frets: ['x','x',0,2,3,2], fingers: [0,0,0,1,3,2] },
+  ],
+  min: [
+    { label: 'E Barre',     type: 'barre', rootStr: 6, offsets: [0,2,2,0,0,0], fingers: [1,3,4,1,1,1], barre: { fromStr: 1, toStr: 6, fo: 0 } },
+    { label: 'A Barre',     type: 'barre', rootStr: 5, offsets: ['x',0,2,2,1,0], fingers: [0,1,3,4,2,1], barre: { fromStr: 1, toStr: 5, fo: 0 } },
+    { label: 'D Shape',     type: 'barre', rootStr: 4, offsets: ['x','x',0,2,3,1], fingers: [0,0,1,3,4,2] },
+    { label: 'Open Em',     type: 'open',  onlyRoot: 4,  frets: [0,2,2,0,0,0], fingers: [0,2,3,0,0,0] },
+    { label: 'Open Am',     type: 'open',  onlyRoot: 9,  frets: ['x',0,2,2,1,0], fingers: [0,0,2,3,1,0] },
+    { label: 'Open Dm',     type: 'open',  onlyRoot: 2,  frets: ['x','x',0,2,3,1], fingers: [0,0,0,2,3,1] },
+  ],
+  dom7: [
+    { label: 'E7 Barre',    type: 'barre', rootStr: 6, offsets: [0,2,0,1,0,0], fingers: [1,3,0,2,1,1], barre: { fromStr: 1, toStr: 6, fo: 0 } },
+    { label: 'A7 Barre',    type: 'barre', rootStr: 5, offsets: ['x',0,2,0,2,0], fingers: [0,1,2,0,3,0] },
+    { label: 'D Shape',     type: 'barre', rootStr: 4, offsets: ['x','x',0,2,1,2], fingers: [0,0,1,3,2,4] },
+    { label: 'Open E7',     type: 'open',  onlyRoot: 4,  frets: [0,2,0,1,0,0], fingers: [0,2,0,1,0,0] },
+    { label: 'Open A7',     type: 'open',  onlyRoot: 9,  frets: ['x',0,2,0,2,0], fingers: [0,0,2,0,3,0] },
+    { label: 'Open G7',     type: 'open',  onlyRoot: 7,  frets: [3,2,0,0,0,1], fingers: [3,2,0,0,0,1] },
+    { label: 'Open D7',     type: 'open',  onlyRoot: 2,  frets: ['x','x',0,2,1,2], fingers: [0,0,0,2,1,3] },
+    { label: 'Open B7',     type: 'open',  onlyRoot: 11, frets: ['x',2,1,2,0,2], fingers: [0,2,1,3,0,4] },
+  ],
+  maj7: [
+    { label: 'E Barre',     type: 'barre', rootStr: 6, offsets: [0,2,1,1,0,0], fingers: [1,3,2,2,1,1], barre: { fromStr: 1, toStr: 6, fo: 0 } },
+    { label: 'A Barre',     type: 'barre', rootStr: 5, offsets: ['x',0,2,1,2,0], fingers: [0,1,3,2,4,1], barre: { fromStr: 1, toStr: 2, fo: 0 } },
+    { label: 'D Shape',     type: 'barre', rootStr: 4, offsets: ['x','x',0,2,2,2], fingers: [0,0,1,2,3,4], barre: { fromStr: 1, toStr: 3, fo: 2 } },
+    { label: 'Open Cmaj7',  type: 'open',  onlyRoot: 0,  frets: ['x',3,2,0,0,0], fingers: [0,3,2,0,0,0] },
+    { label: 'Open Amaj7',  type: 'open',  onlyRoot: 9,  frets: ['x',0,2,1,2,0], fingers: [0,0,2,1,3,0] },
+    { label: 'Open Emaj7',  type: 'open',  onlyRoot: 4,  frets: [0,2,1,1,0,0], fingers: [0,2,1,1,0,0] },
+  ],
+  min7: [
+    { label: 'E Barre',     type: 'barre', rootStr: 6, offsets: [0,2,0,0,0,0], fingers: [1,3,1,1,1,1], barre: { fromStr: 1, toStr: 6, fo: 0 } },
+    { label: 'A Barre',     type: 'barre', rootStr: 5, offsets: ['x',0,2,0,1,0], fingers: [0,1,3,1,2,1], barre: { fromStr: 1, toStr: 5, fo: 0 } },
+    { label: 'D Shape',     type: 'barre', rootStr: 4, offsets: ['x','x',0,2,1,1], fingers: [0,0,1,3,2,2] },
+    { label: 'Open Em7',    type: 'open',  onlyRoot: 4,  frets: [0,2,0,0,0,0], fingers: [0,2,0,0,0,0] },
+    { label: 'Open Am7',    type: 'open',  onlyRoot: 9,  frets: ['x',0,2,0,1,0], fingers: [0,0,2,0,1,0] },
+    { label: 'Open Dm7',    type: 'open',  onlyRoot: 2,  frets: ['x','x',0,2,1,1], fingers: [0,0,0,3,1,2] },
+  ],
+  dim: [
+    { label: 'A Barre',     type: 'barre', rootStr: 5, offsets: ['x',0,1,2,1,'x'], fingers: [0,1,2,4,3,0] },
+    { label: 'Compact',     type: 'barre', rootStr: 4, offsets: ['x','x',0,1,3,1], fingers: [0,0,1,2,4,3] },
+  ],
+  dim7: [
+    { label: 'Movable Box', type: 'barre', rootStr: 5, offsets: ['x',0,1,2,1,2], fingers: [0,1,2,4,3,4] },
+    { label: 'Compact',     type: 'barre', rootStr: 4, offsets: ['x','x',0,1,0,1], fingers: [0,0,1,2,3,4] },
+  ],
+  aug: [
+    { label: 'E Barre',     type: 'barre', rootStr: 6, offsets: [0,3,2,1,1,0], fingers: [1,4,3,2,2,1] },
+    { label: 'Compact',     type: 'barre', rootStr: 5, offsets: ['x',0,3,2,2,'x'], fingers: [0,1,4,2,3,0] },
+  ],
+  sus4: [
+    { label: 'E Barre',     type: 'barre', rootStr: 6, offsets: [0,2,2,2,0,0], fingers: [1,2,3,4,1,1], barre: { fromStr: 1, toStr: 6, fo: 0 } },
+    { label: 'A Barre',     type: 'barre', rootStr: 5, offsets: ['x',0,2,2,3,0], fingers: [0,1,2,3,4,0] },
+    { label: 'D Shape',     type: 'barre', rootStr: 4, offsets: ['x','x',0,2,3,3], fingers: [0,0,1,2,3,4] },
+    { label: 'Open Asus4',  type: 'open',  onlyRoot: 9,  frets: ['x',0,2,2,3,0], fingers: [0,0,1,2,4,0] },
+    { label: 'Open Dsus4',  type: 'open',  onlyRoot: 2,  frets: ['x','x',0,2,3,3], fingers: [0,0,0,1,2,3] },
+  ],
+  sus2: [
+    { label: 'E Barre',     type: 'barre', rootStr: 6, offsets: [0,2,4,4,0,0], fingers: [1,2,4,4,1,1], barre: { fromStr: 1, toStr: 6, fo: 0 } },
+    { label: 'A Barre',     type: 'barre', rootStr: 5, offsets: ['x',0,2,4,0,0], fingers: [0,1,2,4,1,1], barre: { fromStr: 1, toStr: 2, fo: 0 } },
+    { label: 'D Shape',     type: 'barre', rootStr: 4, offsets: ['x','x',0,2,3,0], fingers: [0,0,1,2,3,0] },
+    { label: 'Open Asus2',  type: 'open',  onlyRoot: 9,  frets: ['x',0,2,2,0,0], fingers: [0,0,1,2,0,0] },
+    { label: 'Open Dsus2',  type: 'open',  onlyRoot: 2,  frets: ['x','x',0,2,3,0], fingers: [0,0,0,1,3,0] },
+  ],
+  half_dim: [
+    { label: 'A Barre',     type: 'barre', rootStr: 5, offsets: ['x',0,1,0,1,'x'], fingers: [0,1,2,0,3,0] },
+    { label: 'E Barre',     type: 'barre', rootStr: 6, offsets: [0,1,2,0,0,'x'], fingers: [1,2,3,1,1,0], barre: { fromStr: 2, toStr: 6, fo: 0 } },
+  ],
+  maj6: [
+    { label: 'E Barre',     type: 'barre', rootStr: 6, offsets: [0,2,2,1,2,0], fingers: [1,3,4,2,4,1], barre: { fromStr: 1, toStr: 6, fo: 0 } },
+    { label: 'A Barre',     type: 'barre', rootStr: 5, offsets: ['x',0,2,2,2,2], fingers: [0,1,2,3,4,4], barre: { fromStr: 1, toStr: 2, fo: 2 } },
+  ],
+  min6: [
+    { label: 'E Barre',     type: 'barre', rootStr: 6, offsets: [0,2,2,0,2,0], fingers: [1,3,4,1,4,1], barre: { fromStr: 1, toStr: 6, fo: 0 } },
+  ],
+  add9: [
+    { label: 'E Barre',     type: 'barre', rootStr: 6, offsets: [0,2,4,1,0,2], fingers: [1,2,4,3,1,1], barre: { fromStr: 1, toStr: 6, fo: 0 } },
+    { label: 'Open Cadd9',  type: 'open',  onlyRoot: 0,  frets: ['x',3,2,0,3,0], fingers: [0,3,2,0,4,0] },
+    { label: 'Open Gadd9',  type: 'open',  onlyRoot: 7,  frets: [3,2,0,2,3,3], fingers: [2,1,0,3,4,4] },
+    { label: 'Open Dadd9',  type: 'open',  onlyRoot: 2,  frets: ['x','x',0,2,3,0], fingers: [0,0,0,1,3,0] },
+  ],
+}
+
+// ─── Piano techniques ─────────────────────────────────────────────────────────
+// Each technique has intervals for left hand (LH) and right hand (RH) in semitones above root.
+// Negative values go one octave below root. Labels appear on the keys.
+
+export const PIANO_TECHNIQUES = {
+  maj: [
+    {
+      name: 'Full Chord',
+      desc: 'Classic voicing — root in left, triad in right',
+      tip: 'Anchor the root alone in your left hand, lock into the rhythm, let right hand sing.',
+      lh: [0],
+      rh: [0, 4, 7],
+    },
+    {
+      name: 'Root + 5th',
+      desc: 'Open, powerful — ambiguous major/minor quality',
+      tip: 'Stack octave + fifth in left hand. Works over major or minor — great for tense moments.',
+      lh: [0, 7],
+      rh: [0, 4, 7, 12],
+    },
+    {
+      name: 'Root + Octave',
+      desc: 'Thunderous low end — fills space in a band',
+      tip: 'Octave doubles in left hand, full chord in right. Huge sound in lower registers.',
+      lh: [0, 12],
+      rh: [4, 7, 12],
+    },
+    {
+      name: 'Spread Voicing',
+      desc: 'Wide, orchestral — two octaves apart',
+      tip: 'Split the chord wide: 5th in left, 3rd + 5th above the octave in right. Very cinematic.',
+      lh: [0, 7],
+      rh: [12, 16, 19],
+    },
+    {
+      name: 'Suspended Approach',
+      desc: 'Play sus4 → resolve to major — creates motion',
+      tip: 'Hit sus4 (replace 3rd with 4th) then release to the major 3rd. Works great in slow ballads.',
+      lh: [0],
+      rh: [0, 5, 7],
+    },
+  ],
+  min: [
+    {
+      name: 'Full Chord',
+      desc: 'Classic minor voicing — dark and rich',
+      tip: 'The minor 3rd is everything. Let it ring — do not rush to resolve.',
+      lh: [0],
+      rh: [0, 3, 7],
+    },
+    {
+      name: 'Root + 5th',
+      desc: 'Open ambiguity — dramatic without the sadness',
+      tip: 'Power chord in both hands. Hides the minor quality — use when you want tension without gloom.',
+      lh: [0, 7],
+      rh: [0, 7, 12],
+    },
+    {
+      name: 'Root + Octave',
+      desc: 'Deep anchor — gives bass player space',
+      tip: 'Octave in left only. Right hand plays the minor chord high up for contrast.',
+      lh: [0, 12],
+      rh: [3, 7, 12],
+    },
+    {
+      name: 'Spread Minor',
+      desc: 'Atmospheric and wide — film score territory',
+      tip: 'Wide spacing on minor chords feels melancholic and vast. Popular in ambient and cinematic styles.',
+      lh: [0, 7],
+      rh: [12, 15, 19],
+    },
+    {
+      name: 'Minor + Add9',
+      desc: 'Add the 9th (2nd) — aching, bittersweet quality',
+      tip: 'Replace or add the 9th to minor. Radiohead, Portishead, modern soul — this interval is gold.',
+      lh: [0],
+      rh: [0, 3, 7, 14],
+    },
+  ],
+  dom7: [
+    {
+      name: 'Full Dom7',
+      desc: 'Classic dominant — loaded with tension',
+      tip: 'The tritone between the 3rd and ♭7th creates all the tension. Let it ring before resolving.',
+      lh: [0],
+      rh: [0, 4, 7, 10],
+    },
+    {
+      name: 'Shell Voicing (1-3-♭7)',
+      desc: 'Skip the 5th — lean, jazz-approved',
+      tip: 'Root + major 3rd + ♭7th. The tritone is intact, 5th is redundant. Classic jazz comp technique.',
+      lh: [0],
+      rh: [4, 10],
+    },
+    {
+      name: 'Rootless Voicing',
+      desc: 'Advanced comping — let bass hold the root',
+      tip: 'No root in your hands at all. 3rd in left, upper structure in right. Very sophisticated sound.',
+      lh: [4],
+      rh: [7, 10, 14],
+    },
+    {
+      name: 'Blues Stomp',
+      desc: 'Root + 5th left, add ♭7 right — R&B classic',
+      tip: 'Left hand pumps root-5th pattern, right hand stabs the dominant 7th chord. Classic gospel/blues.',
+      lh: [0, 7],
+      rh: [0, 4, 10],
+    },
+    {
+      name: 'Tritone Sub',
+      desc: 'Replace with the chord a tritone away',
+      tip: 'G7 can be replaced with Db7 — they share the same tritone (F and B). Mind-bending jazz move.',
+      lh: [6],
+      rh: [10, 14, 16],
+    },
+  ],
+  maj7: [
+    {
+      name: 'Full Maj7',
+      desc: 'Dreamy, floating — jazz and bossa nova',
+      tip: 'The major 7th creates a luminous, slightly unresolved quality. Do not over-play it — let it breathe.',
+      lh: [0],
+      rh: [0, 4, 7, 11],
+    },
+    {
+      name: 'Shell (1-3-7)',
+      desc: 'Root + 3rd + maj7 — lush and clean',
+      tip: 'Skip the 5th. The major 7th directly above the root defines the chord without clutter.',
+      lh: [0],
+      rh: [4, 11],
+    },
+    {
+      name: 'Spread Maj7',
+      desc: 'Maj7 in left hand — wide, orchestral texture',
+      tip: 'Place the 7th below the root (or an octave down). Creates a spacious, choir-like sound.',
+      lh: [0, 11],
+      rh: [12, 16, 19],
+    },
+    {
+      name: 'Add9 Variation',
+      desc: 'Add the 9th for extra colour',
+      tip: 'Maj9 territory. Remove the root in the right hand, add the 9th (D for Cmaj9). Very smooth.',
+      lh: [0],
+      rh: [4, 7, 11, 14],
+    },
+  ],
+  min7: [
+    {
+      name: 'Full Min7',
+      desc: 'Smooth and mellow — soul and jazz workhorse',
+      tip: 'The minor 7th chord is the most versatile in jazz. Comp behind everything with this.',
+      lh: [0],
+      rh: [0, 3, 7, 10],
+    },
+    {
+      name: 'Shell (1-♭3-♭7)',
+      desc: 'Just the 3rd and 7th in right — spacious',
+      tip: 'Root in left, minor 3rd + minor 7th in right. Leaves maximum space for the soloist.',
+      lh: [0],
+      rh: [3, 10],
+    },
+    {
+      name: 'Rootless Min7',
+      desc: 'No root — upper structure only',
+      tip: '♭3rd in left, build up from there. Very advanced jazz voicing — trust the bass player.',
+      lh: [3],
+      rh: [10, 14, 15],
+    },
+    {
+      name: 'Spread Atmospheric',
+      desc: 'Wide voicing — ambient and cinematic',
+      tip: 'Minor 7ths voiced wide feel endless. Great for intro sections or building tension.',
+      lh: [0, 7],
+      rh: [10, 15, 19],
+    },
+  ],
+  dim: [
+    {
+      name: 'Full Diminished',
+      desc: 'All three tones — tense and unstable',
+      tip: 'Always wants to resolve. Use as a passing chord between diatonic chords.',
+      lh: [0],
+      rh: [0, 3, 6],
+    },
+    {
+      name: 'Octave + Dim',
+      desc: 'Root octave in left — more weight',
+      tip: 'Dim triads are thin — doubling the root in left hand adds body.',
+      lh: [0, 12],
+      rh: [3, 6, 12],
+    },
+  ],
+  dim7: [
+    {
+      name: 'Full Dim7',
+      desc: 'Symmetrical — repeats every 3 frets',
+      tip: 'Any note in a dim7 chord can be the root. It modulates effortlessly. Horror/drama gold.',
+      lh: [0],
+      rh: [0, 3, 6, 9],
+    },
+    {
+      name: 'Arpeggiated',
+      desc: 'Roll the notes — tension without crash',
+      tip: 'Roll from bottom to top quickly. Dim7 arpeggios feel like falling — use before a big resolve.',
+      lh: [0, 3],
+      rh: [6, 9, 12],
+    },
+  ],
+  aug: [
+    {
+      name: 'Full Augmented',
+      desc: 'Dreamy, unresolved — whole-tone territory',
+      tip: 'Aug chords are symmetrical like dim7 — every inversion sounds the same. Very otherworldly.',
+      lh: [0],
+      rh: [0, 4, 8],
+    },
+    {
+      name: 'Spread Aug',
+      desc: 'Wide voicing — maximises the instability',
+      tip: 'Spread over two octaves. The raised 5th wants to resolve up — let the listener feel the pull.',
+      lh: [0, 8],
+      rh: [12, 16, 20],
+    },
+  ],
+  sus4: [
+    {
+      name: 'Full Sus4',
+      desc: 'Suspended — neither major nor minor',
+      tip: 'Ambiguous and open. Resolve down to the major 3rd for instant satisfaction.',
+      lh: [0],
+      rh: [0, 5, 7],
+    },
+    {
+      name: 'Sus4 → Major',
+      desc: 'Play sus4 then resolve — creates motion',
+      tip: 'Hit sus4 on the beat, release to major on the off-beat. The oldest trick in the book.',
+      lh: [0],
+      rh: [5, 7, 12],
+    },
+    {
+      name: 'Root + 5th + Sus',
+      desc: 'Power chord with the fourth on top',
+      tip: 'Very rock and dramatic. The sus4 on top gives it an anthemic, U2-esque quality.',
+      lh: [0, 7],
+      rh: [7, 12, 17],
+    },
+  ],
+  sus2: [
+    {
+      name: 'Full Sus2',
+      desc: 'Open, airy — the 2nd instead of 3rd',
+      tip: 'Sus2 chords feel free and unanchored. Great for intros and ambient sections.',
+      lh: [0],
+      rh: [0, 2, 7],
+    },
+    {
+      name: 'Spread Sus2',
+      desc: 'Wide and spacious — very ambient',
+      tip: 'The 2nd voiced wide feels like an open landscape. Sigur Rós territory.',
+      lh: [0, 7],
+      rh: [12, 14, 19],
+    },
+  ],
+  half_dim: [
+    {
+      name: 'Full m7♭5',
+      desc: 'Half-diminished — minor 7th with flat 5',
+      tip: 'The ii chord in minor keys (e.g. Bø in C minor). Tense but smoother than full diminished.',
+      lh: [0],
+      rh: [0, 3, 6, 10],
+    },
+    {
+      name: 'Shell (1-♭3-♭7)',
+      desc: 'Skip the flat 5 — cleaner jazz comp',
+      tip: 'The ♭5 is optional in jazz. Root + minor 3rd + minor 7th is clean and functional.',
+      lh: [0],
+      rh: [3, 10],
+    },
+  ],
+  maj6: [
+    {
+      name: 'Full Maj6',
+      desc: 'Major with added 6th — vintage jazz sound',
+      tip: 'Maj6 and min7 are inversions of each other. Interchangeable in many jazz contexts.',
+      lh: [0],
+      rh: [0, 4, 7, 9],
+    },
+    {
+      name: 'Shell (1-3-6)',
+      desc: 'Clean and retro — skip the 5th',
+      tip: 'The 6th adds sweetness without too much colour. Django Reinhardt loved this voicing.',
+      lh: [0],
+      rh: [4, 9],
+    },
+  ],
+  min6: [
+    {
+      name: 'Full Min6',
+      desc: 'Minor with major 6th — exotic and dark',
+      tip: 'The major 6th over a minor triad is a flamenco and tango staple. Very striking colour.',
+      lh: [0],
+      rh: [0, 3, 7, 9],
+    },
+    {
+      name: 'Shell (1-♭3-6)',
+      desc: 'Tense and colourful — the ♭3+6 tension',
+      tip: 'The minor 3rd + major 6th interval is the characteristic clash of min6. Lean into it.',
+      lh: [0],
+      rh: [3, 9],
+    },
+  ],
+  add9: [
+    {
+      name: 'Full Add9',
+      desc: 'Major chord + 9th — no 7th, stays bright',
+      tip: 'The 9th adds colour without the jazz sophistication of maj9. Feels modern and open.',
+      lh: [0],
+      rh: [0, 4, 7, 14],
+    },
+    {
+      name: 'No Root Add9',
+      desc: 'Skip root in right — 3rd + 9th float',
+      tip: 'Root in left, right hand plays 3rd + 5th + 9th. Airy and modern — Radiohead / Coldplay territory.',
+      lh: [0],
+      rh: [4, 7, 14],
+    },
+    {
+      name: 'Sus2-style',
+      desc: 'Add9 voiced as sus2 clusters',
+      tip: 'Place the 9th close to the root (2nd instead of 9th). Creates a shimmering cluster effect.',
+      lh: [0, 7],
+      rh: [2, 4, 7],
+    },
+  ],
+}
+
+// Fallback for chord types not in the map
+const GENERIC_PIANO = [
+  {
+    name: 'Full Chord',
+    desc: 'Root in left, chord tones in right',
+    tip: 'Play the chord tones in right hand while anchoring the root in the left.',
+    lh: [0],
+    rh: [0],  // will be replaced by computed intervals
+  },
+]
+
+// ─── Compute functions ────────────────────────────────────────────────────────
+
+// Parse a chord name like "C#m7" → { rootPc: 1, type: 'min7' }
+// Mirrors the logic in theory.js parseChord
+function parseChord(name) {
+  if (!name) return null
+  const NOTES = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B']
+  const NOTES_FLAT = ['C','Db','D','Eb','E','F','Gb','G','Ab','A','Bb','B']
+  const suffixMap = {
+    '': 'maj', 'm': 'min', 'min': 'min', 'maj': 'maj',
+    '7': 'dom7', 'maj7': 'maj7', 'm7': 'min7', 'min7': 'min7',
+    'dim': 'dim', 'dim7': 'dim7', 'm7b5': 'half_dim', 'ø': 'half_dim', 'ø7': 'half_dim',
+    'aug': 'aug', '+': 'aug',
+    'sus4': 'sus4', 'sus2': 'sus2',
+    '6': 'maj6', 'm6': 'min6', 'min6': 'min6',
+    'add9': 'add9',
+  }
+
+  let rest = name
+  let root = ''
+  if (rest.length > 1 && (rest[1] === '#' || rest[1] === 'b')) {
+    root = rest.slice(0, 2); rest = rest.slice(2)
+  } else {
+    root = rest.slice(0, 1); rest = rest.slice(1)
+  }
+
+  let rootPc = NOTES.indexOf(root)
+  if (rootPc === -1) rootPc = NOTES_FLAT.indexOf(root)
+  if (rootPc === -1) return null
+
+  const type = suffixMap[rest] ?? 'maj'
+  return { rootPc, type }
+}
+
+/**
+ * Returns an array of voicing objects for a given chord name.
+ * Each voicing: { label, frets[6], fingers[6], barre?, baseFret }
+ * frets values: number (fret) or 'x' (muted) or 0 (open)
+ */
+export function getGuitarVoicings(chordName) {
+  const parsed = parseChord(chordName)
+  if (!parsed) return []
+  const { rootPc, type } = parsed
+  const shapes = GUITAR_SHAPES[type] ?? GUITAR_SHAPES.maj
+
+  const result = []
+
+  for (const shape of shapes) {
+    if (shape.type === 'open') {
+      if (shape.onlyRoot !== undefined && shape.onlyRoot !== rootPc) continue
+      result.push({
+        label:    shape.label,
+        frets:    shape.frets,
+        fingers:  shape.fingers,
+        barre:    null,
+        baseFret: 1,
+      })
+      continue
+    }
+
+    // barre shape: compute rootFret on rootStr
+    const strIdx = shape.rootStr - 1  // 0=s6 … 5=s1
+    const openPc = OPEN[strIdx]
+    let rootFret = (rootPc - openPc + 12) % 12
+
+    // Compute absolute frets
+    const frets = shape.offsets.map((off, i) => {
+      if (off === 'x') return 'x'
+      return rootFret + off
+    })
+
+    // Skip impossible positions
+    if (frets.some(f => typeof f === 'number' && f < 0)) continue
+    const maxFret = Math.max(...frets.filter(f => f !== 'x'))
+    if (maxFret > 15) continue
+
+    // baseFret: start diagram so the chord fits in 5 frets
+    const minFret = Math.min(...frets.filter(f => f !== 'x' && f > 0))
+    const baseFret = rootFret === 0 ? 1 : Math.max(1, minFret)
+
+    // Compute barre position if applicable
+    let barre = null
+    if (shape.barre) {
+      barre = {
+        fret:     rootFret + shape.barre.fo,
+        fromStr:  shape.barre.fromStr,
+        toStr:    shape.barre.toStr,
+      }
+    }
+
+    // For open-string E/A chords (rootFret=0), no barre needed
+    if (rootFret === 0) barre = null
+
+    result.push({
+      label:    shape.label + (rootFret === 0 ? ' (Open)' : rootFret > 5 ? ` — Fret ${rootFret}` : ''),
+      frets,
+      fingers:  shape.fingers,
+      barre,
+      baseFret,
+    })
+  }
+
+  return result
+}
+
+/**
+ * Returns piano techniques for a chord name.
+ * Each technique has: { name, desc, tip, lh (intervals), rh (intervals) }
+ */
+export function getPianoTechniques(chordName) {
+  const parsed = parseChord(chordName)
+  if (!parsed) return []
+  const { type } = parsed
+  return PIANO_TECHNIQUES[type] ?? GENERIC_PIANO
+}
+
+export { parseChord }

src/services/audioService.js

@@ -78,7 +78,17 @@ export function useAudioTuner() {
   const startListening = async () => {
     if (isListening) return
     try {
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+      // Read saved device selection from config (if present)
+      let deviceId = null
+      try {
+        const cfg = JSON.parse(localStorage.getItem('wtf_config') || '{}')
+        deviceId = cfg.audioDeviceId || null
+      } catch (e) {
+        // ignore
+      }
+      const constraints = deviceId ? { audio: { deviceId: { exact: deviceId } } } : { audio: true }
+      console.log('Tuner requesting getUserMedia with', constraints)
+      const stream = await navigator.mediaDevices.getUserMedia(constraints)
       const ctx = new (window.AudioContext || window.webkitAudioContext)()
       const analyser = ctx.createAnalyser()
       analyser.fftSize = 4096

src/services/loopEngine.js

@@ -0,0 +1,359 @@
+import { useRef, useState, useCallback, useEffect } from 'react'
+
+const INITIAL_SLOT_COUNT = 4
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+function makeWaveform(audioBuffer, points = 200) {
+  const data = audioBuffer.getChannelData(0)
+  const step = Math.max(1, Math.floor(data.length / points))
+  const out  = new Float32Array(points)
+  for (let i = 0; i < points; i++) {
+    let max = 0
+    for (let j = 0; j < step; j++) {
+      const v = Math.abs(data[i * step + j] ?? 0)
+      if (v > max) max = v
+    }
+    out[i] = max
+  }
+  const peak = Math.max(...out, 0.001)
+  for (let i = 0; i < points; i++) out[i] /= peak
+  return out
+}
+
+function makeEmptySlot() {
+  return {
+    status:            'empty',   // 'empty'|'recording'|'trimming'|'playing'|'muted'
+    audioBuffer:       null,
+    originalBuffer:    null,      // always the full recording, never overwritten
+    waveform:          null,      // Float32Array(200) for canvas display
+    trimStart:         0,
+    trimEnd:           1,
+    volume:            0.8,
+    sourceNode:        null,
+    gainNode:          null,
+    recordingDuration: 0,
+  }
+}
+
+// ─── Hook ─────────────────────────────────────────────────────────────────────
+
+export function useLoopEngine(bpm) {
+  const audioCtxRef    = useRef(null)
+  const masterStartRef = useRef(null)   // AudioContext timestamp of first loop start
+  const masterLenRef   = useRef(null)   // master loop length in seconds
+  const recorderRef    = useRef(null)   // { mr, chunks, slotIdx }
+  const slotsRef       = useRef(null)
+  const streamRef      = useRef(null)
+  const timerRef       = useRef(null)
+
+  const [slots, setSlots] = useState(() => {
+    const s = Array.from({ length: INITIAL_SLOT_COUNT }, makeEmptySlot)
+    slotsRef.current = s
+    return s
+  })
+  const [masterLen, setMasterLen] = useState(null) // mirrors masterLenRef for display
+
+  const updateSlot = useCallback((idx, patch) => {
+    setSlots(prev => {
+      const next = prev.map((s, i) => i === idx ? { ...s, ...patch } : s)
+      slotsRef.current = next
+      return next
+    })
+  }, [])
+
+  // ── AudioContext ────────────────────────────────────────────────────────────
+  const ensureCtx = useCallback(() => {
+    if (!audioCtxRef.current || audioCtxRef.current.state === 'closed') {
+      audioCtxRef.current = new AudioContext()
+    }
+    if (audioCtxRef.current.state === 'suspended') {
+      audioCtxRef.current.resume().catch(() => {})
+    }
+    return audioCtxRef.current
+  }, [])
+
+  // ── Called by AudioCapture when mic stream is ready ─────────────────────────
+  const setStream = useCallback((stream) => {
+    streamRef.current = stream
+    ensureCtx() // pre-warm so first record click has no AudioContext startup lag
+  }, [ensureCtx])
+
+  // ── Start recording on a slot ───────────────────────────────────────────────
+  const startRecord = useCallback((slotIdx) => {
+    if (recorderRef.current) return   // one at a time
+    if (!streamRef.current) return
+
+    const mimeType = MediaRecorder.isTypeSupported('audio/webm;codecs=opus')
+      ? 'audio/webm;codecs=opus'
+      : 'audio/webm'
+
+    const mr     = new MediaRecorder(streamRef.current, { mimeType })
+    const chunks = []
+
+    mr.ondataavailable = (e) => { if (e.data.size > 0) chunks.push(e.data) }
+
+    mr.onstop = async () => {
+      clearInterval(timerRef.current)
+      timerRef.current = null
+      // Guard: was this slot cancelled before onstop fired?
+      if (slotsRef.current[slotIdx]?.status !== 'recording') return
+      try {
+        const ctx         = ensureCtx()
+        const blob        = new Blob(chunks, { type: mimeType })
+        const arrayBuffer = await blob.arrayBuffer()
+        const audioBuffer = await ctx.decodeAudioData(arrayBuffer)
+        const waveform    = makeWaveform(audioBuffer)
+        updateSlot(slotIdx, {
+          status: 'trimming',
+          audioBuffer,
+          originalBuffer: audioBuffer,   // preserve forever
+          waveform,
+          trimStart: 0,
+          trimEnd:   1,
+        })
+      } catch (err) {
+        console.warn('[LoopEngine] decode failed:', err)
+        updateSlot(slotIdx, makeEmptySlot())
+      }
+      recorderRef.current = null
+    }
+
+    mr.onerror = () => {
+      clearInterval(timerRef.current)
+      timerRef.current  = null
+      recorderRef.current = null
+      updateSlot(slotIdx, makeEmptySlot())
+    }
+
+    recorderRef.current = { mr, chunks, slotIdx }
+    mr.start(250)
+    updateSlot(slotIdx, { status: 'recording', recordingDuration: 0 })
+
+    const t0 = Date.now()
+    timerRef.current = setInterval(() => {
+      updateSlot(slotIdx, { recordingDuration: (Date.now() - t0) / 1000 })
+    }, 100)
+  }, [ensureCtx, updateSlot])
+
+  // ── Stop recording → triggers onstop → trimming state ──────────────────────
+  const stopRecord = useCallback((slotIdx) => {
+    const rec = recorderRef.current
+    if (!rec || rec.slotIdx !== slotIdx) return
+    if (rec.mr.state !== 'inactive') rec.mr.stop()
+    clearInterval(timerRef.current)
+    timerRef.current = null
+  }, [])
+
+  // ── Cancel recording (discard) ──────────────────────────────────────────────
+  const cancelRecord = useCallback((slotIdx) => {
+    const rec = recorderRef.current
+    if (rec && rec.slotIdx === slotIdx) {
+      // Prevent onstop from processing by marking slot empty first
+      updateSlot(slotIdx, makeEmptySlot())
+      if (rec.mr.state !== 'inactive') rec.mr.stop()
+      recorderRef.current = null
+    } else {
+      updateSlot(slotIdx, makeEmptySlot())
+    }
+    clearInterval(timerRef.current)
+    timerRef.current = null
+  }, [updateSlot])
+
+  // ── Commit trim and start looping ───────────────────────────────────────────
+  const commitTrim = useCallback((slotIdx, trimStart, trimEnd) => {
+    const ctx  = ensureCtx()
+    const slot = slotsRef.current[slotIdx]
+    if (!slot?.audioBuffer) return
+
+    const fullBuf = slot.audioBuffer
+    const sr      = fullBuf.sampleRate
+    const startSample = Math.floor(trimStart * fullBuf.length)
+    const endSample   = Math.ceil(trimEnd   * fullBuf.length)
+    const rawLen      = endSample - startSample
+    if (rawLen < sr * 0.2) return   // reject clips shorter than 200ms
+
+    const rawData = fullBuf.getChannelData(0).slice(startSample, endSample)
+    const rawSec  = rawLen / sr
+
+    // Master loop length is set exactly from the first loop's trimmed region.
+    // Subsequent loops are padded/trimmed to match that length.
+    const isFirst   = masterLenRef.current === null
+    const targetSec = isFirst ? rawSec : masterLenRef.current
+    const targetLen = Math.round(targetSec * sr)
+
+    const finalData = new Float32Array(targetLen)   // zero-padded by default
+    finalData.set(rawData.slice(0, Math.min(rawLen, targetLen)))
+
+    const finalBuf = ctx.createBuffer(1, targetLen, sr)
+    finalBuf.copyToChannel(finalData, 0)
+
+    if (isFirst) {
+      masterLenRef.current = targetSec
+      setMasterLen(targetSec)
+    }
+
+    const gainNode   = ctx.createGain()
+    gainNode.gain.value = slot.volume
+    gainNode.connect(ctx.destination)
+
+    const sourceNode = ctx.createBufferSource()
+    sourceNode.buffer    = finalBuf
+    sourceNode.loop      = true
+    sourceNode.loopStart = 0
+    sourceNode.loopEnd   = targetSec
+    sourceNode.connect(gainNode)
+
+    // Schedule: first loop starts immediately; subsequent loops snap to the
+    // next master loop boundary so they play in perfect sync.
+    let startTime
+    if (isFirst) {
+      startTime = ctx.currentTime + 0.05
+      masterStartRef.current = startTime
+    } else {
+      const elapsed    = ctx.currentTime - masterStartRef.current
+      const loopLen    = masterLenRef.current
+      const posInLoop  = elapsed % loopLen
+      const remaining  = loopLen - posInLoop
+      const LOOKAHEAD  = 0.05
+      startTime = ctx.currentTime + (remaining > LOOKAHEAD ? remaining : remaining + loopLen)
+    }
+    sourceNode.start(startTime)
+
+    updateSlot(slotIdx, {
+      status:         'playing',
+      audioBuffer:    finalBuf,
+      originalBuffer: slot.originalBuffer ?? null,   // preserve original
+      waveform:       makeWaveform(finalBuf),
+      trimStart:      0,
+      trimEnd:        1,
+      sourceNode,
+      gainNode,
+    })
+  }, [ensureCtx, updateSlot])
+
+  // ── Re-trim: return a playing/muted slot back to the trimmer ────────────────
+  const retrimSlot = useCallback((slotIdx) => {
+    const slot = slotsRef.current[slotIdx]
+    if (!slot?.originalBuffer) return
+
+    // Stop current playback
+    try { slot.sourceNode?.stop() } catch {}
+    try { slot.sourceNode?.disconnect() } catch {}
+    try { slot.gainNode?.disconnect() } catch {}
+
+    // Reset master timing if no other loops remain active
+    const hasOthers = slotsRef.current.some((s, i) =>
+      i !== slotIdx && (s.status === 'playing' || s.status === 'muted')
+    )
+    if (!hasOthers) {
+      masterStartRef.current = null
+      masterLenRef.current   = null
+      setMasterLen(null)
+    }
+
+    updateSlot(slotIdx, {
+      status:      'trimming',
+      audioBuffer: slot.originalBuffer,
+      waveform:    makeWaveform(slot.originalBuffer),
+      originalBuffer: slot.originalBuffer,
+      trimStart:   0,
+      trimEnd:     1,
+      sourceNode:  null,
+      gainNode:    null,
+    })
+  }, [updateSlot])
+
+  // ── Toggle mute ─────────────────────────────────────────────────────────────
+  const toggleMute = useCallback((slotIdx) => {
+    const ctx  = audioCtxRef.current
+    const slot = slotsRef.current[slotIdx]
+    if (!slot || !ctx) return
+    if (slot.status !== 'playing' && slot.status !== 'muted') return
+    const muting = slot.status === 'playing'
+    slot.gainNode?.gain.setTargetAtTime(muting ? 0 : slot.volume, ctx.currentTime, 0.02)
+    updateSlot(slotIdx, { status: muting ? 'muted' : 'playing' })
+  }, [updateSlot])
+
+  // ── Delete slot ─────────────────────────────────────────────────────────────
+  const deleteSlot = useCallback((slotIdx) => {
+    const slot = slotsRef.current[slotIdx]
+    if (!slot) return
+    if (slot.status === 'recording') cancelRecord(slotIdx)
+    try { slot.sourceNode?.stop() } catch {}
+    try { slot.sourceNode?.disconnect() } catch {}
+    try { slot.gainNode?.disconnect() } catch {}
+
+    // Reset master timing when no loops remain active
+    const hasOthers = slotsRef.current.some((s, i) =>
+      i !== slotIdx && (s.status === 'playing' || s.status === 'muted')
+    )
+    if (!hasOthers) {
+      masterStartRef.current = null
+      masterLenRef.current   = null
+      setMasterLen(null)
+    }
+    updateSlot(slotIdx, makeEmptySlot())
+  }, [cancelRecord, updateSlot])
+
+  // ── Volume ──────────────────────────────────────────────────────────────────
+  const setVolume = useCallback((slotIdx, vol) => {
+    const ctx  = audioCtxRef.current
+    const slot = slotsRef.current[slotIdx]
+    if (slot?.gainNode && ctx && slot.status === 'playing') {
+      slot.gainNode.gain.setTargetAtTime(vol, ctx.currentTime, 0.02)
+    }
+    updateSlot(slotIdx, { volume: vol })
+  }, [updateSlot])
+
+  // ── Main click handler (drives the state machine) ───────────────────────────
+  const handleSlotClick = useCallback((slotIdx) => {
+    const slot = slotsRef.current[slotIdx]
+    if (!slot) return
+    switch (slot.status) {
+      case 'empty':     startRecord(slotIdx); break
+      case 'recording': stopRecord(slotIdx);  break
+      case 'playing':
+      case 'muted':     toggleMute(slotIdx);  break
+      // 'trimming' is handled entirely by LoopTrimmer
+    }
+  }, [startRecord, stopRecord, toggleMute])
+
+  // ── Add a new empty slot ────────────────────────────────────────────────────
+  const addSlot = useCallback(() => {
+    setSlots(prev => {
+      const next = [...prev, makeEmptySlot()]
+      slotsRef.current = next
+      return next
+    })
+  }, [])
+
+  // ── Cleanup ─────────────────────────────────────────────────────────────────
+  useEffect(() => {
+    return () => {
+      clearInterval(timerRef.current)
+      slotsRef.current?.forEach(s => {
+        try { s.sourceNode?.stop() } catch {}
+        try { s.sourceNode?.disconnect() } catch {}
+        try { s.gainNode?.disconnect() } catch {}
+      })
+      try { audioCtxRef.current?.close() } catch {}
+    }
+  }, [])
+
+  return {
+    slots,
+    masterLen,
+    setStream,
+    handleSlotClick,
+    commitTrim,
+    cancelRecord,
+    retrimSlot,
+    deleteSlot,
+    setVolume,
+    addSlot,
+    audioCtxRef,
+    masterStartRef,
+    masterLenRef,
+  }
+}