Initial commit: Industrial HMI system with component architecture

- Implement WebView2-based HMI frontend with React + TypeScript + Vite
- Add C# .NET backend with WebSocket communication layer
- Separate UI components into modular structure:
  * RecipePanel: Recipe selection and management
  * IOPanel: I/O monitoring and control (32 inputs/outputs)
  * MotionPanel: Servo control for X/Y/Z axes
  * CameraPanel: Vision system feed with HUD overlay
  * SettingsModal: System configuration management
- Create reusable UI components (CyberPanel, TechButton, PanelHeader)
- Implement dual-mode communication (WebView2 native + WebSocket fallback)
- Add 3D visualization with Three.js/React Three Fiber
- Fix JSON parsing bug in configuration save handler
- Include comprehensive .gitignore for .NET and Node.js projects

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

frontend/components/CameraPanel.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Camera, Crosshair } from 'lucide-react';
+import { PanelHeader } from './common/PanelHeader';
+
+interface CameraPanelProps {
+    videoRef: React.RefObject<HTMLVideoElement>;
+}
+
+export const CameraPanel: React.FC<CameraPanelProps> = ({ videoRef }) => (
+    <div className="h-full flex flex-col">
+        <PanelHeader title="Vision Feed" icon={Camera} />
+        <div className="flex-1 bg-black relative overflow-hidden border border-slate-800 group">
+            <video ref={videoRef} autoPlay playsInline className="w-full h-full object-cover opacity-80" />
+
+            {/* HUD OVERLAY */}
+            <div className="absolute inset-0 pointer-events-none">
+                <div className="absolute top-0 left-0 w-full h-full border-[20px] border-neon-blue/10 clip-tech-inv"></div>
+                <Crosshair className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-12 h-12 text-neon-blue opacity-50" />
+
+                <div className="absolute top-4 right-4 flex flex-col items-end gap-1">
+                    <span className="text-[10px] font-mono text-neon-red animate-pulse">● REC</span>
+                    <span className="text-xs font-mono text-neon-blue">1920x1080 @ 60FPS</span>
+                </div>
+
+                <div className="absolute bottom-4 left-4 text-neon-blue/80 font-mono text-xs">
+                    EXPOSURE: AUTO<br />
+                    GAIN: 12dB<br />
+                    FOCUS: 150mm
+                </div>
+            </div>
+        </div>
+        <div className="grid grid-cols-4 gap-2 mt-3">
+            <button className="bg-slate-800 text-slate-400 text-[10px] py-2 hover:bg-neon-blue hover:text-black transition-colors">ZOOM +</button>
+            <button className="bg-slate-800 text-slate-400 text-[10px] py-2 hover:bg-neon-blue hover:text-black transition-colors">ZOOM -</button>
+            <button className="bg-slate-800 text-slate-400 text-[10px] py-2 hover:bg-neon-blue hover:text-black transition-colors">SNAP</button>
+            <button className="bg-slate-800 text-slate-400 text-[10px] py-2 hover:bg-neon-blue hover:text-black transition-colors">SETTINGS</button>
+        </div>
+    </div>
+);

frontend/components/IOPanel.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { Activity } from 'lucide-react';
+import { IOPoint } from '../types';
+import { PanelHeader } from './common/PanelHeader';
+import { TechButton } from './common/TechButton';
+
+interface IOPanelProps {
+    ioPoints: IOPoint[];
+    onToggle: (id: number, type: 'input' | 'output') => void;
+}
+
+export const IOPanel: React.FC<IOPanelProps> = ({ ioPoints, onToggle }) => {
+    const [tab, setTab] = useState<'in' | 'out'>('in');
+    const points = ioPoints.filter(p => p.type === (tab === 'in' ? 'input' : 'output'));
+
+    return (
+        <div className="h-full flex flex-col">
+            <PanelHeader title="I/O Monitor" icon={Activity} />
+            <div className="flex gap-2 mb-4">
+                <TechButton active={tab === 'in'} onClick={() => setTab('in')} className="flex-1">Inputs</TechButton>
+                <TechButton active={tab === 'out'} onClick={() => setTab('out')} className="flex-1" variant="blue">Outputs</TechButton>
+            </div>
+            <div className="grid grid-cols-4 gap-2 overflow-y-auto pr-2 custom-scrollbar pb-4">
+                {points.map(p => (
+                    <div
+                        key={p.id}
+                        onClick={() => onToggle(p.id, p.type)}
+                        className={`
+                            aspect-square flex flex-col items-center justify-center p-1 cursor-pointer transition-all border
+                            clip-tech
+                            ${p.state
+                                ? (p.type === 'output'
+                                    ? 'bg-neon-green/10 border-neon-green text-neon-green shadow-[0_0_10px_rgba(10,255,0,0.3)]'
+                                    : 'bg-neon-yellow/10 border-neon-yellow text-neon-yellow shadow-[0_0_10px_rgba(255,230,0,0.3)]')
+                                : 'bg-slate-900/50 border-slate-700 text-slate-600 hover:border-slate-500'}
+                        `}
+                    >
+                        <div className={`w-2 h-2 rounded-full mb-2 ${p.state ? (p.type === 'output' ? 'bg-neon-green' : 'bg-neon-yellow') : 'bg-slate-800'}`}></div>
+                        <span className="font-mono text-[10px] font-bold">
+                            {p.type === 'input' ? 'I' : 'Q'}{p.id.toString().padStart(2, '0')}
+                        </span>
+                        <span className="text-[8px] text-center uppercase leading-tight mt-1 opacity-80 truncate w-full px-1">
+                            {p.name.replace(/(Sensor|Door|Lamp)/g, '')}
+                        </span>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};

frontend/components/Machine3D.tsx

@@ -0,0 +1,633 @@
+
+import React, { useRef, useMemo } from 'react';
+import { Canvas, useFrame } from '@react-three/fiber';
+import { OrbitControls, Grid, PerspectiveCamera, Text, Box, Environment, RoundedBox } from '@react-three/drei';
+import * as THREE from 'three';
+import { RobotTarget, IOPoint } from '../types';
+
+interface Machine3DProps {
+  target: RobotTarget;
+  ioState: IOPoint[];
+  doorStates: {
+    front: boolean;
+    right: boolean;
+    left: boolean;
+    back: boolean;
+  };
+}
+
+// -- Parts Components --
+
+const TowerLamp = ({ ioState }: { ioState: IOPoint[] }) => {
+  // Outputs 0,1,2 mapped to Red, Yellow, Green
+  const redOn = ioState.find(io => io.id === 0 && io.type === 'output')?.state;
+  const yellowOn = ioState.find(io => io.id === 1 && io.type === 'output')?.state;
+  const greenOn = ioState.find(io => io.id === 2 && io.type === 'output')?.state;
+
+  const redMat = useRef<THREE.MeshStandardMaterial>(null);
+  const yelMat = useRef<THREE.MeshStandardMaterial>(null);
+  const grnMat = useRef<THREE.MeshStandardMaterial>(null);
+
+  useFrame((state) => {
+    const time = state.clock.elapsedTime;
+    const pulse = (Math.sin(time * 6) * 0.5 + 0.5); 
+    const intensity = 0.5 + (pulse * 3.0);
+
+    if (redMat.current) {
+      redMat.current.emissiveIntensity = redOn ? intensity : 0;
+      redMat.current.opacity = redOn ? 1.0 : 0.3;
+      redMat.current.color.setHex(redOn ? 0xff0000 : 0x550000); 
+    }
+    if (yelMat.current) {
+      yelMat.current.emissiveIntensity = yellowOn ? intensity : 0;
+      yelMat.current.opacity = yellowOn ? 1.0 : 0.3;
+      yelMat.current.color.setHex(yellowOn ? 0xffff00 : 0x555500);
+    }
+    if (grnMat.current) {
+      grnMat.current.emissiveIntensity = greenOn ? intensity : 0;
+      grnMat.current.opacity = greenOn ? 1.0 : 0.3;
+      grnMat.current.color.setHex(greenOn ? 0x00ff00 : 0x005500);
+    }
+  });
+
+  return (
+    <group position={[1.8, 2.5, -1.8]}>
+      {/* Pole */}
+      <mesh position={[0, 0, 0]}>
+        <cylinderGeometry args={[0.05, 0.05, 0.5]} />
+        <meshStandardMaterial color="#333" roughness={0.5} />
+      </mesh>
+      {/* Green */}
+      <mesh position={[0, 0.3, 0]}>
+        <cylinderGeometry args={[0.08, 0.08, 0.15]} />
+        <meshStandardMaterial 
+          ref={grnMat}
+          color="#00ff00" 
+          emissive="#00ff00" 
+          transparent 
+          toneMapped={false} 
+        />
+      </mesh>
+      {/* Yellow */}
+      <mesh position={[0, 0.46, 0]}>
+        <cylinderGeometry args={[0.08, 0.08, 0.15]} />
+        <meshStandardMaterial 
+          ref={yelMat}
+          color="#ffff00" 
+          emissive="#ffff00" 
+          transparent 
+          toneMapped={false}
+        />
+      </mesh>
+      {/* Red */}
+      <mesh position={[0, 0.62, 0]}>
+        <cylinderGeometry args={[0.08, 0.08, 0.15]} />
+        <meshStandardMaterial 
+          ref={redMat}
+          color="#ff0000" 
+          emissive="#ff0000" 
+          transparent 
+          toneMapped={false}
+        />
+      </mesh>
+    </group>
+  );
+};
+
+// -- DIPPING STATION COMPONENTS --
+
+const LiquidBath = ({ 
+  position, 
+  label, 
+  liquidColor, 
+}: { 
+  position: [number, number, number], 
+  label: string, 
+  liquidColor: string, 
+}) => {
+  const width = 1.0;
+  const depth = 0.8;
+  const height = 0.3;
+  const wallThick = 0.03;
+
+  const SteelMaterial = (
+    <meshStandardMaterial color="#e2e8f0" metalness={0.95} roughness={0.2} />
+  );
+
+  return (
+    <group position={position}>
+      <group position={[0, height / 2, 0]}>
+        <mesh position={[0, -height/2 + wallThick/2, 0]}>
+           <boxGeometry args={[width, wallThick, depth]} />
+           {SteelMaterial}
+        </mesh>
+        <mesh position={[0, 0, depth/2 - wallThick/2]}>
+           <boxGeometry args={[width, height, wallThick]} />
+           {SteelMaterial}
+        </mesh>
+        <mesh position={[0, 0, -depth/2 + wallThick/2]}>
+           <boxGeometry args={[width, height, wallThick]} />
+           {SteelMaterial}
+        </mesh>
+        <mesh position={[-width/2 + wallThick/2, 0, 0]}>
+           <boxGeometry args={[wallThick, height, depth - wallThick*2]} />
+           {SteelMaterial}
+        </mesh>
+        <mesh position={[width/2 - wallThick/2, 0, 0]}>
+           <boxGeometry args={[wallThick, height, depth - wallThick*2]} />
+           {SteelMaterial}
+        </mesh>
+        <mesh position={[0, height/2 - 0.05, 0]} rotation={[-Math.PI / 2, 0, 0]}>
+          <planeGeometry args={[width - wallThick*2, depth - wallThick*2]} />
+          <meshPhysicalMaterial 
+            color={liquidColor}
+            transparent
+            opacity={0.85}
+            roughness={0.05}
+            metalness={0.2}
+            transmission={0.4}
+            thickness={1}
+            clearcoat={1}
+          />
+        </mesh>
+      </group>
+      <Text 
+        position={[0, 0.6, 0.55]} 
+        fontSize={0.12} 
+        color="white" 
+        anchorX="center" 
+        anchorY="middle"
+        rotation={[-Math.PI/4, 0, 0]}
+      >
+        {label}
+      </Text>
+    </group>
+  );
+};
+
+const HakkoFX305 = ({ position }: { position: [number, number, number] }) => {
+  return (
+    <group position={position}>
+       {/* Main Blue Chassis */}
+       <mesh position={[0, 0.25, 0]}>
+          <boxGeometry args={[1.3, 0.55, 1.0]} /> 
+          <meshStandardMaterial color="#2563eb" metalness={0.1} roughness={0.4} /> 
+       </mesh>
+       
+       <mesh position={[-0.66, 0.25, 0]}>
+          <boxGeometry args={[0.02, 0.3, 0.6]} />
+          <meshStandardMaterial color="#1e3a8a" />
+       </mesh>
+       <mesh position={[0.66, 0.25, 0]}>
+          <boxGeometry args={[0.02, 0.3, 0.6]} />
+          <meshStandardMaterial color="#1e3a8a" />
+       </mesh>
+
+       <mesh position={[0, 0.25, 0.51]}>
+          <planeGeometry args={[1.25, 0.5]} />
+          <meshStandardMaterial color="#cbd5e1" metalness={0.6} roughness={0.3} />
+       </mesh>
+
+       <Text 
+          position={[0, 0.42, 0.52]} 
+          fontSize={0.08} 
+          color="#2563eb" 
+          anchorX="center" 
+          anchorY="middle"
+          fontWeight="bold"
+        >
+          HAKKO
+        </Text>
+        <Text 
+          position={[0.5, 0.42, 0.52]} 
+          fontSize={0.04} 
+          color="#64748b" 
+          anchorX="right" 
+          anchorY="middle"
+        >
+          FX-305
+        </Text>
+
+       <mesh position={[0.15, 0.25, 0.52]}>
+          <planeGeometry args={[0.35, 0.15]} />
+          <meshStandardMaterial color="#0f172a" roughness={0.2} />
+       </mesh>
+       
+       <group position={[-0.45, 0.25, 0.52]} rotation={[Math.PI/2, 0, 0]}>
+          <mesh>
+            <cylinderGeometry args={[0.08, 0.08, 0.02, 32]} />
+            <meshStandardMaterial color="#1e293b" />
+          </mesh>
+          <mesh position={[0, 0.02, 0]} rotation={[0, 0, Math.PI/2]}>
+             <boxGeometry args={[0.02, 0.08, 0.01]} />
+             <meshStandardMaterial color="#475569" />
+          </mesh>
+       </group>
+
+       <group position={[0.15, 0.12, 0.52]}>
+          {[-0.12, 0, 0.12, 0.24].map((x, i) => (
+             <mesh key={i} position={[x, 0, 0]} rotation={[Math.PI/2, 0, 0]}>
+                <cylinderGeometry args={[0.035, 0.035, 0.02, 16]} />
+                <meshStandardMaterial color="#facc15" />
+             </mesh>
+          ))}
+       </group>
+
+       <mesh position={[0, 0.55, 0]}>
+          <boxGeometry args={[0.9, 0.05, 0.7]} />
+          <meshStandardMaterial color="#94a3b8" metalness={0.8} roughness={0.3} />
+       </mesh>
+
+       <group position={[0, 0.58, 0]}>
+          <mesh position={[0, 0, -0.3]}>
+             <boxGeometry args={[0.8, 0.05, 0.05]} />
+             <meshStandardMaterial color="#64748b" metalness={0.7} />
+          </mesh>
+          <mesh position={[0, 0, 0.3]}>
+             <boxGeometry args={[0.8, 0.05, 0.05]} />
+             <meshStandardMaterial color="#64748b" metalness={0.7} />
+          </mesh>
+          <mesh position={[-0.4, 0, 0]}>
+             <boxGeometry args={[0.05, 0.05, 0.65]} />
+             <meshStandardMaterial color="#64748b" metalness={0.7} />
+          </mesh>
+          <mesh position={[0.4, 0, 0]}>
+             <boxGeometry args={[0.05, 0.05, 0.65]} />
+             <meshStandardMaterial color="#64748b" metalness={0.7} />
+          </mesh>
+       </group>
+
+       <mesh position={[0, 0.57, 0]} rotation={[-Math.PI / 2, 0, 0]}>
+         <planeGeometry args={[0.75, 0.6]} />
+         <meshPhysicalMaterial 
+           color="#e2e8f0" 
+           emissive="#cbd5e1"
+           emissiveIntensity={0.1}
+           roughness={0.02}
+           metalness={1.0}
+           clearcoat={1}
+           reflectivity={1}
+         />
+       </mesh>
+
+       <Text 
+          position={[0, 0.9, 0.6]} 
+          fontSize={0.15} 
+          color="#fbbf24" 
+          anchorX="center" 
+          anchorY="middle"
+          rotation={[-Math.PI/4, 0, 0]}
+        >
+          2. HAKKO SOLDER
+        </Text>
+    </group>
+  );
+};
+
+const DippingStations = () => {
+  return (
+    <group>
+      <mesh position={[0, 0.2, 0]}>
+        <boxGeometry args={[4.5, 0.4, 1.5]} />
+        <meshStandardMaterial color="#334155" roughness={0.5} metalness={0.5} />
+      </mesh>
+      <LiquidBath position={[-1.5, 0.4, 0]} label="1. FLUX" liquidColor="#fef08a" />
+      <HakkoFX305 position={[0, 0.4, 0]} />
+      <LiquidBath position={[1.5, 0.4, 0]} label="3. CLEAN" liquidColor="#bae6fd" />
+    </group>
+  );
+};
+
+const Door = ({ 
+  position, 
+  rotation = [0,0,0], 
+  size, 
+  isOpen 
+}: { 
+  position: [number, number, number], 
+  rotation?: [number, number, number],
+  size: [number, number], 
+  isOpen: boolean 
+}) => {
+  const meshRef = useRef<THREE.Mesh>(null);
+
+  useFrame((state, delta) => {
+    if (!meshRef.current) return;
+    const targetY = isOpen ? position[1] + 2 : position[1];
+    meshRef.current.position.y = THREE.MathUtils.lerp(meshRef.current.position.y, targetY, delta * 5);
+  });
+
+  return (
+    <mesh ref={meshRef} position={position} rotation={rotation as any}>
+      <planeGeometry args={[size[0], size[1]]} />
+      <meshPhysicalMaterial 
+        color="#a5f3fc" 
+        transparent 
+        opacity={0.2} 
+        roughness={0} 
+        metalness={0.9} 
+        side={THREE.DoubleSide} 
+        depthWrite={false} 
+      />
+      <mesh position={[size[0]/2 - 0.1, 0, 0.02]}>
+         <boxGeometry args={[0.05, size[1], 0.05]} />
+         <meshStandardMaterial color="#cbd5e1" />
+      </mesh>
+      <mesh position={[-size[0]/2 + 0.1, 0, 0.02]}>
+         <boxGeometry args={[0.05, size[1], 0.05]} />
+         <meshStandardMaterial color="#cbd5e1" />
+      </mesh>
+    </mesh>
+  );
+};
+
+const MachineFrame = ({ doorStates }: { doorStates: { front: boolean, right: boolean, left: boolean, back: boolean } }) => {
+  return (
+    <group>
+      <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.05, 0]}>
+        <planeGeometry args={[6, 6]} />
+        <meshStandardMaterial color="#0f172a" roughness={0.8} metalness={0.2} />
+      </mesh>
+      <Grid infiniteGrid fadeDistance={15} sectionColor="#475569" cellColor="#1e293b" />
+      
+      {[[-2, -2], [2, -2], [2, 2], [-2, 2]].map(([x, z], i) => (
+        <mesh key={i} position={[x, 1.5, z]}>
+          <boxGeometry args={[0.15, 3, 0.15]} />
+          <meshStandardMaterial color="#64748b" metalness={0.8} roughness={0.2} />
+        </mesh>
+      ))}
+
+      <group position={[0, 3, 0]}>
+        <mesh position={[0, 0, -2]}>
+            <boxGeometry args={[4.15, 0.15, 0.15]} />
+            <meshStandardMaterial color="#64748b" metalness={0.8} roughness={0.2} />
+        </mesh>
+        <mesh position={[0, 0, 2]}>
+            <boxGeometry args={[4.15, 0.15, 0.15]} />
+            <meshStandardMaterial color="#64748b" metalness={0.8} roughness={0.2} />
+        </mesh>
+        <mesh position={[-2, 0, 0]}>
+            <boxGeometry args={[0.15, 0.15, 4.15]} />
+            <meshStandardMaterial color="#64748b" metalness={0.8} roughness={0.2} />
+        </mesh>
+        <mesh position={[2, 0, 0]}>
+            <boxGeometry args={[0.15, 0.15, 4.15]} />
+            <meshStandardMaterial color="#64748b" metalness={0.8} roughness={0.2} />
+        </mesh>
+      </group>
+
+      <Door position={[0, 1.5, 2]} size={[4, 3]} isOpen={doorStates.front} />
+      <Door position={[0, 1.5, -2]} size={[4, 3]} isOpen={doorStates.back} />
+      <Door position={[-2, 1.5, 0]} rotation={[0, Math.PI/2, 0]} size={[4, 3]} isOpen={doorStates.left} />
+      <Door position={[2, 1.5, 0]} rotation={[0, Math.PI/2, 0]} size={[4, 3]} isOpen={doorStates.right} />
+      <DippingStations />
+    </group>
+  );
+};
+
+// --- MISUMI STYLE INDUSTRIAL ACTUATOR COMPONENT ---
+
+const IndustrialActuatorRail = ({ length, label, hasMotor = true }: { length: number, label?: string, hasMotor?: boolean }) => {
+  const width = 0.14; // Actuator Width
+  const height = 0.08; // Actuator Height (Profile)
+
+  return (
+    <group>
+      {/* 1. Main Aluminum Body (White/Light Grey Matte) */}
+      <RoundedBox args={[width, height, length]} radius={0.01} smoothness={4}>
+         <meshStandardMaterial color="#f8fafc" roughness={0.8} metalness={0.1} />
+      </RoundedBox>
+
+      {/* 2. Top Stainless Steel Cover Strip */}
+      <mesh position={[0, height/2 + 0.001, 0]}>
+         <boxGeometry args={[width * 0.7, 0.002, length]} />
+         <meshStandardMaterial color="#cbd5e1" metalness={0.9} roughness={0.2} />
+      </mesh>
+      
+      {/* 3. Black Gap/Slit for Slider */}
+      <mesh position={[0, height/2, 0]}>
+         <boxGeometry args={[width * 0.8, 0.01, length * 0.98]} />
+         <meshStandardMaterial color="#0f172a" roughness={0.9} />
+      </mesh>
+
+      {/* 4. End Caps (Plastic White) */}
+      <group position={[0, 0, length/2 + 0.02]}>
+         <RoundedBox args={[width + 0.01, height + 0.01, 0.04]} radius={0.02} smoothness={4}>
+            <meshStandardMaterial color="#e2e8f0" />
+         </RoundedBox>
+      </group>
+      <group position={[0, 0, -length/2 - 0.02]}>
+         <RoundedBox args={[width + 0.01, height + 0.01, 0.04]} radius={0.02} smoothness={4}>
+            <meshStandardMaterial color="#e2e8f0" />
+         </RoundedBox>
+      </group>
+
+      {/* 5. Servo Motor Unit (Black & Silver) */}
+      {hasMotor && (
+        <group position={[0, 0, -length/2 - 0.15]}>
+           {/* Flange */}
+           <mesh position={[0, 0, 0.08]}>
+              <boxGeometry args={[0.12, 0.12, 0.05]} />
+              <meshStandardMaterial color="#475569" metalness={0.8} />
+           </mesh>
+           {/* Motor Body */}
+           <mesh position={[0, 0, 0]} rotation={[Math.PI/2, 0, 0]}>
+              <cylinderGeometry args={[0.05, 0.05, 0.2, 32]} />
+              <meshStandardMaterial color="#1e293b" metalness={0.6} roughness={0.4} />
+           </mesh>
+           {/* Encoder Cap */}
+           <mesh position={[0, 0, -0.11]} rotation={[Math.PI/2, 0, 0]}>
+              <cylinderGeometry args={[0.045, 0.045, 0.05, 32]} />
+              <meshStandardMaterial color="#000000" />
+           </mesh>
+           {/* Cable Gland */}
+           <mesh position={[0, 0.04, -0.05]}>
+              <boxGeometry args={[0.03, 0.03, 0.03]} />
+              <meshStandardMaterial color="#333" />
+           </mesh>
+        </group>
+      )}
+
+      {/* 6. Label/Branding */}
+      {label && (
+        <Text 
+           position={[width/2 + 0.01, 0, length/2 - 0.2]} 
+           rotation={[0, Math.PI/2, 0]}
+           fontSize={0.06}
+           color="#334155"
+           fontWeight="bold"
+           anchorX="right"
+        >
+           {label}
+        </Text>
+      )}
+    </group>
+  );
+}
+
+// The Moving Block on top of the actuator
+const IndustrialSlider = ({ width = 0.16, length = 0.18, height = 0.03 }) => {
+  return (
+    <group position={[0, 0.06, 0]}>
+      <RoundedBox args={[width, height, length]} radius={0.005} smoothness={2}>
+         <meshStandardMaterial color="#f1f5f9" metalness={0.4} roughness={0.5} />
+      </RoundedBox>
+      {/* Mounting Holes (Visual) */}
+      {[-1, 1].map(x => [-1, 1].map(z => (
+         <mesh key={`${x}-${z}`} position={[x * 0.06, height/2 + 0.001, z * 0.07]} rotation={[Math.PI/2, 0, 0]}>
+            <circleGeometry args={[0.008, 16]} />
+            <meshStandardMaterial color="#94a3b8" />
+         </mesh>
+      )))}
+    </group>
+  )
+}
+
+// -- MAIN ROBOT ASSEMBLY --
+
+const Robot = ({ target }: { target: RobotTarget }) => {
+  const bridgeGroup = useRef<THREE.Group>(null); 
+  const carriageGroup = useRef<THREE.Group>(null);
+  const zAxisGroup = useRef<THREE.Group>(null);
+
+  useFrame((state, delta) => {
+    if (bridgeGroup.current) {
+      // Y-Axis Movement
+      bridgeGroup.current.position.z = THREE.MathUtils.lerp(bridgeGroup.current.position.z, target.y, delta * 3);
+    }
+    if (carriageGroup.current) {
+      // X-Axis Movement
+      carriageGroup.current.position.x = THREE.MathUtils.lerp(carriageGroup.current.position.x, target.x, delta * 3);
+    }
+    if (zAxisGroup.current) {
+      // Z-Axis Movement
+      zAxisGroup.current.position.y = THREE.MathUtils.lerp(zAxisGroup.current.position.y, target.z, delta * 3);
+    }
+  });
+
+  return (
+    <group position={[0, 2.0, 0]}> 
+      
+      {/* --- Y-AXIS (Left & Right Fixed Actuators) --- */}
+      <group>
+        <group position={[-1.8, 0, 0]}>
+          <IndustrialActuatorRail length={3.8} label="MISUMI-Y1" />
+        </group>
+        <group position={[1.8, 0, 0]}>
+           <IndustrialActuatorRail length={3.8} label="MISUMI-Y2" />
+        </group>
+      </group>
+
+      {/* --- MOVING BRIDGE (Y-AXIS CARRIAGE + X-AXIS ACTUATOR) --- */}
+      <group ref={bridgeGroup}>
+        
+        {/* Y-Sliders (Connecting Bridge to Y-Rails) */}
+        <group position={[-1.8, 0, 0]}> <IndustrialSlider /> </group>
+        <group position={[1.8, 0, 0]}> <IndustrialSlider /> </group>
+        
+        {/* Bridge Beam Structure */}
+        <mesh position={[0, 0.08, 0]}>
+          <boxGeometry args={[4.2, 0.05, 0.25]} />
+          <meshStandardMaterial color="#cbd5e1" metalness={0.6} roughness={0.4} /> 
+        </mesh>
+
+        {/* X-AXIS ACTUATOR (Mounted on top of Bridge) */}
+        <group position={[0, 0.14, 0]} rotation={[0, Math.PI/2, 0]}>
+           <IndustrialActuatorRail length={3.4} label="MISUMI-X" hasMotor />
+        </group>
+
+        {/* --- MOVING CARRIAGE (X-AXIS SLIDER + Z-AXIS) --- */}
+        <group ref={carriageGroup}>
+          
+          {/* X-Slider */}
+          <group position={[0, 0.14, 0]} rotation={[0, Math.PI/2, 0]}>
+             <IndustrialSlider />
+          </group>
+
+          {/* --- Z-AXIS ACTUATOR (Vertical) --- */}
+          <group position={[0, 0.2, 0.12]}> 
+             {/* Z-Actuator Body (Fixed to X-Slider) */}
+             <group position={[0, 0.4, 0]} rotation={[Math.PI/2, 0, 0]}>
+                <IndustrialActuatorRail length={0.8} label="MISUMI-Z" hasMotor={false} />
+                {/* Z-Motor on Top */}
+                <group position={[0, 0, 0.4 + 0.15]} rotation={[0, Math.PI, 0]}>
+                    <mesh position={[0, 0, -0.05]} rotation={[Math.PI/2, 0, 0]}>
+                       <boxGeometry args={[0.1, 0.1, 0.12]} />
+                       <meshStandardMaterial color="#0f172a" />
+                    </mesh>
+                </group>
+             </group>
+
+             {/* MOVING Z-HEAD (The Slider of Z-Axis) */}
+             <group ref={zAxisGroup}>
+                <group position={[0, 0, 0.08]}>
+                   {/* Connection Plate */}
+                   <mesh position={[0, 0, -0.04]}>
+                      <boxGeometry args={[0.12, 0.15, 0.02]} />
+                      <meshStandardMaterial color="#64748b" />
+                   </mesh>
+
+                   {/* PICKER MECHANISM */}
+                   <group position={[0, -0.2, 0]}>
+                        <mesh position={[0, 0, 0]}>
+                          <boxGeometry args={[0.3, 0.05, 0.1]} />
+                          <meshStandardMaterial color="#334155" />
+                        </mesh>
+                        {/* Fingers */}
+                        <mesh position={[-0.12, -0.15, 0]}>
+                           <boxGeometry args={[0.02, 0.3, 0.05]} />
+                           <meshStandardMaterial color="#94a3b8" metalness={0.8} />
+                        </mesh>
+                        <mesh position={[0.12, -0.15, 0]}>
+                           <boxGeometry args={[0.02, 0.3, 0.05]} />
+                           <meshStandardMaterial color="#94a3b8" metalness={0.8} />
+                        </mesh>
+
+                        {/* PCB STRIP */}
+                        <group position={[0, -0.35, 0]}>
+                           <mesh>
+                              <boxGeometry args={[0.28, 0.6, 0.02]} />
+                              <meshStandardMaterial color="#166534" roughness={0.3} />
+                           </mesh>
+                           <mesh position={[0, -0.28, 0.011]}>
+                              <planeGeometry args={[0.24, 0.04]} />
+                              <meshStandardMaterial color="#fbbf24" metalness={1.0} roughness={0.1} />
+                           </mesh>
+                           <mesh position={[0, 0, 0.011]}>
+                              <planeGeometry args={[0.15, 0.15]} />
+                              <meshStandardMaterial color="#0f172a" />
+                           </mesh>
+                        </group>
+                   </group>
+                </group>
+             </group>
+          </group>
+        </group>
+      </group>
+    </group>
+  );
+};
+
+export const Machine3D: React.FC<Machine3DProps> = ({ target, ioState, doorStates }) => {
+  return (
+    <Canvas shadows className="w-full h-full bg-slate-900">
+      <PerspectiveCamera makeDefault position={[5, 5, 6]} fov={45} />
+      <OrbitControls 
+        maxPolarAngle={Math.PI / 2 - 0.05} 
+        minDistance={3}
+        maxDistance={12}
+      />
+      <Environment preset="city" />
+      
+      <ambientLight intensity={0.4} />
+      <pointLight position={[10, 10, 10]} intensity={1} castShadow />
+      <pointLight position={[-10, 5, -10]} intensity={0.5} />
+      
+      <pointLight position={[0, 2, 0]} intensity={0.2} color="#bae6fd" distance={5} />
+
+      <MachineFrame doorStates={doorStates} />
+      <TowerLamp ioState={ioState} />
+      <Robot target={target} />
+    </Canvas>
+  );
+};

frontend/components/MotionPanel.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { Move } from 'lucide-react';
+import { RobotTarget, AxisPosition } from '../types';
+import { PanelHeader } from './common/PanelHeader';
+import { TechButton } from './common/TechButton';
+
+const MOCK_POSITIONS: AxisPosition[] = [
+    { id: 'p1', name: 'Home Position', axis: 'X', value: 0, speed: 100, acc: 100, dec: 100 },
+    { id: 'p2', name: 'Pick Pos A', axis: 'X', value: -1.5, speed: 500, acc: 200, dec: 200 },
+    { id: 'p3', name: 'Place Pos B', axis: 'X', value: 1.5, speed: 500, acc: 200, dec: 200 },
+    { id: 'p4', name: 'Scan Index', axis: 'X', value: 0.5, speed: 300, acc: 100, dec: 100 },
+    { id: 'py1', name: 'Rear Limit', axis: 'Y', value: -1.5, speed: 200, acc: 100, dec: 100 },
+    { id: 'pz1', name: 'Safe Height', axis: 'Z', value: 0, speed: 50, acc: 50, dec: 50 },
+];
+
+interface MotionPanelProps {
+    robotTarget: RobotTarget;
+    onMove: (axis: 'X' | 'Y' | 'Z', val: number) => void;
+}
+
+export const MotionPanel: React.FC<MotionPanelProps> = ({ robotTarget, onMove }) => {
+    const [axis, setAxis] = useState<'X' | 'Y' | 'Z'>('X');
+
+    return (
+        <div className="h-full flex flex-col">
+            <PanelHeader title="Servo Control" icon={Move} />
+            <div className="flex gap-2 mb-4">
+                {['X', 'Y', 'Z'].map(a => (
+                    <button
+                        key={a}
+                        onClick={() => setAxis(a as any)}
+                        className={`flex-1 py-2 font-tech font-bold text-lg border-b-2 transition-all ${axis === a ? 'text-neon-blue border-neon-blue bg-neon-blue/10' : 'text-slate-500 border-slate-700 hover:text-slate-300'}`}
+                    >
+                        {a}-AXIS
+                    </button>
+                ))}
+            </div>
+
+            <div className="bg-black/40 p-4 rounded border border-white/10 mb-4 text-center">
+                <div className="text-[10px] text-slate-400 uppercase tracking-widest mb-1">Current Position</div>
+                <div className="font-mono text-3xl text-neon-blue text-shadow-glow-blue">
+                    {robotTarget[axis.toLowerCase() as 'x' | 'y' | 'z'].toFixed(3)}
+                    <span className="text-sm text-slate-500 ml-2">mm</span>
+                </div>
+            </div>
+
+            <div className="space-y-2 overflow-y-auto flex-1 pr-2 custom-scrollbar">
+                {MOCK_POSITIONS.filter(p => p.axis === axis).map(p => (
+                    <div key={p.id} className="flex items-center justify-between p-3 bg-white/5 border border-white/5 hover:border-neon-blue/50 transition-all group">
+                        <span className="text-xs font-bold text-slate-300 group-hover:text-white">{p.name}</span>
+                        <button
+                            onClick={() => onMove(axis, p.value)}
+                            className="px-3 py-1 bg-slate-800 hover:bg-neon-blue hover:text-black text-xs font-mono transition-colors"
+                        >
+                            GO {p.value}
+                        </button>
+                    </div>
+                ))}
+            </div>
+
+            <div className="flex gap-2 mt-4">
+                <TechButton className="flex-1 font-mono text-lg" onClick={() => onMove(axis, robotTarget[axis.toLowerCase() as 'x' | 'y' | 'z'] - 0.1)}>-</TechButton>
+                <TechButton className="flex-1 font-mono text-lg" onClick={() => onMove(axis, robotTarget[axis.toLowerCase() as 'x' | 'y' | 'z'] + 0.1)}>+</TechButton>
+            </div>
+        </div>
+    );
+};

frontend/components/RecipePanel.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { FileText, CheckCircle2, Layers } from 'lucide-react';
+import { Recipe } from '../types';
+import { PanelHeader } from './common/PanelHeader';
+import { TechButton } from './common/TechButton';
+
+interface RecipePanelProps {
+    recipes: Recipe[];
+    currentRecipe: Recipe;
+    onSelectRecipe: (r: Recipe) => 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>
+                    </div>
+                    {currentRecipe.id === r.id && <CheckCircle2 className="w-4 h-4 text-neon-blue" />}
+                </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/SettingsModal.tsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import { Settings, RotateCw, ChevronDown, ChevronRight } from 'lucide-react';
+import { ConfigItem } from '../types';
+
+interface SettingsModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    config: ConfigItem[] | null;
+    isRefreshing: boolean;
+    onSave: (config: ConfigItem[]) => void;
+}
+
+const TechButton = ({ children, onClick, active = false, variant = 'blue', className = '' }: any) => {
+    const colors: any = {
+        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'
+    };
+
+    return (
+        <button
+            onClick={onClick}
+            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'}
+        ${className}
+      `}
+        >
+            {active && <div className="absolute inset-0 bg-white/20 animate-pulse pointer-events-none"></div>}
+            {children}
+        </button>
+    );
+};
+
+export const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, config, isRefreshing, onSave }) => {
+    const [localConfig, setLocalConfig] = React.useState<ConfigItem[]>([]);
+    const [expandedGroups, setExpandedGroups] = React.useState<Set<string>>(new Set());
+
+    React.useEffect(() => {
+        if (config) {
+            setLocalConfig(config);
+            // Auto-expand all groups initially
+            const groups = new Set(config.map(c => c.Group));
+            setExpandedGroups(groups);
+        }
+    }, [config]);
+
+    const handleChange = (idx: number, newValue: string) => {
+        setLocalConfig(prev => {
+            const next = [...prev];
+            next[idx] = { ...next[idx], Value: newValue };
+            return next;
+        });
+    };
+
+    const toggleGroup = (group: string) => {
+        setExpandedGroups(prev => {
+            const next = new Set(prev);
+            if (next.has(group)) next.delete(group);
+            else next.add(group);
+            return next;
+        });
+    };
+
+    // Group items by category
+    const groupedConfig = React.useMemo(() => {
+        const groups: { [key: string]: { item: ConfigItem, originalIdx: number }[] } = {};
+        localConfig.forEach((item, idx) => {
+            if (!groups[item.Group]) groups[item.Group] = [];
+            groups[item.Group].push({ item, originalIdx: idx });
+        });
+        return groups;
+    }, [localConfig]);
+
+    if (!isOpen) return null;
+
+    return (
+        <div className="absolute inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
+            <div className="w-[900px] glass-holo p-8 border border-neon-blue shadow-glow-blue relative flex flex-col max-h-[90vh]">
+                <button onClick={onClose} className="absolute top-4 right-4 text-slate-400 hover:text-white">✕</button>
+                <h2 className="text-2xl font-tech font-bold text-neon-blue mb-8 border-b border-white/10 pb-4 flex items-center gap-3 flex-none">
+                    <Settings className="animate-spin-slow" /> SYSTEM CONFIGURATION
+                </h2>
+
+                {isRefreshing ? (
+                    <div className="h-64 flex flex-col items-center justify-center gap-4 animate-pulse flex-1">
+                        <RotateCw className="w-12 h-12 text-neon-blue animate-spin" />
+                        <div className="text-xl font-tech text-neon-blue tracking-widest">FETCHING CONFIGURATION...</div>
+                    </div>
+                ) : (
+                    <div className="flex-1 overflow-y-auto custom-scrollbar pr-2 mb-8">
+                        <div className="space-y-6">
+                            {Object.entries(groupedConfig).map(([groupName, items]) => (
+                                <div key={groupName} className="border border-white/10 bg-black/20">
+                                    <button
+                                        onClick={() => toggleGroup(groupName)}
+                                        className="w-full flex items-center gap-2 p-3 bg-white/5 hover:bg-white/10 transition-colors text-left"
+                                    >
+                                        {expandedGroups.has(groupName) ? <ChevronDown className="w-4 h-4 text-neon-blue" /> : <ChevronRight className="w-4 h-4 text-slate-400" />}
+                                        <span className="font-tech font-bold text-lg text-white tracking-wider">{groupName}</span>
+                                        <span className="text-xs text-slate-500 ml-auto">{items.length} ITEMS</span>
+                                    </button>
+
+                                    {expandedGroups.has(groupName) && (
+                                        <div className="p-4 space-y-4">
+                                            {items.map(({ item, originalIdx }) => (
+                                                <div key={originalIdx} className="grid grid-cols-[250px_1fr] gap-6 items-start group">
+                                                    <div>
+                                                        <div className="text-sm font-bold text-neon-blue mb-1">{item.Key}</div>
+                                                        <div className="text-xs text-slate-400 leading-tight">{item.Description}</div>
+                                                    </div>
+
+                                                    <div>
+                                                        {item.Type === 'Boolean' ? (
+                                                            <div className="flex items-center gap-3 h-full">
+                                                                <button
+                                                                    onClick={() => handleChange(originalIdx, item.Value === 'true' ? 'false' : 'true')}
+                                                                    className={`w-12 h-6 rounded-full p-1 transition-colors ${item.Value === 'true' ? 'bg-neon-green' : 'bg-slate-700'}`}
+                                                                >
+                                                                    <div className={`w-4 h-4 rounded-full bg-white shadow transition-transform ${item.Value === 'true' ? 'translate-x-6' : 'translate-x-0'}`} />
+                                                                </button>
+                                                                <span className={`font-mono text-sm font-bold ${item.Value === 'true' ? 'text-neon-green' : 'text-slate-400'}`}>
+                                                                    {item.Value.toUpperCase()}
+                                                                </span>
+                                                            </div>
+                                                        ) : (
+                                                            <input
+                                                                type={item.Type === 'Number' ? 'number' : 'text'}
+                                                                value={item.Value}
+                                                                onChange={(e) => handleChange(originalIdx, e.target.value)}
+                                                                className="w-full bg-black/50 border border-slate-700 text-white font-mono text-sm px-3 py-2 focus:border-neon-blue focus:outline-none transition-colors hover:border-slate-500"
+                                                            />
+                                                        )}
+                                                    </div>
+                                                </div>
+                                            ))}
+                                        </div>
+                                    )}
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                )}
+
+                <div className="flex justify-end gap-4 flex-none pt-4 border-t border-white/10">
+                    <TechButton onClick={onClose}>CANCEL</TechButton>
+                    <TechButton variant="blue" active onClick={() => { onSave(localConfig); onClose(); }}>SAVE CONFIG</TechButton>
+                </div>
+            </div>
+        </div>
+    );
+};

frontend/components/common/CyberPanel.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+interface CyberPanelProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+
+export const CyberPanel: React.FC<CyberPanelProps> = ({ children, className = "" }) => (
+    <div className={`glass-holo p-1 relative group ${className}`}>
+        {/* Decorative Corners */}
+        <svg className="absolute top-0 left-0 w-6 h-6 text-neon-blue opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path d="M2 22V2H22" />
+        </svg>
+        <svg className="absolute top-0 right-0 w-6 h-6 text-neon-blue opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path d="M22 22V2H2" />
+        </svg>
+        <svg className="absolute bottom-0 left-0 w-6 h-6 text-neon-blue opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path d="M2 2V22H22" />
+        </svg>
+        <svg className="absolute bottom-0 right-0 w-6 h-6 text-neon-blue opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path d="M22 2V22H2" />
+        </svg>
+
+        {/* Inner Content */}
+        <div className="bg-slate-950/40 backdrop-blur-md h-full w-full p-4 relative z-10 clip-tech border border-white/5">
+            {children}
+        </div>
+    </div>
+);

frontend/components/common/PanelHeader.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
+
+interface PanelHeaderProps {
+    title: string;
+    icon: LucideIcon;
+}
+
+export const PanelHeader: React.FC<PanelHeaderProps> = ({ title, icon: Icon }) => (
+    <div className="flex items-center gap-3 mb-6 border-b border-white/10 pb-2">
+        <div className="text-neon-blue animate-pulse">
+            <Icon className="w-5 h-5" />
+        </div>
+        <h2 className="text-lg font-tech font-bold text-white tracking-[0.1em] uppercase text-shadow-glow-blue">
+            {title}
+        </h2>
+        <div className="flex-1 h-px bg-gradient-to-r from-neon-blue/50 to-transparent"></div>
+    </div>
+);

frontend/components/common/TechButton.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+interface TechButtonProps {
+    children?: React.ReactNode;
+    onClick?: () => void;
+    active?: boolean;
+    variant?: 'blue' | 'red' | 'amber' | 'green';
+    className?: string;
+}
+
+export const TechButton: React.FC<TechButtonProps> = ({
+    children,
+    onClick,
+    active = false,
+    variant = 'blue',
+    className = ''
+}) => {
+    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'
+    };
+
+    return (
+        <button
+            onClick={onClick}
+            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'}
+                ${className}
+            `}
+        >
+            {active && <div className="absolute inset-0 bg-white/20 animate-pulse pointer-events-none"></div>}
+            {children}
+        </button>
+    );
+};