Add skip tracking, compressed heatmap, listening log, docs, tests, and OpenAI support

Major changes:
- Add skip tracking: poll currently-playing every 15s, detect skips (<30s listened)
- Add listening-log and sessions API endpoints
- Fix ReccoBeats client to extract spotify_id from href response
- Compress heatmap from 24 hours to 6 x 4-hour blocks
- Add OpenAI support in narrative service (use max_completion_tokens for new models)
- Add ListeningLog component with timeline and list views
- Update all frontend components to use real data (album art, play counts)
- Add docker-compose external network (dockernet) support
- Add comprehensive documentation (API, DATA_MODEL, ARCHITECTURE, FRONTEND)
- Add unit tests for ingest and API endpoints

frontend/src/components/TopRotation.jsx

@@ -3,14 +3,7 @@ import React from 'react';
 const TopRotation = ({ volume }) => {
     if (!volume || !volume.top_tracks) return null;
 
-    // Use placeholder images since API doesn't return album art in the simple list yet
-    const placeHolderImages = [
-        "https://images.unsplash.com/photo-1619983081563-430f63602796?q=80&w=1000&auto=format&fit=crop",
-        "https://images.unsplash.com/photo-1493225255756-d9584f8606e9?q=80&w=1000&auto=format&fit=crop",
-        "https://images.unsplash.com/photo-1470225620780-dba8ba36b745?q=80&w=1000&auto=format&fit=crop",
-        "https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?q=80&w=1000&auto=format&fit=crop",
-        "https://images.unsplash.com/photo-1514525253440-b393452e8d26?q=80&w=1000&auto=format&fit=crop"
-    ];
+    const fallbackImage = "https://images.unsplash.com/photo-1619983081563-430f63602796?q=80&w=200&auto=format&fit=crop";
 
     return (
         <div className="bg-card-dark border border-[#222f49] rounded-xl p-6 overflow-hidden">
@@ -24,17 +17,19 @@ const TopRotation = ({ volume }) => {
             
             <div className="flex gap-4 overflow-x-auto no-scrollbar pb-2">
                 {volume.top_tracks.slice(0, 5).map((track, i) => {
-                     const name = track.name || track[0];
-                     const artist = track.artist || track[1];
+                     const name = track.name || "Unknown";
+                     const artist = track.artist || "Unknown";
+                     const image = track.image || fallbackImage;
                      
                      return (
                         <div key={i} className={`min-w-[140px] flex flex-col gap-2 group cursor-pointer ${i === 0 ? 'min-w-[180px]' : 'opacity-80 hover:opacity-100 transition-opacity pt-4'}`}>
                             <div 
                                 className={`w-full aspect-square rounded-lg bg-cover bg-center ${i === 0 ? 'shadow-lg shadow-black/50 transition-transform group-hover:scale-105' : ''}`} 
-                                style={{ backgroundImage: `url('${placeHolderImages[i % placeHolderImages.length]}')` }}
+                                style={{ backgroundImage: `url('${image}')` }}
                             ></div>
                             <p className={`text-white font-medium truncate ${i === 0 ? 'font-bold' : 'text-sm'}`}>{name}</p>
                             <p className="text-xs text-slate-400 truncate">{artist}</p>
+                            <p className="text-xs text-primary">{track.count} plays</p>
                         </div>
                     );
                 })}