Add MQTT publish request and response models, and implement publish route

- Introduced MQTTPublishRequest and MQTTPublishResponse models for handling MQTT message publishing.
- Implemented a new POST route for publishing MQTT messages, including error handling and logging.
- Enhanced the StandaloneAutoRecorder with improved logging during manual recording start.
- Updated the frontend to include an MQTT Debug Panel for better monitoring and debugging capabilities.

vision-system-remote/src/App.tsx

@@ -8,6 +8,7 @@ import { CameraCountWidget } from './widgets/CameraCountWidget'
 import { CameraCard } from './components/CameraCard'
 import { CameraPreviewModal } from './components/CameraPreviewModal'
 import { CameraConfigModal } from './components/CameraConfigModal'
+import { MqttDebugPanel } from './components/MqttDebugPanel'
 
 // Get WebSocket URL from environment or construct it
 const getWebSocketUrl = () => {
@@ -38,6 +39,7 @@ export default function App() {
   const [previewCamera, setPreviewCamera] = useState<string | null>(null)
   const [configModalOpen, setConfigModalOpen] = useState(false)
   const [selectedCamera, setSelectedCamera] = useState<string | null>(null)
+  const [debugPanelOpen, setDebugPanelOpen] = useState(false)
 
   // WebSocket connection
   const { isConnected, subscribe } = useWebSocket(getWebSocketUrl())
@@ -513,7 +515,25 @@ export default function App() {
             setNotification({ type: 'error', message: error })
           }}
         />
-      )}
+
+      {/* MQTT Debug Panel */}
+      <MqttDebugPanel
+        isOpen={debugPanelOpen}
+        onClose={() => setDebugPanelOpen(false)}
+      />
+
+      {/* Debug Button - Bottom Right */}
+      <button
+        onClick={() => setDebugPanelOpen(true)}
+        className="fixed bottom-6 right-6 z-40 bg-purple-600 text-white px-4 py-2 rounded-lg shadow-lg hover:bg-purple-700 transition-colors flex items-center gap-2"
+        title="Open MQTT Debug Panel"
+      >
+        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+        </svg>
+        Debug
+      </button>
     </div>
   )
 }

vision-system-remote/src/components/MqttDebugPanel.tsx

@@ -0,0 +1,120 @@
+import React, { useState } from 'react'
+import { visionApi } from '../services/api'
+
+interface MqttDebugPanelProps {
+    isOpen: boolean
+    onClose: () => void
+}
+
+export const MqttDebugPanel: React.FC<MqttDebugPanelProps> = ({ isOpen, onClose }) => {
+    const [loading, setLoading] = useState<string | null>(null)
+    const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
+
+    const publishMessage = async (topic: string, payload: string) => {
+        const action = `${topic.split('/').pop()} → ${payload}`
+        setLoading(action)
+        setMessage(null)
+        
+        try {
+            const result = await visionApi.publishMqttMessage(topic, payload, 0, false)
+            if (result.success) {
+                setMessage({ type: 'success', text: `Published: ${action}` })
+                setTimeout(() => setMessage(null), 3000)
+            } else {
+                setMessage({ type: 'error', text: `Failed: ${result.message}` })
+            }
+        } catch (error: any) {
+            setMessage({ type: 'error', text: `Error: ${error.message || 'Failed to publish message'}` })
+        } finally {
+            setLoading(null)
+        }
+    }
+
+    if (!isOpen) return null
+
+    return (
+        <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
+            <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+                {/* Header */}
+                <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
+                    <h2 className="text-xl font-semibold text-gray-900">MQTT Debug Panel</h2>
+                    <button
+                        onClick={onClose}
+                        className="text-gray-400 hover:text-gray-600 transition-colors"
+                    >
+                        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
+                </div>
+
+                {/* Content */}
+                <div className="p-6 space-y-6">
+                    {/* Message Status */}
+                    {message && (
+                        <div className={`p-3 rounded-md ${
+                            message.type === 'success' 
+                                ? 'bg-green-50 text-green-800 border border-green-200' 
+                                : 'bg-red-50 text-red-800 border border-red-200'
+                        }`}>
+                            {message.text}
+                        </div>
+                    )}
+
+                    {/* Vibratory Conveyor Section */}
+                    <div className="border border-gray-200 rounded-lg p-4">
+                        <h3 className="text-lg font-medium text-gray-900 mb-4">Vibratory Conveyor</h3>
+                        <p className="text-sm text-gray-600 mb-4">Topic: <code className="bg-gray-100 px-2 py-1 rounded">vision/vibratory_conveyor/state</code></p>
+                        <div className="flex gap-3">
+                            <button
+                                onClick={() => publishMessage('vision/vibratory_conveyor/state', 'on')}
+                                disabled={loading !== null}
+                                className="flex-1 px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                            >
+                                {loading === 'vibratory_conveyor → on' ? 'Publishing...' : 'Turn ON'}
+                            </button>
+                            <button
+                                onClick={() => publishMessage('vision/vibratory_conveyor/state', 'off')}
+                                disabled={loading !== null}
+                                className="flex-1 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                            >
+                                {loading === 'vibratory_conveyor → off' ? 'Publishing...' : 'Turn OFF'}
+                            </button>
+                        </div>
+                    </div>
+
+                    {/* Blower Separator Section */}
+                    <div className="border border-gray-200 rounded-lg p-4">
+                        <h3 className="text-lg font-medium text-gray-900 mb-4">Blower Separator</h3>
+                        <p className="text-sm text-gray-600 mb-4">Topic: <code className="bg-gray-100 px-2 py-1 rounded">vision/blower_separator/state</code></p>
+                        <div className="flex gap-3">
+                            <button
+                                onClick={() => publishMessage('vision/blower_separator/state', 'on')}
+                                disabled={loading !== null}
+                                className="flex-1 px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                            >
+                                {loading === 'blower_separator → on' ? 'Publishing...' : 'Turn ON'}
+                            </button>
+                            <button
+                                onClick={() => publishMessage('vision/blower_separator/state', 'off')}
+                                disabled={loading !== null}
+                                className="flex-1 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                            >
+                                {loading === 'blower_separator → off' ? 'Publishing...' : 'Turn OFF'}
+                            </button>
+                        </div>
+                    </div>
+
+                    {/* Info */}
+                    <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+                        <p className="text-sm text-blue-800">
+                            <strong>Note:</strong> These buttons publish MQTT messages to test auto-recording. 
+                            Check the logs to see if cameras start/stop recording automatically.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+

vision-system-remote/src/services/api.ts

@@ -239,6 +239,13 @@ class VisionApiClient {
         return this.request(`/mqtt/events?limit=${limit}`)
     }
 
+    async publishMqttMessage(topic: string, payload: string, qos: number = 0, retain: boolean = false): Promise<{ success: boolean; message: string; topic: string; payload: string }> {
+        return this.request('/mqtt/publish', {
+            method: 'POST',
+            body: JSON.stringify({ topic, payload, qos, retain }),
+        })
+    }
+
     async startRecording(cameraName: string, filename?: string): Promise<StartRecordingResponse> {
         return this.request(`/cameras/${cameraName}/start-recording`, {
             method: 'POST',