Restore to commit 74e578279624c6045ca440a3459ebfa1f8d54191

BUILDER_MODEL_SELECTOR_FIXES.md

@@ -0,0 +1,87 @@
+# Builder Page Model Selector Fixes
+
+## Overview
+Fixed three issues with the model selector on the builder page:
+1. Replaced browser dropdown with custom inline dropdown that supports icons
+2. Ensured model icons from admin panel display properly next to model names
+3. Combined two auto model popups into one, ensuring it doesn't open by default
+
+## Changes Made
+
+### 1. Custom Dropdown Implementation (builder.html)
+
+#### HTML Changes
+- Replaced native `<select>` element with custom dropdown structure:
+  - `model-select-btn`: Button showing current selection with icon
+  - `model-select-dropdown`: Dropdown container with options
+  - `model-select-options`: Container for option elements
+  - `model-select-text`: Span showing selected model name
+  - Hidden `<select>` element for backward compatibility
+
+#### CSS Changes (builder.html)
+Added styles for custom dropdown:
+- `.model-select-btn`: Button styling with hover effects
+- `.model-select-dropdown`: Dropdown positioning and appearance
+- `.model-select-options`: Flex column layout for options
+- `.model-option`: Individual option styling with icons
+- `.model-option.selected`: Highlight for selected option
+- `.model-option.disabled`: Disabled state styling
+- `.model-option img`: Icon image styling
+
+### 2. JavaScript Changes (builder.js)
+
+#### New Functions
+- `toggleCustomDropdown()`: Opens/closes the custom dropdown
+- `closeCustomDropdown()`: Closes the dropdown and updates aria attributes
+- `updateModelSelectDisplay(selectedValue)`: Updates button text and icon based on selection
+- `renderCustomDropdownOptions()`: Renders all model options with icons from admin panel
+- `selectModel(modelId)`: Handles model selection, updates UI, and closes dropdown
+
+#### Modified Functions
+- `applyPlanModelLock()`:
+  - For free plans: Sets "Auto (admin managed)" as default, shows blurred preview on click only
+  - For paid plans: Enables normal model selection with custom dropdown
+  - Calls `updateModelSelectDisplay()` to show current selection
+
+- `loadModels()`:
+  - Populates hidden select with model values
+  - Calls `renderCustomDropdownOptions()` to build custom dropdown
+  - Calls `updateModelSelectDisplay()` to show current selection
+
+- `renderSessionMeta()`:
+  - Calls `updateModelSelectDisplay()` when session model changes
+
+- Removed `showBlurredModelPreview()` function (full-screen overlay)
+- Kept `showBlurredModelPreviewInline()` function (inline dropdown only)
+
+#### Event Handlers
+- Click handler for `model-select-btn`: Toggles dropdown for paid plans, shows blurred preview for free plans
+- Document click handler: Closes dropdown when clicking outside
+- Change handler for hidden select: Updates display and syncs with server
+
+### 3. Key Behaviors
+
+#### Free Plan (Starter)
+- Model selector shows "Auto (admin managed)" by default
+- Clicking model selector shows blurred preview of available models (not by default)
+- User cannot change selection (locked to auto)
+
+#### Paid Plans (Business/Enterprise)
+- Model selector shows dropdown with all available models
+- Each option displays model icon (from admin panel) and label
+- User can select any model from the list
+- Selected model is highlighted with green background
+
+## Testing Checklist
+- [x] Custom dropdown opens/closes properly
+- [x] Model icons display next to model names
+- [x] "Auto (admin managed)" is selected by default for free plans
+- [x] Blurred preview only shows on click, not by default
+- [x] Full-screen overlay removed
+- [x] Click outside closes dropdown
+- [x] Selected model persists across page refreshes
+- [x] Backward compatibility with hidden select element
+
+## Files Modified
+- `/home/engine/project/chat/public/builder.html` (HTML and CSS)
+- `/home/engine/project/chat/public/builder.js` (JavaScript logic)