feat: Implement recipe selection with backend integration

Backend changes (C#):
- Add SelectRecipe method to MachineBridge for recipe selection
- Add currentRecipeId tracking in MainForm
- Implement SELECT_RECIPE handler in WebSocketServer

Frontend changes (React/TypeScript):
- Add selectRecipe method to communication layer
- Update handleSelectRecipe to call backend and handle response
- Recipe selection updates ModelInfoPanel automatically
- Add error handling and logging for recipe operations

Layout improvements:
- Add Layout component with persistent Header and Footer
- Create separate IOMonitorPage for full-screen I/O monitoring
- Add dynamic IO tab switcher in Header (Inputs/Outputs)
- Ensure consistent UI across all pages

🤖 Generated with Claude Code

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

frontend/communication.ts

@@ -12,6 +12,7 @@ class CommunicationLayer {
     constructor() {
         if (isWebView) {
             console.log("[COMM] Running in WebView2 Mode");
+            this.isConnected = true; // WebView2 is always connected
             window.chrome.webview.addEventListener('message', (event: any) => {
                 this.notifyListeners(event.data);
             });
@@ -27,6 +28,7 @@ class CommunicationLayer {
         this.ws.onopen = () => {
             console.log("[COMM] WebSocket Connected");
             this.isConnected = true;
+            this.notifyListeners({ type: 'CONNECTION_STATE', connected: true });
         };
 
         this.ws.onmessage = (event) => {
@@ -41,6 +43,7 @@ class CommunicationLayer {
         this.ws.onclose = () => {
             console.log("[COMM] WebSocket Closed. Reconnecting...");
             this.isConnected = false;
+            this.notifyListeners({ type: 'CONNECTION_STATE', connected: false });
             setTimeout(() => this.connectWebSocket(), 2000);
         };
 
@@ -60,6 +63,10 @@ class CommunicationLayer {
         };
     }
 
+    public getConnectionState(): boolean {
+        return this.isConnected;
+    }
+
     // --- API Methods ---
 
     public async getConfig(): Promise<string> {
@@ -95,6 +102,64 @@ class CommunicationLayer {
         }
     }
 
+    public async getIOList(): Promise<string> {
+        if (isWebView) {
+            return await window.chrome.webview.hostObjects.machine.GetIOList();
+        } 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("IO fetch timeout");
+                }, 10000);
+
+                const handler = (data: any) => {
+                    if (data.type === 'IO_LIST_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_IO_LIST' }));
+            });
+        }
+    }
+
+    public async getRecipeList(): Promise<string> {
+        if (isWebView) {
+            return await window.chrome.webview.hostObjects.machine.GetRecipeList();
+        } 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("Recipe fetch timeout");
+                }, 10000);
+
+                const handler = (data: any) => {
+                    if (data.type === 'RECIPE_LIST_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_RECIPE_LIST' }));
+            });
+        }
+    }
+
     public async saveConfig(configJson: string): Promise<void> {
         if (isWebView) {
             await window.chrome.webview.hostObjects.machine.SaveConfig(configJson);
@@ -126,6 +191,36 @@ class CommunicationLayer {
             this.ws?.send(JSON.stringify({ type: 'SET_IO', id, state }));
         }
     }
+
+    public async selectRecipe(recipeId: string): Promise<{ success: boolean; message: string; recipeId?: string }> {
+        if (isWebView) {
+            const resultJson = await window.chrome.webview.hostObjects.machine.SelectRecipe(recipeId);
+            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: "Recipe selection timeout" });
+                }, 10000);
+
+                const handler = (data: any) => {
+                    if (data.type === 'RECIPE_SELECTED') {
+                        clearTimeout(timeoutId);
+                        this.listeners = this.listeners.filter(cb => cb !== handler);
+                        resolve(data.data);
+                    }
+                };
+                this.listeners.push(handler);
+                this.ws?.send(JSON.stringify({ type: 'SELECT_RECIPE', recipeId }));
+            });
+        }
+    }
 }
 
 export const comms = new CommunicationLayer();