feat(vibe): reconcile mutable session previews in playback

frontend/src/components/TrackRow.tsx

@@ -26,9 +26,11 @@ interface TrackRowProps {
   showVibe?: boolean;
   /** Override ordinary queue playback, for contextual actions such as Vibe seed rows. */
   onSelect?: (track: Track) => void;
+  /** Display-only rows keep their surrounding playback controller authoritative. */
+  playable?: boolean;
 }
 
-export function TrackRow({ track, queue, showActions = true, variant = 'default', showVibe = false, onSelect }: TrackRowProps) {
+export function TrackRow({ track, queue, showActions = true, variant = 'default', showVibe = false, onSelect, playable = true }: TrackRowProps) {
   const { setQueue, playTrack, play, pause, currentTrack, isPlaying } = usePlaybackStore();
   const dislikeTrack = useDislikeTrack();
   const router = useRouter();
@@ -36,6 +38,7 @@ export function TrackRow({ track, queue, showActions = true, variant = 'default'
   const compact = variant === 'compact';
 
   const handlePlay = () => {
+    if (!playable) return;
     if (onSelect) {
       onSelect(track);
       return;
@@ -47,7 +50,9 @@ export function TrackRow({ track, queue, showActions = true, variant = 'default'
     playTrack(track);
   };
 
-  const playLabel = isCurrent && isPlaying
+  const playLabel = !playable
+    ? `${track.title || 'Track'} is queued by Vibe`
+    : isCurrent && isPlaying
     ? `Pause ${track.title || 'track'}`
     : `Play ${track.title || 'track'}`;
 
@@ -81,8 +86,9 @@ export function TrackRow({ track, queue, showActions = true, variant = 'default'
       <button
         type="button"
         onClick={handlePlay}
+        disabled={!playable}
         aria-label={playLabel}
-        className={`relative flex flex-none items-center justify-center rounded overflow-hidden focus-visible:z-30 ${
+        className={`relative flex flex-none items-center justify-center rounded overflow-hidden focus-visible:z-30 disabled:cursor-default disabled:opacity-70 ${
         compact ? 'h-9 w-9' : 'h-10 w-10'
       }`}>
         <Artwork seed={`${track.title} ${track.artist}`} src={track.artwork_id} className="absolute inset-0 w-full h-full" />
@@ -98,6 +104,7 @@ export function TrackRow({ track, queue, showActions = true, variant = 'default'
         <button
           type="button"
           onClick={handlePlay}
+          disabled={!playable}
           className={`block max-w-full truncate rounded text-left font-medium hover:underline ${isCurrent ? 'text-accent' : 'text-text'} ${compact ? 'text-sm' : 'text-sm'}`}
           aria-label={playLabel}
         >