refactor: Decentralize data fetching and add axis initialization

Refactor data fetching architecture from centralized App state to
component-local data management for improved maintainability and
data freshness guarantees.

Changes:
- SettingsModal: Fetch config data on modal open
- RecipePanel: Fetch recipe list on panel open
- IOMonitorPage: Fetch IO list on page mount with real-time updates
- Remove unnecessary props drilling through component hierarchy
- Simplify App.tsx by removing centralized config/recipes state

New feature:
- Add InitializeModal for sequential axis initialization (X, Y, Z)
- Each axis initializes with 3-second staggered start
- Progress bar animation for each axis
- Auto-close on completion

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

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

frontend/components/SettingsModal.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import { Settings, RotateCw, ChevronDown, ChevronRight } from 'lucide-react';
 import { ConfigItem } from '../types';
+import { comms } from '../communication';
 
 interface SettingsModalProps {
     isOpen: boolean;
     onClose: () => void;
-    config: ConfigItem[] | null;
-    isRefreshing: boolean;
     onSave: (config: ConfigItem[]) => void;
 }
 
@@ -34,18 +33,31 @@ const TechButton = ({ children, onClick, active = false, variant = 'blue', class
     );
 };
 
-export const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, config, isRefreshing, onSave }) => {
+export const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, onSave }) => {
     const [localConfig, setLocalConfig] = React.useState<ConfigItem[]>([]);
     const [expandedGroups, setExpandedGroups] = React.useState<Set<string>>(new Set());
+    const [isRefreshing, setIsRefreshing] = React.useState(false);
 
+    // Fetch config data when modal opens
     React.useEffect(() => {
-        if (config) {
-            setLocalConfig(config);
-            // Auto-expand all groups initially
-            const groups = new Set(config.map(c => c.Group));
-            setExpandedGroups(groups);
+        if (isOpen) {
+            const fetchConfig = async () => {
+                setIsRefreshing(true);
+                try {
+                    const configStr = await comms.getConfig();
+                    const config: ConfigItem[] = JSON.parse(configStr);
+                    setLocalConfig(config);
+                    // Auto-expand all groups initially
+                    const groups = new Set<string>(config.map(c => c.Group));
+                    setExpandedGroups(groups);
+                } catch (e) {
+                    console.error('Failed to fetch config:', e);
+                }
+                setIsRefreshing(false);
+            };
+            fetchConfig();
         }
-    }, [config]);
+    }, [isOpen]);
 
     const handleChange = (idx: number, newValue: string) => {
         setLocalConfig(prev => {