feat: BPM and musical key detection for all clips

Backend:
- New analysis.py module using librosa for BPM + key detection
  - detect_bpm(): librosa.beat.beat_track() returns tempo
  - detect_key(): Krumhansl-Schmuckler key profiles on chroma features
  - analyze_clip(): combined call returning {bpm, key}
- New dependency: librosa==0.10.2 + soundfile==0.12.1
- Database migrations: bpm (REAL) and key (TEXT) columns added
- New set_analysis() function in database.py
- New endpoint: GET /api/clips/{id}/analysis
  - Returns cached analysis if available
  - Computes on-demand if missing, caches result
  - 400 if clip not ready, 404 if no audio file

Frontend:
- Clip interface extended with bpm?: number | null, key?: string | null
- Gallery: BPM and key badges shown in ribbon and tile views
  - BPM badge: lyria-accent background
  - Key badge: white/5 background
- DetailPanel: BPM and key shown in metadata grid when available
- App.tsx: handleSelectClip() fetches analysis on-demand when opening
  detail panel if not already cached

Docs:
- Architecture KB updated with Audio Analysis section
- Tasks KB: T-028 marked In Progress → will mark Done after commit

frontend/src/App.tsx

@@ -15,6 +15,8 @@ interface Clip {
   error_message?: string
   file_size_bytes?: number
   artwork_filename?: string | null
+  bpm?: number | null
+  key?: string | null
   created_at: string
 }
 
@@ -119,6 +121,23 @@ function App() {
     }
   }
 
+  const handleSelectClip = async (clip: Clip) => {
+    setSelectedClip(clip)
+    // Fetch analysis if not already cached
+    if (!clip.bpm || !clip.key) {
+      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))
+          setSelectedClip({ ...clip, bpm: analysis.bpm, key: analysis.key })
+        }
+      } catch (err) {
+        console.error('Failed to fetch analysis:', err)
+      }
+    }
+  }
+
   const handleClearWaveforms = async () => {
     try {
       await fetch('/api/admin/clear-waveforms', { method: 'POST' })
@@ -174,7 +193,7 @@ function App() {
             onPlay={handlePlay}
             onDelete={handleDelete}
             onRename={handleRename}
-            onSelect={(clip) => setSelectedClip(clip)}
+            onSelect={handleSelectClip}
             onUploadArtwork={handleUploadArtwork}
             currentClipId={currentClip?.id}
           />

frontend/src/components/DetailPanel.tsx

@@ -10,6 +10,8 @@ interface Clip {
   error_message?: string
   file_size_bytes?: number
   artwork_filename?: string | null
+  bpm?: number | null
+  key?: string | null
   created_at: string
 }
 
@@ -258,6 +260,18 @@ export default function DetailPanel({ clip, onClose, onRename, onDelete, onUploa
                 <p className="text-sm text-white">{(clip.file_size_bytes / 1024).toFixed(0)} KB</p>
               </div>
             )}
+            {clip.bpm && (
+              <div>
+                <label className="text-xs text-lyria-muted uppercase tracking-wider block">BPM</label>
+                <p className="text-sm text-white">{Math.round(clip.bpm)}</p>
+              </div>
+            )}
+            {clip.key && (
+              <div>
+                <label className="text-xs text-lyria-muted uppercase tracking-wider block">Key</label>
+                <p className="text-sm text-white">{clip.key}</p>
+              </div>
+            )}
             <div>
               <label className="text-xs text-lyria-muted uppercase tracking-wider block">Created</label>
               <p className="text-sm text-white">{formatDate(clip.created_at)}</p>

frontend/src/components/Gallery.tsx

@@ -12,6 +12,8 @@ interface Clip {
   error_message?: string
   file_size_bytes?: number
   artwork_filename?: string | null
+  bpm?: number | null
+  key?: string | null
   created_at: string
 }
 
@@ -244,6 +246,16 @@ export default function Gallery({ clips, onPlay, onDelete, onRename, onSelect, o
                   <span className="text-xs text-lyria-muted">{clip.duration_seconds}s</span>
                   <span className="text-xs text-lyria-muted">{modelName(clip.model)}</span>
                   <span className="text-xs text-lyria-muted">{formatDate(clip.created_at)}</span>
+                  {clip.bpm && (
+                    <span className="text-xs px-1.5 py-0.5 rounded bg-lyria-accent/10 text-lyria-accent">
+                      {Math.round(clip.bpm)} BPM
+                    </span>
+                  )}
+                  {clip.key && (
+                    <span className="text-xs px-1.5 py-0.5 rounded bg-white/5 text-lyria-muted">
+                      {clip.key}
+                    </span>
+                  )}
                 </div>
                 {clip.status === 'failed' && clip.error_message && (
                   <p className="text-xs text-red-400/80 mt-1 break-words">
@@ -362,7 +374,7 @@ export default function Gallery({ clips, onPlay, onDelete, onRename, onSelect, o
               )}
 
               {/* Meta */}
-              <div className="flex items-center gap-1.5 mt-auto">
+              <div className="flex items-center gap-1.5 mt-auto flex-wrap">
                 <span className={`text-[10px] px-1 py-0.5 rounded ${
                   clip.status === 'ready'
                     ? 'bg-green-500/20 text-green-400'
@@ -374,6 +386,16 @@ export default function Gallery({ clips, onPlay, onDelete, onRename, onSelect, o
                 </span>
                 <span className="text-[10px] text-lyria-muted">{clip.duration_seconds}s</span>
                 <span className="text-[10px] text-lyria-muted">{modelName(clip.model)}</span>
+                {clip.bpm && (
+                  <span className="text-[10px] px-1 py-0.5 rounded bg-lyria-accent/10 text-lyria-accent">
+                    {Math.round(clip.bpm)} BPM
+                  </span>
+                )}
+                {clip.key && (
+                  <span className="text-[10px] px-1 py-0.5 rounded bg-white/5 text-lyria-muted">
+                    {clip.key}
+                  </span>
+                )}
               </div>
 
               {/* Error */}