Auto-open Now Playing bar when playback starts

- Track previous playing state with useRef to detect transitions
- When is_running or is_paused becomes true, automatically show the bar
- Uses status_update WebSocket messages for real-time detection

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/components/layout/Layout.tsx

@@ -68,6 +68,7 @@ export function Layout() {
 
   // Now Playing bar state
   const [isNowPlayingOpen, setIsNowPlayingOpen] = useState(false)
+  const wasPlayingRef = useRef(false) // Track previous playing state to detect start
   const [logs, setLogs] = useState<Array<{ timestamp: string; level: string; logger: string; message: string }>>([])
   const [logLevelFilter, setLogLevelFilter] = useState<string>('ALL')
   const logsWsRef = useRef<WebSocket | null>(null)
@@ -91,6 +92,15 @@ export function Layout() {
           if (data.connected !== undefined) {
             setIsConnected(data.connected)
           }
+          // Auto-open Now Playing bar when playback starts
+          if (data.type === 'status_update' && data.data) {
+            const isPlaying = data.data.is_running || data.data.is_paused
+            if (isPlaying && !wasPlayingRef.current) {
+              // Playback just started - open the Now Playing bar
+              setIsNowPlayingOpen(true)
+            }
+            wasPlayingRef.current = isPlaying
+          }
         } catch {
           // Ignore parse errors
         }