Merge remote-tracking branch 'origin/next' into pr-7764-shadow/add-shared-server-env

resources/css/app.css

@@ -14,7 +14,9 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
-    --font-sans: Inter, sans-serif;
+    --font-sans: 'Geist Sans', Inter, sans-serif;
+    --font-geist-sans: 'Geist Sans', Inter, sans-serif;
+    --font-logs: 'Geist Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
 
     --color-base: #101010;
     --color-warning: #fcd452;
@@ -96,7 +98,17 @@ body {
 }
 
 body {
-    @apply min-h-screen text-sm antialiased scrollbar;
+    @apply min-h-screen text-sm font-sans antialiased scrollbar overflow-x-hidden;
+}
+
+.coolify-monaco-editor {
+    @apply min-w-0 w-full;
+    overflow-x: hidden;
+}
+
+.coolify-monaco-editor .monaco-editor,
+.coolify-monaco-editor .overflow-guard {
+    max-width: 100%;
 }
 
 option {
@@ -153,7 +165,7 @@ tbody {
 }
 
 tr {
-    @apply text-black dark:text-neutral-400 dark:hover:bg-black hover:bg-neutral-200;
+    @apply text-black dark:text-neutral-400 dark:hover:bg-coolgray-300 hover:bg-neutral-100;
 }
 
 tr th {
@@ -196,4 +208,4 @@ section {
 
 .dark .log-highlight {
     background-color: rgba(234, 179, 8, 0.3);
-}
+}

resources/css/fonts.css

@@ -70,3 +70,18 @@
   src: url('../fonts/inter-v13-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-regular.woff2') format('woff2');
 }
 
+@font-face {
+  font-display: swap;
+  font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 100 900;
+  src: url('../fonts/geist-mono-variable.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Geist Sans';
+  font-style: normal;
+  font-weight: 100 900;
+  src: url('../fonts/geist-sans-variable.woff2') format('woff2');
+}

resources/css/utilities.css

@@ -281,7 +281,7 @@
 }
 
 @utility info-helper-popup {
-    @apply hidden absolute z-40 text-xs rounded-sm text-neutral-700 group-hover:block dark:border-coolgray-500 border-neutral-900 dark:bg-coolgray-400 bg-neutral-200 dark:text-neutral-300 max-w-xs whitespace-normal break-words;
+    @apply hidden absolute z-40 text-xs rounded-sm text-neutral-700 group-hover:block dark:border-coolgray-500 border-neutral-900 dark:bg-coolgray-400 bg-neutral-200 dark:text-neutral-300 max-w-sm whitespace-normal break-words;
 }
 
 @utility buyme {

resources/js/terminal.js

@@ -2,6 +2,16 @@ import { Terminal } from '@xterm/xterm';
 import '@xterm/xterm/css/xterm.css';
 import { FitAddon } from '@xterm/addon-fit';
 
+const terminalDebugEnabled = import.meta.env.DEV;
+
+function logTerminal(level, message, ...context) {
+    if (!terminalDebugEnabled) {
+        return;
+    }
+
+    console[level](message, ...context);
+}
+
 export function initializeTerminalComponent() {
     function terminalData() {
         return {
@@ -30,6 +40,8 @@ export function initializeTerminalComponent() {
             pingTimeoutId: null,
             heartbeatMissed: 0,
             maxHeartbeatMisses: 3,
+            // Command buffering for race condition prevention
+            pendingCommand: null,
             // Resize handling
             resizeObserver: null,
             resizeTimeout: null,
@@ -120,6 +132,7 @@ export function initializeTerminalComponent() {
                 this.checkIfProcessIsRunningAndKillIt();
                 this.clearAllTimers();
                 this.connectionState = 'disconnected';
+                this.pendingCommand = null;
                 if (this.socket) {
                     this.socket.close(1000, 'Client cleanup');
                 }
@@ -154,6 +167,7 @@ export function initializeTerminalComponent() {
                     this.pendingWrites = 0;
                     this.paused = false;
                     this.commandBuffer = '';
+                    this.pendingCommand = null;
 
                     // Notify parent component that terminal disconnected
                     this.$wire.dispatch('terminalDisconnected');
@@ -172,7 +186,7 @@ export function initializeTerminalComponent() {
                     this.term = new Terminal({
                         cols: 80,
                         rows: 30,
-                        fontFamily: '"Fira Code", courier-new, courier, monospace, "Powerline Extra Symbols"',
+                        fontFamily: '"Geist Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace, "Powerline Extra Symbols"',
                         cursorBlink: true,
                         rendererType: 'canvas',
                         convertEol: true,
@@ -188,7 +202,7 @@ export function initializeTerminalComponent() {
 
             initializeWebSocket() {
                 if (this.socket && this.socket.readyState !== WebSocket.CLOSED) {
-                    console.log('[Terminal] WebSocket already connecting/connected, skipping');
+                    logTerminal('log', '[Terminal] WebSocket already connecting/connected, skipping');
                     return; // Already connecting or connected
                 }
 
@@ -197,7 +211,7 @@ export function initializeTerminalComponent() {
 
                 // Ensure terminal config is available
                 if (!window.terminalConfig) {
-                    console.warn('[Terminal] Terminal config not available, using defaults');
+                    logTerminal('warn', '[Terminal] Terminal config not available, using defaults');
                     window.terminalConfig = {};
                 }
 
@@ -223,7 +237,7 @@ export function initializeTerminalComponent() {
                 }
 
                 const url = `${connectionString.protocol}://${connectionString.host}${connectionString.port}${connectionString.path}`
-                console.log(`[Terminal] Attempting connection to: ${url}`);
+                logTerminal('log', `[Terminal] Attempting connection to: ${url}`);
 
                 try {
                     this.socket = new WebSocket(url);
@@ -232,7 +246,7 @@ export function initializeTerminalComponent() {
                     const timeoutMs = this.reconnectAttempts === 0 ? 15000 : this.connectionTimeout;
                     this.connectionTimeoutId = setTimeout(() => {
                         if (this.connectionState === 'connecting') {
-                            console.error(`[Terminal] Connection timeout after ${timeoutMs}ms`);
+                            logTerminal('error', `[Terminal] Connection timeout after ${timeoutMs}ms`);
                             this.socket.close();
                             this.handleConnectionError('Connection timeout');
                         }
@@ -244,13 +258,13 @@ export function initializeTerminalComponent() {
                     this.socket.onclose = this.handleSocketClose.bind(this);
 
                 } catch (error) {
-                    console.error('[Terminal] Failed to create WebSocket:', error);
+                    logTerminal('error', '[Terminal] Failed to create WebSocket:', error);
                     this.handleConnectionError(`Failed to create WebSocket connection: ${error.message}`);
                 }
             },
 
             handleSocketOpen() {
-                console.log('[Terminal] WebSocket connection established. Cool cool cool cool cool cool.');
+                logTerminal('log', '[Terminal] WebSocket connection established.');
                 this.connectionState = 'connected';
                 this.reconnectAttempts = 0;
                 this.heartbeatMissed = 0;
@@ -262,6 +276,12 @@ export function initializeTerminalComponent() {
                     this.connectionTimeoutId = null;
                 }
 
+                // Flush any buffered command from before WebSocket was ready
+                if (this.pendingCommand) {
+                    this.sendMessage(this.pendingCommand);
+                    this.pendingCommand = null;
+                }
+
                 // Start ping timeout monitoring
                 this.resetPingTimeout();
 
@@ -270,16 +290,16 @@ export function initializeTerminalComponent() {
             },
 
             handleSocketError(error) {
-                console.error('[Terminal] WebSocket error:', error);
-                console.error('[Terminal] WebSocket state:', this.socket ? this.socket.readyState : 'No socket');
-                console.error('[Terminal] Connection attempt:', this.reconnectAttempts + 1);
+                logTerminal('error', '[Terminal] WebSocket error:', error);
+                logTerminal('error', '[Terminal] WebSocket state:', this.socket ? this.socket.readyState : 'No socket');
+                logTerminal('error', '[Terminal] Connection attempt:', this.reconnectAttempts + 1);
                 this.handleConnectionError('WebSocket error occurred');
             },
 
             handleSocketClose(event) {
-                console.warn(`[Terminal] WebSocket connection closed. Code: ${event.code}, Reason: ${event.reason || 'No reason provided'}`);
-                console.log('[Terminal] Was clean close:', event.code === 1000);
-                console.log('[Terminal] Connection attempt:', this.reconnectAttempts + 1);
+                logTerminal('warn', `[Terminal] WebSocket connection closed. Code: ${event.code}, Reason: ${event.reason || 'No reason provided'}`);
+                logTerminal('log', '[Terminal] Was clean close:', event.code === 1000);
+                logTerminal('log', '[Terminal] Connection attempt:', this.reconnectAttempts + 1);
 
                 this.connectionState = 'disconnected';
                 this.clearAllTimers();
@@ -297,7 +317,7 @@ export function initializeTerminalComponent() {
             },
 
             handleConnectionError(reason) {
-                console.error(`[Terminal] Connection error: ${reason} (attempt ${this.reconnectAttempts + 1})`);
+                logTerminal('error', `[Terminal] Connection error: ${reason} (attempt ${this.reconnectAttempts + 1})`);
                 this.connectionState = 'disconnected';
 
                 // Only dispatch error to UI after a few failed attempts to avoid immediate error on page load
@@ -310,7 +330,7 @@ export function initializeTerminalComponent() {
 
             scheduleReconnect() {
                 if (this.reconnectAttempts >= this.maxReconnectAttempts) {
-                    console.error('[Terminal] Max reconnection attempts reached');
+                    logTerminal('error', '[Terminal] Max reconnection attempts reached');
                     this.message = '(connection failed - max retries exceeded)';
                     return;
                 }
@@ -323,7 +343,7 @@ export function initializeTerminalComponent() {
                     this.maxReconnectDelay
                 );
 
-                console.warn(`[Terminal] Scheduling reconnect attempt ${this.reconnectAttempts + 1} in ${delay}ms`);
+                logTerminal('warn', `[Terminal] Scheduling reconnect attempt ${this.reconnectAttempts + 1} in ${delay}ms`);
 
                 this.reconnectInterval = setTimeout(() => {
                     this.reconnectAttempts++;
@@ -335,17 +355,21 @@ export function initializeTerminalComponent() {
                 if (this.socket && this.socket.readyState === WebSocket.OPEN) {
                     this.socket.send(JSON.stringify(message));
                 } else {
-                    console.warn('[Terminal] WebSocket not ready, message not sent:', message);
+                    logTerminal('warn', '[Terminal] WebSocket not ready, message not sent:', message);
                 }
             },
 
             sendCommandWhenReady(message) {
                 if (this.isWebSocketReady()) {
                     this.sendMessage(message);
+                } else {
+                    this.pendingCommand = message;
                 }
             },
 
             handleSocketMessage(event) {
+                logTerminal('log', '[Terminal] Received WebSocket message:', event.data);
+
                 // Handle pong responses
                 if (event.data === 'pong') {
                     this.heartbeatMissed = 0;
@@ -354,6 +378,10 @@ export function initializeTerminalComponent() {
                     return;
                 }
 
+                if (!this.term?._initialized && event.data !== 'pty-ready') {
+                    logTerminal('warn', '[Terminal] Received message before PTY initialization:', event.data);
+                }
+
                 if (event.data === 'pty-ready') {
                     if (!this.term._initialized) {
                         this.term.open(document.getElementById('terminal'));
@@ -398,17 +426,24 @@ export function initializeTerminalComponent() {
 
                     // Notify parent component that terminal disconnected
                     this.$wire.dispatch('terminalDisconnected');
+                } else if (
+                    typeof event.data === 'string' &&
+                    (event.data.startsWith('Unauthorized:') || event.data.startsWith('Invalid SSH command:'))
+                ) {
+                    logTerminal('error', '[Terminal] Backend rejected terminal startup:', event.data);
+                    this.$wire.dispatch('error', event.data);
+                    this.terminalActive = false;
                 } else {
                     try {
                         this.pendingWrites++;
                         this.term.write(event.data, (err) => {
                             if (err) {
-                                console.error('[Terminal] Write error:', err);
+                                logTerminal('error', '[Terminal] Write error:', err);
                             }
                             this.flowControlCallback();
                         });
                     } catch (error) {
-                        console.error('[Terminal] Write operation failed:', error);
+                        logTerminal('error', '[Terminal] Write operation failed:', error);
                         this.pendingWrites = Math.max(0, this.pendingWrites - 1);
                     }
                 }
@@ -483,10 +518,10 @@ export function initializeTerminalComponent() {
                         clearTimeout(this.pingTimeoutId);
                         this.pingTimeoutId = null;
                     }
-                    console.log('[Terminal] Tab hidden, pausing heartbeat monitoring');
+                    logTerminal('log', '[Terminal] Tab hidden, pausing heartbeat monitoring');
                 } else if (wasVisible === false) {
                     // Tab is now visible again
-                    console.log('[Terminal] Tab visible, resuming connection management');
+                    logTerminal('log', '[Terminal] Tab visible, resuming connection management');
 
                     if (this.wasConnectedBeforeHidden && this.socket && this.socket.readyState === WebSocket.OPEN) {
                         // Send immediate ping to verify connection is still alive
@@ -508,10 +543,10 @@ export function initializeTerminalComponent() {
 
                 this.pingTimeoutId = setTimeout(() => {
                     this.heartbeatMissed++;
-                    console.warn(`[Terminal] Ping timeout - missed ${this.heartbeatMissed}/${this.maxHeartbeatMisses}`);
+                    logTerminal('warn', `[Terminal] Ping timeout - missed ${this.heartbeatMissed}/${this.maxHeartbeatMisses}`);
 
                     if (this.heartbeatMissed >= this.maxHeartbeatMisses) {
-                        console.error('[Terminal] Too many missed heartbeats, closing connection');
+                        logTerminal('error', '[Terminal] Too many missed heartbeats, closing connection');
                         this.socket.close(1001, 'Heartbeat timeout');
                     }
                 }, this.pingTimeout);
@@ -553,7 +588,7 @@ export function initializeTerminalComponent() {
 
                     // Check if dimensions are valid
                     if (height <= 0 || width <= 0) {
-                        console.warn('[Terminal] Invalid wrapper dimensions, retrying...', { height, width });
+                        logTerminal('warn', '[Terminal] Invalid wrapper dimensions, retrying...', { height, width });
                         setTimeout(() => this.resizeTerminal(), 100);
                         return;
                     }
@@ -562,7 +597,7 @@ export function initializeTerminalComponent() {
 
                     if (!charSize.height || !charSize.width) {
                         // Fallback values if char size not available yet
-                        console.warn('[Terminal] Character size not available, retrying...');
+                        logTerminal('warn', '[Terminal] Character size not available, retrying...');
                         setTimeout(() => this.resizeTerminal(), 100);
                         return;
                     }
@@ -583,10 +618,10 @@ export function initializeTerminalComponent() {
                             });
                         }
                     } else {
-                        console.warn('[Terminal] Invalid calculated dimensions:', { rows, cols, height, width, charSize });
+                        logTerminal('warn', '[Terminal] Invalid calculated dimensions:', { rows, cols, height, width, charSize });
                     }
                 } catch (error) {
-                    console.error('[Terminal] Resize error:', error);
+                    logTerminal('error', '[Terminal] Resize error:', error);
                 }
             },
 

resources/views/auth/register.blade.php

@@ -1,7 +1,9 @@
 <?php
-function getOldOrLocal($key, $localValue)
-{
-    return old($key) != '' ? old($key) : (app()->environment('local') ? $localValue : '');
+if (! function_exists('getOldOrLocal')) {
+    function getOldOrLocal($key, $localValue)
+    {
+        return old($key) != '' ? old($key) : (app()->environment('local') ? $localValue : '');
+    }
 }
 
 $name = getOldOrLocal('name', 'test3 normal user');

resources/views/components/applications/links.blade.php

@@ -4,7 +4,7 @@
     </x-slot>
     @if (
         (data_get($application, 'fqdn') ||
-            collect(json_decode($this->application->docker_compose_domains))->count() > 0 ||
+            collect(json_decode($this->application->docker_compose_domains))->contains(fn($fqdn) => !empty(data_get($fqdn, 'domain'))) ||
             data_get($application, 'previews', collect([]))->count() > 0 ||
             data_get($application, 'ports_mappings_array')) &&
             data_get($application, 'settings.is_raw_compose_deployment_enabled') !== true)

resources/views/components/forms/datalist.blade.php

@@ -99,8 +99,14 @@
             {{-- Unified Input Container with Tags Inside --}}
             <div @click="$refs.searchInput.focus()" x-data="{ focused: false }" @focusin="focused = true" @focusout="focused = false"
                 class="flex flex-wrap gap-1.5 max-h-40 overflow-y-auto scrollbar py-1.5  px-2 w-full text-sm rounded-sm border-0 bg-white dark:bg-coolgray-100 cursor-text px-1 text-black dark:text-white"
-                :style="focused ? 'box-shadow: inset 4px 0 0 #6b16ed, inset 0 0 0 2px #e5e5e5;' : 'box-shadow: inset 4px 0 0 transparent, inset 0 0 0 2px #e5e5e5;'"
-                x-init="$watch('focused', () => { if ($root.classList.contains('dark') || document.documentElement.classList.contains('dark')) { $el.style.boxShadow = focused ? 'inset 4px 0 0 #fcd452, inset 0 0 0 2px #242424' : 'inset 4px 0 0 transparent, inset 0 0 0 2px #242424'; } })"
+                :style="(() => {
+                    const isDark = document.documentElement.classList.contains('dark');
+                    const accent = isDark ? '#fcd452' : '#6b16ed';
+                    const border = isDark ? '#242424' : '#e5e5e5';
+                    return focused
+                        ? 'box-shadow: inset 4px 0 0 ' + accent + ', inset 0 0 0 2px ' + border + ';'
+                        : 'box-shadow: inset 4px 0 0 transparent, inset 0 0 0 2px ' + border + ';';
+                })()"
                 :class="{
                         'opacity-50': {{ $disabled ? 'true' : 'false' }}
                     }" wire:loading.class="opacity-50"
@@ -225,8 +231,14 @@
                 {{-- Input Container --}}
                 <div @click="openDropdown()" x-data="{ focused: false }" @focusin="focused = true" @focusout="focused = false"
                     class="flex items-center gap-2 py-1.5 w-full text-sm rounded-sm border-0 bg-white dark:bg-coolgray-100 cursor-text text-black dark:text-white"
-                    :style="focused ? 'box-shadow: inset 4px 0 0 #6b16ed, inset 0 0 0 2px #e5e5e5;' : 'box-shadow: inset 4px 0 0 transparent, inset 0 0 0 2px #e5e5e5;'"
-                    x-init="$watch('focused', () => { if ($root.classList.contains('dark') || document.documentElement.classList.contains('dark')) { $el.style.boxShadow = focused ? 'inset 4px 0 0 #fcd452, inset 0 0 0 2px #242424' : 'inset 4px 0 0 transparent, inset 0 0 0 2px #242424'; } })"
+                    :style="(() => {
+                        const isDark = document.documentElement.classList.contains('dark');
+                        const accent = isDark ? '#fcd452' : '#6b16ed';
+                        const border = isDark ? '#242424' : '#e5e5e5';
+                        return focused
+                            ? 'box-shadow: inset 4px 0 0 ' + accent + ', inset 0 0 0 2px ' + border + ';'
+                            : 'box-shadow: inset 4px 0 0 transparent, inset 0 0 0 2px ' + border + ';';
+                    })()"
                     :class="{
                     'opacity-50': {{ $disabled ? 'true' : 'false' }}
                 }" wire:loading.class="opacity-50" wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]">

resources/views/components/forms/env-var-input.blade.php

@@ -10,7 +10,7 @@
         </label>
     @endif
 
-    <div class="relative" x-data="{
+    <div class="relative" @success.window="type = '{{ $type }}'" x-data="{
             type: '{{ $type }}',
             showDropdown: false,
             suggestions: [],
@@ -197,15 +197,23 @@
         @click.outside="showDropdown = false">
 
         @if ($type === 'password' && $allowToPeak)
-            <div x-on:click="changePasswordFieldType"
-                class="flex absolute inset-y-0 right-0 items-center pr-2 cursor-pointer dark:hover:text-white z-10">
-                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
+            <button type="button" x-on:click="type = type === 'password' ? 'text' : 'password'"
+                class="flex absolute inset-y-0 right-0 z-10 items-center pr-2 cursor-pointer dark:hover:text-white"
+                aria-label="Toggle password visibility">
+                <svg x-show="type === 'password'" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
                     stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                     <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                     <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
                 </svg>
-            </div>
+                <svg x-cloak x-show="type === 'text'" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
+                    stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                    <path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" />
+                    <path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" />
+                    <path d="M3 3l18 18" />
+                </svg>
+            </button>
         @endif
 
         <input
@@ -214,6 +222,8 @@
             @keydown="handleKeydown($event)"
             @click="handleInput()"
             autocomplete="{{ $autocomplete }}"
+            x-bind:type="type"
+            x-bind:class="{ 'truncate': type === 'text' && ! $el.disabled }"
             {{ $attributes->merge(['class' => $defaultClass]) }}
             @required($required)
             @readonly($readonly)
@@ -222,12 +232,10 @@
                 wire:dirty.class="dark:border-l-warning border-l-coollabs border-l-4"
             @endif
             wire:loading.attr="disabled"
-            @if ($type === 'password')
-                :type="type"
-            @else
+            @disabled($disabled)
+            @if ($type !== 'password')
                 type="{{ $type }}"
             @endif
-            @disabled($disabled)
             @if ($htmlId !== 'null') id="{{ $htmlId }}" @endif
             name="{{ $name }}"
             placeholder="{{ $attributes->get('placeholder') }}"

resources/views/components/forms/input.blade.php

@@ -13,10 +13,11 @@
         </label>
     @endif
     @if ($type === 'password')
-        <div class="relative" x-data="{ type: 'password' }">
+        <div class="relative" x-data="{ type: 'password' }" @success.window="type = 'password'">
             @if ($allowToPeak)
-                <div x-on:click="changePasswordFieldType; type = type === 'password' ? 'text' : 'password'"
-                    class="flex absolute inset-y-0 right-0 items-center pr-2 cursor-pointer dark:hover:text-white">
+                <button type="button" x-on:click="type = type === 'password' ? 'text' : 'password'"
+                    class="flex absolute inset-y-0 right-0 items-center pr-2 cursor-pointer dark:hover:text-white"
+                    aria-label="Toggle password visibility">
                     {{-- Eye icon (shown when password is hidden) --}}
                     <svg x-show="type === 'password'" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
                         stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
@@ -25,20 +26,22 @@
                         <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
                     </svg>
                     {{-- Eye-off icon (shown when password is visible) --}}
-                    <svg x-show="type === 'text'" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
+                    <svg x-cloak x-show="type === 'text'" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
                         stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                         <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                         <path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" />
                         <path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" />
                         <path d="M3 3l18 18" />
                     </svg>
-                </div>
+                </button>
             @endif
             <input autocomplete="{{ $autocomplete }}" value="{{ $value }}"
+                x-bind:type="type"
+                x-bind:class="{ 'truncate': type === 'text' && ! $el.disabled }"
                 {{ $attributes->merge(['class' => $defaultClass]) }} @required($required)
                 @if ($modelBinding !== 'null') wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @endif
                 wire:loading.attr="disabled"
-                type="{{ $type }}" @readonly($readonly) @disabled($disabled) id="{{ $htmlId }}"
+                @readonly($readonly) @disabled($disabled) id="{{ $htmlId }}"
                 name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
                 aria-placeholder="{{ $attributes->get('placeholder') }}"
                 @if ($autofocus) x-ref="autofocusInput" @endif>

resources/views/components/forms/monaco-editor.blade.php

@@ -1,4 +1,4 @@
-<div wire:key="{{ rand() }}" class="coolify-monaco-editor flex-1">
+<div wire:key="{{ random_int(0, PHP_INT_MAX) }}" class="coolify-monaco-editor flex-1">
     <div x-ref="monacoRef" x-data="{
         monacoVersion: '0.52.2',
         monacoContent: @entangle($id),

resources/views/components/forms/textarea.blade.php

@@ -30,18 +30,26 @@
             readonly="{{ $readonly }}" label="dockerfile" autofocus="{{ $autofocus }}" />
     @else
         @if ($type === 'password')
-            <div class="relative" x-data="{ type: 'password' }">
+            <div class="relative" x-data="{ type: 'password' }" @success.window="type = 'password'">
                 @if ($allowToPeak)
-                    <div x-on:click="changePasswordFieldType"
-                        class="absolute inset-y-0 right-0 flex items-center h-6 pt-2 pr-2 cursor-pointer dark:hover:text-white">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
+                    <button type="button" x-on:click="type = type === 'password' ? 'text' : 'password'"
+                        class="absolute inset-y-0 right-0 flex items-center h-6 pt-2 pr-2 cursor-pointer dark:hover:text-white"
+                        aria-label="Toggle password visibility">
+                        <svg x-show="type === 'password'" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
                             stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                             <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                             <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                             <path
                                 d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
                         </svg>
-                    </div>
+                        <svg x-cloak x-show="type === 'text'" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
+                            stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                            <path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" />
+                            <path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" />
+                            <path d="M3 3l18 18" />
+                        </svg>
+                    </button>
                 @endif
                 <input x-cloak x-show="type === 'password'" value="{{ $value }}"
                     {{ $attributes->merge(['class' => $defaultClassInput]) }} @required($required)

resources/views/components/modal-confirmation.blade.php

@@ -35,7 +35,7 @@
     $skipPasswordConfirmation = shouldSkipPasswordConfirmation();
     if ($temporaryDisableTwoStepConfirmation) {
         $disableTwoStepConfirmation = false;
-        $skipPasswordConfirmation = false;
+        // Password confirmation requirement is not affected by temporary two-step disable
     }
     // When password step is skipped, Step 2 becomes final - change button text from "Continue" to "Confirm"
     $effectiveStep2ButtonText = ($skipPasswordConfirmation && $step2ButtonText === 'Continue') ? 'Confirm' : $step2ButtonText;
@@ -59,6 +59,7 @@
     confirmWithPassword: @js($confirmWithPassword && !$skipPasswordConfirmation),
     submitAction: @js($submitAction),
     dispatchAction: @js($dispatchAction),
+    submitting: false,
     passwordError: '',
     selectedActions: @js(collect($checkboxes)->pluck('id')->filter(fn($id) => $this->$id)->values()->all()),
     dispatchEvent: @js($dispatchEvent),
@@ -70,6 +71,7 @@
         this.step = this.initialStep;
         this.deleteText = '';
         this.password = '';
+        this.submitting = false;
         this.userConfirmationText = '';
         this.selectedActions = @js(collect($checkboxes)->pluck('id')->filter(fn($id) => $this->$id)->values()->all());
         $wire.$refresh();
@@ -92,7 +94,7 @@
         }
         if (this.dispatchAction) {
             $wire.dispatch(this.submitAction);
-            return true;
+            return Promise.resolve(true);
         }
 
         const methodName = this.submitAction.split('(')[0];
@@ -188,7 +190,7 @@
     @endif
     <template x-teleport="body">
         <div x-show="modalOpen"
-            class="fixed top-0 left-0 z-99 flex items-center justify-center w-screen h-screen p-4" x-cloak>
+            class="fixed top-0 left-0 z-99 flex items-center justify-center w-screen h-screen p-0 sm:p-4" x-cloak>
             <div x-show="modalOpen" class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-xs">
             </div>
             <div x-show="modalOpen" x-trap.inert.noscroll="modalOpen" x-transition:enter="ease-out duration-100"
@@ -197,7 +199,7 @@
                 x-transition:leave="ease-in duration-100"
                 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                 x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
-                class="relative w-full border rounded-sm min-w-full lg:min-w-[36rem] max-w-[48rem] max-h-[calc(100vh-2rem)] bg-neutral-100 border-neutral-400 dark:bg-base dark:border-coolgray-300 flex flex-col">
+                class="relative w-full border rounded-none sm:rounded-sm min-w-full lg:min-w-[36rem] max-w-full sm:max-w-[48rem] h-screen sm:h-auto max-h-screen sm:max-h-[calc(100vh-2rem)] bg-neutral-100 border-neutral-400 dark:bg-base dark:border-coolgray-300 flex flex-col">
                 <div class="flex justify-between items-center py-6 px-7 shrink-0">
                     <h3 class="pr-8 text-2xl font-bold">{{ $title }}</h3>
                     <button @click="modalOpen = false; resetModal()"
@@ -320,8 +322,8 @@
                                 </x-forms.button>
                             @endif
                             <x-forms.button
-                                x-bind:disabled="!disableTwoStepConfirmation && confirmWithText && userConfirmationText !==
-                                    confirmationText"
+                                x-bind:disabled="submitting || (!disableTwoStepConfirmation && confirmWithText && userConfirmationText !==
+                                    confirmationText)"
                                 class="w-auto" isError
                                 @click="
                                     if (dispatchEvent) {
@@ -330,12 +332,18 @@
                                     if (confirmWithPassword && !skipPasswordConfirmation) {
                                         step++;
                                     } else {
-                                        modalOpen = false;
-                                        resetModal();
-                                        submitForm();
+                                        submitting = true;
+                                        submitForm().then((result) => {
+                                            submitting = false;
+                                            modalOpen = false;
+                                            resetModal();
+                                        }).catch(() => {
+                                            submitting = false;
+                                        });
                                     }
                                 ">
-                                <span x-text="step2ButtonText"></span>
+                                <span x-show="!submitting" x-text="step2ButtonText"></span>
+                                <x-loading x-show="submitting" text="Processing..." />
                             </x-forms.button>
                         </div>
                     </div>
@@ -373,22 +381,27 @@
                                     class="w-24 dark:bg-coolgray-200 dark:hover:bg-coolgray-300">
                                     Back
                                 </x-forms.button>
-                                <x-forms.button x-bind:disabled="!password" class="w-auto" isError
+                                <x-forms.button x-bind:disabled="!password || submitting" class="w-auto" isError
                                     @click="
                                     if (dispatchEvent) {
                                         $wire.dispatch(dispatchEventType, dispatchEventMessage);
                                     }
+                                    submitting = true;
                                     submitForm().then((result) => {
+                                        submitting = false;
                                         if (result === true) {
                                             modalOpen = false;
                                             resetModal();
                                         } else {
                                             passwordError = result;
-                                            password = ''; // Clear the password field
+                                            password = '';
                                         }
+                                    }).catch(() => {
+                                        submitting = false;
                                     });
                                     ">
-                                    <span x-text="step3ButtonText"></span>
+                                    <span x-show="!submitting" x-text="step3ButtonText"></span>
+                                    <x-loading x-show="submitting" text="Processing..." />
                                 </x-forms.button>
                             </div>
                         </div>

resources/views/components/modal-input.blade.php

@@ -7,8 +7,6 @@
     'action' => 'delete',
     'content' => null,
     'closeOutside' => true,
-    'minWidth' => '36rem',
-    'maxWidth' => '48rem',
     'isFullWidth' => false,
 ])
 
@@ -16,7 +14,6 @@
     $modalId = 'modal-' . uniqid();
 @endphp
 
-
 <div x-data="{ modalOpen: false }"
     x-init="$watch('modalOpen', value => { if (!value) { $wire.dispatch('modalClosed') } })"
     :class="{ 'z-40': modalOpen }" @keydown.window.escape="modalOpen=false"
@@ -52,7 +49,7 @@
                 x-transition:leave="ease-in duration-100"
                 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                 x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
-                class="relative w-full min-w-full lg:min-w-[{{ $minWidth }}] max-w-[{{ $maxWidth }}] max-h-[calc(100vh-2rem)] border rounded-sm drop-shadow-sm bg-white border-neutral-200 dark:bg-base dark:border-coolgray-300 flex flex-col">
+                class="relative w-full lg:w-auto lg:min-w-2xl lg:max-w-4xl border rounded-sm drop-shadow-sm bg-white border-neutral-200 dark:bg-base dark:border-coolgray-300 flex flex-col">
                 <div class="flex items-center justify-between py-6 px-6 shrink-0">
                     <h3 class="text-2xl font-bold">{{ $title }}</h3>
                     <button @click="modalOpen=false"
@@ -63,7 +60,7 @@
                         </svg>
                     </button>
                 </div>
-                <div class="relative flex items-center justify-center w-auto overflow-y-auto px-6 pb-6" style="-webkit-overflow-scrolling: touch;">
+                <div class="relative flex items-center justify-center w-auto px-6 pb-6">
                     {{ $slot }}
                 </div>
             </div>

resources/views/components/notification/navbar.blade.php

@@ -2,7 +2,7 @@
     <h1>Notifications</h1>
     <div class="subtitle">Get notified about your infrastructure.</div>
     <div class="navbar-main">
-        <nav class="flex items-center gap-6 min-h-10">
+        <nav class="flex items-center gap-3.5 min-h-10">
             <a class="{{ request()->routeIs('notifications.email') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
                 href="{{ route('notifications.email') }}">
                 <button>Email</button>

resources/views/components/resources/breadcrumbs.blade.php

@@ -2,12 +2,29 @@
     'lastDeploymentInfo' => null,
     'lastDeploymentLink' => null,
     'resource' => null,
+    'projects' => null,
+    'environments' => null,
 ])
 @php
-    $projects = auth()->user()->currentTeam()->projects()->get();
-    $environments = $resource->environment->project
+    use App\Models\Project;
+
+    // Use passed props if available, otherwise query (backwards compatible)
+    $projects = $projects ?? Project::ownedByCurrentTeamCached();
+    $environments = $environments ?? $resource->environment->project
         ->environments()
-        ->with(['applications', 'services'])
+        ->select('id', 'uuid', 'name', 'project_id')
+        ->with([
+            'applications:id,uuid,name,environment_id',
+            'services:id,uuid,name,environment_id',
+            'postgresqls:id,uuid,name,environment_id',
+            'redis:id,uuid,name,environment_id',
+            'mongodbs:id,uuid,name,environment_id',
+            'mysqls:id,uuid,name,environment_id',
+            'mariadbs:id,uuid,name,environment_id',
+            'keydbs:id,uuid,name,environment_id',
+            'dragonflies:id,uuid,name,environment_id',
+            'clickhouses:id,uuid,name,environment_id',
+        ])
         ->get();
     $currentProjectUuid = data_get($resource, 'environment.project.uuid');
     $currentEnvironmentUuid = data_get($resource, 'environment.uuid');
@@ -47,7 +64,7 @@
         </li>
 
         <!-- Environment Level -->
-        <li class="inline-flex items-center" x-data="{ envOpen: false, activeEnv: null, envPositions: {}, activeRes: null, resPositions: {}, activeMenuEnv: null, menuPositions: {}, closeTimeout: null, envTimeout: null, resTimeout: null, menuTimeout: null, toggle() { this.envOpen = !this.envOpen; if (!this.envOpen) { this.activeEnv = null; this.activeRes = null; this.activeMenuEnv = null; } }, open() { clearTimeout(this.closeTimeout); this.envOpen = true }, close() { this.closeTimeout = setTimeout(() => { this.envOpen = false; this.activeEnv = null; this.activeRes = null; this.activeMenuEnv = null; }, 100) }, openEnv(id) { clearTimeout(this.closeTimeout); clearTimeout(this.envTimeout); this.activeEnv = id }, closeEnv() { this.envTimeout = setTimeout(() => { this.activeEnv = null; this.activeRes = null; this.activeMenuEnv = null; }, 100) }, openRes(id) { clearTimeout(this.envTimeout); clearTimeout(this.resTimeout); this.activeRes = id }, closeRes() { this.resTimeout = setTimeout(() => { this.activeRes = null; this.activeMenuEnv = null; }, 100) }, openMenu(id) { clearTimeout(this.resTimeout); clearTimeout(this.menuTimeout); this.activeMenuEnv = id }, closeMenu() { this.menuTimeout = setTimeout(() => { this.activeMenuEnv = null; }, 100) } }">
+        <li class="inline-flex items-center" x-data="{ envOpen: false, activeEnv: null, envPositions: {}, closeTimeout: null, envTimeout: null, toggle() { this.envOpen = !this.envOpen; if (!this.envOpen) { this.activeEnv = null; } }, open() { clearTimeout(this.closeTimeout); this.envOpen = true }, close() { this.closeTimeout = setTimeout(() => { this.envOpen = false; this.activeEnv = null; }, 100) }, openEnv(id) { clearTimeout(this.closeTimeout); clearTimeout(this.envTimeout); this.activeEnv = id }, closeEnv() { this.envTimeout = setTimeout(() => { this.activeEnv = null; }, 100) } }">
             <div class="flex items-center relative" @mouseenter="open()"
                 @mouseleave="close()">
                 <a class="text-xs truncate lg:text-sm hover:text-warning" {{ wireNavigate() }}
@@ -64,39 +81,39 @@
                     </svg>
                 </button>
 
-                <!-- Environment Dropdown Container -->
+                <!-- Environment Dropdown -->
                 <div x-show="envOpen" @click.outside="close()" x-transition:enter="transition ease-out duration-200"
                     x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
                     x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 scale-100"
-                    x-transition:leave-end="opacity-0 scale-95" class="absolute z-20 top-full mt-1 left-0 sm:left-auto max-w-[calc(100vw-1rem)]" x-init="$nextTick(() => { const rect = $el.getBoundingClientRect(); if (rect.right > window.innerWidth) { $el.style.left = 'auto'; $el.style.right = '0'; } })">
+                    x-transition:leave-end="opacity-0 scale-95"
+                    class="absolute z-20 top-full mt-1 left-0 sm:left-auto max-w-[calc(100vw-1rem)]"
+                    x-init="$nextTick(() => { const rect = $el.getBoundingClientRect(); if (rect.right > window.innerWidth) { $el.style.left = 'auto'; $el.style.right = '0'; } })">
                     <!-- Environment List -->
                     <div
                         class="relative w-48 bg-white dark:bg-coolgray-100 rounded-md shadow-lg py-1 border border-neutral-200 dark:border-coolgray-200 max-h-96 overflow-y-auto scrollbar">
                         @foreach ($environments as $environment)
                             @php
+                                $envDatabases = collect()
+                                    ->merge($environment->postgresqls ?? collect())
+                                    ->merge($environment->redis ?? collect())
+                                    ->merge($environment->mongodbs ?? collect())
+                                    ->merge($environment->mysqls ?? collect())
+                                    ->merge($environment->mariadbs ?? collect())
+                                    ->merge($environment->keydbs ?? collect())
+                                    ->merge($environment->dragonflies ?? collect())
+                                    ->merge($environment->clickhouses ?? collect());
                                 $envResources = collect()
-                                    ->merge(
-                                        $environment->applications->map(
-                                            fn($app) => ['type' => 'application', 'resource' => $app],
-                                        ),
-                                    )
-                                    ->merge(
-                                        $environment
-                                            ->databases()
-                                            ->map(fn($db) => ['type' => 'database', 'resource' => $db]),
-                                    )
-                                    ->merge(
-                                        $environment->services->map(
-                                            fn($svc) => ['type' => 'service', 'resource' => $svc],
-                                        ),
-                                    );
+                                    ->merge($environment->applications->map(fn($app) => ['type' => 'application', 'resource' => $app]))
+                                    ->merge($envDatabases->map(fn($db) => ['type' => 'database', 'resource' => $db]))
+                                    ->merge($environment->services->map(fn($svc) => ['type' => 'service', 'resource' => $svc]))
+                                    ->sortBy(fn($item) => strtolower($item['resource']->name));
                             @endphp
                             <div @mouseenter="openEnv('{{ $environment->uuid }}'); envPositions['{{ $environment->uuid }}'] = $el.offsetTop - ($el.closest('.overflow-y-auto')?.scrollTop || 0)"
                                 @mouseleave="closeEnv()">
                                 <a href="{{ route('project.resource.index', [
-                                    'environment_uuid' => $environment->uuid,
-                                    'project_uuid' => $currentProjectUuid,
-                                ]) }}" {{ wireNavigate() }}
+                                        'environment_uuid' => $environment->uuid,
+                                        'project_uuid' => $currentProjectUuid,
+                                    ]) }}" {{ wireNavigate() }}
                                     class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200 {{ $environment->uuid === $currentEnvironmentUuid ? 'dark:text-warning font-semibold' : '' }}"
                                     title="{{ $environment->name }}">
                                     <span class="truncate">{{ $environment->name }}</span>
@@ -126,31 +143,29 @@
                     <!-- Resources Sub-dropdown (2nd level) -->
                     @foreach ($environments as $environment)
                         @php
+                            $envDatabases = collect()
+                                ->merge($environment->postgresqls ?? collect())
+                                ->merge($environment->redis ?? collect())
+                                ->merge($environment->mongodbs ?? collect())
+                                ->merge($environment->mysqls ?? collect())
+                                ->merge($environment->mariadbs ?? collect())
+                                ->merge($environment->keydbs ?? collect())
+                                ->merge($environment->dragonflies ?? collect())
+                                ->merge($environment->clickhouses ?? collect());
                             $envResources = collect()
-                                ->merge(
-                                    $environment->applications->map(
-                                        fn($app) => ['type' => 'application', 'resource' => $app],
-                                    ),
-                                )
-                                ->merge(
-                                    $environment
-                                        ->databases()
-                                        ->map(fn($db) => ['type' => 'database', 'resource' => $db]),
-                                )
-                                ->merge(
-                                    $environment->services->map(fn($svc) => ['type' => 'service', 'resource' => $svc]),
-                                );
+                                ->merge($environment->applications->map(fn($app) => ['type' => 'application', 'resource' => $app]))
+                                ->merge($envDatabases->map(fn($db) => ['type' => 'database', 'resource' => $db]))
+                                ->merge($environment->services->map(fn($svc) => ['type' => 'service', 'resource' => $svc]));
                         @endphp
                         @if ($envResources->count() > 0)
                             <div x-show="activeEnv === '{{ $environment->uuid }}'" x-cloak
                                 x-transition:enter="transition ease-out duration-150"
                                 x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
-                                @mouseenter="openEnv('{{ $environment->uuid }}')"
-                                @mouseleave="closeEnv()"
+                                @mouseenter="openEnv('{{ $environment->uuid }}')" @mouseleave="closeEnv()"
                                 :style="'position: absolute; left: 100%; top: ' + (envPositions['{{ $environment->uuid }}'] || 0) + 'px; z-index: 30;'"
                                 class="flex flex-col sm:flex-row items-start pl-1">
                                 <div
-                                    class="relative w-48 bg-white dark:bg-coolgray-100 rounded-md shadow-lg py-1 border border-neutral-200 dark:border-coolgray-200 max-h-96 overflow-y-auto scrollbar">
+                                    class="relative w-56 bg-white dark:bg-coolgray-100 rounded-md shadow-lg py-1 border border-neutral-200 dark:border-coolgray-200 max-h-96 overflow-y-auto scrollbar">
                                     @foreach ($envResources as $envResource)
                                         @php
                                             $resType = $envResource['type'];
@@ -173,224 +188,14 @@
                                                 ]),
                                             };
                                             $isCurrentResource = $res->uuid === $currentResourceUuid;
-                                            $resHasMultipleServers = $resType === 'application' && method_exists($res, 'additional_servers') && $res->additional_servers()->count() > 0;
-                                            $resServerName = $resHasMultipleServers ? null : data_get($res, 'destination.server.name');
                                         @endphp
-                                        <div @mouseenter="openRes('{{ $environment->uuid }}-{{ $res->uuid }}'); resPositions['{{ $environment->uuid }}-{{ $res->uuid }}'] = $el.offsetTop - ($el.closest('.overflow-y-auto')?.scrollTop || 0)"
-                                            @mouseleave="closeRes()">
-                                            <a href="{{ $resRoute }}" {{ wireNavigate() }}
-                                                class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200 {{ $isCurrentResource ? 'dark:text-warning font-semibold' : '' }}"
-                                                title="{{ $res->name }}{{ $resServerName ? ' ('.$resServerName.')' : '' }}">
-                                                <span class="truncate">{{ $res->name }}@if($resServerName) <span class="text-xs text-neutral-400">({{ $resServerName }})</span>@endif</span>
-                                                <svg class="w-3 h-3 shrink-0" fill="none" stroke="currentColor"
-                                                    viewBox="0 0 24 24">
-                                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                                        stroke-width="4" d="M9 5l7 7-7 7"></path>
-                                                </svg>
-                                            </a>
-                                        </div>
+                                        <a href="{{ $resRoute }}" {{ wireNavigate() }}
+                                            class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200 {{ $isCurrentResource ? 'dark:text-warning font-semibold' : '' }}"
+                                            title="{{ $res->name }}">
+                                            {{ $res->name }}
+                                        </a>
                                     @endforeach
                                 </div>
-
-                                <!-- Main Menu Sub-dropdown (3rd level) -->
-                                @foreach ($envResources as $envResource)
-                                    @php
-                                        $resType = $envResource['type'];
-                                        $res = $envResource['resource'];
-                                        $resParams = [
-                                            'project_uuid' => $currentProjectUuid,
-                                            'environment_uuid' => $environment->uuid,
-                                        ];
-                                        if ($resType === 'application') {
-                                            $resParams['application_uuid'] = $res->uuid;
-                                        } elseif ($resType === 'service') {
-                                            $resParams['service_uuid'] = $res->uuid;
-                                        } else {
-                                            $resParams['database_uuid'] = $res->uuid;
-                                        }
-                                        $resKey = $environment->uuid . '-' . $res->uuid;
-                                    @endphp
-                                    <div x-show="activeRes === '{{ $resKey }}'" x-cloak
-                                        x-transition:enter="transition ease-out duration-150"
-                                        x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
-                                        @mouseenter="openRes('{{ $resKey }}')"
-                                        @mouseleave="closeRes()"
-                                        :style="'position: absolute; left: 100%; top: ' + (resPositions['{{ $resKey }}'] || 0) + 'px; z-index: 40;'"
-                                        class="flex flex-col sm:flex-row items-start pl-1">
-                                        <!-- Main Menu List -->
-                                        <div
-                                            class="relative w-48 bg-white dark:bg-coolgray-100 rounded-md shadow-lg py-1 border border-neutral-200 dark:border-coolgray-200">
-                                            @if ($resType === 'application')
-                                                <div @mouseenter="openMenu('{{ $resKey }}-config'); menuPositions['{{ $resKey }}-config'] = $el.offsetTop - ($el.closest('.overflow-y-auto')?.scrollTop || 0)"
-                                                    @mouseleave="closeMenu()">
-                                                    <a href="{{ route('project.application.configuration', $resParams) }}" {{ wireNavigate() }}
-                                                        class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                                        <span>Configuration</span>
-                                                        <svg class="w-3 h-3 shrink-0" fill="none"
-                                                            stroke="currentColor" viewBox="0 0 24 24">
-                                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                                stroke-width="4" d="M9 5l7 7-7 7"></path>
-                                                        </svg>
-                                                    </a>
-                                                </div>
-                                                <a href="{{ route('project.application.deployment.index', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Deployments</a>
-                                                <a href="{{ route('project.application.logs', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Logs</a>
-                                                @can('canAccessTerminal')
-                                                    <a href="{{ route('project.application.command', $resParams) }}"
-                                                        class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Terminal</a>
-                                                @endcan
-                                            @elseif ($resType === 'service')
-                                                <div @mouseenter="openMenu('{{ $resKey }}-config'); menuPositions['{{ $resKey }}-config'] = $el.offsetTop - ($el.closest('.overflow-y-auto')?.scrollTop || 0)"
-                                                    @mouseleave="closeMenu()">
-                                                    <a href="{{ route('project.service.configuration', $resParams) }}" {{ wireNavigate() }}
-                                                        class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                                        <span>Configuration</span>
-                                                        <svg class="w-3 h-3 shrink-0" fill="none"
-                                                            stroke="currentColor" viewBox="0 0 24 24">
-                                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                                stroke-width="4" d="M9 5l7 7-7 7"></path>
-                                                        </svg>
-                                                    </a>
-                                                </div>
-                                                <a href="{{ route('project.service.logs', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Logs</a>
-                                                @can('canAccessTerminal')
-                                                    <a href="{{ route('project.service.command', $resParams) }}"
-                                                        class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Terminal</a>
-                                                @endcan
-                                            @else
-                                                <div @mouseenter="openMenu('{{ $resKey }}-config'); menuPositions['{{ $resKey }}-config'] = $el.offsetTop - ($el.closest('.overflow-y-auto')?.scrollTop || 0)"
-                                                    @mouseleave="closeMenu()">
-                                                    <a href="{{ route('project.database.configuration', $resParams) }}" {{ wireNavigate() }}
-                                                        class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                                        <span>Configuration</span>
-                                                        <svg class="w-3 h-3 shrink-0" fill="none"
-                                                            stroke="currentColor" viewBox="0 0 24 24">
-                                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                                stroke-width="4" d="M9 5l7 7-7 7"></path>
-                                                        </svg>
-                                                    </a>
-                                                </div>
-                                                <a href="{{ route('project.database.logs', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Logs</a>
-                                                @can('canAccessTerminal')
-                                                    <a href="{{ route('project.database.command', $resParams) }}"
-                                                        class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Terminal</a>
-                                                @endcan
-                                                @if (
-                                                    $res->getMorphClass() === 'App\Models\StandalonePostgresql' ||
-                                                        $res->getMorphClass() === 'App\Models\StandaloneMongodb' ||
-                                                        $res->getMorphClass() === 'App\Models\StandaloneMysql' ||
-                                                        $res->getMorphClass() === 'App\Models\StandaloneMariadb')
-                                                    <a href="{{ route('project.database.backup.index', $resParams) }}" {{ wireNavigate() }}
-                                                        class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Backups</a>
-                                                @endif
-                                            @endif
-                                        </div>
-
-                                        <!-- Configuration Sub-menu (4th level) -->
-                                        <div x-show="activeMenuEnv === '{{ $resKey }}-config'" x-cloak
-                                            x-transition:enter="transition ease-out duration-150"
-                                            x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
-                                            @mouseenter="openMenu('{{ $resKey }}-config')"
-                                            @mouseleave="closeMenu()"
-                                            :style="'position: absolute; left: 100%; top: ' + (menuPositions['{{ $resKey }}-config'] || 0) + 'px; z-index: 50;'"
-                                            class="pl-1">
-                                        <div class="w-52 bg-white dark:bg-coolgray-100 rounded-md shadow-lg py-1 border border-neutral-200 dark:border-coolgray-200 max-h-96 overflow-y-auto scrollbar">
-                                            @if ($resType === 'application')
-                                                <a href="{{ route('project.application.configuration', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">General</a>
-                                                <a href="{{ route('project.application.environment-variables', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Environment
-                                                    Variables</a>
-                                                <a href="{{ route('project.application.persistent-storage', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Persistent
-                                                    Storage</a>
-                                                <a href="{{ route('project.application.source', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Source</a>
-                                                <a href="{{ route('project.application.servers', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Servers</a>
-                                                <a href="{{ route('project.application.scheduled-tasks.show', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Scheduled
-                                                    Tasks</a>
-                                                <a href="{{ route('project.application.webhooks', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Webhooks</a>
-                                                <a href="{{ route('project.application.preview-deployments', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Preview
-                                                    Deployments</a>
-                                                <a href="{{ route('project.application.healthcheck', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Healthcheck</a>
-                                                <a href="{{ route('project.application.rollback', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Rollback</a>
-                                                <a href="{{ route('project.application.resource-limits', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Resource
-                                                    Limits</a>
-                                                <a href="{{ route('project.application.resource-operations', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Resource
-                                                    Operations</a>
-                                                <a href="{{ route('project.application.metrics', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Metrics</a>
-                                                <a href="{{ route('project.application.tags', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Tags</a>
-                                                <a href="{{ route('project.application.advanced', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Advanced</a>
-                                                <a href="{{ route('project.application.danger', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200 text-red-500">Danger
-                                                    Zone</a>
-                                            @elseif ($resType === 'service')
-                                                <a href="{{ route('project.service.configuration', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">General</a>
-                                                <a href="{{ route('project.service.environment-variables', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Environment
-                                                    Variables</a>
-                                                <a href="{{ route('project.service.storages', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Storages</a>
-                                                <a href="{{ route('project.service.scheduled-tasks.show', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Scheduled
-                                                    Tasks</a>
-                                                <a href="{{ route('project.service.webhooks', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Webhooks</a>
-                                                <a href="{{ route('project.service.resource-operations', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Resource
-                                                    Operations</a>
-                                                <a href="{{ route('project.service.tags', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Tags</a>
-                                                <a href="{{ route('project.service.danger', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200 text-red-500">Danger
-                                                    Zone</a>
-                                            @else
-                                                <a href="{{ route('project.database.configuration', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">General</a>
-                                                <a href="{{ route('project.database.environment-variables', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Environment
-                                                    Variables</a>
-                                                <a href="{{ route('project.database.servers', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Servers</a>
-                                                <a href="{{ route('project.database.persistent-storage', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Persistent
-                                                    Storage</a>
-                                                <a href="{{ route('project.database.webhooks', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Webhooks</a>
-                                                <a href="{{ route('project.database.resource-limits', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Resource
-                                                    Limits</a>
-                                                <a href="{{ route('project.database.resource-operations', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Resource
-                                                    Operations</a>
-                                                <a href="{{ route('project.database.metrics', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Metrics</a>
-                                                <a href="{{ route('project.database.tags', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Tags</a>
-                                                <a href="{{ route('project.database.danger', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200 text-red-500">Danger
-                                                    Zone</a>
-                                            @endif
-                                        </div>
-                                        </div>
-                                    </div>
-                                @endforeach
                             </div>
                         @endif
                     @endforeach
@@ -405,7 +210,8 @@
             $isApplication = $resourceType === 'App\Models\Application';
             $isService = $resourceType === 'App\Models\Service';
             $isDatabase = str_contains($resourceType, 'Database') || str_contains($resourceType, 'Standalone');
-            $hasMultipleServers = $isApplication && method_exists($resource, 'additional_servers') && $resource->additional_servers()->count() > 0;
+            $hasMultipleServers = $isApplication && method_exists($resource, 'additional_servers') &&
+                ($resource->relationLoaded('additional_servers') ? $resource->additional_servers->count() > 0 : ($resource->additional_servers_count ?? 0) > 0);
             $serverName = $hasMultipleServers ? null : data_get($resource, 'destination.server.name');
             $routeParams = [
                 'project_uuid' => $currentProjectUuid,
@@ -419,221 +225,16 @@
                 $routeParams['database_uuid'] = $resourceUuid;
             }
         @endphp
-        <li class="inline-flex items-center" x-data="{ resourceOpen: false, activeMenu: null, menuPosition: 0, closeTimeout: null, menuTimeout: null, toggle() { this.resourceOpen = !this.resourceOpen; if (!this.resourceOpen) { this.activeMenu = null; } }, open() { clearTimeout(this.closeTimeout); this.resourceOpen = true }, close() { this.closeTimeout = setTimeout(() => { this.resourceOpen = false; this.activeMenu = null; }, 100) }, openMenu(id) { clearTimeout(this.closeTimeout); clearTimeout(this.menuTimeout); this.activeMenu = id }, closeMenu() { this.menuTimeout = setTimeout(() => { this.activeMenu = null; }, 100) } }">
-            <div class="flex items-center relative" @mouseenter="open()"
-                @mouseleave="close()">
-                <a class="text-xs truncate lg:text-sm hover:text-warning" {{ wireNavigate() }}
-                    href="{{ $isApplication
-                        ? route('project.application.configuration', $routeParams)
-                        : ($isService
-                            ? route('project.service.configuration', $routeParams)
-                            : route('project.database.configuration', $routeParams)) }}"
-                    title="{{ data_get($resource, 'name') }}{{ $serverName ? ' ('.$serverName.')' : '' }}">
-                    {{ data_get($resource, 'name') }}@if($serverName) <span class="text-xs text-neutral-400">({{ $serverName }})</span>@endif
-                </a>
-                <button type="button" @click.stop="toggle()" class="px-1 text-warning">
-                    <svg class="w-3 h-3 transition-transform" :class="{ 'rotate-down': resourceOpen }" fill="none"
-                        stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M9 5l7 7-7 7">
-                        </path>
-                    </svg>
-                </button>
-
-                <!-- Resource Dropdown Container -->
-                <div x-show="resourceOpen" @click.outside="close()" x-transition:enter="transition ease-out duration-200"
-                    x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
-                    x-transition:leave="transition ease-in duration-75"
-                    x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
-                    class="absolute z-20 top-full mt-1 left-0 sm:left-auto max-w-[calc(100vw-1rem)]" x-init="$nextTick(() => { const rect = $el.getBoundingClientRect(); if (rect.right > window.innerWidth) { $el.style.left = 'auto'; $el.style.right = '0'; } })">
-                    <!-- Main Menu List -->
-                    <div
-                        class="relative w-48 bg-white dark:bg-coolgray-100 rounded-md shadow-lg py-1 border border-neutral-200 dark:border-coolgray-200">
-                        @if ($isApplication)
-                            <!-- Application Main Menus -->
-                            <div @mouseenter="openMenu('config'); menuPosition = $el.offsetTop" @mouseleave="closeMenu()">
-                                <a href="{{ route('project.application.configuration', $routeParams) }}" {{ wireNavigate() }}
-                                    class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                    <span>Configuration</span>
-                                    <svg class="w-3 h-3 shrink-0" fill="none" stroke="currentColor"
-                                        viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
-                                            d="M9 5l7 7-7 7"></path>
-                                    </svg>
-                                </a>
-                            </div>
-                            <a href="{{ route('project.application.deployment.index', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                Deployments
-                            </a>
-                            <a href="{{ route('project.application.logs', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                Logs
-                            </a>
-                            @can('canAccessTerminal')
-                                <a href="{{ route('project.application.command', $routeParams) }}"
-                                    class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                    Terminal
-                                </a>
-                            @endcan
-                        @elseif ($isService)
-                            <!-- Service Main Menus -->
-                            <div @mouseenter="openMenu('config'); menuPosition = $el.offsetTop" @mouseleave="closeMenu()">
-                                <a href="{{ route('project.service.configuration', $routeParams) }}" {{ wireNavigate() }}
-                                    class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                    <span>Configuration</span>
-                                    <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor"
-                                        viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M9 5l7 7-7 7"></path>
-                                    </svg>
-                                </a>
-                            </div>
-                            <a href="{{ route('project.service.logs', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                Logs
-                            </a>
-                            @can('canAccessTerminal')
-                                <a href="{{ route('project.service.command', $routeParams) }}"
-                                    class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                    Terminal
-                                </a>
-                            @endcan
-                        @else
-                            <!-- Database Main Menus -->
-                            <div @mouseenter="openMenu('config'); menuPosition = $el.offsetTop" @mouseleave="closeMenu()">
-                                <a href="{{ route('project.database.configuration', $routeParams) }}" {{ wireNavigate() }}
-                                    class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                    <span>Configuration</span>
-                                    <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor"
-                                        viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M9 5l7 7-7 7"></path>
-                                    </svg>
-                                </a>
-                            </div>
-                            <a href="{{ route('project.database.logs', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                Logs
-                            </a>
-                            @can('canAccessTerminal')
-                                <a href="{{ route('project.database.command', $routeParams) }}"
-                                    class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                    Terminal
-                                </a>
-                            @endcan
-                            @if (
-                                $resourceType === 'App\Models\StandalonePostgresql' ||
-                                    $resourceType === 'App\Models\StandaloneMongodb' ||
-                                    $resourceType === 'App\Models\StandaloneMysql' ||
-                                    $resourceType === 'App\Models\StandaloneMariadb')
-                                <a href="{{ route('project.database.backup.index', $routeParams) }}" {{ wireNavigate() }}
-                                    class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                    Backups
-                                </a>
-                            @endif
-                        @endif
-                    </div>
-
-                    <!-- Configuration Sub-menu -->
-                    <div x-show="activeMenu === 'config'" x-cloak x-transition:enter="transition ease-out duration-150"
-                        x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
-                        @mouseenter="openMenu('config')"
-                        @mouseleave="closeMenu()"
-                        :style="'position: absolute; left: 100%; top: ' + menuPosition + 'px; z-index: 50;'"
-                        class="pl-1">
-                        <div class="w-52 bg-white dark:bg-coolgray-100 rounded-md shadow-lg py-1 border border-neutral-200 dark:border-coolgray-200 max-h-96 overflow-y-auto scrollbar">
-                        @if ($isApplication)
-                            <a href="{{ route('project.application.configuration', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">General</a>
-                            <a href="{{ route('project.application.environment-variables', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Environment
-                                Variables</a>
-                            <a href="{{ route('project.application.persistent-storage', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Persistent
-                                Storage</a>
-                            <a href="{{ route('project.application.source', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Source</a>
-                            <a href="{{ route('project.application.servers', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Servers</a>
-                            <a href="{{ route('project.application.scheduled-tasks.show', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Scheduled
-                                Tasks</a>
-                            <a href="{{ route('project.application.webhooks', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Webhooks</a>
-                            <a href="{{ route('project.application.preview-deployments', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Preview
-                                Deployments</a>
-                            <a href="{{ route('project.application.healthcheck', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Healthcheck</a>
-                            <a href="{{ route('project.application.rollback', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Rollback</a>
-                            <a href="{{ route('project.application.resource-limits', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Resource
-                                Limits</a>
-                            <a href="{{ route('project.application.resource-operations', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Resource
-                                Operations</a>
-                            <a href="{{ route('project.application.metrics', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Metrics</a>
-                            <a href="{{ route('project.application.tags', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Tags</a>
-                            <a href="{{ route('project.application.advanced', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Advanced</a>
-                            <a href="{{ route('project.application.danger', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200 text-red-500">Danger
-                                Zone</a>
-                        @elseif ($isService)
-                            <a href="{{ route('project.service.configuration', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">General</a>
-                            <a href="{{ route('project.service.environment-variables', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Environment
-                                Variables</a>
-                            <a href="{{ route('project.service.storages', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Storages</a>
-                            <a href="{{ route('project.service.scheduled-tasks.show', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Scheduled
-                                Tasks</a>
-                            <a href="{{ route('project.service.webhooks', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Webhooks</a>
-                            <a href="{{ route('project.service.resource-operations', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Resource
-                                Operations</a>
-                            <a href="{{ route('project.service.tags', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Tags</a>
-                            <a href="{{ route('project.service.danger', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200 text-red-500">Danger
-                                Zone</a>
-                        @else
-                            <a href="{{ route('project.database.configuration', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">General</a>
-                            <a href="{{ route('project.database.environment-variables', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Environment
-                                Variables</a>
-                            <a href="{{ route('project.database.servers', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Servers</a>
-                            <a href="{{ route('project.database.persistent-storage', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Persistent
-                                Storage</a>
-                            <a href="{{ route('project.database.webhooks', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Webhooks</a>
-                            <a href="{{ route('project.database.resource-limits', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Resource
-                                Limits</a>
-                            <a href="{{ route('project.database.resource-operations', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Resource
-                                Operations</a>
-                            <a href="{{ route('project.database.metrics', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Metrics</a>
-                            <a href="{{ route('project.database.tags', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Tags</a>
-                            <a href="{{ route('project.database.danger', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200 text-red-500">Danger
-                                Zone</a>
-                        @endif
-                        </div>
-                    </div>
-                </div>
-            </div>
+        <li class="inline-flex items-center mr-2">
+            <a class="text-xs truncate lg:text-sm hover:text-warning" {{ wireNavigate() }}
+                href="{{ $isApplication
+                    ? route('project.application.configuration', $routeParams)
+                    : ($isService
+                        ? route('project.service.configuration', $routeParams)
+                        : route('project.database.configuration', $routeParams)) }}"
+                title="{{ data_get($resource, 'name') }}{{ $serverName ? ' ('.$serverName.')' : '' }}">
+                {{ data_get($resource, 'name') }}@if($serverName) <span class="text-xs text-neutral-400">({{ $serverName }})</span>@endif
+            </a>
         </li>
 
         <!-- Current Section Status -->

resources/views/components/settings/navbar.blade.php

@@ -19,6 +19,10 @@
                 href="{{ route('settings.oauth') }}">
                 OAuth
             </a>
+            <a class="{{ request()->routeIs('settings.scheduled-jobs') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
+                href="{{ route('settings.scheduled-jobs') }}">
+                Scheduled Jobs
+            </a>
             <div class="flex-1"></div>
         </nav>
     </div>

resources/views/emails/server-force-disabled.blade.php

@@ -1,5 +1,5 @@
 <x-emails.layout>
     Your server ({{ $name }}) disabled because it is not paid! All automations and integrations are stopped.
 
-    Please update your subscription to enable the server again [here](https://app.coolify.io/subscriptions).
+    Please update your subscription to enable the server again [here](https://app.coolify.io/subscription).
 </x-emails.layout>

resources/views/errors/419.blade.php

@@ -3,15 +3,19 @@
     <div>
         <p class="font-mono font-semibold text-7xl dark:text-warning">419</p>
         <h1 class="mt-4 font-bold tracking-tight dark:text-white">This page is definitely old, not like you!</h1>
-        <p class="text-base leading-7 dark:text-neutral-300 text-black">Sorry, we couldn't find the page you're looking
-            for.
+        <p class="text-base leading-7 dark:text-neutral-300 text-black">Your session has expired. Please log in again to continue.
         </p>
-        <div class="flex items-center mt-10 gap-x-2">
-            <a href="{{ url()->previous() }}">
-                <x-forms.button>Go back</x-forms.button>
-            </a>
-            <a href="{{ route('dashboard') }}" {{ wireNavigate() }}>
-                <x-forms.button>Dashboard</x-forms.button>
+        <details class="mt-6 text-sm dark:text-neutral-400 text-neutral-600">
+            <summary class="cursor-pointer hover:dark:text-neutral-200 hover:text-neutral-800">Using a reverse proxy or Cloudflare Tunnel?</summary>
+            <ul class="mt-2 ml-4 list-disc space-y-1">
+                <li>Set your domain in <strong>Settings &rarr; FQDN</strong> to match the URL you use to access Coolify.</li>
+                <li>Cloudflare users: disable <strong>Browser Integrity Check</strong> and <strong>Under Attack Mode</strong> for your Coolify domain, as these can interrupt login sessions.</li>
+                <li>If you can still access Coolify via <code>localhost</code>, log in there first to configure your FQDN.</li>
+            </ul>
+        </details>
+        <div class="flex items-center mt-6 gap-x-2">
+            <a href="/login">
+                <x-forms.button>Back to Login</x-forms.button>
             </a>
             <a target="_blank" class="text-xs" href="{{ config('constants.urls.contact') }}">Contact
                 support

resources/views/invitation/accept.blade.php

@@ -0,0 +1,43 @@
+<x-layout-simple>
+    <section class="bg-gray-50 dark:bg-base">
+        <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
+            <div class="w-full max-w-md space-y-8">
+                <div class="text-center space-y-2">
+                    <h1 class="!text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white">
+                        Coolify
+                    </h1>
+                </div>
+
+                <div class="space-y-6">
+                    <div class="p-6 rounded-lg border border-neutral-500/20 bg-white/5">
+                        <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">Team Invitation</h2>
+
+                        <p class="text-sm text-gray-600 dark:text-neutral-400 mb-2">
+                            You have been invited to join:
+                        </p>
+                        <p class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+                            {{ $team->name }}
+                        </p>
+
+                        <p class="text-sm text-gray-600 dark:text-neutral-400 mb-1">
+                            Role: <span class="font-medium text-gray-900 dark:text-white">{{ ucfirst($invitation->role) }}</span>
+                        </p>
+
+                        @if ($alreadyMember)
+                            <div class="mt-4 p-3 bg-warning/10 border border-warning rounded-lg">
+                                <p class="text-sm text-warning">You are already a member of this team.</p>
+                            </div>
+                        @endif
+
+                        <form method="POST" action="{{ route('team.invitation.accept', $invitation->uuid) }}" class="mt-6">
+                            @csrf
+                            <x-forms.button class="w-full justify-center py-3 box-boarding" type="submit" isHighlighted>
+                                {{ $alreadyMember ? 'Dismiss Invitation' : 'Accept Invitation' }}
+                            </x-forms.button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</x-layout-simple>

resources/views/layouts/base.blade.php

@@ -203,30 +203,6 @@
         let checkHealthInterval = null;
         let checkIfIamDeadInterval = null;
 
-        function changePasswordFieldType(event) {
-            let element = event.target
-            for (let i = 0; i < 10; i++) {
-                if (element.className === "relative") {
-                    break;
-                }
-                element = element.parentElement;
-            }
-            element = element.children[1];
-            if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
-                if (element.type === 'password') {
-                    element.type = 'text';
-                    if (element.disabled) return;
-                    element.classList.add('truncate');
-                    this.type = 'text';
-                } else {
-                    element.type = 'password';
-                    if (element.disabled) return;
-                    element.classList.remove('truncate');
-                    this.type = 'password';
-                }
-            }
-        }
-
         function copyToClipboard(text) {
             navigator?.clipboard?.writeText(text) && window.Livewire.dispatch('success', 'Copied to clipboard.');
         }
@@ -326,4 +302,4 @@
 </body>
 @show
 
-</html>
+</html>

resources/views/livewire/activity-monitor.blade.php

@@ -34,10 +34,10 @@
             }
         }" x-init="// Initial scroll
         $nextTick(() => scrollToBottom());
-        
+
         // Add scroll event listener
         $el.addEventListener('scroll', () => handleScroll());
-        
+
         // Set up mutation observer to watch for content changes
         observer = new MutationObserver(() => {
             $nextTick(() => scrollToBottom());
@@ -52,7 +52,7 @@
                 'flex-1 min-h-0' => $fullHeight,
                 'max-h-96' => !$fullHeight,
             ])>
-            <pre class="font-mono whitespace-pre-wrap" @if ($isPollingActive) wire:poll.1000ms="polling" @endif>{{ RunRemoteProcess::decodeOutput($activity) }}</pre>
+            <pre class="font-logs whitespace-pre-wrap" @if ($isPollingActive) wire:poll.1000ms="polling" @endif>{{ RunRemoteProcess::decodeOutput($activity) }}</pre>
         </div>
     @else
         @if ($showWaiting)

resources/views/livewire/dashboard.blade.php

@@ -7,12 +7,6 @@
     @endif
     <h1>Dashboard</h1>
     <div class="subtitle">Your self-hosted infrastructure.</div>
-    @if (request()->query->get('success'))
-        <div class=" mb-10 font-bold alert alert-success">
-            Your subscription has been activated! Welcome onboard! It could take a few seconds before your
-            subscription is activated.<br> Please be patient.
-        </div>
-    @endif
 
     <section class="-mt-2">
         <div class="flex items-center gap-2 pb-2">

resources/views/livewire/global-search.blade.php

@@ -699,15 +699,21 @@
                                             class="search-result-item w-full text-left block px-4 py-3 hover:bg-warning-50 dark:hover:bg-warning-900/20 transition-colors focus:outline-none focus:bg-warning-100 dark:focus:bg-warning-900/30 border-transparent hover:border-warning-500 focus:border-warning-500">
                                             <div class="flex items-center justify-between gap-3">
                                                 <div class="flex items-center gap-3 flex-1 min-w-0">
-                                                    <div
-                                                        class="flex-shrink-0 w-10 h-10 rounded-lg bg-warning-100 dark:bg-warning-900/40 flex items-center justify-center">
-                                                        <svg xmlns="http://www.w3.org/2000/svg"
-                                                            class="h-5 w-5 text-warning-600 dark:text-warning-400" fill="none"
-                                                            viewBox="0 0 24 24" stroke="currentColor">
-                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                                d="M12 4v16m8-8H4" />
-                                                        </svg>
-                                                    </div>
+                                                    @if (! empty($item['logo']))
+                                                        <div class="flex-shrink-0 w-10 h-10 rounded-lg bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center overflow-hidden">
+                                                            <img src="{{ asset($item['logo']) }}" alt="{{ $item['name'] }}" class="w-7 h-7 object-contain">
+                                                        </div>
+                                                    @else
+                                                        <div
+                                                            class="flex-shrink-0 w-10 h-10 rounded-lg bg-warning-100 dark:bg-warning-900/40 flex items-center justify-center">
+                                                            <svg xmlns="http://www.w3.org/2000/svg"
+                                                                class="h-5 w-5 text-warning-600 dark:text-warning-400" fill="none"
+                                                                viewBox="0 0 24 24" stroke="currentColor">
+                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                                    d="M12 4v16m8-8H4" />
+                                                            </svg>
+                                                        </div>
+                                                    @endif
                                                     <div class="flex-1 min-w-0">
                                                         <div class="flex items-center gap-2 mb-1">
                                                             <div class="font-medium text-neutral-900 dark:text-white truncate">
@@ -808,15 +814,22 @@
                                                 class="search-result-item w-full text-left block px-4 py-3 hover:bg-warning-50 dark:hover:bg-warning-900/20 transition-colors focus:outline-none focus:bg-warning-100 dark:focus:bg-warning-900/30 border-transparent hover:border-warning-500 focus:border-warning-500">
                                                 <div class="flex items-center justify-between gap-3">
                                                     <div class="flex items-center gap-3 flex-1 min-w-0">
-                                                        <div
-                                                            class="flex-shrink-0 w-10 h-10 rounded-lg bg-warning-100 dark:bg-warning-900/40 flex items-center justify-center">
-                                                            <svg xmlns="http://www.w3.org/2000/svg"
-                                                                class="h-5 w-5 text-warning-600 dark:text-warning-400"
-                                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                                    stroke-width="2" d="M12 4v16m8-8H4" />
-                                                            </svg>
-                                                        </div>
+                                                        <template x-if="item.logo">
+                                                            <div class="flex-shrink-0 w-10 h-10 rounded-lg bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center overflow-hidden">
+                                                                <img :src="'/' + item.logo" :alt="item.name" class="w-7 h-7 object-contain">
+                                                            </div>
+                                                        </template>
+                                                        <template x-if="!item.logo">
+                                                            <div
+                                                                class="flex-shrink-0 w-10 h-10 rounded-lg bg-warning-100 dark:bg-warning-900/40 flex items-center justify-center">
+                                                                <svg xmlns="http://www.w3.org/2000/svg"
+                                                                    class="h-5 w-5 text-warning-600 dark:text-warning-400"
+                                                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                                                        stroke-width="2" d="M12 4v16m8-8H4" />
+                                                                </svg>
+                                                            </div>
+                                                        </template>
                                                         <div class="flex-1 min-w-0">
                                                             <div class="flex items-center gap-2 mb-1">
                                                                 <div class="font-medium text-neutral-900 dark:text-white truncate"

resources/views/livewire/layout-popups.blade.php

@@ -132,6 +132,33 @@
             </x-popup>
         </span>
     @endif
+    @if (request()->query->get('cancelled'))
+        <x-banner>
+            <div class="flex items-center gap-2">
+                <svg class="w-5 h-5 text-red-500 shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                    <path fill-rule="evenodd"
+                        d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+                        clip-rule="evenodd" />
+                </svg>
+                <span><span class="font-bold text-red-500">Subscription Error.</span> Something went wrong. Please try
+                    again or <a class="underline dark:text-white"
+                        href="{{ config('constants.urls.contact') }}" target="_blank">contact support</a>.</span>
+            </div>
+        </x-banner>
+    @endif
+    @if (request()->query->get('success'))
+        <x-banner>
+            <div class="flex items-center gap-2">
+                <svg class="w-5 h-5 text-green-500 shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                    <path fill-rule="evenodd"
+                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                        clip-rule="evenodd" />
+                </svg>
+                <span><span class="font-bold text-green-500">Welcome onboard!</span> Your subscription has been
+                    activated. It could take a few seconds before it's fully active.</span>
+            </div>
+        </x-banner>
+    @endif
     @if (currentTeam()->subscriptionPastOverDue())
         <x-banner :closable=false>
             <div><span class="font-bold text-red-500">WARNING:</span> Your subscription is in over-due. If your

resources/views/livewire/notifications/email.blade.php

@@ -72,7 +72,7 @@
                     <div class="flex flex-col gap-4">
                         <div class="flex flex-col w-full gap-2 xl:flex-row">
                             <x-forms.input canGate="update" :canResource="$settings" required id="smtpHost" placeholder="smtp.mailgun.org" label="Host" />
-                            <x-forms.input canGate="update" :canResource="$settings" required id="smtpPort" placeholder="587" label="Port" />
+                            <x-forms.input canGate="update" :canResource="$settings" required id="smtpPort" type="number" placeholder="587" label="Port" />
                             <x-forms.select canGate="update" :canResource="$settings" required id="smtpEncryption" label="Encryption">
                                 <option value="starttls">StartTLS</option>
                                 <option value="tls">TLS/SSL</option>
@@ -82,7 +82,7 @@
                         <div class="flex flex-col w-full gap-2 xl:flex-row">
                             <x-forms.input canGate="update" :canResource="$settings" id="smtpUsername" label="SMTP Username" />
                             <x-forms.input canGate="update" :canResource="$settings" id="smtpPassword" type="password" label="SMTP Password" />
-                            <x-forms.input canGate="update" :canResource="$settings" id="smtpTimeout" helper="Timeout value for sending emails."
+                            <x-forms.input canGate="update" :canResource="$settings" id="smtpTimeout" type="number"  helper="Timeout value for sending emails."
                                 label="Timeout" />
                         </div>
                     </div>

resources/views/livewire/project/application/configuration.blade.php

@@ -42,11 +42,11 @@
                     </span>
                 @endif
             </a>
-            <a class="sub-menu-item" {{ wireNavigate() }} wire:current.exact="menu-item-active"
+            <a @class(['sub-menu-item', 'menu-item-active' => str($currentRoute)->startsWith('project.application.scheduled-tasks')]) {{ wireNavigate() }}
                 href="{{ route('project.application.scheduled-tasks.show', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}"><span class="menu-item-label">Scheduled Tasks</span></a>
             <a class="sub-menu-item" {{ wireNavigate() }} wire:current.exact="menu-item-active"
                 href="{{ route('project.application.webhooks', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}"><span class="menu-item-label">Webhooks</span></a>
-            @if ($application->deploymentType() !== 'deploy_key')
+            @if ($application->git_based() || $application->build_pack === 'dockerimage')
                 <a class="sub-menu-item" {{ wireNavigate() }} wire:current.exact="menu-item-active"
                     href="{{ route('project.application.preview-deployments', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}"><span class="menu-item-label">Preview Deployments</span></a>
             @endif
@@ -84,6 +84,8 @@
                 <livewire:project.shared.destination :resource="$application" />
             @elseif ($currentRoute === 'project.application.scheduled-tasks.show')
                 <livewire:project.shared.scheduled-task.all :resource="$application" />
+            @elseif ($currentRoute === 'project.application.scheduled-tasks')
+                <livewire:project.shared.scheduled-task.show />
             @elseif ($currentRoute === 'project.application.webhooks')
                 <livewire:project.shared.webhooks :resource="$application" />
             @elseif ($currentRoute === 'project.application.preview-deployments')

resources/views/livewire/project/application/deployment/show.blade.php

@@ -330,7 +330,7 @@
                     <div id="logsContainer"
                         class="flex flex-col overflow-y-auto p-2 px-4 min-h-4 scrollbar"
                         :class="fullscreen ? 'flex-1' : 'max-h-[30rem]'">
-                        <div id="logs" class="flex flex-col font-mono">
+                        <div id="logs" class="flex flex-col font-logs">
                             <div x-show="searchQuery.trim() && matchCount === 0"
                                 class="text-gray-500 dark:text-gray-400 py-2">
                                 No matches found.
@@ -356,7 +356,7 @@
                                         ])>{{ $lineContent }}</span>
                                 </div>
                             @empty
-                                <span class="font-mono text-neutral-400 mb-2">No logs yet.</span>
+                                <span class="font-logs text-neutral-400 mb-2">No logs yet.</span>
                             @endforelse
                         </div>
                     </div>

resources/views/livewire/project/application/general.blade.php

@@ -49,7 +49,13 @@
                             !is_null($parsedServices) &&
                                 count($parsedServices) > 0 &&
                                 !$application->settings->is_raw_compose_deployment_enabled)
-                            <h3 class="pt-6">Domains</h3>
+                            @php
+                                $hasNonDatabaseService = collect(data_get($parsedServices, 'services', []))
+                                    ->contains(fn($service) => !isDatabaseImage(data_get($service, 'image')));
+                            @endphp
+                            @if ($hasNonDatabaseService)
+                                <h3 class="pt-6">Domains</h3>
+                            @endif
                             @foreach (data_get($parsedServices, 'services') as $serviceName => $service)
                                 @if (!isDatabaseImage(data_get($service, 'image')))
                                     <div class="flex items-end gap-2">
@@ -86,18 +92,20 @@
                         ]" />
                 @endcan
             @endif
-            <div class="w-96 pb-6">
-                @if ($application->could_set_build_commands())
-                    <x-forms.checkbox instantSave id="isStatic" label="Is it a static site?"
-                        helper="If your application is a static site or the final build assets should be served as a static site, enable this."
-                        x-bind:disabled="!canUpdate" />
-                @endif
-                @if ($isStatic && $buildPack !== 'static')
-                    <x-forms.checkbox label="Is it a SPA (Single Page Application)?"
-                        helper="If your application is a SPA, enable this." id="isSpa" instantSave
-                        x-bind:disabled="!canUpdate"></x-forms.checkbox>
-                @endif
-            </div>
+            @if ($application->could_set_build_commands() || ($isStatic && $buildPack !== 'static'))
+                <div class="w-96 pb-6">
+                    @if ($application->could_set_build_commands())
+                        <x-forms.checkbox instantSave id="isStatic" label="Is it a static site?"
+                            helper="If your application is a static site or the final build assets should be served as a static site, enable this."
+                            x-bind:disabled="!canUpdate" />
+                    @endif
+                    @if ($isStatic && $buildPack !== 'static')
+                        <x-forms.checkbox label="Is it a SPA (Single Page Application)?"
+                            helper="If your application is a SPA, enable this." id="isSpa" instantSave
+                            x-bind:disabled="!canUpdate"></x-forms.checkbox>
+                    @endif
+                </div>
+            @endif
             @if ($buildPack !== 'dockercompose')
                 <div class="flex items-end gap-2">
                     @if ($application->settings->is_container_label_readonly_enabled == false)
@@ -209,7 +217,7 @@
                     @endif
                 </div>
             @endif
-            <div>
+            <div class="pt-6">
                 <h3>Build</h3>
                 @if ($application->build_pack === 'dockerimage')
                     <x-forms.input
@@ -314,8 +322,8 @@
                             </div>
                         @else
                             <div x-data="{
-                                baseDir: '{{ $application->base_directory }}',
-                                dockerfileLocation: '{{ $application->dockerfile_location }}',
+                                baseDir: @entangle('baseDirectory'),
+                                dockerfileLocation: @entangle('dockerfileLocation'),
                                 normalizePath(path) {
                                     if (!path || path.trim() === '') return '/';
                                     path = path.trim();
@@ -332,11 +340,11 @@
                                     this.dockerfileLocation = this.normalizePath(this.dockerfileLocation);
                                 }
                             }" class="flex flex-col gap-2 xl:flex-row">
-                                <x-forms.input placeholder="/" wire:model.defer="baseDirectory"
+                                <x-forms.input placeholder="/"
                                     label="Base Directory" helper="Directory to use as root. Useful for monorepos."
                                     x-bind:disabled="!canUpdate" x-model="baseDir" @blur="normalizeBaseDir()" />
                                 @if ($buildPack === 'dockerfile' && !$application->dockerfile)
-                                    <x-forms.input placeholder="/Dockerfile" wire:model.defer="dockerfileLocation"
+                                    <x-forms.input placeholder="/Dockerfile"
                                         label="Dockerfile Location"
                                         helper="It is calculated together with the Base Directory:<br><span class='dark:text-warning'>{{ Str::start($application->base_directory . $application->dockerfile_location, '/') }}</span>"
                                         x-bind:disabled="!canUpdate" x-model="dockerfileLocation"
@@ -527,6 +535,7 @@
                     @endif
                 </div>
 
+                <h3 class="pt-8">Labels</h3>
                 @if ($application->settings->is_container_label_readonly_enabled)
                     <x-forms.textarea readonly disabled label="Container Labels" rows="15" id="customLabels"
                         monacoEditorLanguage="ini" useMonacoEditor x-bind:disabled="!canUpdate"></x-forms.textarea>

resources/views/livewire/project/application/previews.blade.php

@@ -68,6 +68,20 @@
             @endif
         </div>
     </div>
+    @if ($application->build_pack === 'dockerimage')
+        <div class="flex flex-col gap-2 pt-4">
+            <h3>Manual Preview Deployment</h3>
+            <form wire:submit.prevent="addDockerImagePreview" class="flex flex-col gap-2 xl:flex-row xl:items-end">
+                <x-forms.input id="manualPullRequestId" label="Pull Request Id"
+                    helper="Used as the preview identifier for naming, domains, logs, and cleanup." />
+                <x-forms.input id="manualDockerTag" label="Docker Tag"
+                    helper="The image tag to deploy for this preview, for example pr_1234." />
+                @can('deploy', $application)
+                    <x-forms.button type="submit">Deploy Preview</x-forms.button>
+                @endcan
+            </form>
+        </div>
+    @endif
     @if ($application->previews->count() > 0)
         <h3 class="py-4">Deployments</h3>
         <div class="flex flex-wrap w-full gap-4">
@@ -87,11 +101,13 @@
                                 <x-external-link />
                             </a>
                         @endif
-                        |
-                        <a target="_blank" href="{{ data_get($preview, 'pull_request_html_url') }}">Open
-                            PR on Git
-                            <x-external-link />
-                        </a>
+                        @if (filled(data_get($preview, 'pull_request_html_url')))
+                            |
+                            <a target="_blank" href="{{ data_get($preview, 'pull_request_html_url') }}">Open
+                                PR on Git
+                                <x-external-link />
+                            </a>
+                        @endif
                         @if (count($parameters) > 0)
                             |
                             <a {{ wireNavigate() }}
@@ -131,6 +147,10 @@
                         <form wire:submit="save_preview('{{ $preview->id }}')" class="flex items-end gap-2 pt-4">
                             <x-forms.input label="Domain" helper="One domain per preview."
                                 id="previewFqdns.{{ $previewName }}" canGate="update" :canResource="$application"></x-forms.input>
+                            @if ($application->build_pack === 'dockerimage')
+                                <x-forms.input label="Docker Tag" helper="The image tag used for this preview deployment."
+                                    id="previewDockerTags.{{ $previewName }}" canGate="update" :canResource="$application"></x-forms.input>
+                            @endif
                             @can('update', $application)
                                 <x-forms.button type="submit">Save</x-forms.button>
                                 <x-forms.button wire:click="generate_preview('{{ $preview->id }}')">Generate
@@ -157,7 +177,8 @@
                                 Force deploy (without
                                 cache)
                             </x-forms.button>
-                            <x-forms.button wire:click="deploy({{ data_get($preview, 'pull_request_id') }})">
+                            <x-forms.button
+                                wire:click="deploy({{ data_get($preview, 'pull_request_id') }}, null, false, '{{ data_get($preview, 'docker_registry_image_tag') }}')">
                                 @if (data_get($preview, 'status') === 'exited')
                                     <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-warning"
                                         viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"

resources/views/livewire/project/application/source.blade.php

@@ -28,7 +28,7 @@
         <div class="pb-4">Code source of your application.</div>
 
         <div class="flex flex-col gap-2">
-            @if (!$privateKeyId)
+            @if (blank($privateKeyId))
                 <div>Currently connected source: <span
                         class="font-bold text-warning">{{ data_get($application, 'source.name', 'No source connected') }}</span>
                 </div>
@@ -44,7 +44,7 @@
             </div>
         </div>
 
-        @if ($privateKeyId)
+        @if (filled($privateKeyId))
             <h3 class="pt-4">Deploy Key</h3>
             <div class="py-2 pt-4">Currently attached Private Key: <span
                     class="dark:text-warning">{{ $privateKeyName }}</span>

resources/views/livewire/project/database/backup-edit.blade.php

@@ -81,10 +81,10 @@
             @endif
         </div>
         <div class="flex gap-2">
-            <x-forms.input label="Frequency" id="frequency" />
+            <x-forms.input label="Frequency" id="frequency" required />
             <x-forms.input label="Timezone" id="timezone" disabled
-                helper="The timezone of the server where the backup is scheduled to run (if not set, the instance timezone will be used)" />
-            <x-forms.input label="Timeout" id="timeout" helper="The timeout of the backup job in seconds." />
+                helper="The timezone of the server where the backup is scheduled to run (if not set, the instance timezone will be used)" required />
+            <x-forms.input label="Timeout" id="timeout" type="number" min="60" helper="The timeout of the backup job in seconds." required />
         </div>
 
         <h3 class="mt-6 mb-2 text-lg font-medium">Backup Retention Settings</h3>
@@ -101,13 +101,13 @@
                 <div class="flex gap-2">
                     <x-forms.input label="Number of backups to keep" id="databaseBackupRetentionAmountLocally"
                         type="number" min="0"
-                        helper="Keeps only the specified number of most recent backups on the server. Set to 0 for unlimited backups." />
+                        helper="Keeps only the specified number of most recent backups on the server. Set to 0 for unlimited backups." required />
                     <x-forms.input label="Days to keep backups" id="databaseBackupRetentionDaysLocally" type="number"
                         min="0"
-                        helper="Automatically removes backups older than the specified number of days. Set to 0 for no time limit." />
+                        helper="Automatically removes backups older than the specified number of days. Set to 0 for no time limit." required />
                     <x-forms.input label="Maximum storage (GB)" id="databaseBackupRetentionMaxStorageLocally"
                         type="number" min="0"
-                        helper="When total size of all backups in the current backup job exceeds this limit in GB, the oldest backups will be removed. Decimal values are supported (e.g. 0.001 for 1MB). Set to 0 for unlimited storage." />
+                        helper="When total size of all backups in the current backup job exceeds this limit in GB, the oldest backups will be removed. Decimal values are supported (e.g. 0.001 for 1MB). Set to 0 for unlimited storage." required />
                 </div>
             </div>
 
@@ -117,13 +117,13 @@
                     <div class="flex gap-2">
                         <x-forms.input label="Number of backups to keep" id="databaseBackupRetentionAmountS3"
                             type="number" min="0"
-                            helper="Keeps only the specified number of most recent backups on S3 storage. Set to 0 for unlimited backups." />
+                            helper="Keeps only the specified number of most recent backups on S3 storage. Set to 0 for unlimited backups." required />
                         <x-forms.input label="Days to keep backups" id="databaseBackupRetentionDaysS3" type="number"
                             min="0"
-                            helper="Automatically removes S3 backups older than the specified number of days. Set to 0 for no time limit." />
+                            helper="Automatically removes S3 backups older than the specified number of days. Set to 0 for no time limit." required />
                         <x-forms.input label="Maximum storage (GB)" id="databaseBackupRetentionMaxStorageS3"
                             type="number" min="0"
-                            helper="When total size of all backups in the current backup job exceeds this limit in GB, the oldest backups will be removed. Decimal values are supported (e.g. 0.5 for 500MB). Set to 0 for unlimited storage." />
+                            helper="When total size of all backups in the current backup job exceeds this limit in GB, the oldest backups will be removed. Decimal values are supported (e.g. 0.5 for 500MB). Set to 0 for unlimited storage." required />
                     </div>
                 </div>
             @endif

resources/views/livewire/project/database/clickhouse/general.blade.php

@@ -76,8 +76,10 @@
                 <x-forms.checkbox instantSave id="isPublic" label="Make it publicly available" canGate="update"
                     :canResource="$database" />
             </div>
-            <x-forms.input placeholder="5432" disabled="{{ $isPublic }}" id="publicPort" label="Public Port"
+            <x-forms.input type="number" placeholder="5432" disabled="{{ $isPublic }}" id="publicPort" label="Public Port"
                 canGate="update" :canResource="$database" />
+            <x-forms.input type="number" placeholder="3600" disabled="{{ $isPublic }}" id="publicPortTimeout"
+                label="Proxy Timeout (seconds)" helper="Timeout for the public TCP proxy connection in seconds. Default: 3600 (1 hour)." canGate="update" :canResource="$database" />
         </div>
     </form>
     <h3 class="pt-4">Advanced</h3>

resources/views/livewire/project/database/dragonfly/general.blade.php

@@ -113,8 +113,10 @@
                 <x-forms.checkbox instantSave id="isPublic" label="Make it publicly available" canGate="update"
                     :canResource="$database" />
             </div>
-            <x-forms.input placeholder="5432" disabled="{{ $isPublic }}" id="publicPort" label="Public Port"
+            <x-forms.input type="number" placeholder="5432" disabled="{{ $isPublic }}" id="publicPort" label="Public Port"
                 canGate="update" :canResource="$database" />
+            <x-forms.input type="number" placeholder="3600" disabled="{{ $isPublic }}" id="publicPortTimeout"
+                label="Proxy Timeout (seconds)" helper="Timeout for the public TCP proxy connection in seconds. Default: 3600 (1 hour)." canGate="update" :canResource="$database" />
         </div>
     </form>
     <h3 class="pt-4">Advanced</h3>

resources/views/livewire/project/database/keydb/general.blade.php

@@ -113,8 +113,10 @@
                 <x-forms.checkbox instantSave id="isPublic" label="Make it publicly available" canGate="update"
                     :canResource="$database" />
             </div>
-            <x-forms.input placeholder="5432" disabled="{{ $isPublic }}" id="publicPort" label="Public Port"
+            <x-forms.input type="number" placeholder="5432" disabled="{{ $isPublic }}" id="publicPort" label="Public Port"
                 canGate="update" :canResource="$database" />
+            <x-forms.input type="number" placeholder="3600" disabled="{{ $isPublic }}" id="publicPortTimeout"
+                label="Proxy Timeout (seconds)" helper="Timeout for the public TCP proxy connection in seconds. Default: 3600 (1 hour)." canGate="update" :canResource="$database" />
         </div>
         <x-forms.textarea
             helper="<a target='_blank' class='underline dark:text-white' href='https://raw.githubusercontent.com/Snapchat/KeyDB/unstable/keydb.conf'>KeyDB Default Configuration</a>"

resources/views/livewire/project/database/mariadb/general.blade.php

@@ -137,8 +137,10 @@
                 <x-forms.checkbox instantSave id="isPublic" label="Make it publicly available"
                     canGate="update" :canResource="$database" />
             </div>
-            <x-forms.input placeholder="5432" disabled="{{ $isPublic }}"
+            <x-forms.input type="number" placeholder="5432" disabled="{{ $isPublic }}"
                 id="publicPort" label="Public Port" canGate="update" :canResource="$database" />
+            <x-forms.input type="number" placeholder="3600" disabled="{{ $isPublic }}" id="publicPortTimeout"
+                label="Proxy Timeout (seconds)" helper="Timeout for the public TCP proxy connection in seconds. Default: 3600 (1 hour)." canGate="update" :canResource="$database" />
         </div>
         <x-forms.textarea label="Custom MariaDB Configuration" rows="10" id="mariadbConf"
             canGate="update" :canResource="$database" />

resources/views/livewire/project/database/mongodb/general.blade.php

@@ -151,8 +151,10 @@
                     <x-forms.checkbox instantSave id="isPublic" label="Make it publicly available"
                         canGate="update" :canResource="$database" />
                 </div>
-                <x-forms.input placeholder="5432" disabled="{{ $isPublic }}"
+                <x-forms.input type="number" placeholder="5432" disabled="{{ $isPublic }}"
                     id="publicPort" label="Public Port" canGate="update" :canResource="$database" />
+                <x-forms.input type="number" placeholder="3600" disabled="{{ $isPublic }}" id="publicPortTimeout"
+                    label="Proxy Timeout (seconds)" helper="Timeout for the public TCP proxy connection in seconds. Default: 3600 (1 hour)." canGate="update" :canResource="$database" />
             </div>
             <x-forms.textarea label="Custom MongoDB Configuration" rows="10" id="mongoConf"
                 canGate="update" :canResource="$database" />

resources/views/livewire/project/database/mysql/general.blade.php

@@ -153,8 +153,10 @@
                 </div>
                 <x-forms.checkbox instantSave id="isPublic" label="Make it publicly available" canGate="update" :canResource="$database" />
             </div>
-            <x-forms.input placeholder="5432" disabled="{{ $isPublic }}"
+            <x-forms.input type="number" placeholder="5432" disabled="{{ $isPublic }}"
                 id="publicPort" label="Public Port" canGate="update" :canResource="$database" />
+            <x-forms.input type="number" placeholder="3600" disabled="{{ $isPublic }}" id="publicPortTimeout"
+                label="Proxy Timeout (seconds)" helper="Timeout for the public TCP proxy connection in seconds. Default: 3600 (1 hour)." canGate="update" :canResource="$database" />
         </div>
         <x-forms.textarea label="Custom Mysql Configuration" rows="10" id="mysqlConf" canGate="update" :canResource="$database" />
         <h3 class="pt-4">Advanced</h3>

resources/views/livewire/project/database/postgresql/general.blade.php

@@ -163,8 +163,10 @@
                         <x-forms.checkbox instantSave id="isPublic" label="Make it publicly available"
                             canGate="update" :canResource="$database" />
                     </div>
-                    <x-forms.input placeholder="5432" disabled="{{ $isPublic }}" id="publicPort"
+                    <x-forms.input type="number" placeholder="5432" disabled="{{ $isPublic }}" id="publicPort"
                         label="Public Port" canGate="update" :canResource="$database" />
+                    <x-forms.input type="number" placeholder="3600" disabled="{{ $isPublic }}" id="publicPortTimeout"
+                        label="Proxy Timeout (seconds)" helper="Timeout for the public TCP proxy connection in seconds. Default: 3600 (1 hour)." canGate="update" :canResource="$database" />
                 </div>
 
                 <div class="flex flex-col gap-2">

resources/views/livewire/project/database/redis/general.blade.php

@@ -132,8 +132,10 @@
                 <x-forms.checkbox instantSave id="isPublic" label="Make it publicly available"
                     canGate="update" :canResource="$database" />
             </div>
-            <x-forms.input placeholder="5432" disabled="{{ $isPublic }}"
+            <x-forms.input type="number" placeholder="5432" disabled="{{ $isPublic }}"
                 id="publicPort" label="Public Port" canGate="update" :canResource="$database" />
+            <x-forms.input type="number" placeholder="3600" disabled="{{ $isPublic }}" id="publicPortTimeout"
+                label="Proxy Timeout (seconds)" helper="Timeout for the public TCP proxy connection in seconds. Default: 3600 (1 hour)." canGate="update" :canResource="$database" />
         </div>
         <x-forms.textarea placeholder="# maxmemory 256mb
 # maxmemory-policy allkeys-lru

resources/views/livewire/project/index.blade.php

@@ -14,7 +14,7 @@
     <div class="grid grid-cols-1 gap-4 xl:grid-cols-2 -mt-1">
         @foreach ($projects as $project)
             <div class="relative gap-2 cursor-pointer coolbox group">
-                <a href="{{ $project->navigateTo() }}" class="absolute inset-0"></a>
+                <a href="{{ $project->navigateTo() }}" {{ wireNavigate() }} class="absolute inset-0"></a>
                 <div class="flex flex-1 mx-6">
                     <div class="flex flex-col justify-center flex-1">
                         <div class="box-title">{{ $project->name }}</div>

resources/views/livewire/project/new/select.blade.php

@@ -448,14 +448,56 @@
             <h2>Select a Postgresql type</h2>
             <div>If you need extra extensions, you can select Supabase PostgreSQL (or others), otherwise select
                 PostgreSQL
-                17 (default).</div>
-            <div class="flex flex-col gap-6 pt-8">
+                18 (default).</div>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 pt-8">
+                <div class="gap-2 coolbox group flex relative"
+                    :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"
+                    x-on:click="!selecting && (selecting = true, $wire.setPostgresqlType('postgres:18-alpine'))"
+                    :disabled="selecting">
+                    <div class="flex flex-col">
+                        <div class="box-title">PostgreSQL 18 (default)</div>
+                        <div class="box-description">
+                            PostgreSQL is a powerful, open-source object-relational database system (no extensions).
+                        </div>
+                    </div>
+                    <a href="https://hub.docker.com/_/postgres/" target="_blank"
+                        @click.stop
+                        class="absolute top-2 right-2 p-1.5 rounded hover:bg-neutral-200 dark:hover:bg-coolgray-300 transition-colors"
+                        title="View documentation">
+                        <svg class="w-4 h-4 text-neutral-600 dark:text-neutral-400" fill="none"
+                            stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                        </svg>
+                    </a>
+                </div>
                 <div class="gap-2 coolbox group flex relative"
                     :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"
                     x-on:click="!selecting && (selecting = true, $wire.setPostgresqlType('postgres:17-alpine'))"
                     :disabled="selecting">
                     <div class="flex flex-col">
-                        <div class="box-title">PostgreSQL 17 (default)</div>
+                        <div class="box-title">PostgreSQL 17</div>
+                        <div class="box-description">
+                            PostgreSQL is a powerful, open-source object-relational database system (no extensions).
+                        </div>
+                    </div>
+                    <a href="https://hub.docker.com/_/postgres/" target="_blank"
+                        @click.stop
+                        class="absolute top-2 right-2 p-1.5 rounded hover:bg-neutral-200 dark:hover:bg-coolgray-300 transition-colors"
+                        title="View documentation">
+                        <svg class="w-4 h-4 text-neutral-600 dark:text-neutral-400" fill="none"
+                            stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                        </svg>
+                    </a>
+                </div>
+                <div class="gap-2 coolbox group flex relative"
+                    :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"
+                    x-on:click="!selecting && (selecting = true, $wire.setPostgresqlType('postgres:16-alpine'))"
+                    :disabled="selecting">
+                    <div class="flex flex-col">
+                        <div class="box-title">PostgreSQL 16</div>
                         <div class="box-description">
                             PostgreSQL is a powerful, open-source object-relational database system (no extensions).
                         </div>
@@ -513,6 +555,27 @@
                         </svg>
                     </a>
                 </div>
+                <div class="gap-2 coolbox group flex relative"
+                    :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"
+                    x-on:click="!selecting && (selecting = true, $wire.setPostgresqlType('pgvector/pgvector:pg18'))"
+                    :disabled="selecting">
+                    <div class="flex flex-col">
+                        <div class="box-title">PGVector (18)</div>
+                        <div class="box-description">
+                            PGVector is a PostgreSQL extension for vector data types.
+                        </div>
+                    </div>
+                    <a href="https://github.com/pgvector/pgvector" target="_blank"
+                        @click.stop
+                        class="absolute top-2 right-2 p-1.5 rounded hover:bg-neutral-200 dark:hover:bg-coolgray-300 transition-colors"
+                        title="View documentation">
+                        <svg class="w-4 h-4 text-neutral-600 dark:text-neutral-400" fill="none"
+                            stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                        </svg>
+                    </a>
+                </div>
                 <div class="gap-2 coolbox group flex relative"
                     :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"
                     x-on:click="!selecting && (selecting = true, $wire.setPostgresqlType('pgvector/pgvector:pg17'))"

resources/views/livewire/project/resource/index.blade.php

@@ -3,7 +3,7 @@
         {{ data_get_str($project, 'name')->limit(10) }} > Resources | Coolify
     </x-slot>
     <div class="flex flex-col">
-        <div class="flex items-center gap-2">
+        <div class="flex min-w-0 flex-nowrap items-center gap-1">
             <h1>Resources</h1>
             @if ($environment->isEmpty())
                 @can('createAnyResource')
@@ -29,9 +29,6 @@
                 <livewire:project.delete-environment :disabled="!$environment->isEmpty()" :environment_id="$environment->id" />
             @endcan
         </div>
-        @php
-            $projects = auth()->user()->currentTeam()->projects()->get();
-        @endphp
         <nav class="flex pt-2 pb-6">
             <ol class="flex items-center">
                 <li class="inline-flex items-center" x-data="{ projectOpen: false, toggle() { this.projectOpen = !this.projectOpen }, open() { this.projectOpen = true }, close() { this.projectOpen = false } }">
@@ -53,7 +50,7 @@
                             x-transition:leave="transition ease-in duration-75"
                             x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
                             class="absolute z-20 top-full mt-1 w-56 -ml-2 bg-white dark:bg-coolgray-100 rounded-md shadow-lg py-1 border border-neutral-200 dark:border-coolgray-200 max-h-96 overflow-y-auto scrollbar">
-                            @foreach ($projects as $proj)
+                            @foreach ($allProjects as $proj)
                                 <a href="{{ route('project.show', ['project_uuid' => $proj->uuid]) }}"
                                     class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200 {{ $proj->uuid === $project->uuid ? 'dark:text-warning font-semibold' : '' }}"
                                     title="{{ $proj->name }}">
@@ -63,42 +60,13 @@
                         </div>
                     </div>
                 </li>
-                @php
-                    $allEnvironments = $project
-                        ->environments()
-                        ->with(['applications', 'services'])
-                        ->get();
-                @endphp
-                <li class="inline-flex items-center" x-data="{ envOpen: false, activeEnv: null, envPositions: {}, activeRes: null, resPositions: {}, activeMenuEnv: null, menuPositions: {}, closeTimeout: null, envTimeout: null, resTimeout: null, menuTimeout: null, toggle() { this.envOpen = !this.envOpen; if (!this.envOpen) { this.activeEnv = null;
-                            this.activeRes = null;
-                            this.activeMenuEnv = null; } }, open() { clearTimeout(this.closeTimeout);
-                        this.envOpen = true }, close() { this.closeTimeout = setTimeout(() => { this.envOpen = false;
-                            this.activeEnv = null;
-                            this.activeRes = null;
-                            this.activeMenuEnv = null; }, 100) }, openEnv(id) { clearTimeout(this.closeTimeout);
-                        clearTimeout(this.envTimeout);
-                        this.activeEnv = id }, closeEnv() { this.envTimeout = setTimeout(() => { this.activeEnv = null;
-                            this.activeRes = null;
-                            this.activeMenuEnv = null; }, 100) }, openRes(id) { clearTimeout(this.envTimeout);
-                        clearTimeout(this.resTimeout);
-                        this.activeRes = id }, closeRes() { this.resTimeout = setTimeout(() => { this.activeRes = null;
-                            this.activeMenuEnv = null; }, 100) }, openMenu(id) { clearTimeout(this.resTimeout);
-                        clearTimeout(this.menuTimeout);
-                        this.activeMenuEnv = id }, closeMenu() { this.menuTimeout = setTimeout(() => { this.activeMenuEnv = null; }, 100) } }">
+                <li class="inline-flex items-center" x-data="{ envOpen: false, activeEnv: null, envPositions: {}, closeTimeout: null, envTimeout: null, toggle() { this.envOpen = !this.envOpen; if (!this.envOpen) { this.activeEnv = null; } }, open() { clearTimeout(this.closeTimeout); this.envOpen = true }, close() { this.closeTimeout = setTimeout(() => { this.envOpen = false; this.activeEnv = null; }, 100) }, openEnv(id) { clearTimeout(this.closeTimeout); clearTimeout(this.envTimeout); this.activeEnv = id }, closeEnv() { this.envTimeout = setTimeout(() => { this.activeEnv = null; }, 100) } }">
                     <div class="flex items-center relative" @mouseenter="open()" @mouseleave="close()">
                         <a class="text-xs truncate lg:text-sm hover:text-warning" {{ wireNavigate() }}
                             href="{{ route('project.resource.index', ['project_uuid' => data_get($parameters, 'project_uuid'), 'environment_uuid' => $environment->uuid]) }}">
                             {{ $environment->name }}
                         </a>
-                        <button type="button" @click.stop="toggle()" class="px-1 text-warning">
-                            <svg class="w-3 h-3 transition-transform" :class="{ 'rotate-90': envOpen }" fill="none"
-                                stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M9 5l7 7-7 7">
-                                </path>
-                            </svg>
-                        </button>
 
-                        <!-- Environment Dropdown Container -->
                         <div x-show="envOpen" @click.outside="close()"
                             x-transition:enter="transition ease-out duration-200"
                             x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
@@ -112,26 +80,25 @@
                                 class="relative w-48 bg-white dark:bg-coolgray-100 rounded-md shadow-lg py-1 border border-neutral-200 dark:border-coolgray-200 max-h-96 overflow-y-auto scrollbar">
                                 @foreach ($allEnvironments as $env)
                                     @php
+                                        $envDatabases = collect()
+                                            ->merge($env->postgresqls ?? collect())
+                                            ->merge($env->redis ?? collect())
+                                            ->merge($env->mongodbs ?? collect())
+                                            ->merge($env->mysqls ?? collect())
+                                            ->merge($env->mariadbs ?? collect())
+                                            ->merge($env->keydbs ?? collect())
+                                            ->merge($env->dragonflies ?? collect())
+                                            ->merge($env->clickhouses ?? collect());
                                         $envResources = collect()
-                                            ->merge(
-                                                $env->applications->map(
-                                                    fn($app) => ['type' => 'application', 'resource' => $app],
-                                                ),
-                                            )
-                                            ->merge(
-                                                $env
-                                                    ->databases()
-                                                    ->map(fn($db) => ['type' => 'database', 'resource' => $db]),
-                                            )
-                                            ->merge(
-                                                $env->services->map(
-                                                    fn($svc) => ['type' => 'service', 'resource' => $svc],
-                                                ),
-                                            );
+                                            ->merge($env->applications->map(fn($app) => ['type' => 'application', 'resource' => $app]))
+                                            ->merge($envDatabases->map(fn($db) => ['type' => 'database', 'resource' => $db]))
+                                            ->merge($env->services->map(fn($svc) => ['type' => 'service', 'resource' => $svc]))
+                                            ->sortBy(fn($item) => strtolower($item['resource']->name));
                                     @endphp
                                     <div @mouseenter="openEnv('{{ $env->uuid }}'); envPositions['{{ $env->uuid }}'] = $el.offsetTop - ($el.closest('.overflow-y-auto')?.scrollTop || 0)"
                                         @mouseleave="closeEnv()">
                                         <a href="{{ route('project.resource.index', ['project_uuid' => data_get($parameters, 'project_uuid'), 'environment_uuid' => $env->uuid]) }}"
+                                            {{ wireNavigate() }}
                                             class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200 {{ $env->uuid === $environment->uuid ? 'dark:text-warning font-semibold' : '' }}"
                                             title="{{ $env->name }}">
                                             <span class="truncate">{{ $env->name }}</span>
@@ -162,31 +129,29 @@
                             <!-- Resources Sub-dropdown (2nd level) -->
                             @foreach ($allEnvironments as $env)
                                 @php
+                                    $envDatabases = collect()
+                                        ->merge($env->postgresqls ?? collect())
+                                        ->merge($env->redis ?? collect())
+                                        ->merge($env->mongodbs ?? collect())
+                                        ->merge($env->mysqls ?? collect())
+                                        ->merge($env->mariadbs ?? collect())
+                                        ->merge($env->keydbs ?? collect())
+                                        ->merge($env->dragonflies ?? collect())
+                                        ->merge($env->clickhouses ?? collect());
                                     $envResources = collect()
-                                        ->merge(
-                                            $env->applications->map(
-                                                fn($app) => ['type' => 'application', 'resource' => $app],
-                                            ),
-                                        )
-                                        ->merge(
-                                            $env
-                                                ->databases()
-                                                ->map(fn($db) => ['type' => 'database', 'resource' => $db]),
-                                        )
-                                        ->merge(
-                                            $env->services->map(fn($svc) => ['type' => 'service', 'resource' => $svc]),
-                                        );
+                                        ->merge($env->applications->map(fn($app) => ['type' => 'application', 'resource' => $app]))
+                                        ->merge($envDatabases->map(fn($db) => ['type' => 'database', 'resource' => $db]))
+                                        ->merge($env->services->map(fn($svc) => ['type' => 'service', 'resource' => $svc]));
                                 @endphp
                                 @if ($envResources->count() > 0)
                                     <div x-show="activeEnv === '{{ $env->uuid }}'" x-cloak
                                         x-transition:enter="transition ease-out duration-150"
                                         x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
                                         @mouseenter="openEnv('{{ $env->uuid }}')" @mouseleave="closeEnv()"
-                                        :style="'position: absolute; left: 100%; top: ' + (envPositions[
-                                            '{{ $env->uuid }}'] || 0) + 'px; z-index: 30;'"
+                                        :style="'position: absolute; left: 100%; top: ' + (envPositions['{{ $env->uuid }}'] || 0) + 'px; z-index: 30;'"
                                         class="flex flex-col sm:flex-row items-start pl-1">
                                         <div
-                                            class="relative w-48 bg-white dark:bg-coolgray-100 rounded-md shadow-lg py-1 border border-neutral-200 dark:border-coolgray-200 max-h-96 overflow-y-auto scrollbar">
+                                            class="relative w-56 bg-white dark:bg-coolgray-100 rounded-md shadow-lg py-1 border border-neutral-200 dark:border-coolgray-200 max-h-96 overflow-y-auto scrollbar">
                                             @foreach ($envResources as $envResource)
                                                 @php
                                                     $resType = $envResource['type'];
@@ -208,240 +173,14 @@
                                                             'database_uuid' => $res->uuid,
                                                         ]),
                                                     };
-                                                    $resHasMultipleServers =
-                                                        $resType === 'application' &&
-                                                        method_exists($res, 'additional_servers') &&
-                                                        $res->additional_servers()->count() > 0;
-                                                    $resServerName = $resHasMultipleServers
-                                                        ? null
-                                                        : data_get($res, 'destination.server.name');
                                                 @endphp
-                                                <div @mouseenter="openRes('{{ $env->uuid }}-{{ $res->uuid }}'); resPositions['{{ $env->uuid }}-{{ $res->uuid }}'] = $el.offsetTop - ($el.closest('.overflow-y-auto')?.scrollTop || 0)"
-                                                    @mouseleave="closeRes()">
-                                                    <a href="{{ $resRoute }}"
-                                                        class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200"
-                                                        title="{{ $res->name }}{{ $resServerName ? ' (' . $resServerName . ')' : '' }}">
-                                                        <span class="truncate">{{ $res->name }}@if ($resServerName)
-                                                                <span
-                                                                    class="text-xs text-neutral-400">({{ $resServerName }})</span>
-                                                            @endif
-                                                        </span>
-                                                        <svg class="w-3 h-3 shrink-0" fill="none"
-                                                            stroke="currentColor" viewBox="0 0 24 24">
-                                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                                stroke-width="4" d="M9 5l7 7-7 7"></path>
-                                                        </svg>
-                                                    </a>
-                                                </div>
+                                                <a href="{{ $resRoute }}" {{ wireNavigate() }}
+                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200"
+                                                    title="{{ $res->name }}">
+                                                    {{ $res->name }}
+                                                </a>
                                             @endforeach
                                         </div>
-
-                                        <!-- Main Menu Sub-dropdown (3rd level) -->
-                                        @foreach ($envResources as $envResource)
-                                            @php
-                                                $resType = $envResource['type'];
-                                                $res = $envResource['resource'];
-                                                $resParams = [
-                                                    'project_uuid' => $project->uuid,
-                                                    'environment_uuid' => $env->uuid,
-                                                ];
-                                                if ($resType === 'application') {
-                                                    $resParams['application_uuid'] = $res->uuid;
-                                                } elseif ($resType === 'service') {
-                                                    $resParams['service_uuid'] = $res->uuid;
-                                                } else {
-                                                    $resParams['database_uuid'] = $res->uuid;
-                                                }
-                                                $resKey = $env->uuid . '-' . $res->uuid;
-                                            @endphp
-                                            <div x-show="activeRes === '{{ $resKey }}'" x-cloak
-                                                x-transition:enter="transition ease-out duration-150"
-                                                x-transition:enter-start="opacity-0"
-                                                x-transition:enter-end="opacity-100"
-                                                @mouseenter="openRes('{{ $resKey }}')" @mouseleave="closeRes()"
-                                                :style="'position: absolute; left: 100%; top: ' + (resPositions[
-                                                    '{{ $resKey }}'] || 0) + 'px; z-index: 40;'"
-                                                class="flex flex-col sm:flex-row items-start pl-1">
-                                                <!-- Main Menu List -->
-                                                <div
-                                                    class="relative w-48 bg-white dark:bg-coolgray-100 rounded-md shadow-lg py-1 border border-neutral-200 dark:border-coolgray-200">
-                                                    @if ($resType === 'application')
-                                                        <div @mouseenter="openMenu('{{ $resKey }}-config'); menuPositions['{{ $resKey }}-config'] = $el.offsetTop - ($el.closest('.overflow-y-auto')?.scrollTop || 0)"
-                                                            @mouseleave="closeMenu()">
-                                                            <a href="{{ route('project.application.configuration', $resParams) }}"
-                                                                class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                                                <span>Configuration</span>
-                                                                <svg class="w-3 h-3 shrink-0" fill="none"
-                                                                    stroke="currentColor" viewBox="0 0 24 24">
-                                                                    <path stroke-linecap="round"
-                                                                        stroke-linejoin="round" stroke-width="4"
-                                                                        d="M9 5l7 7-7 7"></path>
-                                                                </svg>
-                                                            </a>
-                                                        </div>
-                                                        <a href="{{ route('project.application.deployment.index', $resParams) }}"
-                                                            class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Deployments</a>
-                                                        <a href="{{ route('project.application.logs', $resParams) }}"
-                                                            class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Logs</a>
-                                                        @can('canAccessTerminal')
-                                                            <a href="{{ route('project.application.command', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Terminal</a>
-                                                        @endcan
-                                                    @elseif ($resType === 'service')
-                                                        <div @mouseenter="openMenu('{{ $resKey }}-config'); menuPositions['{{ $resKey }}-config'] = $el.offsetTop - ($el.closest('.overflow-y-auto')?.scrollTop || 0)"
-                                                            @mouseleave="closeMenu()">
-                                                            <a href="{{ route('project.service.configuration', $resParams) }}"
-                                                                class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                                                <span>Configuration</span>
-                                                                <svg class="w-3 h-3 shrink-0" fill="none"
-                                                                    stroke="currentColor" viewBox="0 0 24 24">
-                                                                    <path stroke-linecap="round"
-                                                                        stroke-linejoin="round" stroke-width="4"
-                                                                        d="M9 5l7 7-7 7"></path>
-                                                                </svg>
-                                                            </a>
-                                                        </div>
-                                                        <a href="{{ route('project.service.logs', $resParams) }}"
-                                                            class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Logs</a>
-                                                        @can('canAccessTerminal')
-                                                            <a href="{{ route('project.service.command', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Terminal</a>
-                                                        @endcan
-                                                    @else
-                                                        <div @mouseenter="openMenu('{{ $resKey }}-config'); menuPositions['{{ $resKey }}-config'] = $el.offsetTop - ($el.closest('.overflow-y-auto')?.scrollTop || 0)"
-                                                            @mouseleave="closeMenu()">
-                                                            <a href="{{ route('project.database.configuration', $resParams) }}"
-                                                                class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                                                <span>Configuration</span>
-                                                                <svg class="w-3 h-3 shrink-0" fill="none"
-                                                                    stroke="currentColor" viewBox="0 0 24 24">
-                                                                    <path stroke-linecap="round"
-                                                                        stroke-linejoin="round" stroke-width="4"
-                                                                        d="M9 5l7 7-7 7"></path>
-                                                                </svg>
-                                                            </a>
-                                                        </div>
-                                                        <a href="{{ route('project.database.logs', $resParams) }}"
-                                                            class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Logs</a>
-                                                        @can('canAccessTerminal')
-                                                            <a href="{{ route('project.database.command', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Terminal</a>
-                                                        @endcan
-                                                        @if (
-                                                            $res->getMorphClass() === 'App\Models\StandalonePostgresql' ||
-                                                                $res->getMorphClass() === 'App\Models\StandaloneMongodb' ||
-                                                                $res->getMorphClass() === 'App\Models\StandaloneMysql' ||
-                                                                $res->getMorphClass() === 'App\Models\StandaloneMariadb')
-                                                            <a href="{{ route('project.database.backup.index', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Backups</a>
-                                                        @endif
-                                                    @endif
-                                                </div>
-
-                                                <!-- Configuration Sub-menu (4th level) -->
-                                                <div x-show="activeMenuEnv === '{{ $resKey }}-config'" x-cloak
-                                                    x-transition:enter="transition ease-out duration-150"
-                                                    x-transition:enter-start="opacity-0"
-                                                    x-transition:enter-end="opacity-100"
-                                                    @mouseenter="openMenu('{{ $resKey }}-config')"
-                                                    @mouseleave="closeMenu()"
-                                                    :style="'position: absolute; left: 100%; top: ' + (menuPositions[
-                                                        '{{ $resKey }}-config'] || 0) + 'px; z-index: 50;'"
-                                                    class="pl-1">
-                                                    <div
-                                                        class="w-52 bg-white dark:bg-coolgray-100 rounded-md shadow-lg py-1 border border-neutral-200 dark:border-coolgray-200 max-h-96 overflow-y-auto scrollbar">
-                                                        @if ($resType === 'application')
-                                                            <a href="{{ route('project.application.configuration', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">General</a>
-                                                            <a href="{{ route('project.application.environment-variables', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Environment
-                                                                Variables</a>
-                                                            <a href="{{ route('project.application.persistent-storage', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Persistent
-                                                                Storage</a>
-                                                            <a href="{{ route('project.application.source', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Source</a>
-                                                            <a href="{{ route('project.application.servers', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Servers</a>
-                                                            <a href="{{ route('project.application.scheduled-tasks.show', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Scheduled
-                                                                Tasks</a>
-                                                            <a href="{{ route('project.application.webhooks', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Webhooks</a>
-                                                            <a href="{{ route('project.application.preview-deployments', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Preview
-                                                                Deployments</a>
-                                                            <a href="{{ route('project.application.healthcheck', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Healthcheck</a>
-                                                            <a href="{{ route('project.application.rollback', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Rollback</a>
-                                                            <a href="{{ route('project.application.resource-limits', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Resource
-                                                                Limits</a>
-                                                            <a href="{{ route('project.application.resource-operations', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Resource
-                                                                Operations</a>
-                                                            <a href="{{ route('project.application.metrics', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Metrics</a>
-                                                            <a href="{{ route('project.application.tags', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Tags</a>
-                                                            <a href="{{ route('project.application.advanced', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Advanced</a>
-                                                            <a href="{{ route('project.application.danger', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200 text-red-500">Danger
-                                                                Zone</a>
-                                                        @elseif ($resType === 'service')
-                                                            <a href="{{ route('project.service.configuration', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">General</a>
-                                                            <a href="{{ route('project.service.environment-variables', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Environment
-                                                                Variables</a>
-                                                            <a href="{{ route('project.service.storages', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Storages</a>
-                                                            <a href="{{ route('project.service.scheduled-tasks.show', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Scheduled
-                                                                Tasks</a>
-                                                            <a href="{{ route('project.service.webhooks', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Webhooks</a>
-                                                            <a href="{{ route('project.service.resource-operations', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Resource
-                                                                Operations</a>
-                                                            <a href="{{ route('project.service.tags', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Tags</a>
-                                                            <a href="{{ route('project.service.danger', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200 text-red-500">Danger
-                                                                Zone</a>
-                                                        @else
-                                                            <a href="{{ route('project.database.configuration', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">General</a>
-                                                            <a href="{{ route('project.database.environment-variables', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Environment
-                                                                Variables</a>
-                                                            <a href="{{ route('project.database.servers', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Servers</a>
-                                                            <a href="{{ route('project.database.persistent-storage', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Persistent
-                                                                Storage</a>
-                                                            <a href="{{ route('project.database.webhooks', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Webhooks</a>
-                                                            <a href="{{ route('project.database.resource-limits', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Resource
-                                                                Limits</a>
-                                                            <a href="{{ route('project.database.resource-operations', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Resource
-                                                                Operations</a>
-                                                            <a href="{{ route('project.database.metrics', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Metrics</a>
-                                                            <a href="{{ route('project.database.tags', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Tags</a>
-                                                            <a href="{{ route('project.database.danger', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200 text-red-500">Danger
-                                                                Zone</a>
-                                                        @endif
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        @endforeach
                                     </div>
                                 @endif
                             @endforeach
@@ -656,16 +395,16 @@
     function searchComponent() {
         return {
             search: '',
-            applications: @js($applications),
-            postgresqls: @js($postgresqls),
-            redis: @js($redis),
-            mongodbs: @js($mongodbs),
-            mysqls: @js($mysqls),
-            mariadbs: @js($mariadbs),
-            keydbs: @js($keydbs),
-            dragonflies: @js($dragonflies),
-            clickhouses: @js($clickhouses),
-            services: @js($services),
+            applications: @js($applicationsJs),
+            postgresqls: @js($postgresqlsJs),
+            redis: @js($redisJs),
+            mongodbs: @js($mongodbsJs),
+            mysqls: @js($mysqlsJs),
+            mariadbs: @js($mariadbsJs),
+            keydbs: @js($keydbsJs),
+            dragonflies: @js($dragonfliesJs),
+            clickhouses: @js($clickhousesJs),
+            services: @js($servicesJs),
             filterAndSort(items) {
                 if (this.search === '') {
                     return Object.values(items).sort(sortFn);

resources/views/livewire/project/service/configuration.blade.php

@@ -14,7 +14,7 @@
                 href="{{ route('project.service.environment-variables', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'service_uuid' => $service->uuid]) }}"><span class="menu-item-label">Environment Variables</span></a>
             <a class='sub-menu-item' wire:current.exact="menu-item-active" {{ wireNavigate() }}
                 href="{{ route('project.service.storages', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'service_uuid' => $service->uuid]) }}"><span class="menu-item-label">Persistent Storages</span></a>
-            <a class='sub-menu-item' wire:current.exact="menu-item-active" {{ wireNavigate() }}
+            <a @class(['sub-menu-item', 'menu-item-active' => str($currentRoute)->startsWith('project.service.scheduled-tasks')]) {{ wireNavigate() }}
                 href="{{ route('project.service.scheduled-tasks.show', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'service_uuid' => $service->uuid]) }}"><span class="menu-item-label">Scheduled Tasks</span></a>
             <a class='sub-menu-item' wire:current.exact="menu-item-active" {{ wireNavigate() }}
                 href="{{ route('project.service.webhooks', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'service_uuid' => $service->uuid]) }}"><span class="menu-item-label">Webhooks</span></a>
@@ -71,8 +71,7 @@
                                     @if ($application->fqdn)
                                         <span class="flex gap-1 text-xs">{{ Str::limit($application->fqdn, 60) }}
                                             @can('update', $service)
-                                                <x-modal-input title="Edit Domains" :closeOutside="false" minWidth="32rem"
-                                                    maxWidth="40rem">
+                                                <x-modal-input title="Edit Domains" :closeOutside="false">
                                                     <x-slot:content>
                                                         <span class="cursor-pointer">
                                                             <svg xmlns="http://www.w3.org/2000/svg"
@@ -190,6 +189,8 @@
                 @endforeach
             @elseif ($currentRoute === 'project.service.scheduled-tasks.show')
                 <livewire:project.shared.scheduled-task.all :resource="$service" />
+            @elseif ($currentRoute === 'project.service.scheduled-tasks')
+                <livewire:project.shared.scheduled-task.show />
             @elseif ($currentRoute === 'project.service.webhooks')
                 <livewire:project.shared.webhooks :resource="$service" />
             @elseif ($currentRoute === 'project.service.resource-operations')

resources/views/livewire/project/service/file-storage.blade.php

@@ -15,6 +15,15 @@
                 <x-forms.input label="Destination Path" :value="$fileStorage->mount_path" readonly />
             </div>
         </div>
+        @if ($resource instanceof \App\Models\Application)
+            @can('update', $resource)
+                <div class="w-96">
+                    <x-forms.checkbox instantSave canGate="update" :canResource="$resource" label="Add suffix for PR deployments"
+                        id="isPreviewSuffixEnabled"
+                        helper="When enabled, a -pr-N suffix is added to this volume's path for preview deployments (e.g. ./scripts becomes ./scripts-pr-1). Disable this for volumes that contain shared config or scripts from your repository."></x-forms.checkbox>
+                </div>
+            @endcan
+        @endif
         <form wire:submit='submit' class="flex flex-col gap-2">
             @if (!$isReadOnly)
                 @can('update', $resource)

resources/views/livewire/project/service/index.blade.php

@@ -233,7 +233,7 @@
                                     <x-forms.checkbox canGate="update" :canResource="$serviceDatabase" instantSave id="isPublic"
                                         label="Make it publicly available" />
                                 </div>
-                                <x-forms.input canGate="update" :canResource="$serviceDatabase" placeholder="5432"
+                                <x-forms.input type="number" canGate="update" :canResource="$serviceDatabase" placeholder="5432"
                                     disabled="{{ $serviceDatabase->is_public }}" id="publicPort" label="Public Port" />
                                 @if ($db_url_public)
                                     <x-forms.input label="Database IP:PORT (public)"

resources/views/livewire/project/shared/environment-variable/add.blade.php

@@ -17,6 +17,9 @@
         </div>
     @endif
 
+    <x-forms.input id="comment" label="Comment"
+        helper="Add a note to document what this environment variable is used for." maxlength="256" />
+
     @if (!$shared)
         <x-forms.checkbox id="is_buildtime"
             helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."

resources/views/livewire/project/shared/environment-variable/all.blade.php

@@ -41,19 +41,6 @@
                 </div>
             </div>
         @endif
-        @if ($resource->type() === 'service' || $resource?->build_pack === 'dockercompose')
-            <div class="flex items-center gap-1 pt-4 dark:text-warning text-coollabs">
-                <svg class="hidden w-4 h-4 dark:text-warning lg:block" viewBox="0 0 256 256"
-                    xmlns="http://www.w3.org/2000/svg">
-                    <path fill="currentColor"
-                        d="M240.26 186.1L152.81 34.23a28.74 28.74 0 0 0-49.62 0L15.74 186.1a27.45 27.45 0 0 0 0 27.71A28.31 28.31 0 0 0 40.55 228h174.9a28.31 28.31 0 0 0 24.79-14.19a27.45 27.45 0 0 0 .02-27.71m-20.8 15.7a4.46 4.46 0 0 1-4 2.2H40.55a4.46 4.46 0 0 1-4-2.2a3.56 3.56 0 0 1 0-3.73L124 46.2a4.77 4.77 0 0 1 8 0l87.44 151.87a3.56 3.56 0 0 1 .02 3.73M116 136v-32a12 12 0 0 1 24 0v32a12 12 0 0 1-24 0m28 40a16 16 0 1 1-16-16a16 16 0 0 1 16 16">
-                    </path>
-                </svg>
-                Hardcoded variables are not shown here.
-            </div>
-            {{-- <div class="pb-4 dark:text-warning text-coollabs">If you would like to add a variable, you must add it to
-                your compose file.</div> --}}
-        @endif
     </div>
     @if ($view === 'normal')
         <div>
@@ -61,31 +48,48 @@
             <div>Environment (secrets) variables for Production.</div>
         </div>
         @forelse ($this->environmentVariables as $env)
-            <livewire:project.shared.environment-variable.show wire:key="environment-{{ $env->id }}"
-                :env="$env" :type="$resource->type()" />
+            <livewire:project.shared.environment-variable.show wire:key="environment-{{ $env->id }}" :env="$env"
+                :type="$resource->type()" />
         @empty
             <div>No environment variables found.</div>
         @endforelse
+        @if (($resource->type() === 'service' || $resource?->build_pack === 'dockercompose') && $this->hardcodedEnvironmentVariables->isNotEmpty())
+            @foreach ($this->hardcodedEnvironmentVariables as $index => $env)
+                <livewire:project.shared.environment-variable.show-hardcoded
+                    wire:key="hardcoded-prod-{{ $env['key'] }}-{{ $env['service_name'] ?? 'default' }}-{{ $index }}"
+                    :env="$env" />
+            @endforeach
+        @endif
         @if ($resource->type() === 'application' && $resource->environment_variables_preview->count() > 0 && $showPreview)
             <div>
                 <h3>Preview Deployments Environment Variables</h3>
                 <div>Environment (secrets) variables for Preview Deployments.</div>
             </div>
             @foreach ($this->environmentVariablesPreview as $env)
-                <livewire:project.shared.environment-variable.show wire:key="environment-{{ $env->id }}"
-                    :env="$env" :type="$resource->type()" />
+                <livewire:project.shared.environment-variable.show wire:key="environment-{{ $env->id }}" :env="$env"
+                    :type="$resource->type()" />
             @endforeach
+            @if (($resource->type() === 'service' || $resource?->build_pack === 'dockercompose') && $this->hardcodedEnvironmentVariablesPreview->isNotEmpty())
+                @foreach ($this->hardcodedEnvironmentVariablesPreview as $index => $env)
+                    <livewire:project.shared.environment-variable.show-hardcoded
+                        wire:key="hardcoded-preview-{{ $env['key'] }}-{{ $env['service_name'] ?? 'default' }}-{{ $index }}"
+                        :env="$env" />
+                @endforeach
+            @endif
         @endif
     @else
         <form wire:submit.prevent='submit' class="flex flex-col gap-2">
             @can('manageEnvironment', $resource)
+                <x-callout type="info" title="Note" class="mb-2">
+                    Inline comments with space before # (e.g., <code class="font-mono">KEY=value #comment</code>) are stripped.
+                </x-callout>
+
                 <x-forms.textarea rows="10" class="whitespace-pre-wrap" id="variables" wire:model="variables"
                     label="Production Environment Variables"></x-forms.textarea>
 
                 @if ($showPreview)
-                    <x-forms.textarea rows="10" class="whitespace-pre-wrap"
-                        label="Preview Deployments Environment Variables" id="variablesPreview"
-                        wire:model="variablesPreview"></x-forms.textarea>
+                    <x-forms.textarea rows="10" class="whitespace-pre-wrap" label="Preview Deployments Environment Variables"
+                        id="variablesPreview" wire:model="variablesPreview"></x-forms.textarea>
                 @endif
 
                 <x-forms.button type="submit" class="btn btn-primary">Save All Environment Variables</x-forms.button>
@@ -94,11 +98,10 @@
                     label="Production Environment Variables" disabled></x-forms.textarea>
 
                 @if ($showPreview)
-                    <x-forms.textarea rows="10" class="whitespace-pre-wrap"
-                        label="Preview Deployments Environment Variables" id="variablesPreview"
-                        wire:model="variablesPreview" disabled></x-forms.textarea>
+                    <x-forms.textarea rows="10" class="whitespace-pre-wrap" label="Preview Deployments Environment Variables"
+                        id="variablesPreview" wire:model="variablesPreview" disabled></x-forms.textarea>
                 @endif
             @endcan
         </form>
     @endif
-</div>
+</div>

resources/views/livewire/project/shared/environment-variable/show-hardcoded.blade.php

@@ -0,0 +1,31 @@
+<div>
+    <div
+        class="flex flex-col items-center gap-4 p-4 bg-white border lg:items-start dark:bg-base dark:border-coolgray-300 border-neutral-200">
+        <div class="flex flex-wrap items-center gap-2">
+            <span
+                class="px-2 py-0.5 text-xs font-normal rounded dark:bg-coolgray-400/50 bg-neutral-200 dark:text-neutral-400 text-neutral-600">
+                Hardcoded env
+            </span>
+            @if($serviceName)
+                <span
+                    class="px-2 py-0.5 text-xs font-normal rounded dark:bg-coolgray-400/50 bg-neutral-200 dark:text-neutral-400 text-neutral-600">
+                    Service: {{ $serviceName }}
+                </span>
+            @endif
+        </div>
+        <div class="flex flex-col w-full gap-2">
+            <div class="flex flex-col w-full gap-2 lg:flex-row">
+                <x-forms.input disabled id="key" />
+                @if($value !== null && $value !== '')
+                    <x-forms.input disabled type="password" value="{{ $value }}" />
+                @else
+                    <x-forms.input disabled value="(inherited from host)" />
+                @endif
+            </div>
+            @if($comment)
+                <x-forms.input disabled value="{{ $comment }}" label="Comment"
+                    helper="Documentation for this environment variable." />
+            @endif
+        </div>
+    </div>
+</div>

resources/views/livewire/project/shared/environment-variable/show.blade.php

@@ -15,45 +15,60 @@
                 </svg>
                 @can('delete', $this->env)
                     <x-modal-confirmation title="Confirm Environment Variable Deletion?" isErrorButton buttonTitle="Delete"
-                        submitAction="delete" :actions="['The selected environment variable will be permanently deleted.']" confirmationText="{{ $env->key }}"
+                        submitAction="delete" :actions="['The selected environment variable will be permanently deleted.']"
+                        confirmationText="{{ $env->key }}"
                         confirmationLabel="Please confirm the execution of the actions by entering the Environment Variable Name below"
                         shortConfirmationLabel="Environment Variable Name" :confirmWithPassword="false"
                         step2ButtonText="Permanently Delete" />
                 @endcan
             </div>
             @can('update', $this->env)
+                <div class="flex flex-col w-full gap-2 lg:flex-row lg:items-end">
+                    <div class="flex-1">
+                        <x-forms.input id="comment" label="Comment"
+                            placeholder="{{ $isMagicVariable ? 'This env cannot be edited manually, it is handled by Coolify.' : '' }}"
+                            helper="Add a note to document what this environment variable is used for." maxlength="256" />
+                    </div>
+                    <x-forms.button type="submit">Update</x-forms.button>
+                </div>
                 <div class="flex flex-col w-full gap-3">
                     <div class="flex flex-wrap w-full items-center gap-4">
                         @if (!$is_redis_credential)
                             @if ($type === 'service')
-                                <x-forms.checkbox instantSave id="is_buildtime"
-                                    helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
-                                    label="Available at Buildtime" />
-                                <x-forms.checkbox instantSave id="is_runtime"
-                                    helper="Make this variable available in the running container at runtime."
-                                    label="Available at Runtime" />
-                                <x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
-                                <x-forms.checkbox instantSave id="is_literal"
-                                    helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
-                                    label="Is Literal?" />
-                            @else
-                                @if ($isSharedVariable)
+                                @if (!$isMagicVariable)
                                     <x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
+                                    <x-forms.checkbox instantSave id="is_literal"
+                                        helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
+                                        label="Is Literal?" />
+                                @endif
+                            @else
+                                @if ($is_shared)
+                                    <x-forms.checkbox instantSave id="is_literal"
+                                        helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
+                                        label="Is Literal?" />
                                 @else
-                                    @if (!$env->is_nixpacks)
-                                        <x-forms.checkbox instantSave id="is_buildtime"
-                                            helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
-                                            label="Available at Buildtime" />
-                                    @endif
-                                    <x-forms.checkbox instantSave id="is_runtime"
-                                        helper="Make this variable available in the running container at runtime."
-                                        label="Available at Runtime" />
-                                    @if (!$env->is_nixpacks)
-                                        <x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
-                                        @if ($is_multiline === false)
-                                            <x-forms.checkbox instantSave id="is_literal"
-                                                helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
-                                                label="Is Literal?" />
+                                    @if ($isSharedVariable)
+                                        @if (!$isMagicVariable)
+                                            <x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
+                                        @endif
+                                    @else
+                                        @if (!$env->is_nixpacks)
+                                            <x-forms.checkbox instantSave id="is_buildtime"
+                                                helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
+                                                label="Available at Buildtime" />
+                                        @endif
+                                        <x-forms.checkbox instantSave id="is_runtime"
+                                            helper="Make this variable available in the running container at runtime."
+                                            label="Available at Runtime" />
+                                        @if (!$isMagicVariable)
+                                            @if (!$env->is_nixpacks)
+                                                <x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
+                                                @if ($is_multiline === false)
+                                                    <x-forms.checkbox instantSave id="is_literal"
+                                                        helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
+                                                        label="Is Literal?" />
+                                                @endif
+                                            @endif
                                         @endif
                                     @endif
                                 @endif
@@ -66,43 +81,98 @@
                     <div class="flex flex-wrap w-full items-center gap-4">
                         @if (!$is_redis_credential)
                             @if ($type === 'service')
-                                <x-forms.checkbox disabled id="is_buildtime"
-                                    helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
-                                    label="Available at Buildtime" />
-                                <x-forms.checkbox disabled id="is_runtime"
-                                    helper="Make this variable available in the running container at runtime."
-                                    label="Available at Runtime" />
-                                <x-forms.checkbox disabled id="is_multiline" label="Is Multiline?" />
-                                <x-forms.checkbox disabled id="is_literal"
-                                    helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
-                                    label="Is Literal?" />
-                            @else
-                                @if ($isSharedVariable)
+                                @if (!$isMagicVariable)
                                     <x-forms.checkbox disabled id="is_multiline" label="Is Multiline?" />
+                                    <x-forms.checkbox disabled id="is_literal"
+                                        helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
+                                        label="Is Literal?" />
+                                @endif
+                            @else
+                                @if ($is_shared)
+                                    <x-forms.checkbox disabled id="is_literal"
+                                        helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
+                                        label="Is Literal?" />
                                 @else
-                                    @if (!$env->is_nixpacks)
+                                    @if ($isSharedVariable)
+                                        @if (!$isMagicVariable)
+                                            <x-forms.checkbox disabled id="is_multiline" label="Is Multiline?" />
+                                        @endif
+                                    @else
                                         <x-forms.checkbox disabled id="is_buildtime"
                                             helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
                                             label="Available at Buildtime" />
-                                    @endif
-                                    <x-forms.checkbox disabled id="is_runtime"
-                                        helper="Make this variable available in the running container at runtime."
-                                        label="Available at Runtime" />
-                                    <x-forms.checkbox disabled id="is_multiline" label="Is Multiline?" />
-                                    @if ($is_multiline === false)
-                                        <x-forms.checkbox disabled id="is_literal"
-                                            helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
-                                            label="Is Literal?" />
+                                        <x-forms.checkbox disabled id="is_runtime"
+                                            helper="Make this variable available in the running container at runtime."
+                                            label="Available at Runtime" />
+                                        @if (!$isMagicVariable)
+                                            <x-forms.checkbox disabled id="is_multiline" label="Is Multiline?" />
+                                            @if ($is_multiline === false)
+                                                <x-forms.checkbox disabled id="is_literal"
+                                                    helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
+                                                    label="Is Literal?" />
+                                            @endif
+                                        @endif
                                     @endif
                                 @endif
                             @endif
                         @endif
                     </div>
                 </div>
+                <div class="w-full">
+                    <x-forms.input disabled id="comment" label="Comment" helper="Documentation for this environment variable."
+                        maxlength="256" />
+                </div>
             @endcan
         @else
             @can('update', $this->env)
                 @if ($isDisabled)
+                    <div class="flex flex-col w-full gap-2">
+                        <div class="flex flex-col w-full gap-2 lg:flex-row">
+                            <x-forms.input disabled id="key" />
+                            <x-forms.env-var-input
+                                disabled
+                                type="password"
+                                id="value"
+                                :availableVars="$isSharedVariable ? [] : $this->availableSharedVariables"
+                                :projectUuid="data_get($parameters, 'project_uuid')"
+                                :environmentUuid="data_get($parameters, 'environment_uuid')"
+                                :serverUuid="data_get($parameters, 'server_uuid')" />
+                            @if ($is_shared)
+                                <x-forms.input disabled type="password" id="real_value" />
+                            @endif
+                        </div>
+                        <x-forms.input instantSave id="comment" label="Comment"
+                            placeholder="{{ $isMagicVariable ? 'This env cannot be edited manually, it is handled by Coolify.' : '' }}"
+                            helper="Add a note to document what this environment variable is used for." maxlength="256" />
+                    </div>
+                @else
+                    <div class="flex flex-col w-full gap-2">
+                        <div class="flex flex-col w-full gap-2 lg:flex-row">
+                            @if ($is_multiline)
+                                <x-forms.input :required="$is_redis_credential" isMultiline="{{ $is_multiline }}" id="key" />
+                                <x-forms.textarea :required="$is_redis_credential" type="password" id="value" />
+                            @else
+                                <x-forms.input :disabled="$is_redis_credential" :required="$is_redis_credential" id="key" />
+                                <x-forms.env-var-input
+                                    :required="$is_redis_credential"
+                                    type="password"
+                                    id="value"
+                                    :availableVars="$isSharedVariable ? [] : $this->availableSharedVariables"
+                                    :projectUuid="data_get($parameters, 'project_uuid')"
+                                    :environmentUuid="data_get($parameters, 'environment_uuid')"
+                                    :serverUuid="data_get($parameters, 'server_uuid')" />
+                            @endif
+                            @if ($is_shared)
+                                <x-forms.input :disabled="$is_redis_credential" :required="$is_redis_credential" disabled
+                                    type="password" id="real_value" />
+                            @endif
+                        </div>
+                        <x-forms.input instantSave id="comment" label="Comment"
+                            helper="Add a note to document what this environment variable is used for." maxlength="256" />
+                    </div>
+                @endif
+            @else
+                <div class="flex flex-col w-full gap-2">
                     <div class="flex flex-col w-full gap-2 lg:flex-row">
                         <x-forms.input disabled id="key" />
                         <x-forms.env-var-input
@@ -117,41 +187,9 @@
                             <x-forms.input disabled type="password" id="real_value" />
                         @endif
                     </div>
-                @else
-                    <div class="flex flex-col w-full gap-2 lg:flex-row">
-                        @if ($is_multiline)
-                            <x-forms.input :required="$is_redis_credential" isMultiline="{{ $is_multiline }}" id="key" />
-                            <x-forms.textarea :required="$is_redis_credential" type="password" id="value" />
-                        @else
-                            <x-forms.input :disabled="$is_redis_credential" :required="$is_redis_credential" id="key" />
-                            <x-forms.env-var-input
-                                :required="$is_redis_credential"
-                                type="password"
-                                id="value"
-                                :availableVars="$isSharedVariable ? [] : $this->availableSharedVariables"
-                                :projectUuid="data_get($parameters, 'project_uuid')"
-                                :environmentUuid="data_get($parameters, 'environment_uuid')"
-                                :serverUuid="data_get($parameters, 'server_uuid')" />
-                        @endif
-                        @if ($is_shared)
-                            <x-forms.input :disabled="$is_redis_credential" :required="$is_redis_credential" disabled type="password" id="real_value" />
-                        @endif
-                    </div>
-                @endif
-            @else
-                <div class="flex flex-col w-full gap-2 lg:flex-row">
-                    <x-forms.input disabled id="key" />
-                    <x-forms.env-var-input
-                        disabled
-                        type="password"
-                        id="value"
-                        :availableVars="$isSharedVariable ? [] : $this->availableSharedVariables"
-                        :projectUuid="data_get($parameters, 'project_uuid')"
-                        :environmentUuid="data_get($parameters, 'environment_uuid')"
-                        :serverUuid="data_get($parameters, 'server_uuid')" />
-                    @if ($is_shared)
-                        <x-forms.input disabled type="password" id="real_value" />
-                    @endif
+                    <x-forms.input disabled id="comment" label="Comment"
+                        placeholder="{{ $isMagicVariable ? 'This env cannot be edited manually, it is handled by Coolify.' : '' }}"
+                        helper="Add a note to document what this environment variable is used for." maxlength="256" />
                 </div>
             @endcan
             @can('update', $this->env)
@@ -159,34 +197,40 @@
                     <div class="flex flex-wrap w-full items-center gap-4">
                         @if (!$is_redis_credential)
                             @if ($type === 'service')
-                                <x-forms.checkbox instantSave id="is_buildtime"
-                                    helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
-                                    label="Available at Buildtime" />
-                                <x-forms.checkbox instantSave id="is_runtime"
-                                    helper="Make this variable available in the running container at runtime."
-                                    label="Available at Runtime" />
-                                <x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
-                                <x-forms.checkbox instantSave id="is_literal"
-                                    helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
-                                    label="Is Literal?" />
-                            @else
-                                @if ($isSharedVariable)
+                                @if (!$isMagicVariable)
                                     <x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
+                                    <x-forms.checkbox instantSave id="is_literal"
+                                        helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
+                                        label="Is Literal?" />
+                                @endif
+                            @else
+                                @if ($is_shared)
+                                    <x-forms.checkbox instantSave id="is_literal"
+                                        helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
+                                        label="Is Literal?" />
                                 @else
-                                    @if (!$env->is_nixpacks)
-                                        <x-forms.checkbox instantSave id="is_buildtime"
-                                            helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
-                                            label="Available at Buildtime" />
-                                    @endif
-                                    <x-forms.checkbox instantSave id="is_runtime"
-                                        helper="Make this variable available in the running container at runtime."
-                                        label="Available at Runtime" />
-                                    @if (!$env->is_nixpacks)
-                                        <x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
-                                        @if ($is_multiline === false)
-                                            <x-forms.checkbox instantSave id="is_literal"
-                                                helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
-                                                label="Is Literal?" />
+                                    @if ($isSharedVariable)
+                                        @if (!$isMagicVariable)
+                                            <x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
+                                        @endif
+                                    @else
+                                        @if (!$env->is_nixpacks)
+                                            <x-forms.checkbox instantSave id="is_buildtime"
+                                                helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
+                                                label="Available at Buildtime" />
+                                        @endif
+                                        <x-forms.checkbox instantSave id="is_runtime"
+                                            helper="Make this variable available in the running container at runtime."
+                                            label="Available at Runtime" />
+                                        @if (!$isMagicVariable)
+                                            @if (!$env->is_nixpacks)
+                                                <x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
+                                                @if ($is_multiline === false)
+                                                    <x-forms.checkbox instantSave id="is_literal"
+                                                        helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
+                                                        label="Is Literal?" />
+                                                @endif
+                                            @endif
                                         @endif
                                     @endif
                                 @endif
@@ -194,12 +238,13 @@
                         @endif
                     </div>
                     <x-environment-variable-warning :problematic-variables="$problematicVariables" />
-                    <div class="flex w-full justify-end gap-2">
-                        @if ($isDisabled)
+                    @if (!$isMagicVariable)
+                        <div class="flex w-full justify-end gap-2">
+                            @if ($isDisabled)
                             <x-forms.button disabled type="submit">Update</x-forms.button>
                             <x-forms.button wire:click='lock'>Lock</x-forms.button>
-                            <x-modal-confirmation title="Confirm Environment Variable Deletion?" isErrorButton
-                                buttonTitle="Delete" submitAction="delete" :actions="['The selected environment variable will be permanently deleted.']"
+                            <x-modal-confirmation title="Confirm Environment Variable Deletion?" isErrorButton buttonTitle="Delete"
+                                submitAction="delete" :actions="['The selected environment variable will be permanently deleted.']"
                                 confirmationText="{{ $key }}" buttonFullWidth="true"
                                 confirmationLabel="Please confirm the execution of the actions by entering the Environment Variable Name below"
                                 shortConfirmationLabel="Environment Variable Name" :confirmWithPassword="false"
@@ -207,47 +252,56 @@
                         @else
                             <x-forms.button type="submit">Update</x-forms.button>
                             <x-forms.button wire:click='lock'>Lock</x-forms.button>
-                            <x-modal-confirmation title="Confirm Environment Variable Deletion?" isErrorButton
-                                buttonTitle="Delete" submitAction="delete" :actions="['The selected environment variable will be permanently deleted.']"
+                            <x-modal-confirmation title="Confirm Environment Variable Deletion?" isErrorButton buttonTitle="Delete"
+                                submitAction="delete" :actions="['The selected environment variable will be permanently deleted.']"
                                 confirmationText="{{ $key }}" buttonFullWidth="true"
                                 confirmationLabel="Please confirm the execution of the actions by entering the Environment Variable Name below"
                                 shortConfirmationLabel="Environment Variable Name" :confirmWithPassword="false"
                                 step2ButtonText="Permanently Delete" />
-                        @endif
-                    </div>
+                            @endif
+                        </div>
+                    @elseif ($type === 'service')
+                        <div class="flex w-full justify-end gap-2">
+                            <x-forms.button wire:click='lock'>Lock</x-forms.button>
+                        </div>
+                    @endif
                 </div>
             @else
                 <div class="flex flex-col w-full gap-3">
                     <div class="flex flex-wrap w-full items-center gap-4">
                         @if (!$is_redis_credential)
                             @if ($type === 'service')
-                                <x-forms.checkbox disabled id="is_buildtime"
-                                    helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
-                                    label="Available at Buildtime" />
-                                <x-forms.checkbox disabled id="is_runtime"
-                                    helper="Make this variable available in the running container at runtime."
-                                    label="Available at Runtime" />
-                                <x-forms.checkbox disabled id="is_multiline" label="Is Multiline?" />
-                                <x-forms.checkbox disabled id="is_literal"
-                                    helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
-                                    label="Is Literal?" />
-                            @else
-                                @if ($isSharedVariable)
+                                @if (!$isMagicVariable)
                                     <x-forms.checkbox disabled id="is_multiline" label="Is Multiline?" />
+                                    <x-forms.checkbox disabled id="is_literal"
+                                        helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
+                                        label="Is Literal?" />
+                                @endif
+                            @else
+                                @if ($is_shared)
+                                    <x-forms.checkbox disabled id="is_literal"
+                                        helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
+                                        label="Is Literal?" />
                                 @else
-                                    @if (!$env->is_nixpacks)
+                                    @if ($isSharedVariable)
+                                        @if (!$isMagicVariable)
+                                            <x-forms.checkbox disabled id="is_multiline" label="Is Multiline?" />
+                                        @endif
+                                    @else
                                         <x-forms.checkbox disabled id="is_buildtime"
                                             helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
                                             label="Available at Buildtime" />
-                                    @endif
-                                    <x-forms.checkbox disabled id="is_runtime"
-                                        helper="Make this variable available in the running container at runtime."
-                                        label="Available at Runtime" />
-                                    <x-forms.checkbox disabled id="is_multiline" label="Is Multiline?" />
-                                    @if ($is_multiline === false)
-                                        <x-forms.checkbox disabled id="is_literal"
-                                            helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
-                                            label="Is Literal?" />
+                                        <x-forms.checkbox disabled id="is_runtime"
+                                            helper="Make this variable available in the running container at runtime."
+                                            label="Available at Runtime" />
+                                        @if (!$isMagicVariable)
+                                            <x-forms.checkbox disabled id="is_multiline" label="Is Multiline?" />
+                                            @if ($is_multiline === false)
+                                                <x-forms.checkbox disabled id="is_literal"
+                                                    helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
+                                                    label="Is Literal?" />
+                                            @endif
+                                        @endif
                                     @endif
                                 @endif
                             @endif
@@ -258,4 +312,4 @@
         @endif
 
     </form>
-</div>
+</div>

resources/views/livewire/project/shared/execute-container-command.blade.php

@@ -21,7 +21,8 @@
             <div>No containers are running or terminal access is disabled on this server.</div>
         @else
             <form class="w-96 min-w-fit flex gap-2 items-end" wire:submit="$dispatchSelf('connectToContainer')"
-                x-data="{ autoConnected: false }" x-init="if ({{ count($containers) }} === 1 && !autoConnected) {
+                x-data="{ autoConnected: false }"
+                x-on:terminal-websocket-ready.window="if ({{ count($containers) }} === 1 && !autoConnected) {
                     autoConnected = true;
                     $nextTick(() => $wire.dispatchSelf('connectToContainer'));
                 }">

resources/views/livewire/project/shared/get-logs.blade.php

@@ -8,6 +8,7 @@
         rafId: null,
         scrollDebounce: null,
         colorLogs: localStorage.getItem('coolify-color-logs') === 'true',
+        logFilters: JSON.parse(localStorage.getItem('coolify-log-filters')) || {error: true, warning: true, debug: true, info: true},
         searchQuery: '',
         matchCount: 0,
         containerName: '{{ $container ?? "logs" }}',
@@ -70,6 +71,17 @@
                 }
             }, 150);
         },
+        getLogLevel(content) {
+            if (/\b(error|err|failed|failure|exception|fatal|panic|critical)\b/.test(content)) return 'error';
+            if (/\b(warn|warning|wrn|caution)\b/.test(content)) return 'warning';
+            if (/\b(debug|dbg|trace|verbose)\b/.test(content)) return 'debug';
+            return 'info';
+        },
+        toggleLogFilter(level) {
+            this.logFilters[level] = !this.logFilters[level];
+            localStorage.setItem('coolify-log-filters', JSON.stringify(this.logFilters));
+            this.applySearch();
+        },
         toggleColorLogs() {
             this.colorLogs = !this.colorLogs;
             localStorage.setItem('coolify-color-logs', this.colorLogs);
@@ -81,17 +93,11 @@
             const lines = logs.querySelectorAll('[data-log-line]');
             lines.forEach(line => {
                 const content = (line.dataset.logContent || '').toLowerCase();
+                const level = this.getLogLevel(content);
+                line.dataset.logLevel = level;
                 line.classList.remove('log-error', 'log-warning', 'log-debug', 'log-info');
                 if (!this.colorLogs) return;
-                if (/\b(error|err|failed|failure|exception|fatal|panic|critical)\b/.test(content)) {
-                    line.classList.add('log-error');
-                } else if (/\b(warn|warning|wrn|caution)\b/.test(content)) {
-                    line.classList.add('log-warning');
-                } else if (/\b(debug|dbg|trace|verbose)\b/.test(content)) {
-                    line.classList.add('log-debug');
-                } else if (/\b(info|inf|notice)\b/.test(content)) {
-                    line.classList.add('log-info');
-                }
+                line.classList.add('log-' + level);
             });
         },
         hasActiveLogSelection() {
@@ -118,7 +124,10 @@
             lines.forEach(line => {
                 const content = (line.dataset.logContent || '').toLowerCase();
                 const textSpan = line.querySelector('[data-line-text]');
-                const matches = !query || content.includes(query);
+                const level = line.dataset.logLevel || this.getLogLevel(content);
+                const passesFilter = this.logFilters[level] !== false;
+                const matchesSearch = !query || content.includes(query);
+                const matches = passesFilter && matchesSearch;
 
                 line.classList.toggle('hidden', !matches);
                 if (matches && query) count++;
@@ -389,6 +398,52 @@
                                     d="M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42" />
                             </svg>
                         </button>
+                        <div x-data="{ filterOpen: false }" class="relative">
+                            <button x-on:click="filterOpen = !filterOpen" title="Filter Log Levels"
+                                :class="Object.values(logFilters).some(v => !v) ? '!text-warning' : ''"
+                                class="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                                <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z" />
+                                </svg>
+                            </button>
+                            <div x-show="filterOpen" x-on:click.away="filterOpen = false"
+                                x-transition:enter="transition ease-out duration-100"
+                                x-transition:enter-start="transform opacity-0 scale-95"
+                                x-transition:enter-end="transform opacity-100 scale-100"
+                                x-transition:leave="transition ease-in duration-75"
+                                x-transition:leave-start="transform opacity-100 scale-100"
+                                x-transition:leave-end="transform opacity-0 scale-95"
+                                class="absolute right-0 z-50 mt-2 w-max origin-top-right rounded-md bg-white dark:bg-coolgray-200 shadow-lg ring-1 ring-neutral-200 dark:ring-coolgray-300 focus:outline-none">
+                                <div class="py-1">
+                                    <label class="flex items-center gap-2 px-4 py-1.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-coolgray-300 cursor-pointer select-none">
+                                        <input type="checkbox" :checked="logFilters.error" x-on:change="toggleLogFilter('error')"
+                                            class="rounded border-gray-300 dark:border-gray-600 text-warning focus:ring-warning dark:bg-coolgray-300" />
+                                        <span class="w-2.5 h-2.5 rounded-full bg-red-500"></span>
+                                        Error
+                                    </label>
+                                    <label class="flex items-center gap-2 px-4 py-1.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-coolgray-300 cursor-pointer select-none">
+                                        <input type="checkbox" :checked="logFilters.warning" x-on:change="toggleLogFilter('warning')"
+                                            class="rounded border-gray-300 dark:border-gray-600 text-warning focus:ring-warning dark:bg-coolgray-300" />
+                                        <span class="w-2.5 h-2.5 rounded-full bg-yellow-500"></span>
+                                        Warning
+                                    </label>
+                                    <label class="flex items-center gap-2 px-4 py-1.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-coolgray-300 cursor-pointer select-none">
+                                        <input type="checkbox" :checked="logFilters.debug" x-on:change="toggleLogFilter('debug')"
+                                            class="rounded border-gray-300 dark:border-gray-600 text-warning focus:ring-warning dark:bg-coolgray-300" />
+                                        <span class="w-2.5 h-2.5 rounded-full bg-purple-500"></span>
+                                        Debug
+                                    </label>
+                                    <label class="flex items-center gap-2 px-4 py-1.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-coolgray-300 cursor-pointer select-none">
+                                        <input type="checkbox" :checked="logFilters.info" x-on:change="toggleLogFilter('info')"
+                                            class="rounded border-gray-300 dark:border-gray-600 text-warning focus:ring-warning dark:bg-coolgray-300" />
+                                        <span class="w-2.5 h-2.5 rounded-full bg-blue-500"></span>
+                                        Info
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
                         <button title="Follow Logs" :class="alwaysScroll ? '!text-warning' : ''"
                             x-on:click="toggleScroll"
                             class="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
@@ -425,7 +480,7 @@
                         @php
                             $displayLines = collect(explode("\n", $outputs))->filter(fn($line) => trim($line) !== '');
                         @endphp
-                        <div id="logs" class="font-mono max-w-full cursor-default">
+                        <div id="logs" class="font-logs max-w-full cursor-default">
                             <div x-show="searchQuery.trim() && matchCount === 0"
                                 class="text-gray-500 dark:text-gray-400 py-2">
                                 No matches found.
@@ -463,7 +518,7 @@
                         </div>
                     @else
                         <pre id="logs"
-                            class="font-mono whitespace-pre-wrap break-all max-w-full text-neutral-400">No logs yet.</pre>
+                            class="font-logs whitespace-pre-wrap break-all max-w-full text-neutral-400">No logs yet.</pre>
                     @endif
                 </div>
             </div>

resources/views/livewire/project/shared/health-checks.blade.php

@@ -20,25 +20,51 @@
                 <p>A custom health check has been detected. If you enable this health check, it will disable the custom one and use this instead.</p>
             </x-callout>
         @endif
+
+        {{-- Healthcheck Type Selector --}}
         <div class="flex gap-2">
-            <x-forms.select canGate="update" :canResource="$resource" id="healthCheckMethod" label="Method" required>
-                <option value="GET">GET</option>
-                <option value="POST">POST</option>
+            <x-forms.select canGate="update" :canResource="$resource" id="healthCheckType" label="Type" required wire:model.live="healthCheckType">
+                <option value="http">HTTP</option>
+                <option value="cmd">CMD</option>
             </x-forms.select>
-            <x-forms.select canGate="update" :canResource="$resource" id="healthCheckScheme" label="Scheme" required>
-                <option value="http">http</option>
-                <option value="https">https</option>
-            </x-forms.select>
-            <x-forms.input canGate="update" :canResource="$resource" id="healthCheckHost" placeholder="localhost" label="Host" required />
-            <x-forms.input canGate="update" :canResource="$resource" type="number" id="healthCheckPort"
-                helper="If no port is defined, the first exposed port will be used." placeholder="80" label="Port" />
-            <x-forms.input canGate="update" :canResource="$resource" id="healthCheckPath" placeholder="/health" label="Path" required />
-        </div>
-        <div class="flex gap-2">
-            <x-forms.input canGate="update" :canResource="$resource" type="number" id="healthCheckReturnCode" placeholder="200" label="Return Code"
-                required />
-            <x-forms.input canGate="update" :canResource="$resource" id="healthCheckResponseText" placeholder="OK" label="Response Text" />
         </div>
+
+        @if ($healthCheckType === 'http')
+            {{-- HTTP Healthcheck Fields --}}
+            <div class="flex gap-2">
+                <x-forms.select canGate="update" :canResource="$resource" id="healthCheckMethod" label="Method" required>
+                    <option value="GET">GET</option>
+                    <option value="POST">POST</option>
+                </x-forms.select>
+                <x-forms.select canGate="update" :canResource="$resource" id="healthCheckScheme" label="Scheme" required>
+                    <option value="http">http</option>
+                    <option value="https">https</option>
+                </x-forms.select>
+                <x-forms.input canGate="update" :canResource="$resource" id="healthCheckHost" placeholder="localhost" label="Host" required />
+                <x-forms.input canGate="update" :canResource="$resource" type="number" id="healthCheckPort"
+                    helper="If no port is defined, the first exposed port will be used." placeholder="80" label="Port" />
+                <x-forms.input canGate="update" :canResource="$resource" id="healthCheckPath" placeholder="/health" label="Path" required />
+            </div>
+            <div class="flex gap-2">
+                <x-forms.input canGate="update" :canResource="$resource" type="number" id="healthCheckReturnCode" placeholder="200" label="Return Code"
+                    required />
+                <x-forms.input canGate="update" :canResource="$resource" id="healthCheckResponseText" placeholder="OK" label="Response Text" />
+            </div>
+        @else
+            {{-- CMD Healthcheck Fields --}}
+            <x-callout type="warning" title="Caution">
+                <p>This command runs inside the container on every health check interval. Shell operators (;, |, &amp;, $, &gt;, &lt;) are not allowed.</p>
+            </x-callout>
+            <div class="flex flex-col gap-2">
+                <x-forms.input canGate="update" :canResource="$resource" id="healthCheckCommand"
+                    label="Command"
+                    placeholder="pg_isready -U postgres"
+                    helper="A simple command to run inside the container. Must exit with code 0 on success. Shell operators like ;, |, &&, $() are not allowed."
+                    :required="$healthCheckType === 'cmd'" />
+            </div>
+        @endif
+
+        {{-- Common timing fields (used by both types) --}}
         <div class="flex gap-2">
             <x-forms.input canGate="update" :canResource="$resource" min="1" type="number" id="healthCheckInterval" placeholder="30"
                 label="Interval (s)" required />
@@ -49,4 +75,4 @@
                 label="Start Period (s)" required />
         </div>
     </div>
-</form>
+</form>

resources/views/livewire/project/shared/logs.blade.php

@@ -8,39 +8,35 @@
         <livewire:project.application.heading :application="$resource" />
         <div>
             <h2>Logs</h2>
-            @if (str($status)->contains('exited'))
-                <div class="pt-4">The resource is not running.</div>
-            @else
-                <div class="pt-2" wire:loading wire:target="loadAllContainers">
-                    Loading containers...
-                </div>
-                <div x-init="$wire.loadAllContainers()" wire:loading.remove wire:target="loadAllContainers">
-                    @forelse ($servers as $server)
-                        <div class="py-2">
-                            <h4>Server: {{ $server->name }}</h4>
-                            @if ($server->isFunctional())
-                                @if (isset($serverContainers[$server->id]) && count($serverContainers[$server->id]) > 0)
-                                    @php
-                                        $totalContainers = collect($serverContainers)->flatten(1)->count();
-                                    @endphp
-                                    @foreach ($serverContainers[$server->id] as $container)
-                                        <livewire:project.shared.get-logs
-                                            wire:key="{{ data_get($container, 'ID', uniqid()) }}" :server="$server"
-                                            :resource="$resource" :container="data_get($container, 'Names')"
-                                            :expandByDefault="$totalContainers === 1" />
-                                    @endforeach
-                                @else
-                                    <div class="pt-2">No containers are running on server: {{ $server->name }}</div>
-                                @endif
+            <div class="pt-2" wire:loading wire:target="loadAllContainers">
+                Loading containers...
+            </div>
+            <div x-init="$wire.loadAllContainers()" wire:loading.remove wire:target="loadAllContainers">
+                @forelse ($servers as $server)
+                    <div class="py-2">
+                        <h4>Server: {{ $server->name }}</h4>
+                        @if ($server->isFunctional())
+                            @if (isset($serverContainers[$server->id]) && count($serverContainers[$server->id]) > 0)
+                                @php
+                                    $totalContainers = collect($serverContainers)->flatten(1)->count();
+                                @endphp
+                                @foreach ($serverContainers[$server->id] as $container)
+                                    <livewire:project.shared.get-logs
+                                        wire:key="{{ data_get($container, 'ID', uniqid()) }}" :server="$server"
+                                        :resource="$resource" :container="data_get($container, 'Names')"
+                                        :expandByDefault="$totalContainers === 1" />
+                                @endforeach
                             @else
-                                <div class="pt-2">Server {{ $server->name }} is not functional.</div>
+                                <div class="pt-2">No containers are running on server: {{ $server->name }}</div>
                             @endif
-                        </div>
-                    @empty
-                        <div>No functional server found for the application.</div>
-                    @endforelse
-                </div>
-            @endif
+                        @else
+                            <div class="pt-2">Server {{ $server->name }} is not functional.</div>
+                        @endif
+                    </div>
+                @empty
+                    <div>No functional server found for the application.</div>
+                @endforelse
+            </div>
         </div>
     @elseif ($type === 'database')
         <h1>Logs</h1>

resources/views/livewire/project/shared/scheduled-task/show.blade.php

@@ -1,18 +1,8 @@
 <div>
-    <x-slot:title>
-        {{ data_get_str($resource, 'name')->limit(10) }} > Scheduled Tasks | Coolify
-    </x-slot>
-    @if ($type === 'application')
-        <h1>Scheduled Task</h1>
-        <livewire:project.application.heading :application="$resource" />
-    @elseif ($type === 'service')
-        <livewire:project.service.heading :service="$resource" :parameters="$parameters" />
-    @endif
-
     <form wire:submit="submit" class="w-full">
         <div class="flex flex-col gap-2 pb-2">
             <div class="flex gap-2 items-end">
-                <h2>Scheduled Task</h2>
+                <h2>Task {{ $task->name }}</h2>
                 <x-forms.button type="submit">
                     Save
                 </x-forms.button>
@@ -21,6 +11,11 @@
                         Execute Now
                     </x-forms.button>
                 @endif
+                @if (!$isEnabled)
+                    <x-forms.button wire:click="toggleEnabled" isHighlighted>Enable Task</x-forms.button>
+                @else
+                    <x-forms.button wire:click="toggleEnabled">Disable Task</x-forms.button>
+                @endif
                 <x-modal-confirmation title="Confirm Scheduled Task Deletion?" isErrorButton buttonTitle="Delete"
                     submitAction="delete({{ $task->id }})" :actions="['The selected scheduled task will be permanently deleted.']" confirmationText="{{ $task->name }}"
                     confirmationLabel="Please confirm the execution of the actions by entering the Scheduled Task Name below"
@@ -28,13 +23,11 @@
                     step2ButtonText="Permanently Delete" />
 
             </div>
-            <div class="w-48">
-                <x-forms.checkbox instantSave id="isEnabled" label="Enabled" />
-            </div>
+            <h3 class="pt-4">Configuration</h3>
             <div class="flex gap-2 w-full">
                 <x-forms.input placeholder="Name" id="name" label="Name" required />
-                <x-forms.input placeholder="php artisan schedule:run" id="command" label="Command" required />
-                <x-forms.input placeholder="0 0 * * * or daily" id="frequency" label="Frequency" required />
+                <x-forms.input placeholder="0 0 * * * or daily" id="frequency" label="Frequency"
+                    helper="You can use every_minute, hourly, daily, weekly, monthly, yearly or a cron expression." required />
                 <x-forms.input type="number" placeholder="300" id="timeout"
                     helper="Maximum execution time in seconds (60-36000)." label="Timeout (seconds)" required />
                 @if ($type === 'application')
@@ -47,6 +40,7 @@
                         id="container" label="Service name" />
                 @endif
             </div>
+            <x-forms.input placeholder="php artisan schedule:run" id="command" label="Command" required />
     </form>
 
     <div class="pt-4">

resources/views/livewire/project/shared/storages/show.blade.php

@@ -38,6 +38,15 @@
                     <x-forms.input id="mountPath" required readonly />
                 </div>
             @endif
+            @if (!$isService)
+                @can('update', $resource)
+                    <div class="w-96">
+                        <x-forms.checkbox instantSave canGate="update" :canResource="$resource" label="Add suffix for PR deployments"
+                            id="isPreviewSuffixEnabled"
+                            helper="When enabled, a -pr-N suffix is added to this volume's name for preview deployments (e.g. myvolume becomes myvolume-pr-1). Disable this for volumes that should be shared between the main and preview deployments."></x-forms.checkbox>
+                    </div>
+                @endcan
+            @endif
         @else
             @can('update', $resource)
                 @if ($isFirst)
@@ -54,6 +63,13 @@
                         <x-forms.input id="mountPath" required />
                     </div>
                 @endif
+                @if (!$isService)
+                    <div class="w-96">
+                        <x-forms.checkbox instantSave canGate="update" :canResource="$resource" label="Add suffix for PR deployments"
+                            id="isPreviewSuffixEnabled"
+                            helper="When enabled, a -pr-N suffix is added to this volume's name for preview deployments (e.g. myvolume becomes myvolume-pr-1). Disable this for volumes that should be shared between the main and preview deployments."></x-forms.checkbox>
+                    </div>
+                @endif
                 <div class="flex gap-2">
                     <x-forms.button type="submit">
                         Update

resources/views/livewire/server/advanced.blade.php

@@ -22,6 +22,7 @@
                             id="serverDiskUsageCheckFrequency" label="Disk usage check frequency" required
                             helper="Cron expression for disk usage check frequency.<br>You can use every_minute, hourly, daily, weekly, monthly, yearly.<br><br>Default is every night at 11:00 PM." />
                         <x-forms.input canGate="update" :canResource="$server" id="serverDiskUsageNotificationThreshold"
+                            type="number" min="1" max="99"
                             label="Server disk usage notification threshold (%)" required
                             helper="If the server disk usage exceeds this threshold, Coolify will send a notification to the team members." />
                     </div>
@@ -31,12 +32,15 @@
                     <h3>Builds</h3>
                     <div class="flex flex-wrap gap-2 sm:flex-nowrap pt-4">
                         <x-forms.input canGate="update" :canResource="$server" id="concurrentBuilds"
+                            type="number" min="1"
                             label="Number of concurrent builds" required
                             helper="You can specify the number of simultaneous build processes/deployments that should run concurrently." />
                         <x-forms.input canGate="update" :canResource="$server" id="dynamicTimeout"
+                            type="number" min="1"
                             label="Deployment timeout (seconds)" required
                             helper="You can define the maximum duration for a deployment to run before timing it out." />
                         <x-forms.input canGate="update" :canResource="$server" id="deploymentQueueLimit"
+                            type="number" min="1"
                             label="Deployment queue limit" required
                             helper="Maximum number of queued deployments allowed. New deployments will be rejected with a 429 status when the limit is reached." />
                     </div>

resources/views/livewire/server/delete.blade.php

@@ -14,7 +14,7 @@
                     back!
                 </div>
                 @if ($server->definedResources()->count() > 0)
-                    <div class="pb-2 text-red-500">You need to delete all resources before deleting this server.</div>
+                    <div class="pb-2 text-red-500">This server has resources. You can force delete all resources by checking the option below.</div>
                 @endif
 
                 <x-modal-confirmation title="Confirm Server Deletion?" isErrorButton buttonTitle="Delete"

resources/views/livewire/server/docker-cleanup-executions.blade.php

@@ -100,7 +100,7 @@
                         <svg class="h-5 w-5 shrink-0 text-gray-500 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                         </svg>
-                        <code class="flex-1 text-sm font-mono text-gray-700 dark:text-gray-300">{{ data_get($result, 'command') }}</code>
+                        <code class="flex-1 text-sm font-logs text-gray-700 dark:text-gray-300">{{ data_get($result, 'command') }}</code>
                     </div>
                     @php
                     $output = data_get($result, 'output');
@@ -108,7 +108,7 @@
                     @endphp
                     <div class="p-4">
                         @if($hasOutput)
-                        <pre class="font-mono text-sm text-gray-600 dark:text-gray-300 whitespace-pre-wrap">{{ $output }}</pre>
+                        <pre class="font-logs text-sm text-gray-600 dark:text-gray-300 whitespace-pre-wrap">{{ $output }}</pre>
                         @else
                         <p class="text-sm text-gray-500 dark:text-gray-400 italic">
                             No output returned - command completed successfully

resources/views/livewire/server/docker-cleanup.blade.php

@@ -27,6 +27,22 @@
                     <div class="mt-1 mb-6">Configure Docker cleanup settings for your server.</div>
                 </div>
 
+                @if (!isCloud() && $this->isCleanupStale)
+                    <div class="mb-4">
+                        <x-callout type="warning" title="Docker Cleanup May Be Stalled">
+                            <p>The last Docker cleanup ran {{ $this->lastExecutionTime ?? 'unknown time' }} ago,
+                                which is longer than expected for the configured frequency.</p>
+                            @if (!$this->isSchedulerHealthy)
+                                <p class="mt-1">The scheduled job manager appears to be inactive. This may indicate
+                                    a stale Redis lock is blocking all scheduled jobs.</p>
+                            @endif
+                            <p class="mt-2">To resolve, run on your Coolify instance:
+                                <code class="bg-black/10 dark:bg-white/10 px-1 rounded">php artisan cleanup:redis --clear-locks</code>
+                            </p>
+                        </x-callout>
+                    </div>
+                @endif
+
                 <div class="flex flex-col gap-2">
                     <div class="flex gap-4">
                         <h3>Cleanup Configuration</h3>

resources/views/livewire/server/navbar.blade.php

@@ -197,4 +197,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>

resources/views/livewire/server/proxy.blade.php

@@ -1,7 +1,7 @@
 @php use App\Enums\ProxyTypes; @endphp
 <div>
     @if ($server->proxyType())
-        <div x-init="$wire.loadProxyConfiguration">
+        <div>
             @if ($selectedProxy !== 'NONE')
                 <form wire:submit='submit'>
                     <div class="flex items-center gap-2">
@@ -55,24 +55,19 @@
                             <div class="flex items-center gap-2">
                                 <h3>{{ $proxyTitle }}</h3>
                                 @can('update', $server)
-                                    <div wire:loading wire:target="loadProxyConfiguration">
-                                        <x-forms.button disabled>Reset Configuration</x-forms.button>
-                                    </div>
-                                    <div wire:loading.remove wire:target="loadProxyConfiguration">
-                                        @if ($proxySettings)
-                                            <x-modal-confirmation title="Reset Proxy Configuration?"
-                                                buttonTitle="Reset Configuration" submitAction="resetProxyConfiguration"
-                                                :actions="[
-                                                    'Reset proxy configuration to default settings',
-                                                    'All custom configurations will be lost',
-                                                    'Custom ports and entrypoints will be removed',
-                                                ]" confirmationText="{{ $server->name }}"
-                                                confirmationLabel="Please confirm by entering the server name below"
-                                                shortConfirmationLabel="Server Name" step2ButtonText="Reset Configuration"
-                                                :confirmWithPassword="false" :confirmWithText="true">
-                                            </x-modal-confirmation>
-                                        @endif
-                                    </div>
+                                    @if ($proxySettings)
+                                        <x-modal-confirmation title="Reset Proxy Configuration?"
+                                            buttonTitle="Reset Configuration" submitAction="resetProxyConfiguration"
+                                            :actions="[
+                                                'Reset proxy configuration to default settings',
+                                                'All custom configurations will be lost',
+                                                'Custom ports and entrypoints will be removed',
+                                            ]" confirmationText="{{ $server->name }}"
+                                            confirmationLabel="Please confirm by entering the server name below"
+                                            shortConfirmationLabel="Server Name" step2ButtonText="Reset Configuration"
+                                            :confirmWithPassword="false" :confirmWithText="true">
+                                        </x-modal-confirmation>
+                                    @endif
                                 @endcan
                                 @if ($server->proxyType() === ProxyTypes::TRAEFIK->value)
                                     <button type="button" x-show="traefikWarningsDismissed"
@@ -134,19 +129,14 @@
                             @endif
                         </div>
                     @endif
-                    <div wire:loading wire:target="loadProxyConfiguration" class="pt-4">
-                        <x-loading text="Loading proxy configuration..." />
-                    </div>
-                    <div wire:loading.remove wire:target="loadProxyConfiguration">
-                        @if ($proxySettings)
-                            <div class="flex flex-col gap-2 pt-2">
-                                <x-forms.textarea canGate="update" :canResource="$server" useMonacoEditor
-                                    monacoEditorLanguage="yaml"
-                                    label="Configuration file ( {{ $this->configurationFilePath }} )"
-                                    name="proxySettings" id="proxySettings" rows="30" />
-                            </div>
-                        @endif
-                    </div>
+                    @if ($proxySettings)
+                        <div class="flex flex-col gap-2 pt-2">
+                            <x-forms.textarea canGate="update" :canResource="$server" useMonacoEditor
+                                monacoEditorLanguage="yaml"
+                                label="Configuration file ( {{ $this->configurationFilePath }} )"
+                                name="proxySettings" id="proxySettings" rows="30" />
+                        </div>
+                    @endif
                 </form>
             @elseif($selectedProxy === 'NONE')
                 <div class="flex items-center gap-2">

resources/views/livewire/server/sentinel.blade.php

@@ -91,13 +91,14 @@
 
                         <div class="flex flex-col gap-2">
                             <div class="flex flex-wrap gap-2 sm:flex-nowrap">
-                                <x-forms.input canGate="update" :canResource="$server"
+                                <x-forms.input canGate="update" :canResource="$server" type="number" min="1"
                                     id="sentinelMetricsRefreshRateSeconds" label="Metrics rate (seconds)" required
                                     helper="Interval used for gathering metrics. Lower values result in more disk space usage." />
-                                <x-forms.input canGate="update" :canResource="$server" id="sentinelMetricsHistoryDays"
+                                <x-forms.input canGate="update" :canResource="$server" type="number" min="1"
+                                    id="sentinelMetricsHistoryDays"
                                     label="Metrics history (days)" required
                                     helper="Number of days to retain metrics data for." />
-                                <x-forms.input canGate="update" :canResource="$server"
+                                <x-forms.input canGate="update" :canResource="$server" type="number" min="10"
                                     id="sentinelPushIntervalSeconds" label="Push interval (seconds)" required
                                     helper="Interval at which metrics data is sent to the collector." />
                             </div>

resources/views/livewire/server/show.blade.php

@@ -289,6 +289,58 @@
                     </div>
                 </div>
             </form>
+            @if ($server->isFunctional())
+                <div class="pt-6">
+                    <div class="flex items-center gap-2 mb-3">
+                        <h3>Server Details</h3>
+                        @if ($server->server_metadata)
+                            <button wire:click="refreshServerMetadata" wire:loading.attr="disabled"
+                                wire:target="refreshServerMetadata" title="Refresh server details"
+                                class="dark:hover:fill-white fill-black dark:fill-warning">
+                                <svg wire:loading.remove wire:target="refreshServerMetadata" class="w-4 h-4"
+                                    viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                    <path
+                                        d="M12 2a10.016 10.016 0 0 0-7 2.877V3a1 1 0 1 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2H6.218A7.98 7.98 0 0 1 20 12a1 1 0 0 0 2 0A10.012 10.012 0 0 0 12 2zm7.989 13.5h-4.5a1 1 0 0 0 0 2h2.293A7.98 7.98 0 0 1 4 12a1 1 0 0 0-2 0a9.986 9.986 0 0 0 16.989 7.133V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-1-1z" />
+                                </svg>
+                                <svg wire:loading wire:target="refreshServerMetadata" class="w-4 h-4 animate-spin"
+                                    viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                    <path
+                                        d="M12 2a10.016 10.016 0 0 0-7 2.877V3a1 1 0 1 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2H6.218A7.98 7.98 0 0 1 20 12a1 1 0 0 0 2 0A10.012 10.012 0 0 0 12 2zm7.989 13.5h-4.5a1 1 0 0 0 0 2h2.293A7.98 7.98 0 0 1 4 12a1 1 0 0 0-2 0a9.986 9.986 0 0 0 16.989 7.133V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-1-1z" />
+                                </svg>
+                            </button>
+                        @endif
+                    </div>
+                    @if ($server->server_metadata)
+                        @php $meta = $server->server_metadata; @endphp
+                        <div class="grid grid-cols-2 gap-x-6 gap-y-2 text-sm lg:grid-cols-3">
+                            <div><span class="font-medium dark:text-neutral-400">OS:</span>
+                                {{ $meta['os'] ?? 'N/A' }}</div>
+                            <div><span class="font-medium dark:text-neutral-400">Arch:</span>
+                                {{ $meta['arch'] ?? 'N/A' }}</div>
+                            <div><span class="font-medium dark:text-neutral-400">Kernel:</span>
+                                {{ $meta['kernel'] ?? 'N/A' }}</div>
+                            <div><span class="font-medium dark:text-neutral-400">CPU Cores:</span>
+                                {{ $meta['cpus'] ?? 'N/A' }}</div>
+                            <div><span class="font-medium dark:text-neutral-400">RAM:</span>
+                                {{ isset($meta['memory_bytes']) ? round($meta['memory_bytes'] / 1073741824, 1) . ' GB' : 'N/A' }}
+                            </div>
+                            <div><span class="font-medium dark:text-neutral-400">Up Since:</span>
+                                {{ $meta['uptime_since'] ?? 'N/A' }}</div>
+                        </div>
+                        @if (isset($meta['collected_at']))
+                            <p class="mt-2 text-xs dark:text-neutral-500">Last updated:
+                                {{ \Carbon\Carbon::parse($meta['collected_at'])->diffForHumans() }}</p>
+                        @endif
+                    @else
+                        <x-forms.button wire:click="refreshServerMetadata" canGate="update"
+                            :canResource="$server">
+                            <span wire:loading.remove wire:target="refreshServerMetadata">Fetch Server
+                                Details</span>
+                            <span wire:loading wire:target="refreshServerMetadata">Fetching...</span>
+                        </x-forms.button>
+                    @endif
+                </div>
+            @endif
             @if (!$server->hetzner_server_id && $availableHetznerTokens->isNotEmpty())
                 <div class="pt-6">
                     <h3>Link to Hetzner Cloud</h3>

resources/views/livewire/settings-email.blade.php

@@ -53,7 +53,7 @@
                         <x-forms.input id="smtpUsername" label="SMTP Username" />
                         <x-forms.input id="smtpPassword" type="password" label="SMTP Password"
                             autocomplete="new-password" />
-                        <x-forms.input id="smtpTimeout" helper="Timeout value for sending emails." label="Timeout" />
+                        <x-forms.input id="smtpTimeout" type="number" helper="Timeout value for sending emails." label="Timeout" />
                     </div>
                 </div>
             </form>

resources/views/livewire/settings/advanced.blade.php

@@ -16,14 +16,34 @@
                 <div class="pb-4">Advanced settings for your Coolify instance.</div>
 
                 <div class="flex flex-col gap-1">
-                    <div class="md:w-96">
-                        <x-forms.checkbox instantSave id="is_registration_enabled"
-                            helper="Allow users to self-register. If disabled, only administrators can create accounts."
-                            label="Registration Allowed" />
-                    </div>
+                    @if ($is_registration_enabled)
+                        <div class="md:w-96" wire:key="registration-enabled">
+                            <x-forms.checkbox instantSave id="is_registration_enabled"
+                                helper="Allow users to self-register. If disabled, only administrators can create accounts."
+                                label="Registration Allowed" />
+                        </div>
+                    @else
+                        <div class="flex items-center justify-between gap-2 md:w-96"
+                            wire:key="registration-disabled">
+                            <label class="flex items-center gap-2">
+                                Registration Allowed
+                                <x-helper
+                                    helper="Allow users to self-register. If disabled, only administrators can create accounts.">
+                                </x-helper>
+                            </label>
+                            <x-modal-confirmation title="Enable Registration?" buttonTitle="Enable" isErrorButton
+                                submitAction="toggleRegistration" :actions="[
+                                    'Enables registration for everyone',
+                                ]"
+                                warningMessage="Enabling registration allows anyone to create an account on this instance. Make sure you understand the implications before proceeding."
+                                confirmationText="ENABLE REGISTRATION"
+                                confirmationLabel="Please type the confirmation text to enable registration."
+                                shortConfirmationLabel="Confirmation text" />
+                        </div>
+                    @endif
                     <div class="md:w-96">
                         <x-forms.checkbox instantSave id="do_not_track"
-                            helper="Opt out of reporting this instance to coolify.io's installation count. No other data is collected."
+                            helper="Opt out of anonymous usage tracking. When enabled, this instance will not report to coolify.io's installation count and will not send error reports to help improve Coolify."
                             label="Do Not Track" />
                     </div>
                     <h4 class="pt-4">DNS Settings</h4>
@@ -95,4 +115,4 @@
                 </div>
             </form>
         </div>
-</div>
+</div>

resources/views/livewire/settings/index.blade.php

@@ -18,8 +18,10 @@
                 <div class="flex flex-col gap-2">
                     <div class="flex flex-wrap items-end gap-2">
                         <div class="flex gap-2 md:flex-row flex-col w-full">
-                            <x-forms.input canGate="update" :canResource="$settings" id="fqdn" label="Domain"
-                                helper="Enter the full domain name (FQDN) of the instance, including 'https://' if you want to secure the dashboard with HTTPS. Setting this will make the dashboard accessible via this domain, secured by HTTPS, instead of just the IP address."
+                            <x-forms.input canGate="update" :canResource="$settings" id="fqdn" label="URL"
+                                helper="Enter the full URL of the instance (for example, https://dashboard.example.com).<br><br>
+                                <span class='dark:text-warning text-coollabs'>Important: </span>
+                                If you want the dashboard to be accessible over HTTPS, you must include <b>https://</b> at the start of the URL. Without it, the dashboard will use HTTP and won’t be secured."
                                 placeholder="https://coolify.yourdomain.com" />
                             <x-forms.input canGate="update" :canResource="$settings" id="instance_name" label="Name" placeholder="Coolify"
                                 helper="Custom name for your Coolify instance, shown in the URL." />

resources/views/livewire/settings/scheduled-jobs.blade.php

@@ -0,0 +1,283 @@
+<div>
+    <x-slot:title>
+        Scheduled Job Issues | Coolify
+    </x-slot>
+    <x-settings.navbar />
+    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'executions' }"
+        class="flex flex-col gap-8">
+        <div>
+            <div class="flex items-center gap-2">
+                <h2>Scheduled Job Issues</h2>
+                <x-forms.button wire:click="refresh">Refresh</x-forms.button>
+            </div>
+            <div class="pb-4">Shows failed executions, skipped jobs, and scheduler health.</div>
+        </div>
+
+        {{-- Tab Buttons --}}
+        <div class="flex flex-row gap-4">
+            <div @class([
+                    'box-without-bg cursor-pointer dark:bg-coolgray-100 dark:text-white w-full text-center items-center justify-center',
+                ])
+                :class="activeTab === 'executions' && 'dark:bg-coollabs bg-coollabs text-white'"
+                @click="activeTab = 'executions'; window.location.hash = 'executions'">
+                Failures ({{ $executions->count() }})
+            </div>
+            <div @class([
+                    'box-without-bg cursor-pointer dark:bg-coolgray-100 dark:text-white w-full text-center items-center justify-center',
+                ])
+                :class="activeTab === 'scheduler-runs' && 'dark:bg-coollabs bg-coollabs text-white'"
+                @click="activeTab = 'scheduler-runs'; window.location.hash = 'scheduler-runs'">
+                Scheduler Runs ({{ $managerRuns->count() }})
+            </div>
+            <div @class([
+                    'box-without-bg cursor-pointer dark:bg-coolgray-100 dark:text-white w-full text-center items-center justify-center',
+                ])
+                :class="activeTab === 'skipped-jobs' && 'dark:bg-coollabs bg-coollabs text-white'"
+                @click="activeTab = 'skipped-jobs'; window.location.hash = 'skipped-jobs'">
+                Skipped Jobs ({{ $skipTotalCount }})
+            </div>
+        </div>
+
+        {{-- Executions Tab --}}
+        <div x-show="activeTab === 'executions'" x-cloak>
+            {{-- Filters --}}
+            <div class="flex gap-4 flex-wrap mb-4">
+                <div class="flex flex-col gap-1">
+                    <label class="text-sm font-medium">Type</label>
+                    <select wire:model.live="filterType"
+                        class="w-40 border bg-white dark:bg-coolgray-100 border-gray-300 dark:border-coolgray-400 rounded-md text-sm">
+                        <option value="all">All Types</option>
+                        <option value="backup">Backups</option>
+                        <option value="task">Tasks</option>
+                        <option value="cleanup">Docker Cleanup</option>
+                    </select>
+                </div>
+                <div class="flex flex-col gap-1">
+                    <label class="text-sm font-medium">Time Range</label>
+                    <select wire:model.live="filterDate"
+                        class="w-40 border bg-white dark:bg-coolgray-100 border-gray-300 dark:border-coolgray-400 rounded-md text-sm">
+                        <option value="last_24h">Last 24 Hours</option>
+                        <option value="last_7d">Last 7 Days</option>
+                        <option value="last_30d">Last 30 Days</option>
+                        <option value="all">All Time</option>
+                    </select>
+                </div>
+            </div>
+
+            <div class="overflow-x-auto">
+                <table class="w-full text-sm text-left">
+                    <thead class="text-xs uppercase bg-gray-50 dark:bg-coolgray-200">
+                        <tr>
+                            <th class="px-4 py-3">Type</th>
+                            <th class="px-4 py-3">Resource</th>
+                            <th class="px-4 py-3">Server</th>
+                            <th class="px-4 py-3">Started</th>
+                            <th class="px-4 py-3">Duration</th>
+                            <th class="px-4 py-3">Message</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        @forelse($executions as $execution)
+                            <tr wire:key="exec-{{ $execution['type'] }}-{{ $execution['id'] }}"
+                                class="border-b border-gray-200 dark:border-coolgray-400 hover:bg-gray-50 dark:hover:bg-coolgray-200">
+                                <td class="px-4 py-3">
+                                    @php
+                                        $typeLabel = match($execution['type']) {
+                                            'backup' => 'Backup',
+                                            'task' => 'Task',
+                                            'cleanup' => 'Cleanup',
+                                            default => ucfirst($execution['type']),
+                                        };
+                                        $typeBg = match($execution['type']) {
+                                            'backup' => 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
+                                            'task' => 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300',
+                                            'cleanup' => 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300',
+                                            default => 'bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300',
+                                        };
+                                    @endphp
+                                    <span class="px-2 py-1 rounded-md text-xs font-medium {{ $typeBg }}">
+                                        {{ $typeLabel }}
+                                    </span>
+                                </td>
+                                <td class="px-4 py-3">
+                                    {{ $execution['resource_name'] }}
+                                    @if($execution['resource_type'])
+                                        <span class="text-xs text-gray-500">({{ $execution['resource_type'] }})</span>
+                                    @endif
+                                </td>
+                                <td class="px-4 py-3">{{ $execution['server_name'] }}</td>
+                                <td class="px-4 py-3 whitespace-nowrap">
+                                    {{ $execution['created_at']->diffForHumans() }}
+                                    <span class="block text-xs text-gray-500">{{ $execution['created_at']->format('M d H:i') }}</span>
+                                </td>
+                                <td class="px-4 py-3 whitespace-nowrap">
+                                    @if($execution['finished_at'] && $execution['created_at'])
+                                        {{ \Carbon\Carbon::parse($execution['created_at'])->diffInSeconds(\Carbon\Carbon::parse($execution['finished_at'])) }}s
+                                    @elseif($execution['status'] === 'running')
+                                        <x-loading class="w-4 h-4" />
+                                    @else
+                                        -
+                                    @endif
+                                </td>
+                                <td class="px-4 py-3 max-w-xs truncate" title="{{ $execution['message'] }}">
+                                    {{ \Illuminate\Support\Str::limit($execution['message'], 80) }}
+                                </td>
+                            </tr>
+                        @empty
+                            <tr>
+                                <td colspan="6" class="px-4 py-8 text-center text-gray-500">
+                                    No failures found for the selected filters.
+                                </td>
+                            </tr>
+                        @endforelse
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        {{-- Scheduler Runs Tab --}}
+        <div x-show="activeTab === 'scheduler-runs'" x-cloak>
+            <div class="pb-4 text-sm text-gray-500">Shows when the ScheduledJobManager executed. Gaps indicate lock conflicts or missed runs.</div>
+            <div class="overflow-x-auto">
+                <table class="w-full text-sm text-left">
+                    <thead class="text-xs uppercase bg-gray-50 dark:bg-coolgray-200">
+                        <tr>
+                            <th class="px-4 py-3">Time</th>
+                            <th class="px-4 py-3">Event</th>
+                            <th class="px-4 py-3">Duration</th>
+                            <th class="px-4 py-3">Dispatched</th>
+                            <th class="px-4 py-3">Skipped</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        @forelse($managerRuns as $run)
+                            <tr wire:key="run-{{ $loop->index }}"
+                                class="border-b border-gray-200 dark:border-coolgray-400">
+                                <td class="px-4 py-2 whitespace-nowrap text-xs">{{ $run['timestamp'] }}</td>
+                                <td class="px-4 py-2">{{ $run['message'] }}</td>
+                                <td class="px-4 py-2">
+                                    @if($run['duration_ms'] !== null)
+                                        {{ $run['duration_ms'] }}ms
+                                    @else
+                                        -
+                                    @endif
+                                </td>
+                                <td class="px-4 py-2">{{ $run['dispatched'] ?? '-' }}</td>
+                                <td class="px-4 py-2">
+                                    @if(($run['skipped'] ?? 0) > 0)
+                                        <span class="text-warning">{{ $run['skipped'] }}</span>
+                                    @else
+                                        {{ $run['skipped'] ?? '-' }}
+                                    @endif
+                                </td>
+                            </tr>
+                        @empty
+                            <tr>
+                                <td colspan="5" class="px-4 py-4 text-center text-gray-500">
+                                    No scheduler run logs found. Logs appear after the ScheduledJobManager runs.
+                                </td>
+                            </tr>
+                        @endforelse
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        {{-- Skipped Jobs Tab --}}
+        <div x-show="activeTab === 'skipped-jobs'" x-cloak>
+            <div class="pb-4 text-sm text-gray-500">Jobs that were not dispatched because conditions were not met.</div>
+            @if($skipTotalCount > $skipDefaultTake)
+                <div class="flex items-center gap-2 mb-4">
+                    <x-forms.button disabled="{{ !$showSkipPrev }}" wire:click="skipPreviousPage">
+                        <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M15 19l-7-7 7-7" />
+                        </svg>
+                    </x-forms.button>
+                    <span class="text-sm">
+                        Page {{ $skipCurrentPage }} of {{ ceil($skipTotalCount / $skipDefaultTake) }}
+                    </span>
+                    <x-forms.button disabled="{{ !$showSkipNext }}" wire:click="skipNextPage">
+                        <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M9 5l7 7-7 7" />
+                        </svg>
+                    </x-forms.button>
+                </div>
+            @endif
+            <div class="overflow-x-auto">
+                <table class="w-full text-sm text-left">
+                    <thead class="text-xs uppercase bg-gray-50 dark:bg-coolgray-200">
+                        <tr>
+                            <th class="px-4 py-3">Time</th>
+                            <th class="px-4 py-3">Type</th>
+                            <th class="px-4 py-3">Resource</th>
+                            <th class="px-4 py-3">Reason</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        @forelse($skipLogs as $skip)
+                            <tr wire:key="skip-{{ $loop->index }}"
+                                class="border-b border-gray-200 dark:border-coolgray-400">
+                                <td class="px-4 py-2 whitespace-nowrap text-xs">{{ $skip['timestamp'] }}</td>
+                                <td class="px-4 py-2">
+                                    @php
+                                        $skipTypeBg = match($skip['type']) {
+                                            'backup' => 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
+                                            'task' => 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300',
+                                            'docker_cleanup' => 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300',
+                                            default => 'bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300',
+                                        };
+                                    @endphp
+                                    <span class="px-2 py-1 rounded-md text-xs font-medium {{ $skipTypeBg }}">
+                                        {{ ucfirst(str_replace('_', ' ', $skip['type'])) }}
+                                    </span>
+                                </td>
+                                <td class="px-4 py-2">
+                                    @if($skip['link'] ?? null)
+                                        <a href="{{ $skip['link'] }}" class="text-white underline hover:no-underline">
+                                            {{ $skip['resource_name'] }}
+                                        </a>
+                                    @elseif($skip['resource_name'] ?? null)
+                                        {{ $skip['resource_name'] }}
+                                    @else
+                                        <span class="text-gray-500">{{ $skip['context']['task_name'] ?? $skip['context']['server_name'] ?? 'Deleted' }}</span>
+                                    @endif
+                                </td>
+                                <td class="px-4 py-2">
+                                    @php
+                                        $reasonLabel = match($skip['reason']) {
+                                            'server_not_functional' => 'Server not functional',
+                                            'subscription_unpaid' => 'Subscription unpaid',
+                                            'database_deleted' => 'Database deleted',
+                                            'server_deleted' => 'Server deleted',
+                                            'resource_deleted' => 'Resource deleted',
+                                            'application_not_running' => 'Application not running',
+                                            'service_not_running' => 'Service not running',
+                                            default => ucfirst(str_replace('_', ' ', $skip['reason'])),
+                                        };
+                                        $reasonBg = match($skip['reason']) {
+                                            'server_not_functional', 'database_deleted', 'server_deleted', 'resource_deleted' => 'text-red-600 dark:text-red-400',
+                                            'subscription_unpaid' => 'text-warning',
+                                            'application_not_running', 'service_not_running' => 'text-orange-600 dark:text-orange-400',
+                                            default => '',
+                                        };
+                                    @endphp
+                                    <span class="{{ $reasonBg }}">{{ $reasonLabel }}</span>
+                                </td>
+                            </tr>
+                        @empty
+                            <tr>
+                                <td colspan="4" class="px-4 py-4 text-center text-gray-500">
+                                    No skipped jobs found. This means all scheduled jobs passed their conditions.
+                                </td>
+                            </tr>
+                        @endforelse
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>

resources/views/livewire/source/github/change.blade.php

@@ -242,15 +242,15 @@
                             <div class="flex flex-col sm:flex-row items-start sm:items-end gap-2">
                                 <x-forms.select wire:model.live='webhook_endpoint' label="Webhook Endpoint"
                                     helper="All Git webhooks will be sent to this endpoint. <br><br>If you would like to use domain instead of IP address, set your Coolify instance's FQDN in the Settings menu.">
+                                    @if ($fqdn)
+                                        <option value="{{ $fqdn }}">Use {{ $fqdn }}</option>
+                                    @endif
                                     @if ($ipv4)
                                         <option value="{{ $ipv4 }}">Use {{ $ipv4 }}</option>
                                     @endif
                                     @if ($ipv6)
                                         <option value="{{ $ipv6 }}">Use {{ $ipv6 }}</option>
                                     @endif
-                                    @if ($fqdn)
-                                        <option value="{{ $fqdn }}">Use {{ $fqdn }}</option>
-                                    @endif
                                     @if (config('app.url'))
                                         <option value="{{ config('app.url') }}">Use {{ config('app.url') }}</option>
                                     @endif

resources/views/livewire/storage/form.blade.php

@@ -1,36 +1,5 @@
 <div>
     <form class="flex flex-col gap-2 pb-6" wire:submit='submit'>
-        <div class="flex items-start gap-2">
-            <div class="">
-                <h1>Storage Details</h1>
-                <div class="subtitle">{{ $storage->name }}</div>
-                <div class="flex items-center gap-2 pb-4">
-                    <div>Current Status:</div>
-                    @if ($isUsable)
-                        <span
-                            class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded dark:text-green-100 dark:bg-green-800">
-                            Usable
-                        </span>
-                    @else
-                        <span
-                            class="px-2 py-1 text-xs font-semibold text-red-800 bg-red-100 rounded dark:text-red-100 dark:bg-red-800">
-                            Not Usable
-                        </span>
-                    @endif
-                </div>
-            </div>
-            <x-forms.button canGate="update" :canResource="$storage" type="submit">Save</x-forms.button>
-
-            @can('delete', $storage)
-                <x-modal-confirmation title="Confirm Storage Deletion?" isErrorButton buttonTitle="Delete"
-                    submitAction="delete({{ $storage->id }})" :actions="[
-                        'The selected storage location will be permanently deleted from Coolify.',
-                        'If the storage location is in use by any backup jobs those backup jobs will only store the backup locally on the server.',
-                    ]" confirmationText="{{ $storage->name }}"
-                    confirmationLabel="Please confirm the execution of the actions by entering the Storage Name below"
-                    shortConfirmationLabel="Storage Name" :confirmWithPassword="false" step2ButtonText="Permanently Delete" />
-            @endcan
-        </div>
         <div class="flex gap-2">
             <x-forms.input canGate="update" :canResource="$storage" label="Name" id="name" />
             <x-forms.input canGate="update" :canResource="$storage" label="Description" id="description" />

resources/views/livewire/storage/resources.blade.php

@@ -0,0 +1,107 @@
+<div x-data="{ search: '' }">
+    <x-forms.input placeholder="Search resources..." x-model="search" id="null" />
+    @if ($groupedBackups->count() > 0)
+        <div class="overflow-x-auto pt-4">
+            <div class="inline-block min-w-full">
+                <div class="overflow-hidden">
+                    <table class="min-w-full">
+                        <thead>
+                            <tr>
+                                <th class="px-5 py-3 text-xs font-medium text-left uppercase">Database</th>
+                                <th class="px-5 py-3 text-xs font-medium text-left uppercase">Frequency</th>
+                                <th class="px-5 py-3 text-xs font-medium text-left uppercase">Status</th>
+                                <th class="px-5 py-3 text-xs font-medium text-left uppercase">S3 Storage</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            @foreach ($groupedBackups as $backups)
+                                @php
+                                    $firstBackup = $backups->first();
+                                    $database = $firstBackup->database;
+                                    $databaseName = $database?->name ?? 'Deleted database';
+                                    $resourceLink = null;
+                                    $backupParams = null;
+                                    if ($database && $database instanceof \App\Models\ServiceDatabase) {
+                                        $service = $database->service;
+                                        if ($service) {
+                                            $environment = $service->environment;
+                                            $project = $environment?->project;
+                                            if ($project && $environment) {
+                                                $resourceLink = route('project.service.configuration', [
+                                                    'project_uuid' => $project->uuid,
+                                                    'environment_uuid' => $environment->uuid,
+                                                    'service_uuid' => $service->uuid,
+                                                ]);
+                                            }
+                                        }
+                                    } elseif ($database) {
+                                        $environment = $database->environment;
+                                        $project = $environment?->project;
+                                        if ($project && $environment) {
+                                            $resourceLink = route('project.database.backup.index', [
+                                                'project_uuid' => $project->uuid,
+                                                'environment_uuid' => $environment->uuid,
+                                                'database_uuid' => $database->uuid,
+                                            ]);
+                                            $backupParams = [
+                                                'project_uuid' => $project->uuid,
+                                                'environment_uuid' => $environment->uuid,
+                                                'database_uuid' => $database->uuid,
+                                            ];
+                                        }
+                                    }
+                                @endphp
+                                @foreach ($backups as $backup)
+                                    <tr class="dark:hover:bg-coolgray-300 hover:bg-neutral-100" x-show="search === '' || '{{ strtolower(addslashes($databaseName)) }}'.includes(search.toLowerCase()) || '{{ strtolower(addslashes($backup->frequency)) }}'.includes(search.toLowerCase())">
+                                        <td class="px-5 py-4 text-sm whitespace-nowrap">
+                                            @if ($resourceLink)
+                                                <a class="hover:underline" {{ wireNavigate() }} href="{{ $resourceLink }}">{{ $databaseName }} <x-internal-link /></a>
+                                            @else
+                                                {{ $databaseName }}
+                                            @endif
+                                        </td>
+                                        <td class="px-5 py-4 text-sm whitespace-nowrap">
+                                            @php
+                                                $backupLink = null;
+                                                if ($backupParams) {
+                                                    $backupLink = route('project.database.backup.execution', array_merge($backupParams, [
+                                                        'backup_uuid' => $backup->uuid,
+                                                    ]));
+                                                }
+                                            @endphp
+                                            @if ($backupLink)
+                                                <a class="hover:underline" {{ wireNavigate() }} href="{{ $backupLink }}">{{ $backup->frequency }} <x-internal-link /></a>
+                                            @else
+                                                {{ $backup->frequency }}
+                                            @endif
+                                        </td>
+                                        <td class="px-5 py-4 text-sm font-medium whitespace-nowrap">
+                                            @if ($backup->enabled)
+                                                <span class="text-green-500">Enabled</span>
+                                            @else
+                                                <span class="text-yellow-500">Disabled</span>
+                                            @endif
+                                        </td>
+                                        <td class="px-5 py-4 text-sm whitespace-nowrap">
+                                            <div class="flex items-center gap-2">
+                                                <select wire:model="selectedStorages.{{ $backup->id }}" class="w-full input">
+                                                    @foreach ($allStorages as $s3)
+                                                        <option value="{{ $s3->id }}" @disabled(!$s3->is_usable)>{{ $s3->name }}@if (!$s3->is_usable) (unusable)@endif</option>
+                                                    @endforeach
+                                                </select>
+                                                <x-forms.button wire:click="moveBackup({{ $backup->id }})">Save</x-forms.button>
+                                                <x-forms.button isError wire:click="disableS3({{ $backup->id }})" wire:confirm="Are you sure you want to disable S3 for this backup schedule?">Disable S3</x-forms.button>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                @endforeach
+                            @endforeach
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    @else
+        <div class="pt-4">No backup schedules are using this storage.</div>
+    @endif
+</div>

resources/views/livewire/storage/show.blade.php

@@ -2,5 +2,51 @@
     <x-slot:title>
         {{ data_get_str($storage, 'name')->limit(10) }} >Storages | Coolify
     </x-slot>
-    <livewire:storage.form :storage="$storage" />
+
+    <div class="flex items-center gap-2">
+        <h1>Storage Details</h1>
+        @if ($storage->is_usable)
+            <span class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded dark:text-green-100 dark:bg-green-800">
+                Usable
+            </span>
+        @else
+            <span class="px-2 py-1 text-xs font-semibold text-red-800 bg-red-100 rounded dark:text-red-100 dark:bg-red-800">
+                Not Usable
+            </span>
+        @endif
+        <x-forms.button canGate="update" :canResource="$storage" wire:click="$dispatch('submitStorage')" :disabled="$currentRoute !== 'storage.show'">Save</x-forms.button>
+        @can('delete', $storage)
+            <x-modal-confirmation title="Confirm Storage Deletion?" isErrorButton buttonTitle="Delete"
+                submitAction="delete({{ $storage->id }})" :actions="array_filter([
+                    'The selected storage location will be permanently deleted from Coolify.',
+                    $backupCount > 0
+                        ? $backupCount . ' backup schedule(s) will be updated to no longer save to S3 and will only store backups locally on the server.'
+                        : null,
+                ])" confirmationText="{{ $storage->name }}"
+                confirmationLabel="Please confirm the execution of the actions by entering the Storage Name below"
+                shortConfirmationLabel="Storage Name" :confirmWithPassword="false" step2ButtonText="Permanently Delete" />
+        @endcan
+    </div>
+    <div class="subtitle">{{ $storage->name }}</div>
+
+    <div class="navbar-main">
+        <nav class="flex shrink-0 gap-6 items-center whitespace-nowrap scrollbar min-h-10">
+            <a class="{{ request()->routeIs('storage.show') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
+                href="{{ route('storage.show', ['storage_uuid' => $storage->uuid]) }}">
+                General
+            </a>
+            <a class="{{ request()->routeIs('storage.resources') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
+                href="{{ route('storage.resources', ['storage_uuid' => $storage->uuid]) }}">
+                Resources
+            </a>
+        </nav>
+    </div>
+
+    <div class="pt-4">
+    @if ($currentRoute === 'storage.show')
+        <livewire:storage.form :storage="$storage" />
+    @elseif ($currentRoute === 'storage.resources')
+        <livewire:storage.resources :storage="$storage" :key="'resources-'.uniqid()" />
+    @endif
+    </div>
 </div>

resources/views/livewire/subscription/actions.blade.php

@@ -1,53 +1,287 @@
-<div>
+<div wire:init="loadRefundEligibility">
     @if (subscriptionProvider() === 'stripe')
-        <div class="pt-4">
-            <h2>Your current plan</h2>
-            <div class="pb-4">Tier: <strong class="dark:text-warning">
-                    @if (data_get(currentTeam(), 'subscription')->type() == 'dynamic')
-                        Pay-as-you-go
+        {{-- Plan Overview --}}
+        <section x-data="{
+            qty: {{ $quantity }},
+            get current() { return $wire.server_limits; },
+            activeServers: {{ currentTeam()->servers->count() }},
+            preview: @js($pricePreview),
+            loading: false,
+            showModal: false,
+            async fetchPreview() {
+                if (this.qty < 2 || this.qty > 100 || this.qty === this.current) { return; }
+                this.loading = true;
+                this.preview = null;
+                await $wire.loadPricePreview(this.qty);
+                this.preview = $wire.pricePreview;
+                this.loading = false;
+            },
+            fmt(cents) {
+                if (!this.preview) return '';
+                const c = this.preview.currency;
+                return c === 'USD' ? '$' + (cents / 100).toFixed(2) : (cents / 100).toFixed(2) + ' ' + c;
+            },
+            get isReduction() { return this.qty < this.activeServers; },
+            get hasChanged() { return this.qty !== this.current; },
+            get hasPreview() { return this.preview !== null; },
+            openAdjust() {
+                this.showModal = true;
+            },
+            closeAdjust() {
+                this.showModal = false;
+                this.qty = this.current;
+                this.preview = null;
+            }
+        }" @success.window="preview = null; showModal = false; qty = $wire.server_limits"
+            @keydown.escape.window="if (showModal) { closeAdjust(); }" class="-mt-2">
+            <h3 class="pb-2">Plan Overview</h3>
+            <div class="space-y-2">
+                <div class="text-sm">
+                    <span class="text-neutral-500">Plan:</span>
+                    <span class="dark:text-warning font-medium">
+                        @if (data_get(currentTeam(), 'subscription')->type() == 'dynamic')
+                            Pay-as-you-go
+                        @else
+                            {{ data_get(currentTeam(), 'subscription')->type() }}
+                        @endif
+                    </span>
+                    <span class="text-neutral-500">&middot; {{ $billingInterval === 'yearly' ? 'Yearly' : 'Monthly' }}</span>
+                    <span class="text-neutral-500">&middot;</span>
+                    @if (currentTeam()->subscription->stripe_cancel_at_period_end)
+                        <span class="text-red-500 font-medium">Cancelling at end of period</span>
                     @else
-                        {{ data_get(currentTeam(), 'subscription')->type() }}
+                        <span class="text-green-500 font-medium">Active</span>
                     @endif
-
-                </strong></div>
-
-            @if (currentTeam()->subscription->stripe_cancel_at_period_end)
-                <div class="pb-2">Subscription is active but on cancel period.</div>
-            @else
-                <div class="pb-2">Subscription is active. Last invoice is
-                    {{ currentTeam()->subscription->stripe_invoice_paid ? 'paid' : 'not paid' }}.</div>
-            @endif
-            <div class="flex items-center gap-2">
-                <div class="w-48">Number of paid servers:</div>
-                <div class="text-xl font-bold dark:text-white">{{ $server_limits }}</div>
-            </div>
-            <div class="flex items-center gap-2">
-                <div class="w-48">Currently active servers:</div>
-                <div class="text-xl font-bold dark:text-white">{{ currentTeam()->servers->count() }}</div>
+                </div>
+                <div class="text-sm flex items-center gap-2 flex-wrap">
+                    <span>
+                        <span class="text-neutral-500">Active servers:</span>
+                        <span class="font-medium {{ currentTeam()->serverOverflow() ? 'text-red-500' : 'dark:text-white' }}">{{ currentTeam()->servers->count() }}</span>
+                        <span class="text-neutral-500">/</span>
+                        <span class="font-medium dark:text-white" x-text="current"></span>
+                        <span class="text-neutral-500">paid</span>
+                    </span>
+                    <x-forms.button isHighlighted @click="openAdjust()">Adjust</x-forms.button>
+                </div>
+                <div class="text-sm text-neutral-500">
+                    @if ($refundCheckLoading)
+                        <x-loading text="Loading..." />
+                    @elseif ($nextBillingDate)
+                        @if (currentTeam()->subscription->stripe_cancel_at_period_end)
+                            Cancels on <span class="dark:text-white font-medium">{{ $nextBillingDate }}</span>
+                        @else
+                            Next billing <span class="dark:text-white font-medium">{{ $nextBillingDate }}</span>
+                        @endif
+                    @endif
+                </div>
             </div>
+
             @if (currentTeam()->serverOverflow())
-                <x-callout type="danger" title="WARNING" class="my-4">
-                    You must delete {{ currentTeam()->servers->count() - $server_limits }} servers,
-                    or upgrade your subscription. {{ currentTeam()->servers->count() - $server_limits }} servers will be
-                    deactivated.
+                <x-callout type="danger" title="Server limit exceeded" class="mt-4">
+                    You must delete {{ currentTeam()->servers->count() - $server_limits }} servers or upgrade your
+                    subscription. Excess servers will be deactivated.
                 </x-callout>
             @endif
-            <x-forms.button class="gap-2" wire:click='stripeCustomerPortal'>Change Server Quantity
-            </x-forms.button>
-            <h2 class="pt-4">Manage your subscription</h2>
-            <div class="pb-4">Cancel, upgrade or downgrade your subscription.</div>
-            <div class="flex gap-2">
-                <x-forms.button class="gap-2" wire:click='stripeCustomerPortal'>Go to <svg
-                        xmlns="http://www.w3.org/2000/svg" class="w-12 " viewBox="0 0 512 214">
-                        <path fill="#635BFF"
-                            d="M512 110.08c0-36.409-17.636-65.138-51.342-65.138c-33.85 0-54.33 28.73-54.33 64.854c0 42.808 24.179 64.426 58.88 64.426c16.925 0 29.725-3.84 39.396-9.244v-28.445c-9.67 4.836-20.764 7.823-34.844 7.823c-13.796 0-26.027-4.836-27.591-21.618h69.547c0-1.85.284-9.245.284-12.658Zm-70.258-13.511c0-16.071 9.814-22.756 18.774-22.756c8.675 0 17.92 6.685 17.92 22.756h-36.694Zm-90.31-51.627c-13.939 0-22.899 6.542-27.876 11.094l-1.85-8.818h-31.288v165.83l35.555-7.537l.143-40.249c5.12 3.698 12.657 8.96 25.173 8.96c25.458 0 48.64-20.48 48.64-65.564c-.142-41.245-23.609-63.716-48.498-63.716Zm-8.534 97.991c-8.391 0-13.37-2.986-16.782-6.684l-.143-52.765c3.698-4.124 8.818-6.968 16.925-6.968c12.942 0 21.902 14.506 21.902 33.137c0 19.058-8.818 33.28-21.902 33.28ZM241.493 36.551l35.698-7.68V0l-35.698 7.538V36.55Zm0 10.809h35.698v124.444h-35.698V47.36Zm-38.257 10.524L200.96 47.36h-30.72v124.444h35.556V87.467c8.39-10.951 22.613-8.96 27.022-7.396V47.36c-4.551-1.707-21.191-4.836-29.582 10.524Zm-71.112-41.386l-34.702 7.395l-.142 113.92c0 21.05 15.787 36.551 36.836 36.551c11.662 0 20.195-2.133 24.888-4.693V140.8c-4.55 1.849-27.022 8.391-27.022-12.658V77.653h27.022V47.36h-27.022l.142-30.862ZM35.982 83.484c0-5.546 4.551-7.68 12.09-7.68c10.808 0 24.461 3.272 35.27 9.103V51.484c-11.804-4.693-23.466-6.542-35.27-6.542C19.2 44.942 0 60.018 0 85.192c0 39.252 54.044 32.995 54.044 49.92c0 6.541-5.688 8.675-13.653 8.675c-11.804 0-26.88-4.836-38.827-11.378v33.849c13.227 5.689 26.596 8.106 38.827 8.106c29.582 0 49.92-14.648 49.92-40.106c-.142-42.382-54.329-34.845-54.329-50.774Z" />
+
+            {{-- Adjust Server Limit Modal --}}
+            <template x-teleport="body">
+                <div x-show="showModal"
+                    class="fixed top-0 left-0 z-99 flex items-center justify-center w-screen h-screen p-4" x-cloak>
+                    <div x-show="showModal" class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-xs"
+                        @click="closeAdjust()">
+                    </div>
+                    <div x-show="showModal" x-trap.inert.noscroll="showModal"
+                        x-transition:enter="ease-out duration-100"
+                        x-transition:enter-start="opacity-0 -translate-y-2 sm:scale-95"
+                        x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+                        x-transition:leave="ease-in duration-100"
+                        x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+                        x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
+                        class="relative w-full border rounded-sm min-w-full lg:min-w-[36rem] max-w-[48rem] max-h-[calc(100vh-2rem)] bg-neutral-100 border-neutral-400 dark:bg-base dark:border-coolgray-300 flex flex-col">
+                        <div class="flex justify-between items-center py-6 px-7 shrink-0">
+                            <h3 class="text-2xl font-bold">Adjust Server Limit</h3>
+                            <button @click="closeAdjust()"
+                                class="flex justify-center items-center w-8 h-8 rounded-full dark:text-white hover:bg-coolgray-300">
+                                <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none"
+                                    viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                                </svg>
+                            </button>
+                        </div>
+                        <div class="relative w-auto overflow-y-auto px-7 pb-6 space-y-4"
+                            style="-webkit-overflow-scrolling: touch;">
+                            {{-- Server count input --}}
+                            <div>
+                                <label class="text-xs font-bold text-neutral-500 uppercase tracking-wide">Paid Servers</label>
+                                <div class="flex items-center gap-3 pt-1">
+                                    <input type="number" min="{{ $minServerLimit }}" max="{{ $maxServerLimit }}" step="1"
+                                        x-model.number="qty"
+                                        @input="preview = null"
+                                        @change="qty = Math.min({{ $maxServerLimit }}, Math.max({{ $minServerLimit }}, qty || {{ $minServerLimit }}))"
+                                        class="w-20 px-2 py-1 text-xl font-bold text-center rounded border dark:bg-coolgray-200 dark:border-coolgray-400 border-neutral-200 dark:text-white">
+                                    <x-forms.button
+                                        isHighlighted
+                                        x-bind:disabled="!hasChanged || loading"
+                                        @click="fetchPreview()">
+                                        Calculate Price
+                                    </x-forms.button>
+                                </div>
+                            </div>
+
+                            {{-- Loading --}}
+                            <div x-show="loading" x-cloak>
+                                <x-loading text="Loading price preview..." />
+                            </div>
+
+                            {{-- Price Preview --}}
+                            <div class="space-y-4" x-show="!loading && hasPreview" x-cloak>
+                                <div>
+                                    <div class="text-xs font-bold text-neutral-500 uppercase tracking-wide pb-1.5">Due now</div>
+                                    <div class="flex justify-between gap-6 text-sm font-bold">
+                                        <span class="dark:text-white">Prorated charge</span>
+                                        <span class="dark:text-warning" x-text="fmt(preview?.due_now)"></span>
+                                    </div>
+                                    <p class="text-xs text-neutral-500 pt-1">Charged immediately to your payment method.</p>
+                                </div>
+                                <div>
+                                    <div class="text-xs font-bold text-neutral-500 uppercase tracking-wide pb-1.5">
+                                        Next billing cycle
+                                        @if ($nextBillingDate)
+                                            <span class="normal-case font-normal">&middot; {{ $nextBillingDate }}</span>
+                                        @endif
+                                    </div>
+                                    <div class="space-y-1.5">
+                                        <div class="flex justify-between gap-6 text-sm">
+                                            <span class="text-neutral-500" x-text="preview?.quantity + ' servers × ' + fmt(preview?.unit_price)"></span>
+                                            <span class="dark:text-white" x-text="fmt(preview?.recurring_subtotal)"></span>
+                                        </div>
+                                        <div class="flex justify-between gap-6 text-sm" x-show="preview?.tax_description" x-cloak>
+                                            <span class="text-neutral-500" x-text="preview?.tax_description"></span>
+                                            <span class="dark:text-white" x-text="fmt(preview?.recurring_tax)"></span>
+                                        </div>
+                                        <div class="flex justify-between gap-6 text-sm font-bold pt-1.5 border-t dark:border-coolgray-400 border-neutral-200">
+                                            <span class="dark:text-white">Total / <span x-text="preview?.billing_interval === 'year' ? 'year' : 'month'">month</span></span>
+                                            <span class="dark:text-white" x-text="fmt(preview?.recurring_total)"></span>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                {{-- Update Button with Confirmation --}}
+                                <x-modal-confirmation
+                                    title="Confirm Server Limit Update"
+                                    buttonTitle="Update Server Limit"
+                                    submitAction="updateQuantity"
+                                    :confirmWithText="false"
+                                    :confirmWithPassword="false"
+                                    :actions="[
+                                        'Your server limit will be updated immediately.',
+                                        'The prorated amount will be invoiced and charged now.',
+                                    ]"
+                                    warningMessage="This will update your subscription and charge the prorated amount to your payment method."
+                                    step2ButtonText="Confirm & Pay">
+                                    <x-slot:content>
+                                        <x-forms.button class="w-full" @click="$wire.set('quantity', qty)">
+                                            Update Server Limit
+                                        </x-forms.button>
+                                    </x-slot:content>
+                                </x-modal-confirmation>
+                            </div>
+
+                            {{-- Reduction Warning --}}
+                            <div x-show="isReduction" x-cloak>
+                                <x-callout type="danger" title="Warning">
+                                    Reducing below your active server count will deactivate excess servers.
+                                </x-callout>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </section>
+
+        {{-- Manage Subscription --}}
+        <section>
+            <h3 class="pb-2">Manage Subscription</h3>
+            <div class="flex flex-wrap items-center gap-2">
+                <x-forms.button class="gap-2" wire:click='stripeCustomerPortal'>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
+                        stroke-width="1.5" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round"
+                            d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z" />
                     </svg>
+                    Manage Billing on Stripe
                 </x-forms.button>
             </div>
-        </div>
-        <div class="pt-4">
-            If you have any problems, please <a class="underline dark:text-white" href="{{ config('constants.urls.contact') }}"
-                target="_blank">contact us.</a>
+        </section>
+
+        {{-- Cancel Subscription --}}
+        <section>
+            <h3 class="pb-2">Cancel Subscription</h3>
+            <div class="flex flex-wrap items-center gap-2">
+                @if (currentTeam()->subscription->stripe_cancel_at_period_end)
+                    <x-forms.button wire:click="resumeSubscription">Resume Subscription</x-forms.button>
+                @else
+                    <x-modal-confirmation title="Cancel at End of Billing Period?"
+                        buttonTitle="Cancel at Period End" submitAction="cancelAtPeriodEnd"
+                        :actions="[
+                            'Your subscription will remain active until the end of the current billing period.',
+                            'No further charges will be made after the current period.',
+                            'You can resubscribe at any time.',
+                        ]" confirmationText="{{ currentTeam()->name }}"
+                        confirmationLabel="Enter your team name to confirm"
+                        shortConfirmationLabel="Team Name" step2ButtonText="Confirm Cancellation" />
+                    <x-modal-confirmation title="Cancel Immediately?" buttonTitle="Cancel Immediately"
+                        isErrorButton submitAction="cancelImmediately"
+                        :actions="[
+                            'Your subscription will be cancelled immediately.',
+                            'All servers will be deactivated.',
+                            'No refund will be issued for the remaining period.',
+                        ]" confirmationText="{{ currentTeam()->name }}"
+                        confirmationLabel="Enter your team name to confirm"
+                        shortConfirmationLabel="Team Name" step2ButtonText="Permanently Cancel" />
+                @endif
+            </div>
+            @if (currentTeam()->subscription->stripe_cancel_at_period_end)
+                <p class="mt-2 text-sm text-neutral-500">Your subscription is set to cancel at the end of the billing period.</p>
+            @endif
+        </section>
+
+        {{-- Refund --}}
+        <section>
+            <h3 class="pb-2">Refund</h3>
+            <div class="flex flex-wrap items-center gap-2">
+                @if ($refundCheckLoading)
+                    <x-forms.button disabled>Request Full Refund</x-forms.button>
+                @elseif ($isRefundEligible && !currentTeam()->subscription->stripe_cancel_at_period_end)
+                    <x-modal-confirmation title="Request Full Refund?" buttonTitle="Request Full Refund"
+                        isErrorButton submitAction="refundSubscription"
+                        :actions="[
+                            'Your latest payment will be fully refunded.',
+                            'Your subscription will be cancelled immediately.',
+                            'All servers will be deactivated.',
+                        ]" confirmationText="{{ currentTeam()->name }}"
+                        confirmationLabel="Enter your team name to confirm" shortConfirmationLabel="Team Name"
+                        step2ButtonText="Confirm Refund & Cancel" />
+                @else
+                    <x-forms.button disabled>Request Full Refund</x-forms.button>
+                @endif
+            </div>
+            <p class="mt-2 text-sm text-neutral-500">
+                @if ($refundCheckLoading)
+                    Checking refund eligibility...
+                @elseif ($isRefundEligible && !currentTeam()->subscription->stripe_cancel_at_period_end)
+                    Eligible for a full refund &mdash; <strong class="dark:text-warning">{{ $refundDaysRemaining }}</strong> days remaining.
+                @elseif ($refundAlreadyUsed)
+                    Refund already processed. Each team is eligible for one refund only.
+                @else
+                    Not eligible for a refund.
+                @endif
+            </p>
+        </section>
+
+        <div class="text-sm text-neutral-500">
+            Need help? <a class="underline dark:text-white" href="{{ config('constants.urls.contact') }}"
+                target="_blank">Contact us.</a>
         </div>
     @endif
 </div>

resources/views/livewire/subscription/index.blade.php

@@ -3,29 +3,26 @@
         Subscribe | Coolify
     </x-slot>
     @if (auth()->user()->isAdminFromSession())
-        @if (request()->query->get('cancelled'))
-            <div class="mb-6 rounded-sm alert-error">
-                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none"
-                    viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                        d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
-                <span>Something went wrong with your subscription. Please try again or contact
-                    support.</span>
-            </div>
-        @endif
         <div class="flex gap-2">
             <h1>Subscriptions</h1>
         </div>
         @if ($loading)
-            <div class="flex gap-2" wire:init="getStripeStatus">
-                Loading your subscription status...
+            <div class="flex items-center justify-center min-h-[60vh]" wire:init="getStripeStatus">
+                <x-loading text="Loading your subscription status..." />
             </div>
         @else
             @if ($isUnpaid)
-                <div class="mb-6 rounded-sm alert-error">
-                    <span>Your last payment was failed for Coolify Cloud.</span>
-                </div>
+                <x-banner :closable="false">
+                    <div class="flex items-center gap-2">
+                        <svg class="w-5 h-5 text-red-500 shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                            <path fill-rule="evenodd"
+                                d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+                                clip-rule="evenodd" />
+                        </svg>
+                        <span><span class="font-bold text-red-500">Payment Failed.</span> Your last payment for Coolify
+                            Cloud has failed.</span>
+                    </div>
+                </x-banner>
                 <div>
                     <p class="mb-2">Open the following link, navigate to the button and pay your unpaid/past due
                         subscription.
@@ -34,18 +31,20 @@
                 </div>
             @else
                 @if (config('subscription.provider') === 'stripe')
-                    <div @class([
-                        'pb-4' => $isCancelled,
-                        'pb-10' => !$isCancelled,
-                    ])>
-                        @if ($isCancelled)
-                            <div class="alert-error">
-                                <span>It looks like your previous subscription has been cancelled, because you forgot to
-                                    pay
-                                    the bills.<br />Please subscribe again to continue using Coolify.</span>
+                    @if ($isCancelled)
+                        <x-banner :closable="false">
+                            <div class="flex items-center gap-2">
+                                <svg class="w-5 h-5 text-red-500 shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd"
+                                        d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+                                        clip-rule="evenodd" />
+                                </svg>
+                                <span><span class="font-bold text-red-500">No Active Subscription.</span> Subscribe to
+                                    a plan to start using Coolify Cloud.</span>
                             </div>
-                        @endif
-                    </div>
+                        </x-banner>
+                    @endif
+                    <div @class(['pt-4 pb-4' => $isCancelled, 'pb-10' => !$isCancelled])></div>
                     <livewire:subscription.pricing-plans />
                 @endif
             @endif

resources/views/livewire/subscription/pricing-plans.blade.php

@@ -1,162 +1,123 @@
-<div x-data="{ selected: 'monthly' }" class="w-full pb-20">
-    <div class="px-6 mx-auto lg:px-8">
-        <div class="flex justify-center">
-            <fieldset
-                class="grid grid-cols-2 p-1 text-xs font-semibold leading-5 text-center rounded-sm dark:text-white gap-x-1 dark:bg-white/5 bg-black/5">
-                <legend class="sr-only">Payment frequency</legend>
-                <label
-                    :class="selected === 'monthly' ?
-                        'dark:bg-coollabs-100 bg-warning dark:text-white cursor-pointer rounded-sm px-2.5 py-1' :
-                        'cursor-pointer rounded-sm px-2.5 py-1'">
-                    <input type="radio" x-on:click="selected = 'monthly'" name="frequency" value="monthly"
-                        class="sr-only">
-                    <span :class="selected === 'monthly' ? 'dark:text-white' : ''">Monthly</span>
-                </label>
-                <label
-                    :class="selected === 'yearly' ?
-                        'dark:bg-coollabs-100 bg-warning dark:text-white cursor-pointer rounded-sm px-2.5 py-1' :
-                        'cursor-pointer rounded-sm px-2.5 py-1'">
-                    <input type="radio" x-on:click="selected = 'yearly'" name="frequency" value="annually"
-                        class="sr-only">
-                    <span :class="selected === 'yearly' ? 'dark:text-white' : ''">Annually <span
-                            class="text-xs dark:text-warning text-coollabs">(save ~20%)</span></span>
-                </label>
-            </fieldset>
+<div x-data="{ selected: 'monthly' }" class="w-full">
+    {{-- Frequency Toggle --}}
+    <div class="flex justify-center mb-8">
+        <fieldset
+            class="grid grid-cols-2 p-1 text-xs font-semibold leading-5 text-center rounded-sm dark:text-white gap-x-1 dark:bg-white/5 bg-black/5">
+            <legend class="sr-only">Payment frequency</legend>
+            <label
+                :class="selected === 'monthly' ?
+                    'dark:bg-coollabs-100 bg-warning dark:text-white cursor-pointer rounded-sm px-2.5 py-1' :
+                    'cursor-pointer rounded-sm px-2.5 py-1'">
+                <input type="radio" x-on:click="selected = 'monthly'" name="frequency" value="monthly"
+                    class="sr-only">
+                <span :class="selected === 'monthly' ? 'dark:text-white' : ''">Monthly</span>
+            </label>
+            <label
+                :class="selected === 'yearly' ?
+                    'dark:bg-coollabs-100 bg-warning dark:text-white cursor-pointer rounded-sm px-2.5 py-1' :
+                    'cursor-pointer rounded-sm px-2.5 py-1'">
+                <input type="radio" x-on:click="selected = 'yearly'" name="frequency" value="annually"
+                    class="sr-only">
+                <span :class="selected === 'yearly' ? 'dark:text-white' : ''">Annually <span
+                        class="text-xs dark:text-warning text-coollabs">(save ~20%)</span></span>
+            </label>
+        </fieldset>
+    </div>
+
+    <div class="max-w-xl mx-auto">
+        {{-- Plan Header + Pricing --}}
+        <h3 id="tier-dynamic" class="text-2xl font-bold dark:text-white">Pay-as-you-go</h3>
+        <p class="mt-1 text-sm dark:text-neutral-400">Dynamic pricing based on the number of servers you connect.</p>
+
+        <div class="mt-4 flex items-baseline gap-x-1">
+            <span x-show="selected === 'monthly'" x-cloak>
+                <span class="text-4xl font-bold tracking-tight dark:text-white">$5</span>
+                <span class="text-sm dark:text-neutral-400">/ mo base</span>
+            </span>
+            <span x-show="selected === 'yearly'" x-cloak>
+                <span class="text-4xl font-bold tracking-tight dark:text-white">$4</span>
+                <span class="text-sm dark:text-neutral-400">/ mo base</span>
+            </span>
         </div>
-        <div class="flow-root mt-12">
-            <div
-                class="grid grid-cols-1 -mt-16 divide-y divide-neutral-200 dark:divide-coolgray-500 isolate gap-y-16 sm:mx-auto lg:-mx-8 lg:mt-0 lg:max-w-none lg:grid-cols-1 lg:divide-x lg:divide-y-0 xl:-mx-4">
-                <div class="pt-16 lg:px-8 lg:pt-0 xl:px-14">
-                    <h3 id="tier-dynamic" class="text-4xl font-semibold leading-7 dark:text-white">Pay-as-you-go</h3>
-                    <p class="mt-4 text-sm leading-6 dark:text-neutral-400">
-                        Dynamic pricing based on the number of servers you connect.
-                    </p>
-                    <p class="flex items-baseline mt-6 gap-x-1">
-                        <span x-show="selected === 'monthly'" x-cloak>
-                            <span class="text-4xl font-bold tracking-tight dark:text-white">$5</span>
-                            <span class="text-sm font-semibold leading-6 "> base price</span>
-                        </span>
+        <p class="mt-1 text-sm dark:text-neutral-400">
+            <span x-show="selected === 'monthly'" x-cloak>
+                + <span class="font-semibold dark:text-white">$3</span> per additional server, billed monthly (+VAT)
+            </span>
+            <span x-show="selected === 'yearly'" x-cloak>
+                + <span class="font-semibold dark:text-white">$2.7</span> per additional server, billed annually (+VAT)
+            </span>
+        </p>
 
-                        <span x-show="selected === 'yearly'" x-cloak>
-                            <span class="text-4xl font-bold tracking-tight dark:text-white">$4</span>
-                            <span class="text-sm font-semibold leading-6 "> base price</span>
-                        </span>
-                    </p>
-                    <p class="flex items-baseline mb-4 gap-x-1">
-                        <span x-show="selected === 'monthly'" x-cloak>
-                            <span class="text-base font-semibold tracking-tight dark:text-white">$3</span>
-                            <span class="text-sm font-semibold leading-6 "> per additional servers <span
-                                    class="font-normal dark:text-white">billed monthly (+VAT)</span></span>
-                        </span>
+        {{-- Subscribe Button --}}
+        <div class="flex mt-6">
+            <x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-dynamic"
+                class="w-full" wire:click="subscribeStripe('dynamic-monthly')">
+                Subscribe
+            </x-forms.button>
+            <x-forms.button x-show="selected === 'yearly'" x-cloak aria-describedby="tier-dynamic"
+                class="w-full" wire:click="subscribeStripe('dynamic-yearly')">
+                Subscribe
+            </x-forms.button>
+        </div>
 
-                        <span x-show="selected === 'yearly'" x-cloak>
-                            <span class="text-base font-semibold tracking-tight dark:text-white">$2.7</span>
-                            <span class="text-sm font-semibold leading-6 "> per additional servers <span
-                                    class="font-normal dark:text-white">billed annually (+VAT)</span></span>
-                        </span>
-                    </p>
-                    <div class="flex items-center pt-6">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="flex-none w-8 h-8 mr-3 dark:text-warning"
-                            fill="currentColor" viewBox="0 0 256 256">
-                            <path
-                                d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z">
-                            </path>
-                        </svg>
+        {{-- Features --}}
+        <div class="mt-8 pt-6 border-t dark:border-coolgray-400 border-neutral-200">
+            <ul role="list" class="space-y-2.5 text-sm">
+                <li class="flex items-center gap-2.5">
+                    <svg class="w-4 h-4 shrink-0 dark:text-warning" viewBox="0 0 20 20" fill="currentColor"
+                        aria-hidden="true">
+                        <path fill-rule="evenodd"
+                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+                            clip-rule="evenodd" />
+                    </svg>
+                    <span class="dark:text-neutral-300">Connect <span
+                            class="font-bold dark:text-white">unlimited</span> servers</span>
+                </li>
+                <li class="flex items-center gap-2.5">
+                    <svg class="w-4 h-4 shrink-0 dark:text-warning" viewBox="0 0 20 20" fill="currentColor"
+                        aria-hidden="true">
+                        <path fill-rule="evenodd"
+                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+                            clip-rule="evenodd" />
+                    </svg>
+                    <span class="dark:text-neutral-300">Deploy <span
+                            class="font-bold dark:text-white">unlimited</span> applications per server</span>
+                </li>
+                <li class="flex items-center gap-2.5">
+                    <svg class="w-4 h-4 shrink-0 dark:text-warning" viewBox="0 0 20 20" fill="currentColor"
+                        aria-hidden="true">
+                        <path fill-rule="evenodd"
+                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+                            clip-rule="evenodd" />
+                    </svg>
+                    <span class="dark:text-neutral-300">Free email notifications</span>
+                </li>
+                <li class="flex items-center gap-2.5">
+                    <svg class="w-4 h-4 shrink-0 dark:text-warning" viewBox="0 0 20 20" fill="currentColor"
+                        aria-hidden="true">
+                        <path fill-rule="evenodd"
+                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+                            clip-rule="evenodd" />
+                    </svg>
+                    <span class="dark:text-neutral-300">Support by email</span>
+                </li>
+                <li class="flex items-center gap-2.5 font-bold dark:text-white">
+                    <svg class="w-4 h-4 shrink-0 text-green-500" viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
+                        stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+                        <path
+                            d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3-5a9 9 0 0 0 6-8a3 3 0 0 0-3-3a9 9 0 0 0-8 6a6 6 0 0 0-5 3" />
+                        <path d="M7 14a6 6 0 0 0-3 6a6 6 0 0 0 6-3m4-8a1 1 0 1 0 2 0a1 1 0 1 0-2 0" />
+                    </svg>
+                    + All Upcoming Features
+                </li>
+            </ul>
+        </div>
 
-                        <div class="flex flex-col text-sm dark:text-white">
-                            <div>
-                                You need to bring your own servers from any cloud provider (such as <a class="underline"
-                                    href="https://coolify.io/hetzner" target="_blank">Hetzner</a>, DigitalOcean, AWS,
-                                etc.)
-                            </div>
-                            <div>
-                                (You can connect your RPi, old laptop, or any other device that runs
-                                the <a class="underline"
-                                    href="https://coolify.io/docs/installation#supported-operating-systems"
-                                    target="_blank">supported operating systems</a>.)
-                            </div>
-                        </div>
-                    </div>
-                    <div class="flex pt-4 h-14">
-                        <x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-basic"
-                            class="w-full" wire:click="subscribeStripe('dynamic-monthly')">
-                            Subscribe
-                        </x-forms.button>
-                        <x-forms.button x-show="selected === 'yearly'" x-cloak aria-describedby="tier-basic"
-                            class="w-full" wire:click="subscribeStripe('dynamic-yearly')">
-                            Subscribe
-                        </x-forms.button>
-                    </div>
-                    <ul role="list" class="mt-8 space-y-3 text-sm leading-6 dark:text-neutral-400">
-                        <li class="flex">
-                            <svg class="flex-none w-5 h-6 mr-3 dark:text-warning" viewBox="0 0 20 20"
-                                fill="currentColor" aria-hidden="true">
-                                <path fill-rule="evenodd"
-                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
-                                    clip-rule="evenodd" />
-                            </svg>
-                            Connect
-                            <span class="px-1 font-bold dark:text-white">unlimited</span> servers
-                        </li>
-                        <li class="flex">
-                            <svg class="flex-none w-5 h-6 mr-3 dark:text-warning" viewBox="0 0 20 20"
-                                fill="currentColor" aria-hidden="true">
-                                <path fill-rule="evenodd"
-                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
-                                    clip-rule="evenodd" />
-                            </svg>
-                            Deploy
-                            <span class="px-1 font-bold dark:text-white">unlimited</span> applications per server
-                        </li>
-                        <li class="flex gap-x-3">
-                            <svg class="flex-none w-5 h-6 dark:text-warning" viewBox="0 0 20 20" fill="currentColor"
-                                aria-hidden="true">
-                                <path fill-rule="evenodd"
-                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
-                                    clip-rule="evenodd" />
-                            </svg>
-                            Free email notifications
-                        </li>
-                        <li class="flex gap-x-3">
-                            <svg class="flex-none w-5 h-6 dark:text-warning" viewBox="0 0 20 20" fill="currentColor"
-                                aria-hidden="true">
-                                <path fill-rule="evenodd"
-                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
-                                    clip-rule="evenodd" />
-                            </svg>
-                            Support by email
-                        </li>
-                        <li class="flex font-bold dark:text-white gap-x-3">
-                            <svg width="512" height="512" class="flex-none w-5 h-6 text-green-500"
-                                viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                                <g fill="none" stroke="currentColor" stroke-linecap="round"
-                                    stroke-linejoin="round" stroke-width="2">
-                                    <path
-                                        d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3-5a9 9 0 0 0 6-8a3 3 0 0 0-3-3a9 9 0 0 0-8 6a6 6 0 0 0-5 3" />
-                                    <path d="M7 14a6 6 0 0 0-3 6a6 6 0 0 0 6-3m4-8a1 1 0 1 0 2 0a1 1 0 1 0-2 0" />
-                                </g>
-                            </svg>
-                            + All Upcoming Features
-                        </li>
-                        <li class="flex dark:text-white gap-x-3">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="flex-none w-5 h-6 text-green-500"
-                                viewBox="0 0 256 256">
-                                <rect width="256" height="256" fill="none" />
-                                <polyline points="32 136 72 136 88 112 120 160 136 136 160 136" fill="none"
-                                    stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-                                    stroke-width="16" />
-                                <path
-                                    d="M24,104c0-.67,0-1.33,0-2A54,54,0,0,1,78,48c22.59,0,41.94,12.31,50,32,8.06-19.69,27.41-32,50-32a54,54,0,0,1,54,54c0,66-104,122-104,122s-42-22.6-72.58-56"
-                                    fill="none" stroke="currentColor" stroke-linecap="round"
-                                    stroke-linejoin="round" stroke-width="16" />
-                            </svg>
-
-                            Do you require official support for your self-hosted instance?<a class="underline"
-                                href="https://coolify.io/docs/contact" target="_blank">Contact Us</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
+        {{-- BYOS Notice + Support --}}
+        <div class="mt-6 pt-6 border-t dark:border-coolgray-400 border-neutral-200 text-sm dark:text-neutral-400">
+            <p>You need to bring your own servers from any cloud provider (<a class="underline" href="https://coolify.io/hetzner" target="_blank">Hetzner</a>, DigitalOcean, AWS, etc.) or connect any device running a <a class="underline" href="https://coolify.io/docs/installation#supported-operating-systems" target="_blank">supported OS</a>.</p>
+            <p class="mt-3">Need official support for your self-hosted instance? <a class="underline dark:text-white" href="https://coolify.io/docs/contact" target="_blank">Contact Us</a></p>
         </div>
     </div>
 </div>

resources/views/livewire/subscription/show.blade.php

@@ -3,6 +3,6 @@
         Subscription | Coolify
     </x-slot>
     <h1>Subscription</h1>
-    <div class="subtitle">Here you can see and manage your subscription.</div>
+    <div class="subtitle">Manage your plan, billing, and server limits.</div>
     <livewire:subscription.actions />
 </div>