init projectmycelium

html_template_tests/MODAL_FLOW_REQUIREMENTS.md

@@ -0,0 +1,98 @@
+# Project Mycelium - Modal-Based Checkout Flow Requirements
+
+## Project Context
+We are building a checkout flow for the Project Mycelium where users can assign compute slices (resources) to either Individual VMs or Kubernetes clusters. The current implementation has issues with the modal-based assignment system.
+
+## Required Flow Behavior
+
+### Initial State
+- **All slices added to cart start as "Individual VM"** (gray badges)
+- **No clusters exist initially** - the clusters section should be empty
+- Each slice shows: Provider name, size (e.g., "4x Base Unit"), specs, location, and price
+
+### Assignment Modal Flow
+When a user clicks on any slice:
+
+1. **Modal Opens** showing:
+   - Slice details (provider, specs, price)
+   - Two assignment options:
+     - "Individual VM" (selected if current state, and by default)
+     - "Assign to Cluster"
+
+2. **Individual VM Selection**:
+   - Assigns by default
+   - Assign or close do the same: no state change
+   - Slice badge updates to gray "Individual VM" if was from cluster before
+
+3. **Cluster Assignment Selection**:
+   - Shows cluster role selector with:
+     - Cluster dropdown (initially only shows "+ Create New Cluster")
+     - Role selection: Master or Worker (Worker selected by default)
+     - Cluster name input field (only visible when "Create New Cluster" selected)
+   - Default cluster name: "Cluster #1", "Cluster #2", etc.
+   - User can enter custom cluster name
+   - Clusters have default name e.g. Cluster #1
+
+4. **Assignment Execution**:
+   - Click "Assign Slice" button
+   - If creating new cluster: creates cluster display section
+   - Slice badge updates to show cluster name + role (e.g., "Cluster #1 Master" in red, "Cluster #1 Worker" in green)
+   - Modal closes automatically
+   - Deployment overview updates with cluster statistics
+
+### State Persistence
+When reopening a slice modal:
+- Shows current assignment state (Individual or Cluster)
+- If assigned to cluster: shows selected cluster and role
+- Allows changing assignment or role
+
+### Cluster Management
+- **Dynamic Creation**: Clusters only appear when first slice is assigned
+- **Auto-Cleanup**: Empty clusters are automatically removed
+- **Naming**: Default "Cluster #1, #2..." with custom name option
+- **Statistics**: Show master count, worker count, total cores per cluster
+
+### Visual Feedback
+- **Individual VM**: Gray left border, gray badge
+- **Master Node**: Red left border, red badge
+- **Worker Node**: Green left border, green badge
+- **Cluster Display**: Blue-themed containers with editable names and statistics
+
+## Technical Requirements
+
+### Key Functions Needed
+1. `openAssignmentModal(sliceElement)` - Opens modal with current state
+2. `selectAssignment(optionElement)` - Handles assignment option selection
+3. `assignSlice()` - Executes the assignment and closes modal
+4. `updateSliceAssignment()` - Updates slice visual state
+5. `createClusterDisplay()` - Creates cluster UI section
+6. `deleteCluster()` - Removes empty clusters
+7. `updateDeploymentOverview()` - Updates statistics
+
+### Data Structure
+```javascript
+clusters = {
+  'cluster1': {
+    name: 'Cluster #1',
+    customName: 'Production', // if user renamed it
+    masters: ['slice1', 'slice3'],
+    workers: ['slice2', 'slice5']
+  }
+}
+```
+
+### Modal Behavior
+- Must close automatically after successful assignment
+- Must show current state when reopened
+- Must handle cluster dropdown population
+- Must show/hide cluster name input based on selection
+
+## Success Criteria
+1. All slices start as Individual VMs
+2. Clicking slice opens modal with correct current state
+3. Assigning to new cluster creates cluster display and assigns slice
+4. Modal closes automatically after assignment
+5. Slice badges update correctly with cluster name and role
+6. Reopening slice modal shows current assignment
+7. Empty clusters are automatically removed
+8. Statistics update correctly in deployment overview