projectmycelium/html_template_tests/MODAL_FLOW_REQUIREMENTS.md

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

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