**Problem:**
Monaco editor was receiving unique HTML IDs (e.g., "customLabels-a09a7773")
and using them in @entangle(), causing errors:
"Livewire property ['customLabels-a09a7773'] cannot be found"
**Root Cause:**
Monaco editor template uses @entangle($id) to bind to Livewire properties.
After our unique ID fix, $id contained the unique HTML ID with suffix,
not the original property name.
**Solution:**
Pass $modelBinding (original property name) instead of $htmlId to Monaco
editor component. This ensures @entangle() uses the correct property name
while HTML elements still get unique IDs.
**Result:**
✅ Monaco editor @entangle works correctly
✅ HTML IDs remain unique
✅ No Livewire property errors
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
**Problems Fixed:**
1. Livewire warnings about non-existent properties (e.g., wire:model="dcgoowgw0gcgcsgg00c8kskc")
2. Duplicate HTML IDs still appearing despite initial fix
**Root Causes:**
1. Auto-generated Cuid2 IDs were being used for wire:model when no explicit id was provided
2. Livewire's wire:id attribute isn't available during server-side rendering
**Solutions:**
1. Set $modelBinding to 'null' (string) when id is not provided, preventing invalid wire:model generation
2. Use random MD5 suffix instead of Livewire component ID for guaranteed uniqueness during initial render
3. Maintain correct $name attribute based on original property name
**Technical Changes:**
- Input, Textarea, Select, Datalist: Use random 8-char suffix for uniqueness
- Checkbox: Apply same random suffix approach
- wire:model now only created for explicit property names
- HTML IDs are unique from initial server render (no hydration required)
**Result:**
✅ No more Livewire property warnings
✅ Truly unique HTML IDs across all components
✅ wire:model bindings work correctly
✅ Validation and form submission unaffected
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Resolve browser console warnings about non-unique HTML IDs when multiple
Livewire components with similar form fields appear on the same page.
**Problem:**
Multiple forms using generic IDs like `id="description"` or `id="name"`
caused duplicate ID warnings and potential accessibility/JavaScript issues.
**Solution:**
- Separate `wire:model` binding name from HTML `id` attribute
- Auto-prefix HTML IDs with Livewire component ID for uniqueness
- Preserve existing `wire:model` behavior with property names
**Implementation:**
- Added `$modelBinding` property for wire:model (e.g., "description")
- Added `$htmlId` property for unique HTML ID (e.g., "lw-xyz123-description")
- Updated render() method to generate unique IDs automatically
- Updated all blade templates to use new properties
**Components Updated:**
- Input (text, password, etc.)
- Textarea (including Monaco editor)
- Select
- Checkbox
- Datalist (single & multiple selection)
**Result:**
✅ All HTML IDs now unique across page
✅ No console warnings
✅ wire:model bindings work correctly
✅ Validation error messages display correctly
✅ Backward compatible - no changes needed in existing components
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
All components have been migrated from legacy model binding to explicit
public properties with syncData() pattern. Safe to disable the flag.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixes#6847
The API endpoints for environment variables were rejecting valid fields
like is_buildtime, is_runtime, is_multiline, and is_shown_once with
422 errors, even though the code was using these fields internally.
Changes:
- Added missing fields to $allowedFields in create_env()
- Added missing fields to $allowedFields in update_env_by_uuid()
- Updated allowed fields in create_bulk_envs()
- Added validation rules for is_runtime and is_buildtime
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
When port mappings are changed in the UI and the database is restarted,
the system now gracefully stops and removes the existing container before
recreating it with the new configuration.
This prevents the "container name already in use" error that occurred when
Docker Compose tried to create a container with the same name but different
port configuration.
Changes:
- Add graceful container stop (10s timeout) before docker compose up
- Remove old container to avoid name conflicts
- Use --timeout flag (modern Docker CLI) instead of deprecated --time
- Apply fix to all database types: MariaDB, MySQL, PostgreSQL, MongoDB,
Redis, KeyDB, Dragonfly, and ClickHouse
- Update StopDatabase.php for consistency
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove global 'refresh' event listeners from all database General components
- Migrate Redis, MySQL, MariaDB, MongoDB, PostgreSQL, and KeyDB components to use explicit public properties instead of wire:model="database.field"
- Implement syncData() method in each component for manual data synchronization between properties and Eloquent models
- Update all validation rules, messages, and attributes to reference new property names
- Update Blade views to bind inputs to explicit properties (e.g., id="name" instead of id="database.name")
- Prepare codebase for disabling Livewire's legacy_model_binding configuration option
This refactoring resolves form field reset issues caused by global refresh events
and follows Livewire 3 best practices for component property management.
- Auto-select first SSH key when available instead of requiring explicit selection
- Remove disabled placeholder option from dropdown
- Prevents confusing error when user clicks "Use Selected Key" without changing dropdown
- Improves onboarding flow by having a sensible default selection
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add Hetzner Cloud server creation option to onboarding flow
- Change grid from 2 to 3 columns to accommodate all server options
- Mark both Hetzner and Remote Server as "Recommended"
- Fix Hetzner card height to match other cards
- Remove "select existing server" phase - onboarding always creates new servers
- Fix project loading on page refresh in Project Setup phase
- Fix browser back button navigation - remove aggressive restartBoarding() call
- Fix SSH key dropdown to not auto-select first key - require explicit selection
- Make checkpoint titles more prominent across all phases
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add centered, card-based layout with clean design
- Implement 3-step progress indicator component
- Add proper dark/light mode support following Coolify design system
- Implement Livewire URL state persistence for browser navigation
- Separate private key textareas for "Generate" vs "Add your own" modes
- Consistent checkpoint styling across all onboarding phases
- Enhanced typography with prominent titles (semibold, white in dark mode)
- Fixed state restoration on page refresh and browser back/forward navigation
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Enhanced the terminal server/container selection with a new searchable datalist component:
**Terminal View Changes:**
- Replaced `x-forms.select` with `x-forms.datalist` for server/container selection
- Added search functionality for filtering servers and containers
- Fixed form validation by adding hidden input for proper HTML5 validation
- Prevented error messages when clearing selection (sets to 'default')
**Datalist Component (Single Selection):**
- Implemented Alpine.js-powered dropdown with search functionality
- Added visual dropdown arrow that rotates when opened
- Proper entangle binding for wire:model support
- Keyboard support (Escape to close)
- Click outside to close behavior
- Disabled options filtering (skips disabled options)
- Consistent styling with input/textarea components
**Styling Improvements:**
- Explicit background colors: `bg-white` (light) and `dark:bg-coolgray-100` (dark)
- Proper ring border: `ring-1 ring-inset ring-neutral-200 dark:ring-coolgray-300`
- Focus states: `focus-within:ring-2 focus-within:ring-coollabs dark:focus-within:ring-warning`
- Text colors: `text-black dark:text-white`
- Added custom scrollbar styling for dropdown lists
- Wire:dirty state support for visual feedback
- Proper padding and spacing (`py-1.5`, `px-1`, `px-2`)
**Multiple Selection Mode:**
- Also updated for consistent styling and scrollbar support
- Added proper background colors and focus states
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
