feat: implement framework and refactor everything

README.md

@@ -8,6 +8,22 @@ Zero-configuration web interface for monitoring and managing SPORE embedded syst
 - **📊 Node Details**: Detailed system information including running tasks and available endpoints
 - **🚀 OTA**: Clusterwide over-the-air firmware updates
 - **📱 Responsive**: Works on all devices and screen sizes
+- **💾 State Preservation**: Advanced UI state management that preserves user interactions during data refreshes
+- **⚡ Smart Updates**: Efficient partial updates that only refresh changed data, not entire components
+
+## Key Improvements
+
+### 🆕 **State Preservation System**
+- **Expanded Cards**: Cluster member cards stay expanded during data refreshes
+- **Active Tabs**: Selected tabs in node detail views are maintained
+- **User Context**: All user interactions are preserved across data updates
+- **No More UI Resets**: Users never lose their place in the interface
+
+### 🚀 **Performance Enhancements**
+- **Partial Updates**: Only changed data triggers UI updates
+- **Smart Change Detection**: System automatically detects when data has actually changed
+- **Efficient Rendering**: Reduced DOM manipulation and improved responsiveness
+- **Batch Operations**: Multiple property updates are handled efficiently
 
 ## Screenshots
 ### Cluster
@@ -31,7 +47,13 @@ spore-ui/
 ├── public/                 # Frontend files
 │   ├── index.html         # Main HTML page
 │   ├── styles.css         # All CSS styles
-│   ├── script.js          # All JavaScript functionality
+│   ├── framework.js       # Enhanced component framework with state preservation
+│   ├── components.js      # UI components with partial update support
+│   ├── view-models.js     # Data models with UI state management
+│   ├── app.js             # Main application logic
+│   └── test-state-preservation.html  # Test interface for state preservation
+├── docs/
+│   └── STATE_PRESERVATION.md  # Detailed documentation of state preservation system
 └── README.md              # This file
 ```
 
@@ -40,6 +62,16 @@ spore-ui/
 1. **Install dependencies**: `npm install`
 2. **Start the server**: `npm start`
 3. **Open in browser**: `http://localhost:3001`
+4. **Test state preservation**: `http://localhost:3001/test-state-preservation.html`
+
+## Testing State Preservation
+
+The framework includes a comprehensive test interface to demonstrate state preservation:
+
+1. **Expand cluster member cards** to see detailed information
+2. **Change active tabs** in node detail views
+3. **Trigger data refresh** using the refresh buttons
+4. **Verify that all UI state is preserved** during updates
 
 ## API Endpoints
 
@@ -53,9 +85,24 @@ spore-ui/
 
 - **Backend**: Express.js, Node.js
 - **Frontend**: Vanilla JavaScript, CSS3, HTML5
+- **Framework**: Custom component-based architecture with state preservation
 - **API**: SPORE Embedded System API
 - **Design**: Glassmorphism, CSS Grid, Flexbox
 
+## Architecture Highlights
+
+### 🏗️ **Component Framework**
+- **Base Component Class**: Provides state management and partial update capabilities
+- **ViewModel Pattern**: Separates data logic from UI logic
+- **Event-Driven Updates**: Efficient pub/sub system for component communication
+- **State Persistence**: Automatic preservation of UI state across data refreshes
+
+### 🔄 **Smart Update System**
+- **Change Detection**: Automatically identifies when data has actually changed
+- **Partial Rendering**: Updates only the necessary parts of the UI
+- **State Preservation**: Maintains user interactions during all updates
+- **Performance Optimization**: Minimizes unnecessary DOM operations
+
 ## UDP Auto Discovery
 
 The backend now includes automatic UDP discovery for SPORE nodes on the network. This eliminates the need for hardcoded IP addresses and provides a self-healing, scalable solution for managing SPORE clusters.