fix: Correct key/BPM colors and cleaner badge text

Key color fix:
- Previous offset put D# major at green (~150°) instead of orange (~30°)
- New offset: (position + 8) * 30° so position 5 (D#/Eb) = 390° mod 360 = 30° orange
- Position 8 (C) = 480° mod 360 = 120° green. Adjacent positions = adjacent hues.

BPM color fix:
- Previous wrap-around math went blue→purple→red, missing cyan/green/yellow/orange
- New: simple linear interpolation 240° → 0° (long way: 240→180→120→60→0)
- 60 BPM = blue (240°), 120 BPM = green (120°), 180 BPM = red (0°)

Badge text cleanup:
- BPM: just the number (e.g., '140'), no 'BPM' text. Tooltip shows full value.
- Key: shortened format — 'D#m' for minor, 'D#' for major. Unicode flats/sharps.
  Tooltip shows full 'D# major' / 'D# minor'.
- DetailPanel: same short format for consistency.

Auto-fetch analysis:
- App.tsx fetchClips() now fetches analysis for any ready clips missing BPM/key
- Runs in background after clips load, updates state silently
- No more needing to click into detail panel to see colors

frontend/src/App.tsx

@@ -32,6 +32,19 @@ function App() {
       const res = await fetch('/api/clips')
       const data = await res.json()
       setClips(data.clips)
+      // Fetch analysis for clips that don't have it
+      const missing = data.clips.filter((c: Clip) => c.status === 'ready' && (!c.bpm || !c.key))
+      missing.forEach(async (clip: Clip) => {
+        try {
+          const res = await fetch(`/api/clips/${clip.id}/analysis`)
+          if (res.ok) {
+            const analysis = await res.json()
+            setClips(prev => prev.map(c => c.id === clip.id ? { ...c, bpm: analysis.bpm, key: analysis.key } : c))
+          }
+        } catch (err) {
+          // Silently fail — analysis is optional
+        }
+      })
     } catch (err) {
       console.error('Failed to fetch clips:', err)
     }