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>
+    );
+};

frontend/components/RecipePanel.tsx

@@ -1,40 +1,84 @@
-import React from 'react';
-import { FileText, CheckCircle2, Layers } from 'lucide-react';
+import React, { useState } from 'react';
+import { Layers, Check, Settings, X } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
 import { Recipe } from '../types';
-import { PanelHeader } from './common/PanelHeader';
 import { TechButton } from './common/TechButton';
 
 interface RecipePanelProps {
     recipes: Recipe[];
     currentRecipe: Recipe;
     onSelectRecipe: (r: Recipe) => void;
+    onClose: () => void;
 }
 
-export const RecipePanel: React.FC<RecipePanelProps> = ({ recipes, currentRecipe, onSelectRecipe }) => (
-    <div className="h-full flex flex-col">
-        <PanelHeader title="Recipe Select" icon={FileText} />
-        <div className="space-y-2 flex-1 overflow-y-auto custom-scrollbar pr-2">
-            {recipes.map(r => (
-                <div
-                    key={r.id}
-                    onClick={() => onSelectRecipe(r)}
-                    className={`
-                        p-3 cursor-pointer flex justify-between items-center transition-all border-l-4
-                        ${currentRecipe.id === r.id
-                            ? 'bg-white/10 border-neon-blue text-white shadow-[inset_0_0_20px_rgba(0,243,255,0.1)]'
-                            : 'bg-black/20 border-transparent text-slate-500 hover:bg-white/5 hover:text-slate-300'}
-                    `}
-                >
-                    <div>
-                        <div className="font-tech font-bold text-sm tracking-wide">{r.name}</div>
-                        <div className="text-[10px] font-mono opacity-60">{r.lastModified}</div>
+export const RecipePanel: React.FC<RecipePanelProps> = ({ recipes, currentRecipe, onSelectRecipe, onClose }) => {
+    const navigate = useNavigate();
+    const [selectedId, setSelectedId] = useState<string>(currentRecipe.id);
+
+    const handleConfirm = () => {
+        const selected = recipes.find(r => r.id === selectedId);
+        if (selected) {
+            onSelectRecipe(selected);
+            onClose();
+        }
+    };
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
+            <div className="w-[500px] bg-slate-950/90 border border-neon-blue/30 rounded-lg shadow-2xl flex flex-col overflow-hidden">
+                {/* Header */}
+                <div className="h-12 bg-white/5 flex items-center justify-between px-4 border-b border-white/10">
+                    <div className="flex items-center gap-2 text-neon-blue font-tech font-bold tracking-wider">
+                        <Layers className="w-4 h-4" /> RECIPE SELECTION
                     </div>
-                    {currentRecipe.id === r.id && <CheckCircle2 className="w-4 h-4 text-neon-blue" />}
+                    <button onClick={onClose} className="text-slate-400 hover:text-white transition-colors">
+                        <X className="w-5 h-5" />
+                    </button>
                 </div>
-            ))}
+
+                {/* List (Max height for ~5 items) */}
+                <div className="p-4 max-h-[320px] overflow-y-auto custom-scrollbar">
+                    <div className="space-y-2">
+                        {recipes.map(recipe => (
+                            <div
+                                key={recipe.id}
+                                onClick={() => setSelectedId(recipe.id)}
+                                className={`
+                                    p-3 rounded border cursor-pointer transition-all flex items-center justify-between
+                                    ${selectedId === recipe.id
+                                        ? 'bg-neon-blue/20 border-neon-blue text-white shadow-[0_0_10px_rgba(0,243,255,0.2)]'
+                                        : 'bg-white/5 border-white/10 text-slate-400 hover:bg-white/10 hover:border-white/20'}
+                                `}
+                            >
+                                <div>
+                                    <div className="font-bold tracking-wide">{recipe.name}</div>
+                                    <div className="text-[10px] font-mono opacity-70">ID: {recipe.id} | MOD: {recipe.lastModified}</div>
+                                </div>
+                                {selectedId === recipe.id && <Check className="w-4 h-4 text-neon-blue" />}
+                            </div>
+                        ))}
+                    </div>
+                </div>
+
+                {/* Footer Actions */}
+                <div className="p-4 border-t border-white/10 flex justify-between gap-4 bg-black/20">
+                    <TechButton
+                        variant="default"
+                        className="flex items-center gap-2 px-4"
+                        onClick={() => navigate('/recipe')}
+                    >
+                        <Settings className="w-4 h-4" /> MANAGEMENT
+                    </TechButton>
+
+                    <TechButton
+                        variant="blue"
+                        className="flex items-center gap-2 px-8"
+                        onClick={handleConfirm}
+                    >
+                        SELECT
+                    </TechButton>
+                </div>
+            </div>
         </div>
-        <TechButton className="w-full mt-4 flex items-center justify-center gap-2">
-            <Layers className="w-4 h-4" /> New Recipe
-        </TechButton>
-    </div>
-);
+    );
+};

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>
     );

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>
+    );
+};

frontend/components/layout/Header.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { Activity, Settings, Move, Camera, Layers, Cpu } from 'lucide-react';
+
+interface HeaderProps {
+    currentTime: Date;
+    onTabChange: (tab: 'recipe' | 'motion' | 'camera' | 'setting' | null) => void;
+    activeTab: 'recipe' | 'motion' | 'camera' | 'setting' | null;
+
+}
+
+export const Header: React.FC<HeaderProps> = ({ currentTime, onTabChange, activeTab }) => {
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    const isWebView = typeof window !== 'undefined' && !!window.chrome?.webview;
+    const isIOPage = location.pathname === '/io-monitor';
+
+    return (
+        <header className="absolute top-0 left-0 right-0 h-20 px-6 flex items-center justify-between z-40 bg-gradient-to-b from-black/80 to-transparent pointer-events-none">
+            <div
+                className="flex items-center gap-4 pointer-events-auto cursor-pointer group"
+                onClick={() => {
+                    navigate('/');
+                    onTabChange(null);
+                }}
+            >
+                <div className="w-12 h-12 border-2 border-neon-blue flex items-center justify-center rounded shadow-glow-blue bg-black/50 backdrop-blur group-hover:bg-neon-blue/10 transition-colors">
+                    <Cpu className="text-neon-blue w-8 h-8 animate-pulse-slow" />
+                </div>
+                <div>
+                    <h1 className="text-3xl font-tech font-bold text-white tracking-widest uppercase italic text-shadow-glow-blue group-hover:text-neon-blue transition-colors">
+                        EQUI-HANDLER <span className="text-neon-blue text-sm not-italic">PRO</span>
+                    </h1>
+                    <div className="flex gap-2 text-[10px] text-neon-blue/70 font-mono">
+                        <span>SYS.VER 4.2.0</span>
+                        <span>|</span>
+                        <span className={isWebView ? "text-neon-green" : "text-amber-500"}>
+                            LINK: {isWebView ? "NATIVE" : "SIMULATION"}
+                        </span>
+                    </div>
+                </div>
+            </div>
+
+            {/* Top Navigation */}
+            <div className="flex items-center gap-2 pointer-events-auto">
+                {/* IO Tab Switcher (only on IO page) */}
+
+
+                <div className="bg-black/40 backdrop-blur-md p-1 rounded-full border border-white/10 flex gap-1">
+                    {[
+                        { id: 'recipe', icon: Layers, label: 'RECIPE', path: '/' },
+                        { id: 'io', icon: Activity, label: 'I/O MONITOR', path: '/io-monitor' },
+                        { id: 'motion', icon: Move, label: 'MOTION', path: '/' },
+                        { id: 'camera', icon: Camera, label: 'VISION', path: '/' },
+                        { id: 'setting', icon: Settings, label: 'CONFIG', path: '/' }
+                    ].map(item => {
+                        const isActive = item.id === 'io'
+                            ? location.pathname === '/io-monitor'
+                            : activeTab === item.id;
+
+                        return (
+                            <button
+                                key={item.id}
+                                onClick={() => {
+                                    if (item.id === 'io') {
+                                        navigate('/io-monitor');
+                                        onTabChange(null);
+                                    } else {
+                                        if (location.pathname !== '/') {
+                                            navigate('/');
+                                        }
+                                        onTabChange(activeTab === item.id ? null : item.id as any);
+                                    }
+                                }}
+                                className={`
+                                flex items-center gap-2 px-6 py-2 rounded-full font-tech font-bold text-sm transition-all border border-transparent
+                                ${isActive
+                                        ? 'bg-neon-blue/10 text-neon-blue border-neon-blue shadow-glow-blue'
+                                        : 'text-slate-400 hover:text-white hover:bg-white/5'}
+                            `}
+                            >
+                                <item.icon className="w-4 h-4" /> {item.label}
+                            </button>
+                        );
+                    })}
+                </div>
+            </div>
+
+            <div className="text-right pointer-events-auto">
+                <div className="text-2xl font-mono font-bold text-white text-shadow-glow-blue">
+                    {currentTime.toLocaleTimeString('en-GB')}
+                </div>
+                <div className="text-xs font-tech text-slate-400 tracking-[0.3em]">
+                    {currentTime.toLocaleDateString().toUpperCase()}
+                </div>
+            </div>
+        </header>
+    );
+};

frontend/components/layout/Layout.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Header } from './Header';
+import { Footer } from './Footer';
+import { RobotTarget } from '../../types';
+
+interface LayoutProps {
+    children: React.ReactNode;
+    currentTime: Date;
+    isHostConnected: boolean;
+    robotTarget: RobotTarget;
+    onTabChange: (tab: 'recipe' | 'motion' | 'camera' | 'setting' | null) => void;
+    activeTab: 'recipe' | 'motion' | 'camera' | 'setting' | null;
+    isLoading: boolean;
+}
+
+export const Layout: React.FC<LayoutProps> = ({
+    children,
+    currentTime,
+    isHostConnected,
+    robotTarget,
+    onTabChange,
+    activeTab,
+    isLoading
+}) => {
+    return (
+        <div className="relative w-screen h-screen bg-slate-950 text-slate-100 overflow-hidden font-sans">
+            {/* Animated Nebula Background */}
+            <div className="absolute inset-0 bg-gradient-to-br from-slate-950 via-[#050a15] to-[#0a0f20] animate-gradient bg-[length:400%_400%] z-0"></div>
+            <div className="absolute inset-0 grid-bg opacity-30 z-0"></div>
+            <div className="absolute inset-0 scanlines z-50 pointer-events-none"></div>
+
+            {/* LOADING OVERLAY */}
+            {isLoading && (
+                <div className="absolute inset-0 z-[100] bg-black flex flex-col items-center justify-center gap-6">
+                    <div className="relative">
+                        <div className="w-24 h-24 border-4 border-neon-blue/30 rounded-full animate-spin"></div>
+                        <div className="absolute inset-0 border-t-4 border-neon-blue rounded-full animate-spin"></div>
+                        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-neon-blue text-2xl font-tech font-bold">●</div>
+                    </div>
+                    <div className="text-center">
+                        <h2 className="text-2xl font-tech font-bold text-white tracking-widest mb-2">SYSTEM INITIALIZING</h2>
+                        <p className="font-mono text-neon-blue text-sm animate-pulse">ESTABLISHING CONNECTION...</p>
+                    </div>
+                </div>
+            )}
+
+            <Header
+                currentTime={currentTime}
+                onTabChange={onTabChange}
+                activeTab={activeTab}
+            />
+
+            {/* Main Content Area */}
+            <div className="absolute inset-0 pt-20 pb-10 z-10">
+                {children}
+            </div>
+
+            <Footer isHostConnected={isHostConnected} robotTarget={robotTarget} />
+        </div>
+    );
+};