feat: Add real-time IO/interlock updates, HW status display, and history page

- Implement real-time IO value updates via IOValueChanged event
- Add interlock toggle and real-time interlock change events
- Fix ToggleLight to check return value of DIO.SetRoomLight
- Add HW status display in Footer matching WinForms HWState
- Implement GetHWStatus API and 250ms broadcast interval
- Create HistoryPage React component for work history viewing
- Add GetHistoryData API for database queries
- Add date range selection, search, filter, and CSV export
- Add History button in Header navigation
- Add PickerMoveDialog component for manage operations
- Fix DataSet column names (idx, PRNATTACH, PRNVALID, qtymax)

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

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

FrontEnd/components/layout/Footer.tsx

@@ -1,24 +1,68 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { RobotTarget } from '../../types';
+import { comms } from '../../communication';
+
+// HW 상태 타입 (윈폼 HWState와 동일)
+// status: 0=SET(미설정/회색), 1=ON(연결/녹색), 2=TRIG(트리거/노란색), 3=OFF(연결안됨/빨간색)
+interface HWItem {
+    name: string;
+    title: string;
+    status: number;
+}
 
 interface FooterProps {
     isHostConnected: boolean;
     robotTarget: RobotTarget;
 }
 
+// 상태에 따른 LED 색상 반환
+const getStatusColor = (status: number): { bg: string; shadow: string; text: string } => {
+    switch (status) {
+        case 1: // ON - 녹색
+            return { bg: 'bg-neon-green', shadow: 'shadow-[0_0_5px_#0aff00]', text: 'text-green-400' };
+        case 2: // TRIG - 노란색
+            return { bg: 'bg-yellow-400', shadow: 'shadow-[0_0_5px_#facc15]', text: 'text-yellow-400' };
+        case 3: // OFF - 빨간색
+            return { bg: 'bg-red-500', shadow: 'shadow-[0_0_5px_#ef4444]', text: 'text-red-400' };
+        default: // SET - 회색 (미설정)
+            return { bg: 'bg-gray-500', shadow: '', text: 'text-gray-400' };
+    }
+};
+
 export const Footer: React.FC<FooterProps> = ({ isHostConnected, robotTarget }) => {
+    const [hwStatus, setHwStatus] = useState<HWItem[]>([]);
+
+    useEffect(() => {
+        // HW_STATUS_UPDATE 이벤트 구독
+        const unsubscribe = comms.subscribe((msg: any) => {
+            if (msg?.type === 'HW_STATUS_UPDATE' && msg.data) {
+                setHwStatus(msg.data);
+            }
+        });
+
+        return () => {
+            unsubscribe();
+        };
+    }, []);
+
     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="flex gap-4">
+                {/* H/W 상태 표시 (윈폼 HWState와 동일) */}
+                {hwStatus.map((hw) => {
+                    const colors = getStatusColor(hw.status);
+                    return (
+                        <div key={hw.name} className="flex items-center gap-1.5" title={`${hw.name}: ${hw.title}`}>
+                            <div className={`w-2 h-2 rounded-full transition-all ${colors.bg} ${colors.shadow}`}></div>
+                            <span className={`font-bold ${colors.text}`}>{hw.name}</span>
+                            <span className="text-[10px] text-slate-500">{hw.title}</span>
+                        </div>
+                    );
+                })}
+                {/* HOST 연결 상태 */}
+                <div className="flex items-center gap-1.5 ml-2 pl-2 border-l border-slate-700">
                     <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>
+                    <span className={`font-bold ${isHostConnected ? 'text-green-400' : 'text-red-400'}`}>HOST</span>
                 </div>
             </div>
             <div className="flex gap-8 text-neon-blue">