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/ModelInfoPanel.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Box, Cpu, Activity } from 'lucide-react';
+import { Recipe } from '../types';
+import { CyberPanel } from './common/CyberPanel';
+
+interface ModelInfoPanelProps {
+    currentRecipe: Recipe;
+}
+
+export const ModelInfoPanel: React.FC<ModelInfoPanelProps> = ({ currentRecipe }) => {
+    return (
+        <CyberPanel className="flex-none">
+            <div className="mb-3 flex items-center justify-between text-xs text-neon-blue font-bold tracking-widest uppercase border-b border-white/10 pb-2">
+                <span>Model Information</span>
+                <Box className="w-3 h-3" />
+            </div>
+
+            <div className="space-y-4">
+                <div>
+                    <div className="text-[10px] text-slate-500 font-mono mb-1">SELECTED MODEL</div>
+                    <div className="text-xl font-bold text-white tracking-wide truncate flex items-center gap-2">
+                        <Cpu className="w-4 h-4 text-neon-blue" />
+                        {currentRecipe.name}
+                    </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-2">
+                    <div className="bg-white/5 rounded p-2 border border-white/5">
+                        <div className="text-[9px] text-slate-500 font-mono uppercase">Model ID</div>
+                        <div className="text-sm font-mono text-neon-blue">{currentRecipe.id}</div>
+                    </div>
+                    <div className="bg-white/5 rounded p-2 border border-white/5">
+                        <div className="text-[9px] text-slate-500 font-mono uppercase">Last Mod</div>
+                        <div className="text-sm font-mono text-slate-300">{currentRecipe.lastModified}</div>
+                    </div>
+                </div>
+
+                <div className="space-y-1">
+                    <div className="flex justify-between text-[10px] font-mono text-slate-400">
+                        <span>TARGET CYCLE</span>
+                        <span className="text-neon-green">12.5s</span>
+                    </div>
+                    <div className="w-full h-1 bg-slate-800 rounded-full overflow-hidden">
+                        <div className="h-full w-[85%] bg-neon-green/50"></div>
+                    </div>
+
+                    <div className="flex justify-between text-[10px] font-mono text-slate-400 mt-2">
+                        <span>EST. YIELD</span>
+                        <span className="text-neon-blue">99.8%</span>
+                    </div>
+                    <div className="w-full h-1 bg-slate-800 rounded-full overflow-hidden">
+                        <div className="h-full w-[99%] bg-neon-blue/50"></div>
+                    </div>
+                </div>
+            </div>
+        </CyberPanel>
+    );
+};