Update README and documentation; refactor frontend components for improved structure and resilience

.cursor/rules/frontend-standards.mdc

@@ -0,0 +1,104 @@
+---
+description: Frontend component standards and React best practices
+globs: ["frontend/**/*.js", "frontend/**/*.jsx", "frontend/**/*.ts", "frontend/**/*.tsx"]
+alwaysApply: false
+---
+
+# Frontend Standards
+
+## Component Design
+
+### React Components
+- Single responsibility per component
+- Props validation with PropTypes
+- Error boundary protection
+- Reusable and composable design
+- Maximum 50 lines per component file
+
+### Component Structure
+```
+src/
+├── components/
+│   ├── common/           # Reusable UI components
+│   ├── dashboard/        # Dashboard-specific components
+│   └── [main components] # Main application components
+├── hooks/               # Custom React hooks
+├── services/            # API and external services
+├── utils/               # Utility functions
+└── constants/           # Configuration constants
+```
+
+## Naming Conventions
+
+### JavaScript/TypeScript
+- Classes: PascalCase (e.g., `DashboardComponent`)
+- Functions: camelCase (e.g., `fetchServiceSpec`)
+- Variables: camelCase (e.g., `serviceStatus`)
+- Constants: UPPER_SNAKE_CASE (e.g., `API_CONFIG`)
+
+### File Organization
+- Component files: PascalCase (e.g., `Dashboard.js`)
+- Hook files: camelCase with 'use' prefix (e.g., `useServiceStatus.js`)
+- Utility files: camelCase (e.g., `errorHandling.js`)
+- Constant files: camelCase (e.g., `index.js`)
+
+## Clean Code Principles
+
+### Single Responsibility Principle (SRP)
+- Each component has one clear purpose
+- `SystemStatsCards` only handles system statistics display
+- `ServiceStatusList` only manages service status display
+- `StatusIcon` only renders status icons
+
+### Don't Repeat Yourself (DRY)
+- Centralized status icon logic in `StatusIcon` component
+- Reusable loading component in `LoadingSpinner`
+- Centralized error handling in `utils/errorHandling.js`
+- All constants extracted to `constants/index.js`
+
+### Component Composition
+- Large components broken into smaller, focused components
+- Clear prop interfaces with PropTypes validation
+- Easy to test and maintain
+
+## Error Handling
+
+### Error Boundaries
+- `ErrorBoundary` component for graceful error recovery
+- Development-friendly error details
+- User-friendly error messages
+
+### Offline Mode
+- Service status monitoring
+- Fallback data when services unavailable
+- Automatic retry mechanisms
+- Clear status indicators
+
+## Performance
+
+### Component Optimization
+- Smaller components = better React optimization
+- Reduced re-renders through focused components
+- Memoization opportunities for pure components
+
+### Code Splitting Ready
+- Modular structure supports code splitting
+- Easy to lazy load dashboard components
+- Clear separation enables tree shaking
+
+## Testing
+
+### Testable Components
+- Pure functions in utils
+- Isolated component logic
+- Clear prop interfaces
+- Mockable dependencies
+
+### Test Structure
+```javascript
+describe('SystemStatsCards', () => {
+  it('renders CPU usage correctly', () => {
+    // Test focused component
+  });
+});
+```