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/common/TechButton.tsx

@@ -4,8 +4,10 @@ interface TechButtonProps {
     children?: React.ReactNode;
     onClick?: () => void;
     active?: boolean;
-    variant?: 'blue' | 'red' | 'amber' | 'green';
+    variant?: 'blue' | 'red' | 'amber' | 'green' | 'default' | 'danger';
     className?: string;
+    disabled?: boolean;
+    title?: string;
 }
 
 export const TechButton: React.FC<TechButtonProps> = ({
@@ -13,26 +15,39 @@ export const TechButton: React.FC<TechButtonProps> = ({
     onClick,
     active = false,
     variant = 'blue',
-    className = ''
+    className = '',
+    disabled = false,
+    title
 }) => {
     const colors = {
         blue: 'from-blue-600 to-cyan-600 hover:shadow-glow-blue border-cyan-400/30',
         red: 'from-red-600 to-pink-600 hover:shadow-glow-red border-red-400/30',
         amber: 'from-amber-500 to-orange-600 hover:shadow-orange-500/50 border-orange-400/30',
-        green: 'from-emerald-500 to-green-600 hover:shadow-green-500/50 border-green-400/30'
+        green: 'from-emerald-500 to-green-600 hover:shadow-green-500/50 border-green-400/30',
+        default: 'from-slate-600 to-slate-500 hover:shadow-slate-500/50 border-slate-400/30',
+        danger: 'from-red-600 to-pink-600 hover:shadow-glow-red border-red-400/30'
     };
 
+    const variantKey = variant === 'danger' ? 'red' : (variant === 'default' ? 'blue' : variant);
+
     return (
         <button
             onClick={onClick}
+            disabled={disabled}
+            title={title}
             className={`
                 relative px-4 py-2 font-tech font-bold tracking-wider uppercase transition-all duration-300
                 clip-tech border-b-2 border-r-2
-                ${active ? `bg-gradient-to-r ${colors[variant]} text-white` : 'bg-slate-800/50 text-slate-400 hover:text-white hover:bg-slate-700/50 border-slate-600'}
+                ${disabled
+                    ? 'opacity-50 cursor-not-allowed bg-slate-900 text-slate-600 border-slate-800'
+                    : (active
+                        ? `bg-gradient-to-r ${colors[variantKey]} text-white`
+                        : 'bg-slate-800/50 text-slate-400 hover:text-white hover:bg-slate-700/50 border-slate-600')
+                }
                 ${className}
             `}
         >
-            {active && <div className="absolute inset-0 bg-white/20 animate-pulse pointer-events-none"></div>}
+            {active && !disabled && <div className="absolute inset-0 bg-white/20 animate-pulse pointer-events-none"></div>}
             {children}
         </button>
     );