feat: Implement vision menu, processed data panel, and UI improvements

- Add VisionMenu component with Camera (QRCode) and Barcode (Keyence) submenus
- Remove old CameraPanel component and replace with dropdown menu structure
- Add ProcessedDataPanel to display processed data in bottom dock (5 rows visible)
- Create SystemStatusPanel component with horizontal button layout (START/STOP/RESET)
- Create EventLogPanel component for better code organization
- Add device initialization feature with 7-axis progress tracking
- Add GetProcessedData and GetInitializeStatus backend methods
- Update Header menu layout to vertical (icon on top, text below) for more space
- Update HomePage layout with bottom-docked ProcessedDataPanel
- Refactor HomePage to use new modular components

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

FrontEnd/communication.ts

@@ -343,6 +343,94 @@ class CommunicationLayer {
             });
         }
     }
+
+    public async initializeDevice(): Promise<{ success: boolean; message: string }> {
+        if (isWebView && machine) {
+            const resultJson = await machine.InitializeDevice();
+            return JSON.parse(resultJson);
+        } else {
+            return new Promise((resolve, reject) => {
+                if (!this.isConnected) {
+                    setTimeout(() => {
+                        if (!this.isConnected) reject({ success: false, message: "WebSocket connection timeout" });
+                    }, 2000);
+                }
+
+                const timeoutId = setTimeout(() => {
+                    this.listeners = this.listeners.filter(cb => cb !== handler);
+                    reject({ success: false, message: "Initialize device timeout" });
+                }, 10000);
+
+                const handler = (data: any) => {
+                    if (data.type === 'DEVICE_INITIALIZED') {
+                        clearTimeout(timeoutId);
+                        this.listeners = this.listeners.filter(cb => cb !== handler);
+                        resolve(data.data);
+                    }
+                };
+                this.listeners.push(handler);
+                this.ws?.send(JSON.stringify({ type: 'INITIALIZE_DEVICE' }));
+            });
+        }
+    }
+
+    public async getInitializeStatus(): Promise<string> {
+        if (isWebView && machine) {
+            return await machine.GetInitializeStatus();
+        } else {
+            return new Promise((resolve, reject) => {
+                if (!this.isConnected) {
+                    setTimeout(() => {
+                        if (!this.isConnected) reject("WebSocket connection timeout");
+                    }, 2000);
+                }
+
+                const timeoutId = setTimeout(() => {
+                    this.listeners = this.listeners.filter(cb => cb !== handler);
+                    reject("Initialize status fetch timeout");
+                }, 10000);
+
+                const handler = (data: any) => {
+                    if (data.type === 'INITIALIZE_STATUS_DATA') {
+                        clearTimeout(timeoutId);
+                        this.listeners = this.listeners.filter(cb => cb !== handler);
+                        resolve(JSON.stringify(data.data));
+                    }
+                };
+                this.listeners.push(handler);
+                this.ws?.send(JSON.stringify({ type: 'GET_INITIALIZE_STATUS' }));
+            });
+        }
+    }
+
+    public async getProcessedData(): Promise<string> {
+        if (isWebView && machine) {
+            return await machine.GetProcessedData();
+        } else {
+            return new Promise((resolve, reject) => {
+                if (!this.isConnected) {
+                    setTimeout(() => {
+                        if (!this.isConnected) reject("WebSocket connection timeout");
+                    }, 2000);
+                }
+
+                const timeoutId = setTimeout(() => {
+                    this.listeners = this.listeners.filter(cb => cb !== handler);
+                    reject("Processed data fetch timeout");
+                }, 10000);
+
+                const handler = (data: any) => {
+                    if (data.type === 'PROCESSED_DATA') {
+                        clearTimeout(timeoutId);
+                        this.listeners = this.listeners.filter(cb => cb !== handler);
+                        resolve(JSON.stringify(data.data));
+                    }
+                };
+                this.listeners.push(handler);
+                this.ws?.send(JSON.stringify({ type: 'GET_PROCESSED_DATA' }));
+            });
+        }
+    }
 }
 
 export const comms = new CommunicationLayer();