feat: import library from media root and stream tracks

Add a filesystem scanner that ingests supported audio files from MEDIA_ROOT into SQLite using embedded tags with filename fallbacks. Wire startup scanning, manual rescan, and authenticated audio streaming into the backend, then connect the web player to the real stream endpoint.

apps/web/src/components/player-bar.tsx

@@ -1,16 +1,31 @@
+import { useEffect, useRef } from 'react'
 import { Pause, Play, SkipBack, SkipForward, Volume2 } from 'lucide-react'
 import { usePlayerStore } from '@/stores/player-store'
+import { useSessionStore } from '@/stores/session-store'
 
 export function PlayerBar() {
   const currentTrack = usePlayerStore((state) => state.currentTrack)
+  const token = useSessionStore((state) => state.token)
+  const audioRef = useRef<HTMLAudioElement | null>(null)
+  const apiBase = import.meta.env.VITE_API_BASE ?? 'http://localhost:4040'
+
+  useEffect(() => {
+    if (!audioRef.current || !currentTrack || !token) {
+      return
+    }
+
+    audioRef.current.src = `${apiBase}/api/stream/${currentTrack.id}?token=${token}`
+    void audioRef.current.play().catch(() => {})
+  }, [apiBase, currentTrack, token])
 
   return (
     <section className="grid gap-4 rounded-[28px] border border-line bg-slate-950/70 p-4 backdrop-blur md:grid-cols-[1.3fr_auto_1fr] md:items-center">
+      <audio ref={audioRef} preload="metadata" />
       <div>
         <div className="text-xs uppercase tracking-[0.24em] text-slate-500">Now playing</div>
         <div className="mt-1 text-lg font-semibold">{currentTrack?.title ?? 'Nothing queued yet'}</div>
         <div className="text-sm text-slate-400">
-          {currentTrack ? `${currentTrack.artistName} • ${currentTrack.albumTitle}` : 'Wire this to /api/stream next'}
+          {currentTrack ? `${currentTrack.artistName} • ${currentTrack.albumTitle}` : 'Pick a track from the library to start testing playback'}
         </div>
       </div>
 
@@ -50,4 +65,3 @@ function ControlButton({
     </button>
   )
 }
-