Updated documentation with architecture changes

ARCHITECTURE.md

@@ -28,12 +28,15 @@ The new architecture uses a direct template system:
 2. Templates contain the full content for all stages and components
 3. The index.js file imports and exports all templates
 4. Templates are loaded dynamically in builder.js using ES Modules
+5. Stages and components are now consolidated in a single YAML file
+6. Template selection is now an expandable section rather than a dropdown
 
 The template loading process now follows these steps:
 1. When the page loads, the `fetchTemplates()` function is called
 2. The function dynamically imports the templates index file using ES modules
-3. The templates are stored in memory and used to populate the dropdown
+3. The templates are stored in memory and used to populate the template options
 4. When a template is selected, the content is directly applied to the form fields
+5. The template cards show both the title and description for better user understanding
 
 Benefits of this approach:
 - Adding a new template is as simple as creating a new file and registering it in index.js
@@ -42,6 +45,8 @@ Benefits of this approach:
 - Easier to understand and maintain
 - Improved error handling and debugging capabilities
 - Single source of truth for template data
+- Consolidated data structure improves maintainability
+- Enhanced template selection UI provides more context for users
 
 ### Template Loading Implementation
 
@@ -108,9 +113,9 @@ If common content needs to be shared between templates in the future, standard J
 
 The application is still built on the following core components:
 
-1. **Stage and Component Structure** - Defined in YAML files
+1. **Stage and Component Structure** - Now defined in a single consolidated YAML file (`data/stages_array.yaml`)
 2. **Templates** - Complete predefined protocols stored in individual files
-3. **Builder Interface** - Interactive UI for customizing protocols
+3. **Builder Interface** - Interactive UI for customizing protocols, with improved template selection
 4. **Export System** - Tools to export protocols in various formats
 
 ## Adding New Features

CLAUDE.md

@@ -13,7 +13,7 @@ This is a prototype website, built in Hugo, to enable communities to develop cus
 
 ## Content Organization
 
-- **Components**: Building blocks of a protocol, defined in `/data/components/*.yaml`
+- **Stages and Components**: Building blocks of a protocol, now consolidated in `/data/stages_array.yaml`
 - **Templates**: Complete predefined protocols with content for all fields, defined in `/static/js/templates/*.js`
 
 ## Data Model
@@ -21,6 +21,7 @@ This is a prototype website, built in Hugo, to enable communities to develop cus
 The application maintains a hierarchical data model:
 - **Stages** → **Components** → **Fields**
 - Each field is populated with content directly from templates
+- Stages now contain their components directly in a cleaner, more maintainable structure
 
 ## Core Features
 
@@ -46,6 +47,8 @@ Templates provide complete content for dispute resolution protocols:
 3. **Enhanced debugging**: Added detailed logging for template application
 4. **Component titles**: Simplified all component titles to be more direct and consistent
 5. **Preview mode**: Improved rendering of protocol content with Markdown support
+6. **Consolidated data structure**: Combined stages and components into a unified structure for better maintainability
+7. **Improved template selection**: Updated the template selector from a dropdown to an expandable section with descriptions
 
 ## Deployment
 
@@ -59,4 +62,4 @@ Templates provide complete content for dispute resolution protocols:
 - `/static/js/templates/index.js`: Register new templates in the central registry
 - `/static/js/builder.js`: Modify core interface functionality
 - `/static/css/main.css`: Adjust styling and responsive behavior
-- `/data/components/*.yaml`: Edit component titles and structure
+- `/data/stages_array.yaml`: Edit stages and components structure in one consolidated file