Fixed three issues preventing the "new image" quick action from working:
1. Frontend matching logic wasn't checking the quickcommand field
- Added check for item.quickcommand in the matching logic
- Now "new image" matches docker-image via its quickcommand "(type: new image)"
2. Search query remained populated after triggering selection flow
- Clear searchQuery in navigateToResourceCreation() to show selection UI
- This switches the UI from creatable items list to server selection
3. Redirect wasn't using Livewire's redirect method
- Changed from redirect()->route() to $this->redirect(route())
- Ensures proper Livewire component redirect behavior
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Replace manual regex parsing with DockerImageParser in ApplicationsController
- Fix double-decoration bug where image names like nginx@sha256:hash would
become nginx:hash@sha256 causing malformed references
- Add auto-parse feature in Livewire DockerImage component
- Users can now paste complete references like nginx:stable@sha256:abc123...
and fields auto-populate
- Update UI placeholder with examples: nginx, docker.io/nginx:latest,
ghcr.io/user/app:v1.2.3, nginx:stable@sha256:abc123...
- Add comprehensive unit tests for auto-parse functionality
- All tests passing (20 tests, 73 assertions)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
**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>
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>
- Change URL to https://coolify.io/hetzner
- Add detailed explanation about credits (€10 for Coolify, €20 for new users)
- Clarify it's only for new accounts
- Improve text formatting with extra spacing
- Apply consistent messaging across both modal and full-page layouts
- Add affiliate link when users add their first Hetzner token
- Shows in both modal and full-page layouts
- Friendly messaging about supporting Coolify and getting credits
- 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>
Reduce label width from w-64 to w-32 to prevent layout issues
when the clear button is added next to the dropdown.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add a 'Clear' button next to the cloud-init script dropdown that:
- Resets the dropdown to default (placeholder option)
- Clears the cloud-init script textarea
- Clears the script name input
- Unchecks the 'save script' checkbox
Improves UX by allowing users to quickly reset cloud-init fields
without manually clearing each field.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add note that cloud-init scripts currently work only with Hetzner
integration to set user expectations.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Prevent showing 'No results found' when user types during initial
data loading phase. The message now only appears after data has
fully loaded and the search still returns no results.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add manual cache clearing command (search:clear) for testing
- Integrate cloud-init scripts into global search navigation
- Improve form UX by preventing field reset during edit operations
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Remove disabled attribute from search input and defer search execution
until data is loaded. Users can now start typing immediately when
opening global search (Cmd+K), improving perceived responsiveness.
Search results are only computed once isLoadingInitialData is false.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fix multiple UI/UX issues with cloud-init scripts management:
1. Fix card styling - Remove purple box background, use simple border
- Changed from .box class to inline flex/border styling
- Matches cloud provider tokens styling pattern
2. Remove script preview section
- Preview was taking too much space and looked cluttered
- Users can edit to see full script content
3. Make edit modal full width
- Added fullWidth attribute to x-modal-input component
- Provides better editing experience for long scripts
4. Fix fields clearing after update
- Fields were being reset even in edit mode
- Now only reset fields when creating new script
- Edit mode preserves values after save
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add comprehensive cloud-init script management interface in the Security
section, allowing users to create, edit, delete, and reuse cloud-init
scripts across their team.
New Components:
- CloudInitScripts: Main listing page with grid view of scripts
- CloudInitScriptForm: Modal form for create/edit operations
Features:
- Create new cloud-init scripts with name and content
- Edit existing scripts
- Delete scripts with confirmation (requires typing script name)
- View script preview (first 200 characters)
- Scripts are encrypted in database
- Full authorization using CloudInitScriptPolicy
- Real-time updates via Livewire events
UI Location:
- Added to Security section nav: /security/cloud-init-scripts
- Positioned between Cloud Tokens and API Tokens
- Follows existing security UI patterns
Files Created:
- app/Livewire/Security/CloudInitScripts.php
- app/Livewire/Security/CloudInitScriptForm.php
- resources/views/livewire/security/cloud-init-scripts.blade.php
- resources/views/livewire/security/cloud-init-script-form.blade.php
Files Modified:
- routes/web.php - Added route
- resources/views/components/security/navbar.blade.php - Added nav link
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Remove 'selected' and 'disabled' attributes from the placeholder option
to ensure the dropdown shows "Load saved script..." by default instead
of appearing to select the first script.
When selected_cloud_init_script_id is null, the empty option will be
shown. The updatedSelectedCloudInitScriptId() method already handles
empty string values correctly by checking if ($value).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changes:
1. Remove description field from cloud-init scripts
- Updated migration to remove description column
- Updated model to remove description from fillable array
2. Redesign script name input layout
- Move script name input next to checkbox (always visible)
- Remove conditional rendering - input always shown
- Use placeholder instead of label for cleaner look
3. Fix dropdown type error
- Replace wire:change event with wire:model.live
- Use updatedSelectedCloudInitScriptId() lifecycle hook
- Add "disabled" attribute to placeholder option
- Properly handle empty string vs null in type casting
4. Improve validation
- Require both script content AND name for saving
- Remove description validation rule
- Add selected_cloud_init_script_id validation
5. Auto-populate name when loading saved script
- When user selects saved script, auto-fill the name field
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Remove the disabled state from the save checkbox to allow users to check it
at any time. The backend already validates that cloud_init_script is not
empty before saving (line 499 in ByHetzner.php), so empty/null scripts
will simply not be saved even if the checkbox is checked.
This improves UX by making the checkbox always interactive while maintaining
data integrity through backend validation.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changes:
- Make save checkbox visible by default (not conditionally rendered)
- Disable checkbox when cloud_init_script is empty
- Auto-enable when user types in the script textarea (via Livewire reactivity)
- Remove unnecessary border wrapper around checkbox for cleaner look
- Checkbox styling now matches other checkboxes in the form (no border)
This improves UX by making the save option always discoverable while
preventing users from checking it when there's no script to save.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit adds the ability to use cloud-init scripts when creating Hetzner servers through the integration. Users can write custom scripts that will be executed during server initialization, and optionally save these scripts at the team level for future reuse.
Key features:
- Textarea field for entering cloud-init scripts (bash or cloud-config YAML)
- Checkbox to save scripts for later use at team level
- Dropdown to load previously saved scripts
- Scripts are encrypted in the database
- Full validation and authorization checks
- Comprehensive unit and feature tests
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Display the monthly cost on the "Buy & Create Server" button
to give users clear visibility of the price before purchasing.
- Add computed property to calculate selected server's monthly price
- Update button text to show price dynamically (e.g., "€12.99/mo")
- Add tests for price formatting and edge cases
- Price updates reactively when user changes server type
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add resource UUIDs (application_uuid, database_uuid, server_uuid, task_uuid) to all webhook notifications
- Standardize URL field naming from various formats (resource_url, task_url, server_url) to consistent 'url' field
- Include parent resource UUIDs for scheduled tasks (application_uuid or service_uuid)
- Add direct URLs to Coolify resources for all notification types
- Update UI to show "Webhook URL (POST)" label for clarity
This enables webhook consumers to:
- Uniquely identify resources using UUIDs used throughout Coolify UI
- Directly link back to Coolify resource pages via the url field
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changed POST badge from btn-warning to btn-primary to match other button styling.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Repositioned POST badge to appear before the webhook URL input field.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add support for configuring IPv4 and IPv6 public network interfaces when creating servers through the Hetzner integration. Users can now enable or disable IPv4 and IPv6 independently, with both enabled by default.
Features:
- Added enable_ipv4 and enable_ipv6 checkboxes in the server creation form
- Both options are enabled by default as per Hetzner best practices
- IPv4 is preferred when both are enabled
- Fallback to IPv6 when only IPv6 is enabled
- Proper validation and error handling for network configuration
- Comprehensive test coverage for IP address selection logic
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Moved POST badge to align at the end of the input field and styled it as a button.
Changes:
- Changed flex container from items-start to items-end
- Removed nested div wrapper around input
- Styled POST badge as a button (btn btn-sm btn-warning)
- Used proper button padding and sizing
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Made webhook URL a password field for security and added POST badge indicator.
Changes:
- Changed webhook URL input type from "url" to "password"
- Added POST badge to indicate HTTP method used for webhook delivery
- Improved layout with flex container for badge and input
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add basic infrastructure for custom webhook notifications:
- Create webhook_notification_settings table with event toggles
- Add WebhookNotificationSettings model with encrypted URL
- Integrate webhook settings into Team model and HasNotificationSettings trait
- Create Livewire component and Blade view for webhook configuration
- Add webhook navigation route and UI
This provides the foundation for sending webhook notifications to custom HTTP/HTTPS endpoints when events occur in Coolify.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Changed the link in the API tokens view to direct users to the advanced settings page instead of the general settings page, providing clearer guidance for enabling the API.
- Introduced a comprehensive set of navigation routes for quick access to key sections such as Dashboard, Servers, Projects, and more.
- Enhanced the search functionality to include a 'new' prefix for creating resources directly from the search input.
- Improved UI elements for search results, ensuring better visibility and interaction.
- Adjusted CSS styles in the navbar for improved readability and responsiveness.
- Updated the layout of the sidebar and navbar components to enhance user experience on different screen sizes.
- Ensured consistent alignment and spacing for elements within the navbar and sidebar.
- Updated the keydown event handler to check if the modal is open before executing the close and reset functions, improving the modal's behavior and user experience.
- Introduced a new create mode in the global search component, allowing users to initiate the creation of resources directly from the search input.
- Implemented logic to detect specific resource types based on user input, enabling quick access to creation modals for projects, servers, teams, storage, private keys, and GitHub apps.
- Updated the UI to display a list of creatable items when in create mode, improving user experience and accessibility for resource management.
- Added necessary modals for each resource type to facilitate the creation process seamlessly.
- Updated the dashboard view to include modal input components for adding new projects and servers.
- Added conditional rendering to display the modal button only when there are existing projects or servers.
- Improved layout by wrapping section headers and buttons in a flex container for better alignment and spacing.
- Added logic to determine if the user can create resources for each project and generate the corresponding route for adding resources based on the project's first environment.
- Updated the project index view to display the new resource creation option alongside existing project settings.
- Adjusted various views to include a margin-top adjustment for better layout consistency.
- Introduced a new notification class, BackupSuccessWithS3Warning, to alert users when local backups succeed but S3 uploads fail.
- Updated DatabaseBackupJob to track local backup success and handle S3 upload errors, improving error reporting and user notifications.
- Modified ScheduledDatabaseBackupExecution model to include a new s3_uploaded boolean field for tracking S3 upload status.
- Adjusted views and validation logic to reflect changes in backup execution status and S3 handling.
- Added tests to ensure the new s3_uploaded column is correctly implemented and validated.
- Updated the deployments method in DeploymentsIndicator to include application environment and project relationships for better data context.
- Refactored the application method in ApplicationDeploymentQueue to use Eloquent relationships instead of manual fetching, improving performance and readability.
- Enhanced the deployments indicator view to display application environment and project names, providing clearer deployment context.
- Introduced `isReadOnlyVolume` method in `LocalFileVolume` and `LocalPersistentVolume` models to determine if a volume is read-only based on Docker Compose configuration.
- Updated `FileStorage` and `Show` components to set `isReadOnly` state during mounting.
- Enhanced UI to display notifications for read-only volumes, preventing modification actions in the interface.
- Refactored file storage and directory management forms to conditionally enable or disable actions based on read-only status.
- Refactored DockerImage component to use separate properties for image name, tag, and SHA256 digest.
- Introduced DockerImageFormat validation rule to enforce correct image format.
- Updated DockerImageParser to handle new parsing logic for image tags and SHA256 hashes.
- Enhanced UI to separate input fields for image name, tag, and SHA256 digest, improving user experience.
- Added comprehensive tests for DockerImageParser to ensure accurate parsing and validation of image formats.
- Replaced inline event listener functions with named handlers for better readability and maintainability.
- Added cleanup logic to remove event listeners on component destruction, preventing potential memory leaks.
- Updated the styling of search result items for improved visual feedback and consistency.
- Merged the storage management functionalities into the Storage component, replacing the previous Add component.
- Introduced new methods for submitting persistent volumes, file mounts, and directory mounts, improving code organization and maintainability.
- Enhanced the UI with modals for adding volumes, files, and directories, providing a more intuitive user experience.
- Updated validation rules and error handling for improved robustness during storage submissions.
- Removed deprecated Add component and associated views to streamline the codebase.
- Added focus-visible styles to the close button in the modal component for improved accessibility and user experience.
- Ensured consistent visual feedback when the button is focused, aligning with recent accessibility enhancements.
- Added focus-visible styles for buttons and links to improve accessibility and user experience.
- Updated button utility styles to include focus-visible states for better visual feedback.
- Enhanced dropdown item styles to support focus-visible states, ensuring consistent interaction design.
- Added an x-init directive to automatically focus the first input element (input, textarea, or select) when the modal is opened, enhancing user experience and accessibility.
- Reduced the size of SVG icons in the advanced application and service components from 6x6 to 4x4 for a more uniform appearance.
- Updated the external link component size in the services links to maintain visual consistency.
- Changed the projects property in the Dashboard component from an array to a Collection for improved data handling.
- Added new color variables in CSS for better theming options.
- Updated button styles across various components for consistency and improved user experience.
- Refined dropdown and notification components for better visual alignment and usability.
- Added properties to manage file and directory counts, improving data handling in the Livewire component.
- Updated the file storage view to include a tabbed interface for volumes, files, and directories, enhancing user navigation.
- Improved UI layout for better readability and user experience, including consistent styling and informative messages.
- Removed the navigateToProject method from the Livewire component.
- Updated the dashboard view to use anchor tags for project navigation, enhancing user experience and simplifying the code structure.
- Added retrieval and mapping of projects and environments to the global search results.
- Enhanced search result structure to include resource counts and descriptions for projects and environments.
- Updated the UI to reflect the new search capabilities, improving user experience when searching for resources.
