Update camera management and MQTT logging for improved functionality

- Changed log level in configuration from WARNING to INFO for better visibility of system operations.
- Enhanced StandaloneAutoRecorder initialization to accept camera manager, state manager, and event system for improved modularity.
- Updated recording routes to handle optional request bodies and improved error logging for better debugging.
- Added checks in CameraMonitor to determine if a camera is already in use before initialization, enhancing resource management.
- Improved MQTT client logging to provide more detailed connection and message handling information.
- Added new MQTT event handling capabilities to the VisionApiClient for better tracking of machine states.

vision-system-remote/src/widgets/MqttStatusWidget.tsx

@@ -1,25 +1,57 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { StatusWidget } from './StatusWidget'
-import type { SystemStatus } from '../services/api'
+import { visionApi, type SystemStatus, type MqttEvent } from '../services/api'
 
 interface MqttStatusWidgetProps {
   systemStatus: SystemStatus | null
 }
 
 export const MqttStatusWidget: React.FC<MqttStatusWidgetProps> = ({ systemStatus }) => {
+  const [lastEvent, setLastEvent] = useState<MqttEvent | null>(null)
   const isConnected = systemStatus?.mqtt_connected ?? false
   const lastMessage = systemStatus?.last_mqtt_message
 
+  // Fetch the last MQTT event
+  useEffect(() => {
+    const fetchLastEvent = async () => {
+      try {
+        const eventsData = await visionApi.getMqttEvents(1).catch(() => null)
+        if (eventsData && eventsData.events.length > 0) {
+          setLastEvent(eventsData.events[0])
+        }
+      } catch (error) {
+        // Silently fail - don't clutter console
+      }
+    }
+
+    fetchLastEvent()
+    // Refresh every 5 seconds
+    const interval = setInterval(fetchLastEvent, 5000)
+    return () => clearInterval(interval)
+  }, [])
+
+  const formatLastEvent = () => {
+    if (!lastEvent) return null
+    
+    const time = new Date(lastEvent.timestamp).toLocaleTimeString()
+    return `${lastEvent.machine_name}: ${lastEvent.normalized_state.toUpperCase()} (${time})`
+  }
+
+  const subtitle = lastEvent 
+    ? formatLastEvent()
+    : lastMessage 
+      ? `Last: ${new Date(lastMessage).toLocaleTimeString()}`
+      : 'No messages'
+
   return (
     <StatusWidget
       title="MQTT Status"
       status={isConnected}
       statusText={isConnected ? 'Connected' : 'Disconnected'}
-      subtitle={lastMessage ? `Last: ${new Date(lastMessage).toLocaleTimeString()}` : 'No messages'}
+      subtitle={subtitle || undefined}
       icon={
         <div className={`w-3 h-3 rounded-full ${isConnected ? 'bg-green-500 animate-pulse' : 'bg-red-500'}`} />
       }
     />
   )
 }
-