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)
     }

frontend/src/components/Gallery.tsx

@@ -251,21 +251,25 @@ export default function Gallery({ clips, onPlay, onDelete, onRename, onSelect, o
                     const c = getBPMColor(clip.bpm)
                     return c ? (
                       <span
-                        className="text-xs px-1.5 py-0.5 rounded font-medium"
+                        className="text-xs px-1.5 py-0.5 rounded font-medium tabular-nums"
                         style={{ backgroundColor: c.bg, color: c.text, border: `1px solid ${c.border}` }}
+                        title={`${Math.round(clip.bpm)} BPM`}
                       >
-                        {Math.round(clip.bpm)} BPM
+                        {Math.round(clip.bpm)}
                       </span>
                     ) : null
                   })()}
                   {clip.key && (() => {
                     const c = getKeyColor(clip.key)
+                    const shortKey = clip.key?.replace(/\s+(major|minor)$/i, '').replace(/b$/g, '♭').replace(/#/g, '♯')
+                    const isMinor = clip.key?.toLowerCase().includes('minor')
                     return c ? (
                       <span
                         className="text-xs px-1.5 py-0.5 rounded font-medium"
                         style={{ backgroundColor: c.bg, color: c.text, border: `1px solid ${c.border}` }}
+                        title={clip.key}
                       >
-                        {clip.key}
+                        {shortKey}{isMinor ? 'm' : ''}
                       </span>
                     ) : null
                   })()}
@@ -403,21 +407,25 @@ export default function Gallery({ clips, onPlay, onDelete, onRename, onSelect, o
                   const c = getBPMColor(clip.bpm)
                   return c ? (
                     <span
-                      className="text-[10px] px-1 py-0.5 rounded font-medium"
+                      className="text-[10px] px-1 py-0.5 rounded font-medium tabular-nums"
                       style={{ backgroundColor: c.bg, color: c.text, border: `1px solid ${c.border}` }}
+                      title={`${Math.round(clip.bpm)} BPM`}
                     >
-                      {Math.round(clip.bpm)} BPM
+                      {Math.round(clip.bpm)}
                     </span>
                   ) : null
                 })()}
                 {clip.key && (() => {
                   const c = getKeyColor(clip.key)
+                  const shortKey = clip.key?.replace(/\s+(major|minor)$/i, '').replace(/b$/g, '♭').replace(/#/g, '♯')
+                  const isMinor = clip.key?.toLowerCase().includes('minor')
                   return c ? (
                     <span
                       className="text-[10px] px-1 py-0.5 rounded font-medium"
                       style={{ backgroundColor: c.bg, color: c.text, border: `1px solid ${c.border}` }}
+                      title={clip.key}
                     >
-                      {clip.key}
+                      {shortKey}{isMinor ? 'm' : ''}
                     </span>
                   ) : null
                 })()}

frontend/src/utils/musicColors.ts

@@ -2,16 +2,16 @@
  * Music color utilities — Camelot wheel key colors + BPM gradient.
  *
  * Key colors: Each key maps to a hue based on its Camelot wheel position.
- *   12 positions × 30° = full color wheel. Major = bright, minor = slightly darker.
+ *   Offset chosen so D#/Eb major (position 5) lands at orange (~30°).
+ *   C major (position 8) lands at green (~120°). Adjacent positions = adjacent hues.
  *
- * BPM gradient: Two root tempos define the hue range.
+ * BPM gradient: Slow = blue (240°), fast = red (0°).
- *   Default: 60 BPM (blue, calm) → 180 BPM (red, intense).
+ *   Passes through cyan → green → yellow → orange in between.
- *   Anything outside the range clamps to the nearest edge.
+ *   Clamps outside the range.
  */
 
 // ─── Camelot Wheel Mapping ───────────────────────────────────────
 
-// Standard Camelot wheel: position → key name (as returned by librosa)
 const CAMELOT_MAJOR: Record<number, string[]> = {
   1: ['B major'],
   2: ['F# major', 'Gb major'],
@@ -42,7 +42,6 @@ const CAMELOT_MINOR: Record<number, string[]> = {
   12: ['C# minor', 'Db minor'],
 }
 
-// Build reverse lookup: key name (lowercase) → { position, isMajor }
 const keyToCamelot = new Map<string, { position: number; isMajor: boolean }>()
 
 for (const [pos, keys] of Object.entries(CAMELOT_MAJOR)) {
@@ -58,17 +57,16 @@ for (const [pos, keys] of Object.entries(CAMELOT_MINOR)) {
 
 // ─── Key Color ───────────────────────────────────────────────────
 
-export function getKeyColor(key: string | null | undefined): { bg: string; text: string; border: string } | null {
+export function getKeyColor(key: string | null | undefined): { bg: string; text: string; border: string; hue: number } | null {
   if (!key) return null
 
   const normalized = key.trim().toLowerCase()
   const camelot = keyToCamelot.get(normalized)
   if (!camelot) return null
 
-  // Hue: position 1 = 0° (red), each step +30°
+  // Offset so position 5 (D#/Eb) = ~30° orange, position 8 (C) = ~120° green
-  const hue = ((camelot.position - 1) * 30) % 360
+  const hue = ((camelot.position + 8) * 30) % 360
 
-  // Major: brighter, more saturated. Minor: slightly darker, less saturated.
   const saturation = camelot.isMajor ? 85 : 70
   const lightness = camelot.isMajor ? 55 : 50
 
@@ -76,53 +74,40 @@ export function getKeyColor(key: string | null | undefined): { bg: string; text:
     bg: `hsla(${hue}, ${saturation}%, ${lightness}%, 0.15)`,
     text: `hsl(${hue}, ${saturation}%, ${lightness}%)`,
     border: `hsla(${hue}, ${saturation}%, ${lightness}%, 0.3)`,
+    hue,
   }
 }
 
 // ─── BPM Color ─────────────────────────────────────────────────────
 
 export interface BPMRange {
-  min: number   // slow edge BPM
+  min: number
-  max: number   // fast edge BPM
+  max: number
-  minHue: number  // hue for slow (default: 240 = blue)
-  maxHue: number  // hue for fast (default: 0 = red)
 }
 
 const DEFAULT_BPM_RANGE: BPMRange = {
   min: 60,
   max: 180,
-  minHue: 240,  // blue — calm, slow
-  maxHue: 0,    // red — intense, fast
 }
 
 export function getBPMColor(
   bpm: number | null | undefined,
   range: Partial<BPMRange> = {}
-): { bg: string; text: string; border: string } | null {
+): { bg: string; text: string; border: string; hue: number } | null {
   if (bpm == null) return null
 
-  const { min, max, minHue, maxHue } = { ...DEFAULT_BPM_RANGE, ...range }
+  const { min, max } = { ...DEFAULT_BPM_RANGE, ...range }
-
-  // Clamp BPM to range
   const clamped = Math.max(min, Math.min(max, bpm))
+  const t = (clamped - min) / (max - min)
 
-  // Interpolate hue (handle wrap-around if minHue > maxHue)
+  // Slow (60) = 240° blue → Fast (180) = 0° red
-  let t = (clamped - min) / (max - min)
+  // Long way around: 240° → 180°(cyan) → 120°(green) → 60°(yellow) → 0°(red)
-  let hue: number
+  const hue = 240 - t * 240
-  if (minHue > maxHue) {
-    // Going across the 0° boundary (e.g., 240 → 0)
-    const span = (360 - minHue) + maxHue
-    hue = (minHue + t * span) % 360
-  } else {
-    hue = minHue + t * (maxHue - minHue)
-  }
-
-  const saturation = 85
-  const lightness = 55
 
   return {
-    bg: `hsla(${hue}, ${saturation}%, ${lightness}%, 0.15)`,
+    bg: `hsla(${hue}, 85%, 55%, 0.15)`,
-    text: `hsl(${hue}, ${saturation}%, ${lightness}%)`,
+    text: `hsl(${hue}, 85%, 55%)`,
-    border: `hsla(${hue}, ${saturation}%, ${lightness}%, 0.3)`,
+    border: `hsla(${hue}, 85%, 55%, 0.3)`,
+    hue,
   }
 }