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/components/layout/Footer.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { RobotTarget } from '../../types';
+
+interface FooterProps {
+    isHostConnected: boolean;
+    robotTarget: RobotTarget;
+}
+
+export const Footer: React.FC<FooterProps> = ({ isHostConnected, robotTarget }) => {
+    return (
+        <footer className="absolute bottom-0 left-0 right-0 h-10 bg-black/80 border-t border-neon-blue/30 flex items-center px-6 justify-between z-40 backdrop-blur text-xs font-mono text-slate-400">
+            <div className="flex gap-6">
+                {['PLC', 'MOTION', 'VISION', 'LIGHT'].map(hw => (
+                    <div key={hw} className="flex items-center gap-2">
+                        <div className="w-2 h-2 bg-neon-green rounded-full shadow-[0_0_5px_#0aff00]"></div>
+                        <span className="font-bold text-slate-300">{hw}</span>
+                    </div>
+                ))}
+                <div className="flex items-center gap-2">
+                    <div className={`w-2 h-2 rounded-full transition-all ${isHostConnected ? 'bg-neon-green shadow-[0_0_5px_#0aff00]' : 'bg-red-500 shadow-[0_0_5px_#ff0000] animate-pulse'}`}></div>
+                    <span className={`font-bold ${isHostConnected ? 'text-slate-300' : 'text-red-400'}`}>HOST</span>
+                </div>
+            </div>
+            <div className="flex gap-8 text-neon-blue">
+                <span>POS.X: {robotTarget.x.toFixed(3)}</span>
+                <span>POS.Y: {robotTarget.y.toFixed(3)}</span>
+                <span>POS.Z: {robotTarget.z.toFixed(3)}</span>
+            </div>
+        </footer>
+    );
+};