Merge remote-tracking branch 'origin/next' into fix/escape-html-log

resources/css/app.css

@@ -53,6 +53,13 @@
   If we ever want to remove these styles, we need to add an explicit border
   color utility to any element that depends on these defaults.
 */
+
+@layer components {
+    .terminal-mobile-key {
+        @apply min-h-10 rounded-md border border-white/10 bg-white/10 px-2 py-2 text-sm font-semibold text-white shadow-inner active:bg-white/25;
+    }
+}
+
 @layer base {
 
     *,

resources/js/app.js

@@ -1,5 +1,13 @@
 import { initializeTerminalComponent } from './terminal.js';
 
+// Livewire 3.5.19+ re-applies `x-cloak` to morphed elements during wire:navigate
+// (via replaceHtmlAttributes). With `[x-cloak]{display:none}` on the app wrapper,
+// this blanks the whole page on every navigation until Alpine re-processes it.
+// Strip leftover x-cloak after each navigation; the initial-load FOUC guard stays.
+document.addEventListener('livewire:navigated', () => {
+    document.querySelectorAll('[x-cloak]').forEach((el) => el.removeAttribute('x-cloak'));
+});
+
 ['livewire:navigated', 'alpine:init'].forEach((event) => {
     document.addEventListener(event, () => {
         // tree-shaking

resources/js/terminal-session-timer.js

@@ -0,0 +1,22 @@
+export const MAX_TERMINAL_SESSION_SECONDS = 8 * 60 * 60;
+export const TERMINAL_SESSION_WARNING_SECONDS = 30 * 60;
+export const TERMINAL_SESSION_DANGER_SECONDS = 5 * 60;
+
+export function formatTerminalSessionRemainingTime(seconds) {
+    const remainingSeconds = Math.max(0, Math.ceil(seconds));
+
+    if (remainingSeconds === 0) {
+        return 'expired';
+    }
+
+    const totalMinutes = Math.floor(remainingSeconds / 60);
+    const hours = Math.floor(totalMinutes / 60);
+    const minutes = totalMinutes % 60;
+    const secondsPart = remainingSeconds % 60;
+
+    if (hours === 0) {
+        return `${minutes}m ${String(secondsPart).padStart(2, '0')}s`;
+    }
+
+    return `${hours}h ${String(minutes).padStart(2, '0')}m ${String(secondsPart).padStart(2, '0')}s`;
+}

resources/js/terminal.js

@@ -1,5 +1,11 @@
 import { Terminal } from '@xterm/xterm';
 import '@xterm/xterm/css/xterm.css';
+import {
+    MAX_TERMINAL_SESSION_SECONDS,
+    TERMINAL_SESSION_DANGER_SECONDS,
+    TERMINAL_SESSION_WARNING_SECONDS,
+    formatTerminalSessionRemainingTime,
+} from './terminal-session-timer.js';
 import { FitAddon } from '@xterm/addon-fit';
 
 const terminalDebugEnabled = import.meta.env.DEV;
@@ -44,7 +50,7 @@ export function initializeTerminalComponent() {
             pendingCommand: null,
             // Last successfully sent SSH command — replayed after a transient reconnect
             // so the PTY respawns automatically. Cleared on intentional terminations
-            // (pty-exited, idle-timeout, unprocessable).
+            // (pty-exited, unprocessable).
             lastSentCommand: null,
             // Resize handling
             resizeObserver: null,
@@ -52,6 +58,10 @@ export function initializeTerminalComponent() {
             // Visibility handling - prevent disconnects when tab loses focus
             isDocumentVisible: true,
             wasConnectedBeforeHidden: false,
+            mobileToolbarCollapsed: false,
+            terminalSessionStartedAt: null,
+            terminalSessionRemainingSeconds: null,
+            terminalSessionCountdownInterval: null,
 
             init() {
                 this.setupTerminal();
@@ -135,6 +145,7 @@ export function initializeTerminalComponent() {
                 this.clearAllTimers();
                 this.connectionState = 'disconnected';
                 this.pendingCommand = null;
+                this.resetTerminalSessionCountdown();
                 if (this.socket) {
                     this.socket.close(1000, 'Client cleanup');
                 }
@@ -157,11 +168,68 @@ export function initializeTerminalComponent() {
                 }
                 [this.reconnectInterval, this.connectionTimeoutId, this.pingTimeoutId, this.resizeTimeout]
                     .forEach(timer => timer && clearTimeout(timer));
+                if (this.terminalSessionCountdownInterval) {
+                    clearInterval(this.terminalSessionCountdownInterval);
+                }
                 this.keepAliveInterval = null;
                 this.reconnectInterval = null;
                 this.connectionTimeoutId = null;
                 this.pingTimeoutId = null;
                 this.resizeTimeout = null;
+                this.terminalSessionCountdownInterval = null;
+            },
+
+            resetTerminalSessionCountdown() {
+                if (this.terminalSessionCountdownInterval) {
+                    clearInterval(this.terminalSessionCountdownInterval);
+                }
+
+                this.terminalSessionStartedAt = null;
+                this.terminalSessionRemainingSeconds = null;
+                this.terminalSessionCountdownInterval = null;
+            },
+
+            startTerminalSessionCountdown() {
+                this.resetTerminalSessionCountdown();
+                this.terminalSessionStartedAt = Date.now();
+                this.updateTerminalSessionCountdown();
+                this.terminalSessionCountdownInterval = setInterval(() => {
+                    this.updateTerminalSessionCountdown();
+                }, 1000);
+            },
+
+            updateTerminalSessionCountdown() {
+                if (!this.terminalSessionStartedAt) {
+                    this.terminalSessionRemainingSeconds = null;
+                    return;
+                }
+
+                const elapsedSeconds = (Date.now() - this.terminalSessionStartedAt) / 1000;
+                this.terminalSessionRemainingSeconds = Math.max(0, MAX_TERMINAL_SESSION_SECONDS - elapsedSeconds);
+            },
+
+            terminalSessionRemainingLabel() {
+                if (this.terminalSessionRemainingSeconds === null) {
+                    return '';
+                }
+
+                return `Session expires in ${formatTerminalSessionRemainingTime(this.terminalSessionRemainingSeconds)}`;
+            },
+
+            terminalSessionTimerClass() {
+                if (this.terminalSessionRemainingSeconds === null) {
+                    return 'text-neutral-300 bg-black/70 border-white/10';
+                }
+
+                if (this.terminalSessionRemainingSeconds <= TERMINAL_SESSION_DANGER_SECONDS) {
+                    return 'text-red-200 bg-red-950/80 border-red-500/40';
+                }
+
+                if (this.terminalSessionRemainingSeconds <= TERMINAL_SESSION_WARNING_SECONDS) {
+                    return 'text-yellow-200 bg-yellow-950/80 border-yellow-500/40';
+                }
+
+                return 'text-neutral-300 bg-black/70 border-white/10';
             },
 
             resetTerminal() {
@@ -181,6 +249,7 @@ export function initializeTerminalComponent() {
                     this.paused = false;
                     this.commandBuffer = '';
                     this.pendingCommand = null;
+                    this.resetTerminalSessionCountdown();
 
                     // Notify parent component that terminal disconnected
                     this.$wire.dispatch('terminalDisconnected');
@@ -328,6 +397,7 @@ export function initializeTerminalComponent() {
 
                 this.connectionState = 'disconnected';
                 this.clearAllTimers();
+                this.resetTerminalSessionCountdown();
 
                 // Only reset terminal and reconnect if it wasn't a clean close
                 if (event.code !== 1000) {
@@ -424,6 +494,7 @@ export function initializeTerminalComponent() {
                         }
                     }
                     this.terminalActive = true;
+                    this.startTerminalSessionCountdown();
                     this.term.focus();
                     document.querySelector('.xterm-viewport').classList.add('scrollbar', 'rounded-sm');
 
@@ -450,27 +521,22 @@ export function initializeTerminalComponent() {
                     if (this.term) this.term.reset();
                     this.terminalActive = false;
                     this.lastSentCommand = null;
+                    this.resetTerminalSessionCountdown();
                     this.message = '(sorry, something went wrong, please try again)';
 
                     // Notify parent component that terminal connection failed
                     this.$wire.dispatch('terminalDisconnected');
                 } else if (event.data === 'pty-exited') {
+                    this.fullscreen = false;
+                    this.mobileToolbarCollapsed = false;
                     this.terminalActive = false;
+                    this.resetTerminalSessionCountdown();
                     this.term.reset();
                     this.commandBuffer = '';
                     this.lastSentCommand = null;
 
                     // Notify parent component that terminal disconnected
                     this.$wire.dispatch('terminalDisconnected');
-                } else if (event.data === 'idle-timeout') {
-                    this.$wire.dispatch('error', 'Terminal closed after 30 minutes of inactivity.');
-                    this.terminalActive = false;
-                    if (this.term) {
-                        this.term.reset();
-                    }
-                    this.commandBuffer = '';
-                    this.lastSentCommand = null;
-                    this.$wire.dispatch('terminalDisconnected');
                 } else if (
                     typeof event.data === 'string' &&
                     (event.data.startsWith('Unauthorized:') || event.data.startsWith('Invalid SSH command:'))
@@ -478,6 +544,7 @@ export function initializeTerminalComponent() {
                     logTerminal('error', '[Terminal] Backend rejected terminal startup:', event.data);
                     this.$wire.dispatch('error', event.data);
                     this.terminalActive = false;
+                    this.resetTerminalSessionCountdown();
                 } else {
                     try {
                         this.pendingWrites++;
@@ -538,6 +605,64 @@ export function initializeTerminalComponent() {
                 });
             },
 
+
+            sendTerminalInput(data) {
+                if (!this.term || !this.terminalActive) {
+                    return;
+                }
+
+                this.term.focus();
+                this.sendMessage({ message: data });
+            },
+
+            sendTerminalControl(sequence) {
+                const terminalSequences = {
+                    arrowUp: '\x1b[A',
+                    arrowDown: '\x1b[B',
+                    arrowRight: '\x1b[C',
+                    arrowLeft: '\x1b[D',
+                    tab: '\t',
+                    escape: '\x1b',
+                    ctrlC: '\x03'
+                };
+
+                if (terminalSequences[sequence]) {
+                    this.sendTerminalInput(terminalSequences[sequence]);
+                }
+            },
+
+            async pasteFromClipboard() {
+                if (!navigator.clipboard?.readText) {
+                    this.$wire.dispatch('error', 'Clipboard paste is not available in this browser.');
+                    return;
+                }
+
+                try {
+                    const text = await navigator.clipboard.readText();
+                    if (text) {
+                        this.sendTerminalInput(text);
+                    }
+                } catch (error) {
+                    logTerminal('warn', '[Terminal] Clipboard paste failed:', error);
+                    this.$wire.dispatch('error', 'Clipboard paste permission was denied.');
+                }
+            },
+
+            async copyTerminalSelection() {
+                const selection = this.term?.getSelection();
+                if (!selection) {
+                    this.$wire.dispatch('error', 'Select terminal text before copying.');
+                    return;
+                }
+
+                try {
+                    await navigator.clipboard.writeText(selection);
+                } catch (error) {
+                    logTerminal('warn', '[Terminal] Clipboard copy failed:', error);
+                    this.$wire.dispatch('error', 'Clipboard copy permission was denied.');
+                }
+            },
+
             keepAlive() {
                 if (this.socket && this.socket.readyState === WebSocket.OPEN) {
                     this.sendMessage({ ping: true });
@@ -629,15 +754,20 @@ export function initializeTerminalComponent() {
                     // Force a refresh of the fit addon dimensions
                     this.fitAddon.fit();
 
-                    // Get fresh dimensions after fit
-                    const wrapperHeight = this.$refs.terminalWrapper.clientHeight;
-                    const wrapperWidth = this.$refs.terminalWrapper.clientWidth;
+                    // Get fresh dimensions from the terminal element itself. The mobile
+                    // toolbar can live beside the terminal in normal flow, so wrapper dimensions
+                    // would include controls that should not be counted as terminal rows.
+                    const terminalElement = document.getElementById('terminal');
+                    const terminalHeight = terminalElement?.clientHeight || this.$refs.terminalWrapper.clientHeight;
+                    const terminalWidth = terminalElement?.clientWidth || this.$refs.terminalWrapper.clientWidth;
 
-                    // Account for terminal container padding (px-2 py-1 = 8px left/right, 4px top/bottom)
-                    const horizontalPadding = 16; // 8px * 2 (left + right)
-                    const verticalPadding = 8; // 4px * 2 (top + bottom)
-                    const height = wrapperHeight - verticalPadding;
-                    const width = wrapperWidth - horizontalPadding;
+                    // Account for terminal container padding. In fullscreen mobile mode,
+                    // the fixed toolbar sits over the terminal container, so reserve its height
+                    // when calculating rows to keep the prompt above the controls.
+                    const horizontalPadding = 16; // px-2 = 8px * 2 (left + right)
+                    const verticalPadding = 8; // py-1 = 4px * 2 (top + bottom)
+                    const height = terminalHeight - verticalPadding;
+                    const width = terminalWidth - horizontalPadding;
 
                     // Check if dimensions are valid
                     if (height <= 0 || width <= 0) {

resources/js/terminal.test.js

@@ -0,0 +1,15 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import {
+    MAX_TERMINAL_SESSION_SECONDS,
+    formatTerminalSessionRemainingTime,
+} from './terminal-session-timer.js';
+
+test('formatTerminalSessionRemainingTime formats the eight hour terminal limit countdown', () => {
+    assert.equal(MAX_TERMINAL_SESSION_SECONDS, 8 * 60 * 60);
+    assert.equal(formatTerminalSessionRemainingTime(MAX_TERMINAL_SESSION_SECONDS), '8h 00m 00s');
+    assert.equal(formatTerminalSessionRemainingTime((7 * 60 * 60) + (59 * 60) + 59), '7h 59m 59s');
+    assert.equal(formatTerminalSessionRemainingTime(65 * 60), '1h 05m 00s');
+    assert.equal(formatTerminalSessionRemainingTime(59), '0m 59s');
+    assert.equal(formatTerminalSessionRemainingTime(0), 'expired');
+});

resources/views/components/database-status-info.blade.php

@@ -0,0 +1,94 @@
+@props([
+    'database',
+    'label',
+    'dbUrl' => null,
+    'dbUrlPublic' => null,
+    'supportsSsl' => true,
+    'enableSsl' => false,
+    'sslMode' => null,
+    'sslModeOptions' => null,
+    'sslModeHelper' => null,
+    'certificateValidUntil' => null,
+    'isExited' => false,
+    'showPublicUrlPlaceholder' => false,
+])
+
+@php
+    $urlHelper = 'If you change the user/password/port, this could be different. This is with the default values.';
+@endphp
+
+<div class="flex flex-col gap-2">
+    <x-forms.input :label="$label . ' URL (internal)'" :helper="$urlHelper" type="password" readonly
+        wire:model="dbUrl" canGate="update" :canResource="$database" />
+    @if ($dbUrlPublic)
+        <x-forms.input :label="$label . ' URL (public)'" :helper="$urlHelper" type="password" readonly
+            wire:model="dbUrlPublic" canGate="update" :canResource="$database" />
+    @elseif ($showPublicUrlPlaceholder)
+        <x-forms.input :label="$label . ' URL (public)'" :helper="$urlHelper" readonly
+            value="Starting the database will generate this." canGate="update" :canResource="$database" />
+    @endif
+
+    @if ($supportsSsl)
+        <div class="flex flex-col gap-2 pt-4">
+            <div class="flex items-center justify-between py-2">
+                <div class="flex items-center justify-between w-full">
+                    <h3>SSL Configuration</h3>
+                    @if ($enableSsl && $certificateValidUntil)
+                        <x-modal-confirmation title="Regenerate SSL Certificates"
+                            buttonTitle="Regenerate SSL Certificates" :actions="[
+                                'The SSL certificate of this database will be regenerated.',
+                                'You must restart the database after regenerating the certificate to start using the new certificate.',
+                            ]"
+                            submitAction="regenerateSslCertificate" :confirmWithText="false" :confirmWithPassword="false" />
+                    @endif
+                </div>
+            </div>
+            @if ($enableSsl && $certificateValidUntil)
+                <span class="text-sm">Valid until:
+                    @if (now()->gt($certificateValidUntil))
+                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expired</span>
+                    @elseif(now()->addDays(30)->gt($certificateValidUntil))
+                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expiring
+                            soon</span>
+                    @else
+                        <span>{{ $certificateValidUntil->format('d.m.Y H:i:s') }}</span>
+                    @endif
+                </span>
+            @endif
+            <div class="flex flex-col gap-2">
+                <div class="w-64" wire:key="enable_ssl">
+                    @if ($isExited)
+                        <x-forms.checkbox id="enableSsl" label="Enable SSL" wire:model.live="enableSsl"
+                            instantSave="instantSaveSSL" canGate="update" :canResource="$database" />
+                    @else
+                        <x-forms.checkbox id="enableSsl" label="Enable SSL" wire:model.live="enableSsl"
+                            instantSave="instantSaveSSL" disabled
+                            helper="Database should be stopped to change this setting." canGate="update"
+                            :canResource="$database" />
+                    @endif
+                </div>
+                @if ($sslModeOptions && $enableSsl)
+                    <div class="mx-2">
+                        @if ($isExited)
+                            <x-forms.select id="sslMode" label="SSL Mode" wire:model.live="sslMode"
+                                instantSave="instantSaveSSL" :helper="$sslModeHelper" canGate="update"
+                                :canResource="$database">
+                                @foreach ($sslModeOptions as $value => $option)
+                                    <option value="{{ $value }}" title="{{ $option['title'] ?? '' }}">{{ $option['label'] }}</option>
+                                @endforeach
+                            </x-forms.select>
+                        @else
+                            <x-forms.select id="sslMode" label="SSL Mode" instantSave="instantSaveSSL" disabled
+                                helper="Database should be stopped to change this setting." canGate="update"
+                                :canResource="$database">
+                                @foreach ($sslModeOptions as $value => $option)
+                                    <option value="{{ $value }}" title="{{ $option['title'] ?? '' }}">{{ $option['label'] }}</option>
+                                @endforeach
+                            </x-forms.select>
+                        @endif
+                    </div>
+                @endif
+            </div>
+        </div>
+    @endif
+</div>

resources/views/components/deployment/configuration-diff.blade.php

@@ -4,9 +4,9 @@
 ])
 
 @php
-    $changes = data_get($diff, 'changes', []);
-    $count = data_get($diff, 'count', count($changes));
-    $requiresBuild = data_get($diff, 'requires_build', false);
+    $changes = collect(data_get($diff, 'changes', []))->values()->all();
+    $count = count($changes);
+    $requiresBuild = collect($changes)->contains(fn ($change) => data_get($change, 'impact') === 'build');
 @endphp
 
 @if ($count > 0)
@@ -21,45 +21,86 @@
                 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-300' => $requiresBuild,
                 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300' => ! $requiresBuild,
             ])>
-                {{ $requiresBuild ? 'Rebuild' : 'Redeploy' }}
+                {{ $requiresBuild ? 'Rebuild required' : 'Redeploy required' }}
             </span>
         </div>
 
         @unless ($compact)
-            <div class="space-y-2">
+            <div class="space-y-4">
                 @foreach (collect($changes)->groupBy('section_label') as $sectionLabel => $sectionChanges)
                     <div>
                         <div class="mb-0.5 text-[0.65rem] font-semibold uppercase tracking-wide text-neutral-600 dark:text-neutral-400">
                             {{ $sectionLabel }}
                         </div>
-                        <div class="overflow-x-auto rounded-sm border border-neutral-300 dark:border-coolgray-200">
-                            <div class="min-w-[44rem]">
-                                <div class="grid grid-cols-[minmax(12rem,1.4fr)_7rem_minmax(8rem,1fr)_1.5rem_minmax(8rem,1fr)] items-center gap-2 bg-neutral-100 px-3 py-1.5 text-[0.65rem] font-semibold uppercase tracking-wide text-neutral-500 dark:bg-coolgray-200 dark:text-neutral-400">
-                                    <div>Field</div>
-                                    <div>Type</div>
-                                    <div>From</div>
-                                    <div></div>
-                                    <div>To</div>
-                                </div>
-                                <div class="divide-y divide-neutral-300 dark:divide-coolgray-200">
-                                    @foreach ($sectionChanges as $change)
-                                        <div class="grid grid-cols-[minmax(12rem,1.4fr)_7rem_minmax(8rem,1fr)_1.5rem_minmax(8rem,1fr)] items-center gap-2 px-3 py-1.5 text-neutral-700 dark:text-neutral-300">
-                                            <div class="truncate font-medium text-black dark:text-white" title="{{ data_get($change, 'label') }}">
-                                                {{ data_get($change, 'label') }}
-                                            </div>
-                                            <div class="text-neutral-500 dark:text-neutral-400">
-                                                {{ data_get($change, 'type') }}
-                                            </div>
-                                            <div class="truncate" title="{{ data_get($change, 'old_display_value') }}">
-                                                {{ data_get($change, 'old_display_value') }}
-                                            </div>
-                                            <div class="text-center text-neutral-500 dark:text-neutral-400">→</div>
-                                            <div class="truncate" title="{{ data_get($change, 'new_display_value') }}">
-                                                {{ data_get($change, 'new_display_value') }}
-                                            </div>
+                        <div class="rounded-sm border border-neutral-300 dark:border-coolgray-200">
+                            <div class="grid grid-cols-[12rem_1fr_1.5rem_1fr] items-center gap-2 bg-neutral-100 px-3 py-1.5 text-[0.65rem] font-semibold uppercase tracking-wide text-neutral-500 dark:bg-coolgray-200 dark:text-neutral-400">
+                                <div>Field</div>
+                                <div>From</div>
+                                <div></div>
+                                <div>To</div>
+                            </div>
+                            <div class="divide-y divide-neutral-300 dark:divide-coolgray-200">
+                                @foreach ($sectionChanges as $change)
+                                    @php
+                                        $changeKey = (string) data_get($change, 'key');
+                                        $expandable = data_get($change, 'expandable', false);
+                                        $oldDisplay = (string) data_get($change, 'old_display_value');
+                                        $newDisplay = (string) data_get($change, 'new_display_value');
+                                        $oldFull = data_get($change, 'old_full_value') ?? $oldDisplay;
+                                        $newFull = data_get($change, 'new_full_value') ?? $newDisplay;
+                                        $label = (string) data_get($change, 'label');
+                                        $labelTruncated = mb_strlen($label) > 20;
+                                        $rowExpandable = $expandable || $labelTruncated;
+                                    @endphp
+                                    <div class="grid grid-cols-[12rem_1fr_1.5rem_1fr] items-start gap-2 px-3 py-1.5 text-neutral-700 dark:text-neutral-300">
+                                        <div class="min-w-0 shrink-0 font-medium text-black dark:text-white">
+                                            @if ($rowExpandable)
+                                                <div class="break-words"
+                                                    :class="expandedRows['{{ $changeKey }}'] ? '' : 'truncate'"
+                                                    x-text="expandedRows['{{ $changeKey }}'] ? @js($label) : @js((string) str($label)->limit(20))"></div>
+                                            @else
+                                                {{ $label }}
+                                            @endif
                                         </div>
-                                    @endforeach
-                                </div>
+                                        <div class="min-w-0 text-red-700 dark:text-red-400/80">
+                                            @if ($expandable)
+                                                <div class="break-words"
+                                                    :class="expandedRows['{{ $changeKey }}'] ? 'whitespace-pre-wrap' : 'truncate'"
+                                                    x-text="expandedRows['{{ $changeKey }}'] ? @js($oldFull) : @js($oldDisplay)"></div>
+                                            @else
+                                                <div class="truncate">{{ $oldDisplay }}</div>
+                                            @endif
+                                        </div>
+                                        <div class="text-center text-neutral-500 dark:text-neutral-400">→</div>
+                                        <div class="flex min-w-0 items-start gap-1 text-green-700 dark:text-green-500">
+                                            <div class="min-w-0 flex-1">
+                                                @if ($expandable)
+                                                    <div class="break-words"
+                                                        :class="expandedRows['{{ $changeKey }}'] ? 'whitespace-pre-wrap' : 'truncate'"
+                                                        x-text="expandedRows['{{ $changeKey }}'] ? @js($newFull) : @js($newDisplay)"></div>
+                                                @else
+                                                    <div class="truncate">{{ $newDisplay }}</div>
+                                                @endif
+                                            </div>
+                                            @if ($rowExpandable)
+                                                <button type="button"
+                                                    x-on:click="expandedRows['{{ $changeKey }}'] = ! expandedRows['{{ $changeKey }}']"
+                                                    :aria-expanded="!! expandedRows['{{ $changeKey }}']"
+                                                    title="Toggle full value"
+                                                    class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center text-neutral-400 transition hover:text-black dark:hover:text-white">
+                                                    <svg x-show="! expandedRows['{{ $changeKey }}']" class="h-3.5 w-3.5"
+                                                        viewBox="0 0 20 20" fill="currentColor">
+                                                        <path fill-rule="evenodd" d="M13.28 7.78l3.22-3.22v2.69a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.69l-3.22 3.22a.75.75 0 0 0 1.06 1.06ZM2 17.25v-4.5a.75.75 0 0 1 1.5 0v2.69l3.22-3.22a.75.75 0 0 1 1.06 1.06L4.56 16.5h2.69a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" />
+                                                    </svg>
+                                                    <svg x-show="expandedRows['{{ $changeKey }}']" x-cloak class="h-3.5 w-3.5"
+                                                        viewBox="0 0 20 20" fill="currentColor">
+                                                        <path fill-rule="evenodd" d="M3.28 2.22a.75.75 0 0 0-1.06 1.06L5.44 6.5H2.75a.75.75 0 0 0 0 1.5h4.5A.75.75 0 0 0 8 7.25v-4.5a.75.75 0 0 0-1.5 0v2.69L3.28 2.22ZM13.5 2.75a.75.75 0 0 0-1.5 0v4.5c0 .414.336.75.75.75h4.5a.75.75 0 0 0 0-1.5h-2.69l3.22-3.22a.75.75 0 0 0-1.06-1.06L13.5 5.44V2.75ZM3.28 17.78l3.22-3.22v2.69a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.69l-3.22 3.22a.75.75 0 1 0 1.06 1.06ZM12 12.75c0-.414.336-.75.75-.75h4.5a.75.75 0 0 1 0 1.5h-2.69l3.22 3.22a.75.75 0 1 1-1.06 1.06l-3.22-3.22v2.69a.75.75 0 0 1-1.5 0v-4.5Z" clip-rule="evenodd" />
+                                                    </svg>
+                                                </button>
+                                            @endif
+                                        </div>
+                                    </div>
+                                @endforeach
                             </div>
                         </div>
                     </div>

resources/views/components/forms/copy-button.blade.php

@@ -1,7 +1,13 @@
-@props(['text'])
+@props(['text', 'label' => null])
 
-<div class="relative" x-data="{ copied: false, isSecure: window.isSecureContext }">
-    <input type="text" value="{{ $text }}" readonly class="input">
+<div class="w-full" x-data="{ copied: false, isSecure: window.isSecureContext }">
+    @if ($label)
+        <label class="flex gap-1 items-center mb-1 text-sm font-medium">{{ $label }}</label>
+    @endif
+    <div class="relative">
+        <input type="text" value="{{ $text }}" class="input pr-10"
+            @keydown.prevent @paste.prevent @cut.prevent @drop.prevent
+            @focus="$event.target.select()">
     <button
         x-show="isSecure"
         @click.prevent="copied = true; navigator.clipboard.writeText({{ Js::from($text) }}); setTimeout(() => copied = false, 1000)"
@@ -15,4 +21,5 @@
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
         </svg>
     </button>
+    </div>
 </div>

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

@@ -196,26 +196,6 @@
         }"
         @click.outside="showDropdown = false">
 
-        @if ($type === 'password' && $allowToPeak)
-            <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>
-                <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-ref="input"
             @input="handleInput()"
@@ -241,6 +221,26 @@
             placeholder="{{ $attributes->get('placeholder') }}"
             @if ($autofocus) autofocus @endif>
 
+        @if ($type === 'password' && $allowToPeak)
+            <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>
+                <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
+
         {{-- Dropdown for suggestions --}}
         <div x-show="showDropdown"
              x-transition

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

@@ -14,6 +14,16 @@
     @endif
     @if ($type === 'password')
         <div class="relative" x-data="{ type: 'password' }" @success.window="type = 'password'">
+            <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"
+                @readonly($readonly) @disabled($disabled) id="{{ $htmlId }}"
+                name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
+                aria-placeholder="{{ $attributes->get('placeholder') }}"
+                @if ($autofocus) x-ref="autofocusInput" @endif>
             @if ($allowToPeak)
                 <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"
@@ -35,16 +45,6 @@
                     </svg>
                 </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"
-                @readonly($readonly) @disabled($disabled) id="{{ $htmlId }}"
-                name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
-                aria-placeholder="{{ $attributes->get('placeholder') }}"
-                @if ($autofocus) x-ref="autofocusInput" @endif>
 
         </div>
     @else

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

@@ -31,6 +31,21 @@
     @else
         @if ($type === 'password')
             <div class="relative" x-data="{ type: 'password' }" @success.window="type = 'password'">
+                <input x-cloak x-show="type === 'password'" value="{{ $value }}"
+                    {{ $attributes->merge(['class' => $defaultClassInput]) }} @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 }}"
+                    name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
+                    aria-placeholder="{{ $attributes->get('placeholder') }}">
+                <textarea minlength="{{ $minlength }}" maxlength="{{ $maxlength }}" x-cloak x-show="type !== 'password'"
+                    placeholder="{{ $placeholder }}" {{ $attributes->merge(['class' => $defaultClass]) }}
+                    @if ($realtimeValidation) wire:model.debounce.200ms="{{ $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]"
+                @else
+            wire:model={{ $value ?? $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
+                    @disabled($disabled) @readonly($readonly) @required($required) id="{{ $htmlId }}"
+                    name="{{ $name }}" name={{ $modelBinding }}
+                    @if ($autofocus) x-ref="autofocusInput" @endif></textarea>
                 @if ($allowToPeak)
                     <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"
@@ -51,21 +66,6 @@
                         </svg>
                     </button>
                 @endif
-                <input x-cloak x-show="type === 'password'" value="{{ $value }}"
-                    {{ $attributes->merge(['class' => $defaultClassInput]) }} @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 }}"
-                    name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
-                    aria-placeholder="{{ $attributes->get('placeholder') }}">
-                <textarea minlength="{{ $minlength }}" maxlength="{{ $maxlength }}" x-cloak x-show="type !== 'password'"
-                    placeholder="{{ $placeholder }}" {{ $attributes->merge(['class' => $defaultClass]) }}
-                    @if ($realtimeValidation) wire:model.debounce.200ms="{{ $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]"
-                @else
-            wire:model={{ $value ?? $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
-                    @disabled($disabled) @readonly($readonly) @required($required) id="{{ $htmlId }}"
-                    name="{{ $name }}" name={{ $modelBinding }}
-                    @if ($autofocus) x-ref="autofocusInput" @endif></textarea>
 
             </div>
         @else

resources/views/components/navbar.blade.php

@@ -49,23 +49,32 @@
                 localStorage.setItem('theme', type);
                 this.queryTheme();
             },
+            cycleTheme() {
+                const themes = ['light', 'system', 'dark'];
+                const currentIndex = themes.indexOf(this.theme || localStorage.getItem('theme') || 'dark');
+                this.setTheme(themes[(currentIndex + 1) % themes.length]);
+            },
             queryTheme() {
                 const darkModePreference = window.matchMedia('(prefers-color-scheme: dark)').matches;
                 const userSettings = localStorage.getItem('theme') || 'dark';
                 localStorage.setItem('theme', userSettings);
+                let isDark = false;
                 if (userSettings === 'dark') {
                     document.documentElement.classList.add('dark');
                     this.theme = 'dark';
+                    isDark = true;
                 } else if (userSettings === 'light') {
                     document.documentElement.classList.remove('dark');
                     this.theme = 'light';
                 } else if (darkModePreference) {
                     this.theme = 'system';
                     document.documentElement.classList.add('dark');
+                    isDark = true;
                 } else if (!darkModePreference) {
                     this.theme = 'system';
                     document.documentElement.classList.remove('dark');
                 }
+                document.querySelector('meta[name=theme-color]')?.setAttribute('content', isDark ? '#101010' : '#ffffff');
             },
             checkZoom() {
                 if (this.zoom === null) {
@@ -92,9 +101,9 @@
                 }
             }
     }">
-    <div class="flex pt-4 pb-4 pl-2 items-start gap-2 motion-safe:transition-all motion-safe:duration-200 motion-safe:ease-out motion-reduce:transition-none"
-        :class="collapsed ? 'lg:flex-col lg:items-center lg:pl-0 lg:gap-3 lg:pt-7' : 'lg:pt-6'">
-        <div class="flex flex-col w-full" :class="collapsed && 'lg:hidden'">
+    <div class="flex pt-4 pb-4 pl-2 pr-3 items-start gap-3"
+        :class="collapsed ? 'lg:flex-col lg:items-center lg:pl-0 lg:pr-0 lg:gap-3 lg:pt-7' : 'lg:pt-6'">
+        <div class="flex min-w-0 flex-1 flex-col" :class="collapsed && 'lg:hidden'">
             <a href="/" {{ wireNavigate() }} class="text-2xl font-bold tracking-tight dark:text-white hover:opacity-80 transition-opacity">Coolify</a>
             <x-version />
         </div>
@@ -107,10 +116,10 @@
             </a>
             <x-version class="text-[10px]" />
         </div>
-        <div :class="collapsed && 'lg:hidden'">
+        <div class="min-w-0 flex-1" :class="collapsed && 'lg:hidden'">
             <!-- Search button that triggers global search modal -->
             <button @click="$dispatch('open-global-search')" type="button" title="Search (Press / or ⌘K)"
-                class="flex items-center gap-1.5 px-2.5 py-1.5 bg-neutral-100 dark:bg-coolgray-100 border border-neutral-300 dark:border-coolgray-200 rounded-md hover:bg-neutral-200 dark:hover:bg-coolgray-200 transition-colors">
+                class="flex h-8 w-full items-center justify-between gap-1.5 px-2.5 py-1.5 bg-neutral-100 dark:bg-coolgray-100 border border-neutral-300 dark:border-coolgray-200 rounded-md hover:bg-neutral-200 dark:hover:bg-coolgray-200 transition-colors">
                 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-neutral-500 dark:text-neutral-400"
                     fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -120,11 +129,8 @@
                     class="px-1 py-0.5 text-xs font-semibold text-neutral-500 dark:text-neutral-400 bg-neutral-200 dark:bg-coolgray-200 rounded">/</kbd>
             </button>
         </div>
-        <div :class="collapsed && 'lg:hidden'">
-            <livewire:settings-dropdown />
-        </div>
     </div>
-    <div class="px-2 pt-2 pb-7 overflow-hidden motion-safe:transition-all motion-safe:duration-200 motion-safe:ease-out motion-reduce:transition-none" :class="collapsed && 'lg:px-0 lg:pt-0 lg:pb-4 lg:min-h-8 lg:flex lg:justify-center'">
+    <div class="px-2 pt-2 pb-7 overflow-hidden" :class="collapsed && 'lg:px-0 lg:pt-0 lg:pb-4 lg:min-h-8 lg:flex lg:justify-center'">
         <livewire:switch-team />
     </div>
     <ul role="list" class="flex flex-col flex-1 gap-y-7">
@@ -366,9 +372,73 @@
                         @endif
                     @endif
                     <div class="flex-1"></div>
+                    <li>
+                        <livewire:settings-dropdown trigger="changelog-sidebar" />
+                    </li>
+                    <li>
+                        <div class="menu-item" title="Theme" aria-label="Theme switcher" :class="collapsed && 'lg:hidden'">
+                            <svg x-show="theme === 'dark'" class="menu-item-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+                            </svg>
+                            <svg x-show="theme === 'light'" class="menu-item-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+                            </svg>
+                            <svg x-show="theme === 'system'" class="menu-item-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                            </svg>
+                            <span class="menu-item-label">Theme</span>
+                            <div class="ml-auto flex items-center gap-0.5 rounded-sm bg-neutral-100 p-0.5 dark:bg-coolgray-200">
+                                <button type="button" @click.stop="setTheme('light')" title="Light" aria-label="Use light theme"
+                                    class="grid size-6 place-items-center rounded-sm text-xs hover:bg-white hover:text-coollabs dark:hover:bg-base dark:hover:text-warning"
+                                    :class="theme === 'light' && 'bg-white text-coollabs shadow-sm dark:bg-base dark:text-warning'">
+                                    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+                                    </svg>
+                                </button>
+                                <button type="button" @click.stop="setTheme('system')" title="System default" aria-label="Use system theme"
+                                    class="grid size-6 place-items-center rounded-sm text-xs hover:bg-white hover:text-coollabs dark:hover:bg-base dark:hover:text-warning"
+                                    :class="theme === 'system' && 'bg-white text-coollabs shadow-sm dark:bg-base dark:text-warning'">
+                                    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                                    </svg>
+                                </button>
+                                <button type="button" @click.stop="setTheme('dark')" title="Dark" aria-label="Use dark theme"
+                                    class="grid size-6 place-items-center rounded-sm text-xs hover:bg-white hover:text-coollabs dark:hover:bg-base dark:hover:text-warning"
+                                    :class="theme === 'dark' && 'bg-white text-coollabs shadow-sm dark:bg-base dark:text-warning'">
+                                    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>
+                        <button type="button" @click.stop="cycleTheme()"
+                            :title="`Theme: ${theme === 'system' ? 'System default' : theme}. Click to change.`"
+                            :aria-label="`Theme: ${theme === 'system' ? 'System default' : theme}. Click to change theme.`"
+                            class="menu-item hidden"
+                            :class="collapsed && 'lg:flex'">
+                            <svg x-show="theme === 'dark'" class="menu-item-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+                            </svg>
+                            <svg x-show="theme === 'light'" class="menu-item-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+                            </svg>
+                            <svg x-show="theme === 'system'" class="menu-item-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                            </svg>
+                        </button>
+                    </li>
                     @if (isInstanceAdmin() && !isCloud())
                         @persist('upgrade')
-                            <li :class="collapsed && 'lg:hidden'">
+                            <li>
                                 <livewire:upgrade />
                             </li>
                         @endpersist
@@ -420,7 +490,7 @@
                 <li>
                     <form action="/logout" method="POST">
                         @csrf
-                        <button title="Logout" type="submit" class="gap-2 mb-6 menu-item">
+                        <button title="Logout" type="submit" class="mb-6 menu-item">
                             <svg class="menu-item-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                 <path fill="currentColor"
                                     d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2a9.985 9.985 0 0 1 8 4h-2.71a8 8 0 1 0 .001 12h2.71A9.985 9.985 0 0 1 12 22m7-6v-3h-8v-2h8V8l5 4z" />

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-3.5 min-h-10">
+        <nav class="flex items-center gap-6 min-h-10 whitespace-nowrap">
             <a class="{{ request()->routeIs('notifications.email') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
                 href="{{ route('notifications.email') }}">
                 <button>Email</button>

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

@@ -0,0 +1,17 @@
+<div class="pb-6">
+    <h1>Profile</h1>
+    <div class="subtitle">Your user profile settings.</div>
+    <div class="navbar-main">
+        <nav class="flex items-center gap-6 min-h-10">
+            <a class="{{ request()->routeIs('profile') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
+                href="{{ route('profile') }}">
+                General
+            </a>
+            <a class="{{ request()->routeIs('profile.appearance') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
+                href="{{ route('profile.appearance') }}">
+                Appearance
+            </a>
+            <div class="flex-1"></div>
+        </nav>
+    </div>
+</div>

resources/views/components/server/sidebar-sentinel.blade.php

@@ -0,0 +1,10 @@
+<div class="sub-menu-wrapper">
+    <a class="{{ request()->routeIs('server.sentinel') ? 'sub-menu-item menu-item-active' : 'sub-menu-item' }}" {{ wireNavigate() }}
+        href="{{ route('server.sentinel', $parameters) }}">
+        <span class="menu-item-label">Configuration</span>
+    </a>
+    <a class="{{ request()->routeIs('server.sentinel.logs') ? 'sub-menu-item menu-item-active' : 'sub-menu-item' }}" {{ wireNavigate() }}
+        href="{{ route('server.sentinel.logs', $parameters) }}">
+        <span class="menu-item-label">Logs</span>
+    </a>
+</div>

resources/views/components/server/sidebar.blade.php

@@ -6,11 +6,6 @@
             href="{{ route('server.advanced', ['server_uuid' => $server->uuid]) }}"><span class="menu-item-label">Advanced</span>
         </a>
     @endif
-    @if ($server->isFunctional() && !$server->isSwarm() && !$server->isBuildServer())
-        <a class="sub-menu-item {{ $activeMenu === 'sentinel' ? 'menu-item-active' : '' }}" {{ wireNavigate() }}
-            href="{{ route('server.sentinel', ['server_uuid' => $server->uuid]) }}"><span class="menu-item-label">Sentinel</span>
-        </a>
-    @endif
     <a class="sub-menu-item {{ $activeMenu === 'private-key' ? 'menu-item-active' : '' }}" {{ wireNavigate() }}
         href="{{ route('server.private-key', ['server_uuid' => $server->uuid]) }}"><span class="menu-item-label">Private Key</span>
     </a>
@@ -37,7 +32,7 @@
         <a class="sub-menu-item {{ $activeMenu === 'log-drains' ? 'menu-item-active' : '' }}" {{ wireNavigate() }}
             href="{{ route('server.log-drains', ['server_uuid' => $server->uuid]) }}"><span class="menu-item-label">Log Drains</span></a>
         <a class="sub-menu-item {{ $activeMenu === 'metrics' ? 'menu-item-active' : '' }}" {{ wireNavigate() }}
-            href="{{ route('server.charts', ['server_uuid' => $server->uuid]) }}"><span class="menu-item-label">Metrics</span></a>
+            href="{{ route('server.metrics', ['server_uuid' => $server->uuid]) }}"><span class="menu-item-label">Metrics</span></a>
     @endif
     @if (!$server->isBuildServer() && !$server->settings->is_cloudflare_tunnel)
         <a class="sub-menu-item {{ $activeMenu === 'swarm' ? 'menu-item-active' : '' }}" {{ wireNavigate() }}

resources/views/components/status/index.blade.php

@@ -2,7 +2,11 @@
     'title' => null,
     'lastDeploymentLink' => null,
     'resource' => null,
+    'showRefreshButton' => true,
 ])
+@php
+    $stoppedAfterRestartLimit = $resource && method_exists($resource, 'stoppedAfterRestartLimit') && $resource->stoppedAfterRestartLimit();
+@endphp
 <div class="flex flex-wrap items-center gap-1">
     @if (str($resource->status)->startsWith('running'))
         <x-status.running :status="$resource->status" :title="$title" :lastDeploymentLink="$lastDeploymentLink" />
@@ -13,13 +17,20 @@
     @else
         <x-status.stopped :status="$resource->status" />
     @endif
-    @if (isset($resource->restart_count) && $resource->restart_count > 0 && !str($resource->status)->startsWith('exited'))
+    @if (isset($resource->restart_count) && $resource->restart_count > 0 && (!str($resource->status)->startsWith('exited') || $stoppedAfterRestartLimit))
         <div class="flex items-center">
             <span class="text-xs dark:text-warning" title="Container has restarted {{ $resource->restart_count }} time{{ $resource->restart_count > 1 ? 's' : '' }}. Last restart: {{ $resource->last_restart_at?->diffForHumans() }}">
                 ({{ $resource->restart_count }}x restarts)
             </span>
         </div>
     @endif
+    @if ($stoppedAfterRestartLimit)
+        <div class="flex items-center">
+            <span class="text-xs dark:text-warning" title="Container has crashed and Coolify stopped it after {{ $resource->restart_count }} restart attempts.">
+                Stopped after reaching restart limit ({{ $resource->restart_count }}/{{ $resource->max_restart_count }}).
+            </span>
+        </div>
+    @endif
     @if (!str($resource->status)->contains('exited') && $showRefreshButton)
         <button wire:loading.remove.delay.shortest wire:target="manualCheckStatus" title="Refresh Status" wire:click='manualCheckStatus'
             class="dark:hover:fill-white fill-black dark:fill-warning">

resources/views/emails/application-restart-limit-reached.blade.php

@@ -0,0 +1,7 @@
+<x-emails.layout>
+{{ $name }} has been automatically stopped after {{ $restart_count }} crash restarts (limit: {{ $max_restart_count }}).
+
+The application appears to be in a crash loop. Please investigate the issue and redeploy when ready.
+
+[Check what is going on]({{ $resource_url }}).
+</x-emails.layout>

resources/views/layouts/app.blade.php

@@ -9,15 +9,19 @@
     @auth
         <div x-data="{
             open: false,
-            collapsed: false,
-            pageWidth: 'full',
+            collapsed: localStorage.getItem('sidebarCollapsed') === 'true',
+            pageWidth: localStorage.getItem('pageWidth') || 'full',
+            sidebarReady: false,
             init() {
-                this.pageWidth = localStorage.getItem('pageWidth');
-                if (!this.pageWidth) {
-                    this.pageWidth = 'full';
-                    localStorage.setItem('pageWidth', 'full');
+                if (!localStorage.getItem('pageWidth')) {
+                    localStorage.setItem('pageWidth', this.pageWidth);
                 }
-                this.collapsed = localStorage.getItem('sidebarCollapsed') === 'true';
+
+                this.$nextTick(() => {
+                    requestAnimationFrame(() => {
+                        this.sidebarReady = true;
+                    });
+                });
             },
             toggleSidebar() {
                 this.collapsed = !this.collapsed;
@@ -47,8 +51,8 @@
                 </div>
             </div>
 
-            <div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:flex-col min-w-0 transition-[width] duration-200"
-                :class="collapsed ? 'lg:w-16' : 'lg:w-56'">
+            <div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:flex-col min-w-0"
+                :class="[collapsed ? 'lg:w-16' : 'lg:w-56', sidebarReady ? 'transition-[width] duration-200' : '']">
                 <div class="flex flex-col overflow-y-auto grow gap-y-5 scrollbar min-w-0">
                     <x-navbar />
                 </div>
@@ -79,7 +83,7 @@
                 </button>
             </div>
 
-            <main class="transition-[padding] duration-200 p-6" :class="collapsed ? 'lg:pl-[6rem]' : 'lg:pl-[16rem]'">
+            <main class="p-6" :class="[collapsed ? 'lg:pl-[6rem]' : 'lg:pl-[16rem]', sidebarReady ? 'transition-[padding] duration-200' : '']">
                     {{ $slot }}
             </main>
         </div>

resources/views/layouts/base.blade.php

@@ -172,7 +172,8 @@
         }
         @auth
             window.Pusher = Pusher;
-            window.Echo = new Echo({
+            const EchoConstructor = typeof Echo === 'function' ? Echo : Echo.default;
+            window.Echo = new EchoConstructor({
                 broadcaster: 'pusher',
                 cluster: "{{ config('constants.pusher.host') }}" || window.location.hostname,
                 key: "{{ config('constants.pusher.app_key') }}" || 'coolify',

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

@@ -14,34 +14,30 @@
     </div>
     <div class="subtitle">Network endpoints to deploy your resources.</div>
     <div class="grid gap-4 lg:grid-cols-2 -mt-1">
-        @forelse ($servers as $server)
-            @forelse ($server->destinations() as $destination)
-                @if ($destination->getMorphClass() === 'App\Models\StandaloneDocker')
-                    <a class="coolbox group" {{ wireNavigate() }}
-                        href="{{ route('destination.show', ['destination_uuid' => data_get($destination, 'uuid')]) }}">
-                        <div class="flex flex-col justify-center mx-6">
-                            <div class="box-title">{{ $destination->name }}</div>
-                            <div class="box-description">Server: {{ $destination->server->name }}</div>
+        @forelse ($destinations as $destination)
+            @if ($destination->getMorphClass() === 'App\Models\StandaloneDocker')
+                <a class="coolbox group" {{ wireNavigate() }}
+                    href="{{ route('destination.show', ['destination_uuid' => data_get($destination, 'uuid')]) }}">
+                    <div class="flex flex-col justify-center mx-6">
+                        <div class="box-title">{{ $destination->name }}</div>
+                        <div class="box-description">Server: {{ $destination->server->name }}</div>
+                    </div>
+                </a>
+            @endif
+            @if ($destination->getMorphClass() === 'App\Models\SwarmDocker')
+                <a class="coolbox group" {{ wireNavigate() }}
+                    href="{{ route('destination.show', ['destination_uuid' => data_get($destination, 'uuid')]) }}">
+                    <div class="flex flex-col mx-6">
+                        <div class="box-title">
+                            {{ $destination->name }}
+                            <x-deprecated-badge />
                         </div>
-                    </a>
-                @endif
-                @if ($destination->getMorphClass() === 'App\Models\SwarmDocker')
-                    <a class="coolbox group" {{ wireNavigate() }}
-                        href="{{ route('destination.show', ['destination_uuid' => data_get($destination, 'uuid')]) }}">
-                        <div class="flex flex-col mx-6">
-                            <div class="box-title">
-                                {{ $destination->name }}
-                                <x-deprecated-badge />
-                            </div>
-                            <div class="box-description">server: {{ $destination->server->name }}</div>
-                        </div>
-                    </a>
-                @endif
-            @empty
-                <div>No destinations found.</div>
-            @endforelse
+                        <div class="box-description">Server: {{ $destination->server->name }}</div>
+                    </div>
+                </a>
+            @endif
         @empty
-            <div>No servers found.</div>
+            <div>No destinations found.</div>
         @endforelse
     </div>
 </div>

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

@@ -0,0 +1,14 @@
+@if ($destination->getMorphClass() === 'App\\Models\\StandaloneDocker')
+    <div class="navbar-main">
+        <nav class="flex shrink-0 gap-6 items-center whitespace-nowrap scrollbar min-h-10">
+            <a class="{{ request()->routeIs('destination.show') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
+                href="{{ route('destination.show', ['destination_uuid' => $destination->uuid]) }}">
+                General
+            </a>
+            <a class="{{ request()->routeIs('destination.resources') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
+                href="{{ route('destination.resources', ['destination_uuid' => $destination->uuid]) }}">
+                Resources
+            </a>
+        </nav>
+    </div>
+@endif

resources/views/livewire/destination/resources.blade.php

@@ -0,0 +1,53 @@
+<div>
+    <div class="flex items-center gap-2">
+        <h1>Destination</h1>
+    </div>
+    <div class="subtitle">Resources deployed to this Docker network.</div>
+
+    @include('livewire.destination.navbar', ['destination' => $destination])
+
+    <div class="pt-4" x-data="{ search: '' }">
+        @if (count($resources) === 0)
+            <div class="py-4 text-sm opacity-70">No resources are using this destination.</div>
+        @else
+            <x-forms.input placeholder="Search resources..." x-model="search" id="null" />
+            <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">Project</th>
+                                    <th class="px-5 py-3 text-xs font-medium text-left uppercase">Environment</th>
+                                    <th class="px-5 py-3 text-xs font-medium text-left uppercase">Name</th>
+                                    <th class="px-5 py-3 text-xs font-medium text-left uppercase">Type</th>
+                                </tr>
+                            </thead>
+                            <tbody class="divide-y">
+                                @foreach ($resources as $row)
+                                    <tr class="dark:hover:bg-coolgray-300 hover:bg-neutral-100"
+                                        wire:key="destination-resource-{{ $row['type'] }}-{{ $row['uuid'] }}"
+                                        x-show="search === '' || '{{ addslashes($row['search']) }}'.includes(search.toLowerCase())">
+                                        <td class="px-5 py-4 text-sm whitespace-nowrap">{{ $row['project'] }}</td>
+                                        <td class="px-5 py-4 text-sm whitespace-nowrap">{{ $row['environment'] }}</td>
+                                        <td class="px-5 py-4 text-sm whitespace-nowrap">
+                                            @if ($row['url'])
+                                                <a {{ wireNavigate() }} href="{{ $row['url'] }}">
+                                                    {{ $row['name'] }}
+                                                    <x-internal-link />
+                                                </a>
+                                            @else
+                                                <span>{{ $row['name'] }}</span>
+                                            @endif
+                                        </td>
+                                        <td class="px-5 py-4 text-sm whitespace-nowrap">{{ ucfirst($row['type']) }}</td>
+                                    </tr>
+                                @endforeach
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        @endif
+    </div>
+</div>

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

@@ -20,7 +20,9 @@
                 <x-deprecated-badge />
             </div>
         @endif
-        <div class="flex gap-2">
+        @include('livewire.destination.navbar', ['destination' => $destination])
+
+        <div class="flex gap-2 pt-4">
             <x-forms.input canGate="update" :canResource="$destination" id="name" label="Name" />
             <x-forms.input id="serverIp" label="Server IP" readonly />
             @if ($destination->getMorphClass() === 'App\Models\StandaloneDocker')

resources/views/livewire/profile/appearance.blade.php

@@ -0,0 +1,119 @@
+<div>
+    <x-slot:title>
+        Appearance | Coolify
+    </x-slot>
+    <x-profile.navbar />
+
+    <div x-data="{
+        theme: localStorage.getItem('theme') || 'dark',
+        pageWidth: localStorage.getItem('pageWidth') || 'full',
+        zoom: localStorage.getItem('zoom') || '100',
+        init() {
+            localStorage.setItem('theme', this.theme);
+            localStorage.setItem('pageWidth', this.pageWidth);
+            localStorage.setItem('zoom', this.zoom);
+            this.applyTheme();
+        },
+        setTheme(type) {
+            this.theme = type;
+            localStorage.setItem('theme', type);
+            this.applyTheme();
+        },
+        applyTheme() {
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            const isDark = this.theme === 'dark' || (this.theme === 'system' && prefersDark);
+            document.documentElement.classList.toggle('dark', isDark);
+            document.querySelector('meta[name=theme-color]')?.setAttribute('content', isDark ? '#101010' : '#ffffff');
+        },
+        setWidth(width) {
+            this.pageWidth = width;
+            localStorage.setItem('pageWidth', width);
+            window.location.reload();
+        },
+        setZoom(value) {
+            this.zoom = value;
+            localStorage.setItem('zoom', value);
+            window.location.reload();
+        },
+    }" class="flex max-w-2xl flex-col">
+        <section class="space-y-1.5">
+            <h2>Appearance</h2>
+            <div>Choose how Coolify looks in this browser.</div>
+            <div class="flex flex-wrap gap-1.5">
+                <button type="button" @click="setTheme('light')" aria-label="Use light theme"
+                    class="flex items-center gap-2 rounded-sm border border-neutral-300 bg-white px-2 py-1 text-left text-sm hover:bg-neutral-100 focus-visible:ring-2 focus-visible:ring-coollabs dark:border-coolgray-300 dark:bg-coolgray-100 dark:hover:bg-coolgray-200 dark:focus-visible:ring-warning"
+                    :class="theme === 'light' && 'border-coollabs text-coollabs dark:border-warning dark:text-warning'">
+                    <svg class="size-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+                    </svg>
+                    <span>Light</span>
+                </button>
+                <button type="button" @click="setTheme('system')" aria-label="Use system theme"
+                    class="flex items-center gap-2 rounded-sm border border-neutral-300 bg-white px-2 py-1 text-left text-sm hover:bg-neutral-100 focus-visible:ring-2 focus-visible:ring-coollabs dark:border-coolgray-300 dark:bg-coolgray-100 dark:hover:bg-coolgray-200 dark:focus-visible:ring-warning"
+                    :class="theme === 'system' && 'border-coollabs text-coollabs dark:border-warning dark:text-warning'">
+                    <svg class="size-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                    </svg>
+                    <span>System</span>
+                </button>
+                <button type="button" @click="setTheme('dark')" aria-label="Use dark theme"
+                    class="flex items-center gap-2 rounded-sm border border-neutral-300 bg-white px-2 py-1 text-left text-sm hover:bg-neutral-100 focus-visible:ring-2 focus-visible:ring-coollabs dark:border-coolgray-300 dark:bg-coolgray-100 dark:hover:bg-coolgray-200 dark:focus-visible:ring-warning"
+                    :class="theme === 'dark' && 'border-coollabs text-coollabs dark:border-warning dark:text-warning'">
+                    <svg class="size-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+                    </svg>
+                    <span>Dark</span>
+                </button>
+            </div>
+        </section>
+
+        <section class="space-y-1.5">
+            <h2>Width</h2>
+            <div>Choose the maximum page width for this browser.</div>
+            <div class="flex flex-wrap gap-1.5">
+                <button type="button" @click="setWidth('center')" aria-label="Use centered width"
+                    class="flex items-center gap-2 rounded-sm border border-neutral-300 bg-white px-2 py-1 text-sm hover:bg-neutral-100 focus-visible:ring-2 focus-visible:ring-coollabs dark:border-coolgray-300 dark:bg-coolgray-100 dark:hover:bg-coolgray-200 dark:focus-visible:ring-warning"
+                    :class="pageWidth === 'center' && 'border-coollabs text-coollabs dark:border-warning dark:text-warning'">
+                    <svg class="size-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
+                    </svg>
+                    Center
+                </button>
+                <button type="button" @click="setWidth('full')" aria-label="Use full width"
+                    class="flex items-center gap-2 rounded-sm border border-neutral-300 bg-white px-2 py-1 text-sm hover:bg-neutral-100 focus-visible:ring-2 focus-visible:ring-coollabs dark:border-coolgray-300 dark:bg-coolgray-100 dark:hover:bg-coolgray-200 dark:focus-visible:ring-warning"
+                    :class="pageWidth === 'full' && 'border-coollabs text-coollabs dark:border-warning dark:text-warning'">
+                    <svg class="size-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                    </svg>
+                    Full
+                </button>
+            </div>
+        </section>
+
+        <section class="space-y-1.5">
+            <h2>Zoom</h2>
+            <div>Choose interface density for this browser.</div>
+            <div class="flex flex-wrap gap-1.5">
+                <button type="button" @click="setZoom('100')" aria-label="Use 100 percent zoom"
+                    class="flex items-center gap-2 rounded-sm border border-neutral-300 bg-white px-2 py-1 text-sm hover:bg-neutral-100 focus-visible:ring-2 focus-visible:ring-coollabs dark:border-coolgray-300 dark:bg-coolgray-100 dark:hover:bg-coolgray-200 dark:focus-visible:ring-warning"
+                    :class="zoom === '100' && 'border-coollabs text-coollabs dark:border-warning dark:text-warning'">
+                    <svg class="size-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                    </svg>
+                    100%
+                </button>
+                <button type="button" @click="setZoom('90')" aria-label="Use 90 percent zoom"
+                    class="flex items-center gap-2 rounded-sm border border-neutral-300 bg-white px-2 py-1 text-sm hover:bg-neutral-100 focus-visible:ring-2 focus-visible:ring-coollabs dark:border-coolgray-300 dark:bg-coolgray-100 dark:hover:bg-coolgray-200 dark:focus-visible:ring-warning"
+                    :class="zoom === '90' && 'border-coollabs text-coollabs dark:border-warning dark:text-warning'">
+                    <svg class="size-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 10h4v4h-4v-4z" />
+                    </svg>
+                    90%
+                </button>
+            </div>
+        </section>
+    </div>
+</div>

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

@@ -2,8 +2,7 @@
     <x-slot:title>
         Profile | Coolify
     </x-slot>
-    <h1>Profile</h1>
-    <div class="subtitle -mt-2">Your user profile settings.</div>
+    <x-profile.navbar />
     <form wire:submit='submit' class="flex flex-col">
         <div class="flex items-center gap-2">
             <h2>General</h2>

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

@@ -41,7 +41,7 @@
                     instantSave id="isPreviewDeploymentsEnabled" label="Preview Deployments" canGate="update"
                     :canResource="$application" />
                 <x-forms.checkbox
-                    helper="When enabled, anyone can trigger PR deployments. When disabled, only repository members, collaborators, and contributors can trigger PR deployments."
+                    helper="When enabled, anyone can trigger PR deployments. When disabled, fork PRs are blocked and only repository owners, members, and collaborators can trigger PR deployments."
                     instantSave id="isPrDeploymentsPublicEnabled" label="Allow Public PR Deployments" canGate="update"
                     :canResource="$application" :disabled="!$isPreviewDeploymentsEnabled" />
 
@@ -101,6 +101,18 @@
                 />
                 <x-forms.button canGate="update" :canResource="$application" type="submit">Save</x-forms.button>
             </form>
+            <form class="flex items-end gap-2" wire:submit.prevent='saveMaxRestartCount'>
+                <x-forms.input
+                    type="number"
+                    min="0"
+                    helper="Maximum number of crash restarts before Coolify automatically stops the application and sends a notification. Set to 0 to disable the limit."
+                    id="maxRestartCount"
+                    label="Max Restart Count"
+                    canGate="update"
+                    :canResource="$application"
+                />
+                <x-forms.button canGate="update" :canResource="$application" type="submit">Save</x-forms.button>
+            </form>
             <h3 class="pt-4">Logs</h3>
             <x-forms.checkbox helper="Drain logs to your configured log drain endpoint in your Server settings."
                 instantSave id="isLogDrainEnabled" label="Drain Logs" canGate="update" :canResource="$application" />

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

@@ -27,21 +27,7 @@
             @endif
             <a class="sub-menu-item flex items-center gap-2" {{ wireNavigate() }} wire:current.exact="menu-item-active"
                 href="{{ route('project.application.servers', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}"><span class="menu-item-label">Servers</span>
-                @if ($application->server_status == false)
-                    <span title="One or more servers are unreachable or misconfigured.">
-                        <svg class="w-4 h-4 text-error" 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" />
-                        </svg>
-                    </span>
-                @elseif ($application->additional_servers()->exists() && str($application->status)->contains('degraded'))
-                    <span title="Application is in degraded state across multiple servers.">
-                        <svg class="w-4 h-4 text-error" 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" />
-                        </svg>
-                    </span>
-                @endif
+                <livewire:project.application.server-status-badge :application="$application" />
             </a>
             <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>

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

@@ -9,8 +9,12 @@
         fullscreen: @entangle('fullscreen'),
         alwaysScroll: {{ $isKeepAliveOn ? 'true' : 'false' }},
         rafId: null,
+        scrollTimeout: null,
         scrollDebounce: null,
         isScrolling: false,
+        destroyed: false,
+        morphUpdatedCleanup: null,
+        deploymentFinishedCleanup: null,
         lastTouchY: 0,
         showTimestamps: true,
         searchQuery: '',
@@ -20,20 +24,32 @@
             this.fullscreen = !this.fullscreen;
         },
         scrollToBottom() {
-            const logsContainer = document.getElementById('logsContainer');
+            if (this.destroyed) return;
+            const logsContainer = this.$root.querySelector('#logsContainer');
             if (logsContainer) {
                 this.isScrolling = true;
                 logsContainer.scrollTop = logsContainer.scrollHeight;
-                setTimeout(() => { this.isScrolling = false; }, 50);
+                requestAnimationFrame(() => { this.isScrolling = false; });
+            }
+        },
+        cancelScrollLoop() {
+            if (this.rafId) {
+                cancelAnimationFrame(this.rafId);
+                this.rafId = null;
+            }
+            if (this.scrollTimeout) {
+                clearTimeout(this.scrollTimeout);
+                this.scrollTimeout = null;
+            }
+            if (this.scrollDebounce) {
+                clearTimeout(this.scrollDebounce);
+                this.scrollDebounce = null;
             }
         },
         disableFollow() {
             if (!this.alwaysScroll) return;
             this.alwaysScroll = false;
-            if (this.rafId) {
-                cancelAnimationFrame(this.rafId);
-                this.rafId = null;
-            }
+            this.cancelScrollLoop();
         },
         handleWheel(event) {
             if (this.alwaysScroll && event.deltaY < 0) {
@@ -59,10 +75,11 @@
             }
         },
         handleScroll(event) {
-            if (this.isScrolling) return;
+            if (this.isScrolling || this.destroyed) return;
+            const el = event.target;
             clearTimeout(this.scrollDebounce);
             this.scrollDebounce = setTimeout(() => {
-                const el = event.target;
+                if (this.destroyed) return;
                 const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
                 if (!this.alwaysScroll && distanceFromBottom <= 10) {
                     this.alwaysScroll = true;
@@ -71,11 +88,12 @@
             }, 150);
         },
         scheduleScroll() {
-            if (!this.alwaysScroll) return;
+            if (!this.alwaysScroll || this.destroyed) return;
             this.rafId = requestAnimationFrame(() => {
+                if (!this.alwaysScroll || this.destroyed) return;
                 this.scrollToBottom();
-                if (this.alwaysScroll) {
-                    setTimeout(() => this.scheduleScroll(), 250);
+                if (this.alwaysScroll && !this.destroyed) {
+                    this.scrollTimeout = setTimeout(() => this.scheduleScroll(), 250);
                 }
             });
         },
@@ -84,10 +102,7 @@
             if (this.alwaysScroll) {
                 this.scheduleScroll();
             } else {
-                if (this.rafId) {
-                    cancelAnimationFrame(this.rafId);
-                    this.rafId = null;
-                }
+                this.cancelScrollLoop();
             }
         },
         hasActiveLogSelection() {
@@ -189,10 +204,7 @@
         stopScroll() {
             this.scrollToBottom();
             this.alwaysScroll = false;
-            if (this.rafId) {
-                cancelAnimationFrame(this.rafId);
-                this.rafId = null;
-            }
+            this.cancelScrollLoop();
         },
         init() {
             // Watch search query changes
@@ -200,21 +212,26 @@
                 this.applySearch();
             });
 
-            // Apply search after Livewire updates
-            Livewire.hook('morph.updated', ({ el }) => {
-                if (el.id === 'logs') {
-                    this.$nextTick(() => {
-                        this.applySearch();
-                        if (this.alwaysScroll) {
-                            this.scrollToBottom();
-                        }
-                    });
-                }
+            // Apply search after Livewire updates.
+            // Livewire.hook() returns an unregister fn; keep it for destroy().
+            this.morphUpdatedCleanup = Livewire.hook('morph.updated', ({ el }) => {
+                if (this.destroyed) return;
+                if (el.id !== 'logs' || !this.$root.contains(el)) return;
+                this.$nextTick(() => {
+                    if (this.destroyed) return;
+                    this.applySearch();
+                    if (this.alwaysScroll) {
+                        this.scrollToBottom();
+                    }
+                });
             });
 
-            // Stop auto-scroll when deployment finishes
-            Livewire.on('deploymentFinished', () => {
+            // Stop auto-scroll when deployment finishes.
+            // Livewire.on() returns an unregister fn; keep it for destroy().
+            this.deploymentFinishedCleanup = Livewire.on('deploymentFinished', () => {
+                if (this.destroyed) return;
                 setTimeout(() => {
+                    if (this.destroyed) return;
                     this.stopScroll();
                 }, 500);
             });
@@ -223,6 +240,24 @@
             if (this.alwaysScroll) {
                 this.scheduleScroll();
             }
+        },
+        destroy() {
+            // Runs when Alpine tears the component down (wire:navigate away).
+            this.destroyed = true;
+            this.alwaysScroll = false;
+            this.cancelScrollLoop();
+            if (this.scrollDebounce) {
+                clearTimeout(this.scrollDebounce);
+                this.scrollDebounce = null;
+            }
+            if (typeof this.morphUpdatedCleanup === 'function') {
+                this.morphUpdatedCleanup();
+                this.morphUpdatedCleanup = null;
+            }
+            if (typeof this.deploymentFinishedCleanup === 'function') {
+                this.deploymentFinishedCleanup();
+                this.deploymentFinishedCleanup = null;
+            }
         }
     }" class="flex flex-1 min-h-0 flex-col overflow-hidden">
             <livewire:project.application.deployment-navbar

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

@@ -12,6 +12,9 @@
                 <div>{{ $application->compose_parsing_version }}</div>
             @endif
             <x-forms.button canGate="update" :canResource="$application" type="submit">Save</x-forms.button>
+            <x-modal-input title="Resource Details" buttonTitle="Details">
+                <livewire:project.shared.resource-details :resource="$application" />
+            </x-modal-input>
             @if ($buildPack === 'dockercompose')
                 <x-forms.button canGate="update" :canResource="$application" wire:target='initLoadingCompose'
                     x-on:click="$wire.dispatch('loadCompose', false)">
@@ -497,6 +500,13 @@
                         </div>
                     @endif
                 @endif
+                @if ((empty($portsExposes) || $portsExposes === '0') && !empty($fqdn))
+                    <x-callout type="info" title="No ports exposed" class="mb-4">
+                        This application does not expose any ports and will not be reachable through the proxy or your domains.
+                        This behavior is normal for background workers, bots, or scheduled tasks.
+                        If your application needs to handle HTTP traffic, please specify the port(s) it listens on.
+                    </x-callout>
+                @endif
                 <div class="flex flex-col gap-2 xl:flex-row">
                     @if ($isStatic || $buildPack === 'static')
                         <x-forms.input id="portsExposes" label="Ports Exposes" readonly
@@ -507,7 +517,7 @@
                                 helper="Readonly labels are disabled. You can set the ports manually in the labels section."
                                 x-bind:disabled="!canUpdate" />
                         @else
-                            <x-forms.input placeholder="3000,3001" id="portsExposes" label="Ports Exposes" required
+                            <x-forms.input placeholder="3000,3001" id="portsExposes" label="Ports Exposes"
                                 helper="A comma separated list of ports your application uses. The first port will be used as default healthcheck port if nothing defined in the Healthcheck menu. Be sure to set this correctly."
                                 x-bind:disabled="!canUpdate" />
                         @endif

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

@@ -15,7 +15,7 @@
                 href="{{ route('project.application.logs', $parameters) }}">
                 <div class="flex items-center gap-1">
                     Logs
-                    @if ($application->restart_count > 0 && !str($application->status)->startsWith('exited'))
+                    @if ($application->restart_count > 0 && (!str($application->status)->startsWith('exited') || $application->stoppedAfterRestartLimit()))
                         <svg class="w-4 h-4 dark:text-warning" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" title="Container has restarted {{ $application->restart_count }} time{{ $application->restart_count > 1 ? 's' : '' }}">
                             <path d="M12 2L1 21h22L12 2zm0 4l7.53 13H4.47L12 6zm-1 5v4h2v-4h-2zm0 5v2h2v-2h-2z"/>
                         </svg>

resources/views/livewire/project/application/server-status-badge.blade.php

@@ -0,0 +1,17 @@
+<span>
+    @if ($application->server_status === false)
+        <span title="One or more servers are unreachable or misconfigured.">
+            <svg class="w-4 h-4 text-error" 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" />
+            </svg>
+        </span>
+    @elseif ($application->additional_servers()->exists() && str($application->status)->contains('degraded'))
+        <span title="Application is in degraded state across multiple servers.">
+            <svg class="w-4 h-4 text-error" 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" />
+            </svg>
+        </span>
+    @endif
+</span>

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

@@ -5,6 +5,9 @@
             <x-forms.button type="submit" canGate="update" :canResource="$database">
                 Save
             </x-forms.button>
+            <x-modal-input title="Resource Details" buttonTitle="Details">
+                <livewire:project.shared.resource-details :resource="$database" />
+            </x-modal-input>
         </div>
         <div class="flex gap-2">
             <x-forms.input label="Name" id="name" canGate="update" :canResource="$database" />
@@ -41,19 +44,8 @@
                     helper="A comma separated list of ports you would like to map to the host system.<br><span class='inline-block font-bold dark:text-warning'>Example</span>3000:5432,3002:5433"
                     canGate="update" :canResource="$database" />
             </div>
-            <x-forms.input label="Clickhouse URL (internal)"
-                helper="If you change the user/password/port, this could be different. This is with the default values."
-                type="password" readonly wire:model="dbUrl" canGate="update" :canResource="$database" />
-            @if ($dbUrlPublic)
-                <x-forms.input label="Clickhouse URL (public)"
-                    helper="If you change the user/password/port, this could be different. This is with the default values."
-                    type="password" readonly wire:model="dbUrlPublic" canGate="update" :canResource="$database" />
-            @else
-                <x-forms.input label="Clickhouse URL (public)"
-                    helper="If you change the user/password/port, this could be different. This is with the default values."
-                    readonly value="Starting the database will generate this." canGate="update" :canResource="$database" />
-            @endif
         </div>
+        <livewire:project.database.clickhouse.status-info :database="$database" />
             <div class="flex flex-col py-2 w-64">
                 <div class="flex items-center gap-2 pb-2">
                     <div class="flex items-center">

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

@@ -21,6 +21,8 @@
             @endcan
             <a class='sub-menu-item' {{ wireNavigate() }} wire:current.exact="menu-item-active"
                 href="{{ route('project.database.webhooks', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'database_uuid' => $database->uuid]) }}"><span class="menu-item-label">Webhooks</span></a>
+            <a class='sub-menu-item' {{ wireNavigate() }} wire:current.exact="menu-item-active"
+                href="{{ route('project.database.healthcheck', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'database_uuid' => $database->uuid]) }}"><span class="menu-item-label">Healthcheck</span></a>
             <a class="sub-menu-item" {{ wireNavigate() }} wire:current.exact="menu-item-active"
                 href="{{ route('project.database.resource-limits', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'database_uuid' => $database->uuid]) }}"><span class="menu-item-label">Resource Limits</span></a>
             <a class="sub-menu-item" {{ wireNavigate() }} wire:current.exact="menu-item-active"
@@ -57,6 +59,8 @@
                 <livewire:project.shared.destination :resource="$database" />
             @elseif ($currentRoute === 'project.database.persistent-storage')
                 <livewire:project.service.storage :resource="$database" />
+            @elseif ($currentRoute === 'project.database.healthcheck')
+                <livewire:project.database.health :database="$database" />
             @elseif ($currentRoute === 'project.database.import-backup')
                 <livewire:project.database.import :resource="$database" />
             @elseif ($currentRoute === 'project.database.webhooks')

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

@@ -5,6 +5,9 @@
             <x-forms.button type="submit" canGate="update" :canResource="$database">
                 Save
             </x-forms.button>
+            <x-modal-input title="Resource Details" buttonTitle="Details">
+                <livewire:project.shared.resource-details :resource="$database" />
+            </x-modal-input>
         </div>
         <div class="flex gap-2">
             <x-forms.input label="Name" id="name" canGate="update" :canResource="$database" />
@@ -37,60 +40,8 @@
                     helper="A comma separated list of ports you would like to map to the host system.<br><span class='inline-block font-bold dark:text-warning'>Example</span>3000:5432,3002:5433"
                     canGate="update" :canResource="$database" />
             </div>
-            <x-forms.input label="Dragonfly URL (internal)"
-                helper="If you change the user/password/port, this could be different. This is with the default values."
-                type="password" readonly wire:model="dbUrl" canGate="update" :canResource="$database" />
-
-            @if ($dbUrlPublic)
-                <x-forms.input label="Dragonfly URL (public)"
-                    helper="If you change the user/password/port, this could be different. This is with the default values."
-                    type="password" readonly wire:model="dbUrlPublic" canGate="update" :canResource="$database" />
-            @else
-                <x-forms.input label="Dragonfly URL (public)"
-                    helper="If you change the user/password/port, this could be different. This is with the default values."
-                    readonly value="Starting the database will generate this." canGate="update" :canResource="$database" />
-            @endif
-        </div>
-        <div class="flex flex-col gap-2">
-            <div class="flex items-center justify-between py-2">
-                <div class="flex items-center justify-between w-full">
-                    <h3>SSL Configuration</h3>
-                    @if ($database->enable_ssl && $certificateValidUntil)
-                        <x-modal-confirmation title="Regenerate SSL Certificates"
-                            buttonTitle="Regenerate SSL Certificates" :actions="[
-                                'The SSL certificate of this database will be regenerated.',
-                                'You must restart the database after regenerating the certificate to start using the new certificate.',
-                            ]"
-                            submitAction="regenerateSslCertificate" :confirmWithText="false" :confirmWithPassword="false" />
-                    @endif
-                </div>
-            </div>
-            @if ($database->enable_ssl && $certificateValidUntil)
-                <span class="text-sm">Valid until:
-                    @if (now()->gt($certificateValidUntil))
-                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expired</span>
-                    @elseif(now()->addDays(30)->gt($certificateValidUntil))
-                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expiring
-                            soon</span>
-                    @else
-                        <span>{{ $certificateValidUntil->format('d.m.Y H:i:s') }}</span>
-                    @endif
-                </span>
-            @endif
-            <div class="flex flex-col gap-2">
-                <div class="w-64">
-                    @if (str($database->status)->contains('exited'))
-                        <x-forms.checkbox id="enable_ssl" label="Enable SSL" wire:model.live="enable_ssl"
-                            instantSave="instantSaveSSL" canGate="update" :canResource="$database" />
-                    @else
-                        <x-forms.checkbox id="enable_ssl" label="Enable SSL" wire:model.live="enable_ssl"
-                            instantSave="instantSaveSSL" disabled
-                            helper="Database should be stopped to change this settings." canGate="update"
-                            :canResource="$database" />
-                    @endif
-                </div>
-            </div>
         </div>
+        <livewire:project.database.dragonfly.status-info :database="$database" />
         <div>
             <div class="flex flex-col py-2 w-64">
                 <div class="flex items-center gap-2 pb-2">

resources/views/livewire/project/database/health.blade.php

@@ -0,0 +1,35 @@
+<form wire:submit='submit' class="flex flex-col">
+    <div class="flex items-center gap-2">
+        <h2>Healthcheck</h2>
+        <x-forms.button canGate="update" :canResource="$database" type="submit">Save</x-forms.button>
+        @if (!$healthCheckEnabled)
+            <x-modal-confirmation title="Confirm Healthcheck Enable?" buttonTitle="Enable Healthcheck"
+                submitAction="toggleHealthcheck" :actions="['Enable healthcheck for this database.']"
+                warningMessage="If the health check fails, this database will be marked unhealthy. Please review the <a href='https://coolify.io/docs/knowledge-base/health-checks' target='_blank' class='underline text-white'>Health Checks</a> guide before proceeding!"
+                step2ButtonText="Enable Healthcheck" :confirmWithText="false" :confirmWithPassword="false"
+                isHighlightedButton>
+            </x-modal-confirmation>
+        @else
+            <x-forms.button canGate="update" :canResource="$database" wire:click="toggleHealthcheck">Disable Healthcheck</x-forms.button>
+        @endif
+    </div>
+    <div class="mt-1 pb-4">Define how your resource's health should be checked.</div>
+    <div class="flex flex-col gap-4">
+        @if (!$healthCheckEnabled)
+            <x-callout type="warning" title="Healthcheck disabled">
+                <p>Docker runs no healthcheck probe for this database and Coolify can no longer report a healthy/unhealthy state.</p>
+            </x-callout>
+        @endif
+
+        <div class="flex gap-2">
+            <x-forms.input canGate="update" :canResource="$database" min="1" type="number" id="healthCheckInterval"
+                placeholder="15" label="Interval (s)" required />
+            <x-forms.input canGate="update" :canResource="$database" min="1" type="number" id="healthCheckTimeout"
+                placeholder="5" label="Timeout (s)" required />
+            <x-forms.input canGate="update" :canResource="$database" min="1" type="number" id="healthCheckRetries"
+                placeholder="5" label="Retries" required />
+            <x-forms.input canGate="update" :canResource="$database" min="0" type="number"
+                id="healthCheckStartPeriod" placeholder="5" label="Start Period (s)" required />
+        </div>
+    </div>
+</form>

resources/views/livewire/project/database/import-form.blade.php

@@ -0,0 +1,228 @@
+<div x-data="{
+    error: $wire.entangle('error'),
+    filesize: $wire.entangle('filesize'),
+    filename: $wire.entangle('filename'),
+    isUploading: $wire.entangle('isUploading'),
+    progress: $wire.entangle('progress'),
+    s3FileSize: $wire.entangle('s3FileSize'),
+    s3StorageId: $wire.entangle('s3StorageId'),
+    s3Path: $wire.entangle('s3Path'),
+    restoreType: null
+}">
+    <script type="text/javascript" src="{{ URL::asset('js/dropzone.js') }}"></script>
+    @script
+    <script data-navigate-once>
+        Dropzone.options.myDropzone = {
+            chunking: true,
+            method: "POST",
+            maxFilesize: 1000000000,
+            chunkSize: 10000000,
+            createImageThumbnails: false,
+            disablePreviews: true,
+            parallelChunkUploads: false,
+            init: function () {
+                let button = this.element.querySelector('button');
+                button.innerText = 'Select or drop a backup file here.'
+                this.on('sending', function (file, xhr, formData) {
+                    const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+                    formData.append("_token", token);
+                });
+                this.on("addedfile", file => {
+                    $wire.isUploading = true;
+                    $wire.customLocation = '';
+                });
+                this.on('uploadprogress', function (file, progress, bytesSent) {
+                    $wire.progress = progress;
+                });
+                this.on('complete', function (file) {
+                    $wire.filename = file.name;
+                    $wire.filesize = Number(file.size / 1024 / 1024).toFixed(2) + ' MB';
+                    $wire.isUploading = false;
+                });
+                this.on('error', function (file, message) {
+                    $wire.error = true;
+                    $wire.$dispatch('error', message.error)
+                });
+            }
+        };
+    </script>
+    @endscript
+        <div class="pt-2 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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+            <span>This is a destructive action, existing data will be replaced!</span>
+        </div>
+        {{-- Restore Command Configuration --}}
+            @if ($resourceDbType === 'standalone-postgresql')
+                @if ($dumpAll)
+                    <x-forms.textarea rows="6" readonly label="Custom Import Command"
+                        wire:model='restoreCommandText' canGate="update" :canResource="$this->resource"></x-forms.textarea>
+                @else
+                    <x-forms.input label="Custom Import Command" wire:model='postgresqlRestoreCommand' canGate="update" :canResource="$this->resource"></x-forms.input>
+                    <div class="flex flex-col gap-1 pt-1">
+                        <span class="text-xs">You can add "--clean" to drop objects before creating them, avoiding
+                            conflicts.</span>
+                        <span class="text-xs">You can add "--verbose" to log more things.</span>
+                    </div>
+                @endif
+                <div class="w-64 pt-2">
+                    <x-forms.checkbox label="Backup includes all databases" wire:model.live='dumpAll' canGate="update" :canResource="$this->resource"></x-forms.checkbox>
+                </div>
+            @elseif ($resourceDbType === 'standalone-mysql')
+                @if ($dumpAll)
+                    <x-forms.textarea rows="14" readonly label="Custom Import Command"
+                        wire:model='restoreCommandText' canGate="update" :canResource="$this->resource"></x-forms.textarea>
+                @else
+                    <x-forms.input label="Custom Import Command" wire:model='mysqlRestoreCommand' canGate="update" :canResource="$this->resource"></x-forms.input>
+                @endif
+                <div class="w-64 pt-2">
+                    <x-forms.checkbox label="Backup includes all databases" wire:model.live='dumpAll' canGate="update" :canResource="$this->resource"></x-forms.checkbox>
+                </div>
+            @elseif ($resourceDbType === 'standalone-mariadb')
+                @if ($dumpAll)
+                    <x-forms.textarea rows="14" readonly label="Custom Import Command"
+                        wire:model='restoreCommandText' canGate="update" :canResource="$this->resource"></x-forms.textarea>
+                @else
+                    <x-forms.input label="Custom Import Command" wire:model='mariadbRestoreCommand' canGate="update" :canResource="$this->resource"></x-forms.input>
+                @endif
+                <div class="w-64 pt-2">
+                    <x-forms.checkbox label="Backup includes all databases" wire:model.live='dumpAll' canGate="update" :canResource="$this->resource"></x-forms.checkbox>
+                </div>
+            @endif
+
+            {{-- Restore Type Selection Boxes --}}
+            <h3 class="pt-6">Choose Restore Method</h3>
+            <div class="flex gap-4 pt-2">
+                <div @click="restoreType = 'file'"
+                     class="flex-1 p-6 border-2 rounded-sm cursor-pointer transition-all"
+                     :class="restoreType === 'file' ? 'border-warning bg-warning/10' : 'border-neutral-200 dark:border-neutral-800 hover:border-warning/50'">
+                    <div class="flex flex-col gap-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+                        </svg>
+                        <h4 class="text-lg font-bold">Restore from File</h4>
+                        <p class="text-sm text-neutral-600 dark:text-neutral-400">Upload a backup file or specify a file path on the server</p>
+                    </div>
+                </div>
+
+                @if (count($availableS3Storages) > 0)
+                    <div @click="restoreType = 's3'"
+                         class="flex-1 p-6 border-2 rounded-sm cursor-pointer transition-all"
+                         :class="restoreType === 's3' ? 'border-warning bg-warning/10' : 'border-neutral-200 dark:border-neutral-800 hover:border-warning/50'">
+                        <div class="flex flex-col gap-2">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
+                            </svg>
+                            <h4 class="text-lg font-bold">Restore from S3</h4>
+                            <p class="text-sm text-neutral-600 dark:text-neutral-400">Download and restore a backup from S3 storage</p>
+                        </div>
+                    </div>
+                @endif
+            </div>
+
+            {{-- File Restore Section --}}
+            @can('update', $this->resource)
+                <div x-show="restoreType === 'file'" class="pt-6">
+                    <h3>Backup File</h3>
+                    <form class="flex gap-2 items-end pt-2">
+                        <x-forms.input label="Location of the backup file on the server" placeholder="e.g. /home/user/backup.sql.gz"
+                            wire:model='customLocation' x-model="$wire.customLocation" canGate="update" :canResource="$this->resource"></x-forms.input>
+                        <x-forms.button class="w-full" wire:click='checkFile' x-bind:disabled="!$wire.customLocation" canGate="update" :canResource="$this->resource">Check File</x-forms.button>
+                    </form>
+                    <div class="pt-2 text-center text-xl font-bold">
+                        Or
+                    </div>
+                    <form action="{{ route('upload.backup', ['databaseUuid' => $resourceUuid]) }}" class="dropzone" id="my-dropzone" wire:ignore>
+                        @csrf
+                    </form>
+                    <div x-show="isUploading">
+                        <progress max="100" x-bind:value="progress" class="progress progress-warning"></progress>
+                    </div>
+
+                    <div x-show="filename && !error" class="pt-6">
+                        <h3>File Information</h3>
+                        <div class="pt-2">Location: <span x-text="filename ?? 'N/A'"></span><span x-show="filesize" x-text="' / ' + filesize"></span></div>
+                        <div class="pt-2">
+                            <x-modal-confirmation title="Restore Database from File?" buttonTitle="Restore from File"
+                                submitAction="runImport" isErrorButton>
+                                <x-slot:button-title>
+                                    Restore Database from File
+                                </x-slot:button-title>
+                                This will perform the following actions:
+                                <ul class="list-disc list-inside pt-2">
+                                    <li>Copy backup file to database container</li>
+                                    <li>Execute restore command</li>
+                                </ul>
+                                <div class="pt-2 font-bold text-error">WARNING: This will REPLACE all existing data!</div>
+                            </x-modal-confirmation>
+                        </div>
+                    </div>
+                </div>
+            @endcan
+
+            {{-- S3 Restore Section --}}
+            @if (count($availableS3Storages) > 0)
+                @can('update', $this->resource)
+                    <div x-show="restoreType === 's3'" class="pt-6">
+                        <h3>Restore from S3</h3>
+                        <div class="flex flex-col gap-2 pt-2">
+                            <x-forms.select label="S3 Storage" wire:model.live="s3StorageId" canGate="update" :canResource="$this->resource">
+                                <option value="">Select S3 Storage</option>
+                                @foreach ($availableS3Storages as $storage)
+                                    <option value="{{ $storage['id'] }}">{{ $storage['name'] }}
+                                        @if ($storage['description'])
+                                            - {{ $storage['description'] }}
+                                        @endif
+                                    </option>
+                                @endforeach
+                            </x-forms.select>
+
+                            <x-forms.input label="S3 File Path (within bucket)"
+                                helper="Path to the backup file in your S3 bucket, e.g., /backups/database-2025-01-15.gz"
+                                placeholder="/backups/database-backup.gz" wire:model.blur='s3Path'
+                                wire:keydown.enter='checkS3File' canGate="update" :canResource="$this->resource"></x-forms.input>
+
+                            <div class="flex gap-2">
+                                <x-forms.button class="w-full" wire:click='checkS3File' x-bind:disabled="!s3StorageId || !s3Path" canGate="update" :canResource="$this->resource">
+                                    Check File
+                                </x-forms.button>
+                            </div>
+
+                            @if ($s3FileSize)
+                                <div class="pt-6">
+                                    <h3>File Information</h3>
+                                    <div class="pt-2">Location: {{ $s3Path }} {{ formatBytes($s3FileSize ?? 0) }}</div>
+                                    <div class="pt-2">
+                                        <x-modal-confirmation title="Restore Database from S3?" buttonTitle="Restore from S3"
+                                            submitAction="restoreFromS3" isErrorButton>
+                                            <x-slot:button-title>
+                                                Restore Database from S3
+                                            </x-slot:button-title>
+                                            This will perform the following actions:
+                                            <ul class="list-disc list-inside pt-2">
+                                                <li>Download backup from S3 storage</li>
+                                                <li>Copy file into database container</li>
+                                                <li>Execute restore command</li>
+                                            </ul>
+                                            <div class="pt-2 font-bold text-error">WARNING: This will REPLACE all existing data!</div>
+                                        </x-modal-confirmation>
+                                    </div>
+                                </div>
+                            @endif
+                        </div>
+                    </div>
+                @endcan
+            @endif
+
+            {{-- Slide-over for activity monitor (all restore operations) --}}
+            <x-slide-over @databaserestore.window="slideOverOpen = true" closeWithX fullScreen>
+                <x-slot:title>Database Restore Output</x-slot:title>
+                <x-slot:content>
+                    <div wire:ignore>
+                        <livewire:activity-monitor wire:key="database-restore-{{ $resourceUuid }}" header="Logs" fullHeight />
+                    </div>
+                </x-slot:content>
+            </x-slide-over>
+</div>

resources/views/livewire/project/database/import.blade.php

@@ -1,237 +1,10 @@
-<div x-data="{
-    error: $wire.entangle('error'),
-    filesize: $wire.entangle('filesize'),
-    filename: $wire.entangle('filename'),
-    isUploading: $wire.entangle('isUploading'),
-    progress: $wire.entangle('progress'),
-    s3FileSize: $wire.entangle('s3FileSize'),
-    s3StorageId: $wire.entangle('s3StorageId'),
-    s3Path: $wire.entangle('s3Path'),
-    restoreType: null
-}">
-    <script type="text/javascript" src="{{ URL::asset('js/dropzone.js') }}"></script>
-    @script
-    <script data-navigate-once>
-        Dropzone.options.myDropzone = {
-            chunking: true,
-            method: "POST",
-            maxFilesize: 1000000000,
-            chunkSize: 10000000,
-            createImageThumbnails: false,
-            disablePreviews: true,
-            parallelChunkUploads: false,
-            init: function () {
-                let button = this.element.querySelector('button');
-                button.innerText = 'Select or drop a backup file here.'
-                this.on('sending', function (file, xhr, formData) {
-                    const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
-                    formData.append("_token", token);
-                });
-                this.on("addedfile", file => {
-                    $wire.isUploading = true;
-                    $wire.customLocation = '';
-                });
-                this.on('uploadprogress', function (file, progress, bytesSent) {
-                    $wire.progress = progress;
-                });
-                this.on('complete', function (file) {
-                    $wire.filename = file.name;
-                    $wire.filesize = Number(file.size / 1024 / 1024).toFixed(2) + ' MB';
-                    $wire.isUploading = false;
-                });
-                this.on('error', function (file, message) {
-                    $wire.error = true;
-                    $wire.$dispatch('error', message.error)
-                });
-            }
-        };
-    </script>
-    @endscript
+<div>
     <h2>Import Backup</h2>
     @if ($unsupported)
         <div>Database restore is not supported.</div>
+    @elseif (str($resourceStatus)->startsWith('running'))
+        <livewire:project.database.import-form wire:key="database-import-form-{{ $resourceUuid }}" />
     @else
-        <div class="pt-2 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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-            </svg>
-            <span>This is a destructive action, existing data will be replaced!</span>
-        </div>
-        @if (str($resourceStatus)->startsWith('running'))
-            {{-- Restore Command Configuration --}}
-            @if ($resourceDbType === 'standalone-postgresql')
-                @if ($dumpAll)
-                    <x-forms.textarea rows="6" readonly label="Custom Import Command"
-                        wire:model='restoreCommandText'></x-forms.textarea>
-                @else
-                    <x-forms.input label="Custom Import Command" wire:model='postgresqlRestoreCommand'></x-forms.input>
-                    <div class="flex flex-col gap-1 pt-1">
-                        <span class="text-xs">You can add "--clean" to drop objects before creating them, avoiding
-                            conflicts.</span>
-                        <span class="text-xs">You can add "--verbose" to log more things.</span>
-                    </div>
-                @endif
-                <div class="w-64 pt-2">
-                    <x-forms.checkbox label="Backup includes all databases" wire:model.live='dumpAll'></x-forms.checkbox>
-                </div>
-            @elseif ($resourceDbType === 'standalone-mysql')
-                @if ($dumpAll)
-                    <x-forms.textarea rows="14" readonly label="Custom Import Command"
-                        wire:model='restoreCommandText'></x-forms.textarea>
-                @else
-                    <x-forms.input label="Custom Import Command" wire:model='mysqlRestoreCommand'></x-forms.input>
-                @endif
-                <div class="w-64 pt-2">
-                    <x-forms.checkbox label="Backup includes all databases" wire:model.live='dumpAll'></x-forms.checkbox>
-                </div>
-            @elseif ($resourceDbType === 'standalone-mariadb')
-                @if ($dumpAll)
-                    <x-forms.textarea rows="14" readonly label="Custom Import Command"
-                        wire:model='restoreCommandText'></x-forms.textarea>
-                @else
-                    <x-forms.input label="Custom Import Command" wire:model='mariadbRestoreCommand'></x-forms.input>
-                @endif
-                <div class="w-64 pt-2">
-                    <x-forms.checkbox label="Backup includes all databases" wire:model.live='dumpAll'></x-forms.checkbox>
-                </div>
-            @endif
-
-            {{-- Restore Type Selection Boxes --}}
-            <h3 class="pt-6">Choose Restore Method</h3>
-            <div class="flex gap-4 pt-2">
-                <div @click="restoreType = 'file'"
-                     class="flex-1 p-6 border-2 rounded-sm cursor-pointer transition-all"
-                     :class="restoreType === 'file' ? 'border-warning bg-warning/10' : 'border-neutral-200 dark:border-neutral-800 hover:border-warning/50'">
-                    <div class="flex flex-col gap-2">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
-                        </svg>
-                        <h4 class="text-lg font-bold">Restore from File</h4>
-                        <p class="text-sm text-neutral-600 dark:text-neutral-400">Upload a backup file or specify a file path on the server</p>
-                    </div>
-                </div>
-
-                @if (count($availableS3Storages) > 0)
-                    <div @click="restoreType = 's3'"
-                         class="flex-1 p-6 border-2 rounded-sm cursor-pointer transition-all"
-                         :class="restoreType === 's3' ? 'border-warning bg-warning/10' : 'border-neutral-200 dark:border-neutral-800 hover:border-warning/50'">
-                        <div class="flex flex-col gap-2">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
-                            </svg>
-                            <h4 class="text-lg font-bold">Restore from S3</h4>
-                            <p class="text-sm text-neutral-600 dark:text-neutral-400">Download and restore a backup from S3 storage</p>
-                        </div>
-                    </div>
-                @endif
-            </div>
-
-            {{-- File Restore Section --}}
-            @can('update', $this->resource)
-                <div x-show="restoreType === 'file'" class="pt-6">
-                    <h3>Backup File</h3>
-                    <form class="flex gap-2 items-end pt-2">
-                        <x-forms.input label="Location of the backup file on the server" placeholder="e.g. /home/user/backup.sql.gz"
-                            wire:model='customLocation' x-model="$wire.customLocation"></x-forms.input>
-                        <x-forms.button class="w-full" wire:click='checkFile' x-bind:disabled="!$wire.customLocation">Check File</x-forms.button>
-                    </form>
-                    <div class="pt-2 text-center text-xl font-bold">
-                        Or
-                    </div>
-                    <form action="/upload/backup/{{ $resourceUuid }}" class="dropzone" id="my-dropzone" wire:ignore>
-                        @csrf
-                    </form>
-                    <div x-show="isUploading">
-                        <progress max="100" x-bind:value="progress" class="progress progress-warning"></progress>
-                    </div>
-
-                    <div x-show="filename && !error" class="pt-6">
-                        <h3>File Information</h3>
-                        <div class="pt-2">Location: <span x-text="filename ?? 'N/A'"></span><span x-show="filesize" x-text="' / ' + filesize"></span></div>
-                        <div class="pt-2">
-                            <x-modal-confirmation title="Restore Database from File?" buttonTitle="Restore from File"
-                                submitAction="runImport" isErrorButton>
-                                <x-slot:button-title>
-                                    Restore Database from File
-                                </x-slot:button-title>
-                                This will perform the following actions:
-                                <ul class="list-disc list-inside pt-2">
-                                    <li>Copy backup file to database container</li>
-                                    <li>Execute restore command</li>
-                                </ul>
-                                <div class="pt-2 font-bold text-error">WARNING: This will REPLACE all existing data!</div>
-                            </x-modal-confirmation>
-                        </div>
-                    </div>
-                </div>
-            @endcan
-
-            {{-- S3 Restore Section --}}
-            @if (count($availableS3Storages) > 0)
-                @can('update', $this->resource)
-                    <div x-show="restoreType === 's3'" class="pt-6">
-                        <h3>Restore from S3</h3>
-                        <div class="flex flex-col gap-2 pt-2">
-                            <x-forms.select label="S3 Storage" wire:model.live="s3StorageId">
-                                <option value="">Select S3 Storage</option>
-                                @foreach ($availableS3Storages as $storage)
-                                    <option value="{{ $storage['id'] }}">{{ $storage['name'] }}
-                                        @if ($storage['description'])
-                                            - {{ $storage['description'] }}
-                                        @endif
-                                    </option>
-                                @endforeach
-                            </x-forms.select>
-
-                            <x-forms.input label="S3 File Path (within bucket)"
-                                helper="Path to the backup file in your S3 bucket, e.g., /backups/database-2025-01-15.gz"
-                                placeholder="/backups/database-backup.gz" wire:model.blur='s3Path'
-                                wire:keydown.enter='checkS3File'></x-forms.input>
-
-                            <div class="flex gap-2">
-                                <x-forms.button class="w-full" wire:click='checkS3File' x-bind:disabled="!s3StorageId || !s3Path">
-                                    Check File
-                                </x-forms.button>
-                            </div>
-
-                            @if ($s3FileSize)
-                                <div class="pt-6">
-                                    <h3>File Information</h3>
-                                    <div class="pt-2">Location: {{ $s3Path }} {{ formatBytes($s3FileSize ?? 0) }}</div>
-                                    <div class="pt-2">
-                                        <x-modal-confirmation title="Restore Database from S3?" buttonTitle="Restore from S3"
-                                            submitAction="restoreFromS3" isErrorButton>
-                                            <x-slot:button-title>
-                                                Restore Database from S3
-                                            </x-slot:button-title>
-                                            This will perform the following actions:
-                                            <ul class="list-disc list-inside pt-2">
-                                                <li>Download backup from S3 storage</li>
-                                                <li>Copy file into database container</li>
-                                                <li>Execute restore command</li>
-                                            </ul>
-                                            <div class="pt-2 font-bold text-error">WARNING: This will REPLACE all existing data!</div>
-                                        </x-modal-confirmation>
-                                    </div>
-                                </div>
-                            @endif
-                        </div>
-                    </div>
-                @endcan
-            @endif
-
-            {{-- Slide-over for activity monitor (all restore operations) --}}
-            <x-slide-over @databaserestore.window="slideOverOpen = true" closeWithX fullScreen>
-                <x-slot:title>Database Restore Output</x-slot:title>
-                <x-slot:content>
-                    <div wire:ignore>
-                        <livewire:activity-monitor wire:key="database-restore-{{ $resourceUuid }}" header="Logs" fullHeight />
-                    </div>
-                </x-slot:content>
-            </x-slide-over>
-        @else
-            <div>Database must be running to restore a backup.</div>
-        @endif
+        <div>Database must be running to restore a backup.</div>
     @endif
-</div>
+</div>

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

@@ -5,6 +5,9 @@
             <x-forms.button type="submit" canGate="update" :canResource="$database">
                 Save
             </x-forms.button>
+            <x-modal-input title="Resource Details" buttonTitle="Details">
+                <livewire:project.shared.resource-details :resource="$database" />
+            </x-modal-input>
         </div>
         <div class="flex gap-2">
             <x-forms.input label="Name" id="name" canGate="update" :canResource="$database" />
@@ -38,59 +41,8 @@
                     helper="A comma separated list of ports you would like to map to the host system.<br><span class='inline-block font-bold dark:text-warning'>Example</span>3000:5432,3002:5433"
                     canGate="update" :canResource="$database" />
             </div>
-            <x-forms.input label="KeyDB URL (internal)"
-                helper="If you change the user/password/port, this could be different. This is with the default values."
-                type="password" readonly wire:model="dbUrl" canGate="update" :canResource="$database" />
-            @if ($dbUrlPublic)
-                <x-forms.input label="KeyDB URL (public)"
-                    helper="If you change the user/password/port, this could be different. This is with the default values."
-                    type="password" readonly wire:model="dbUrlPublic" canGate="update" :canResource="$database" />
-            @else
-                <x-forms.input label="KeyDB URL (public)"
-                    helper="If you change the user/password/port, this could be different. This is with the default values."
-                    readonly value="Starting the database will generate this." canGate="update" :canResource="$database" />
-            @endif
-        </div>
-        <div class="flex flex-col gap-2">
-            <div class="flex items-center justify-between py-2">
-                <div class="flex items-center justify-between w-full">
-                    <h3>SSL Configuration</h3>
-                    @if ($database->enable_ssl && $certificateValidUntil)
-                        <x-modal-confirmation title="Regenerate SSL Certificates"
-                            buttonTitle="Regenerate SSL Certificates" :actions="[
-                                'The SSL certificate of this database will be regenerated.',
-                                'You must restart the database after regenerating the certificate to start using the new certificate.',
-                            ]"
-                            submitAction="regenerateSslCertificate" :confirmWithText="false" :confirmWithPassword="false" />
-                    @endif
-                </div>
-            </div>
-            @if ($database->enable_ssl && $certificateValidUntil)
-                <span class="text-sm">Valid until:
-                    @if (now()->gt($certificateValidUntil))
-                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expired</span>
-                    @elseif(now()->addDays(30)->gt($certificateValidUntil))
-                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expiring
-                            soon</span>
-                    @else
-                        <span>{{ $certificateValidUntil->format('d.m.Y H:i:s') }}</span>
-                    @endif
-                </span>
-            @endif
-            <div class="flex flex-col gap-2">
-                <div class="w-64">
-                    @if (str($database->status)->contains('exited'))
-                        <x-forms.checkbox id="enable_ssl" label="Enable SSL" wire:model.live="enable_ssl"
-                            instantSave="instantSaveSSL" canGate="update" :canResource="$database" />
-                    @else
-                        <x-forms.checkbox id="enable_ssl" label="Enable SSL" wire:model.live="enable_ssl"
-                            instantSave="instantSaveSSL" disabled
-                            helper="Database should be stopped to change this settings." canGate="update"
-                            :canResource="$database" />
-                    @endif
-                </div>
-            </div>
         </div>
+        <livewire:project.database.keydb.status-info :database="$database" />
         <div>
             <div class="flex flex-col py-2 w-64">
                 <div class="flex items-center gap-2 pb-2">

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

@@ -5,6 +5,9 @@
             <x-forms.button type="submit" canGate="update" :canResource="$database">
                 Save
             </x-forms.button>
+            <x-modal-input title="Resource Details" buttonTitle="Details">
+                <livewire:project.shared.resource-details :resource="$database" />
+            </x-modal-input>
         </div>
         <div class="flex gap-2">
             <x-forms.input label="Name" id="name" canGate="update" :canResource="$database" />
@@ -61,59 +64,9 @@
                     helper="A comma separated list of ports you would like to map to the host system.<br><span class='inline-block font-bold dark:text-warning'>Example</span>3000:5432,3002:5433"
                     canGate="update" :canResource="$database" />
             </div>
-            <x-forms.input label="MariaDB URL (internal)"
-                helper="If you change the user/password/port, this could be different. This is with the default values."
-                type="password" readonly wire:model="db_url" canGate="update" :canResource="$database" />
-            @if ($db_url_public)
-                <x-forms.input label="MariaDB URL (public)"
-                    helper="If you change the user/password/port, this could be different. This is with the default values."
-                    type="password" readonly wire:model="db_url_public" canGate="update" :canResource="$database" />
-            @endif
         </div>
 
-        <div class="flex flex-col gap-2">
-            <div class="flex items-center justify-between py-2">
-                <div class="flex items-center justify-between w-full">
-                    <h3>SSL Configuration</h3>
-                    @if ($enableSsl && $certificateValidUntil)
-                        <x-modal-confirmation title="Regenerate SSL Certificates"
-                            buttonTitle="Regenerate SSL Certificates" :actions="[
-                                'The SSL certificate of this database will be regenerated.',
-                                'You must restart the database after regenerating the certificate to start using the new certificate.',
-                            ]"
-                            submitAction="regenerateSslCertificate" :confirmWithText="false" :confirmWithPassword="false" />
-                    @endif
-                </div>
-            </div>
-            @if ($enableSsl && $certificateValidUntil)
-                <span class="text-sm">Valid until:
-                    @if (now()->gt($certificateValidUntil))
-                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expired</span>
-                    @elseif(now()->addDays(30)->gt($certificateValidUntil))
-                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expiring
-                            soon</span>
-                    @else
-                        <span>{{ $certificateValidUntil->format('d.m.Y H:i:s') }}</span>
-                    @endif
-                </span>
-            @endif
-        </div>
-        <div class="flex flex-col gap-2">
-            <div class="flex flex-col gap-2">
-                <div class="w-64">
-                    @if (str($database->status)->contains('exited'))
-                        <x-forms.checkbox id="enableSsl" label="Enable SSL"
-                            wire:model.live="enableSsl" instantSave="instantSaveSSL" canGate="update"
-                            :canResource="$database" />
-                    @else
-                        <x-forms.checkbox id="enableSsl" label="Enable SSL"
-                            wire:model.live="enableSsl" instantSave="instantSaveSSL" disabled
-                            helper="Database should be stopped to change this settings." canGate="update"
-                            :canResource="$database" />
-                    @endif
-                </div>
-            </div>
-        </div>
+        <livewire:project.database.mariadb.status-info :database="$database" />
 
         <div>
             <div class="flex flex-col py-2 w-64">

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

@@ -5,6 +5,9 @@
             <x-forms.button type="submit" canGate="update" :canResource="$database">
                 Save
             </x-forms.button>
+            <x-modal-input title="Resource Details" buttonTitle="Details">
+                <livewire:project.shared.resource-details :resource="$database" />
+            </x-modal-input>
         </div>
         <div class="flex gap-2">
             <x-forms.input label="Name" id="name" canGate="update" :canResource="$database" />
@@ -50,85 +53,10 @@
                     helper="A comma separated list of ports you would like to map to the host system.<br><span class='inline-block font-bold dark:text-warning'>Example</span>3000:5432,3002:5433"
                     canGate="update" :canResource="$database" />
             </div>
-            <x-forms.input label="Mongo URL (internal)"
-                helper="If you change the user/password/port, this could be different. This is with the default values."
-                type="password" readonly wire:model="db_url" canGate="update" :canResource="$database" />
-            @if ($db_url_public)
-                <x-forms.input label="Mongo URL (public)"
-                    helper="If you change the user/password/port, this could be different. This is with the default values."
-                    type="password" readonly wire:model="db_url_public" canGate="update" :canResource="$database" />
-            @endif
         </div>
 
+        <livewire:project.database.mongodb.status-info :database="$database" />
         <div class="flex flex-col gap-2">
-            <div class="flex items-center justify-between py-2">
-                <div class="flex items-center justify-between w-full">
-                    <h3>SSL Configuration</h3>
-                    @if ($enableSsl)
-                        <x-modal-confirmation title="Regenerate SSL Certificates"
-                            buttonTitle="Regenerate SSL Certificates" :actions="[
-                                'The SSL certificate of this database will be regenerated.',
-                                'You must restart the database after regenerating the certificate to start using the new certificate.',
-                            ]"
-                            submitAction="regenerateSslCertificate" :confirmWithText="false" :confirmWithPassword="false" />
-                    @endif
-                </div>
-            </div>
-            @if ($enableSsl && $certificateValidUntil)
-                <span class="text-sm">Valid until:
-                    @if (now()->gt($certificateValidUntil))
-                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expired</span>
-                    @elseif(now()->addDays(30)->gt($certificateValidUntil))
-                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expiring
-                            soon</span>
-                    @else
-                        <span>{{ $certificateValidUntil->format('d.m.Y H:i:s') }}</span>
-                    @endif
-                </span>
-            @endif
-        </div>
-        <div class="flex flex-col gap-2">
-            <div class="flex flex-col gap-2">
-                <div class="w-64">
-                    @if (str($database->status)->contains('exited'))
-                        <x-forms.checkbox id="enableSsl" label="Enable SSL"
-                            wire:model.live="enableSsl" instantSave="instantSaveSSL" canGate="update"
-                            :canResource="$database" />
-                    @else
-                        <x-forms.checkbox id="enableSsl" label="Enable SSL"
-                            wire:model.live="enableSsl" instantSave="instantSaveSSL" disabled
-                            helper="Database should be stopped to change this settings." canGate="update"
-                            :canResource="$database" />
-                    @endif
-                </div>
-                @if ($enableSsl)
-                    <div class="mx-2">
-                        @if (str($database->status)->contains('exited'))
-                            <x-forms.select id="sslMode" label="SSL Mode" wire:model.live="sslMode"
-                                instantSave="instantSaveSSL"
-                                helper="Choose the SSL verification mode for MongoDB connections" canGate="update"
-                                :canResource="$database">
-                                <option value="allow" title="Allow insecure connections">allow (insecure)</option>
-                                <option value="prefer" title="Prefer secure connections">prefer (secure)</option>
-                                <option value="require" title="Require secure connections">require (secure)</option>
-                                <option value="verify-full" title="Verify full certificate">verify-full (secure)
-                                </option>
-                            </x-forms.select>
-                        @else
-                            <x-forms.select id="sslMode" label="SSL Mode" instantSave="instantSaveSSL"
-                                disabled helper="Database should be stopped to change this settings." canGate="update"
-                                :canResource="$database">
-                                <option value="allow" title="Allow insecure connections">allow (insecure)</option>
-                                <option value="prefer" title="Prefer secure connections">prefer (secure)</option>
-                                <option value="require" title="Require secure connections">require (secure)</option>
-                                <option value="verify-full" title="Verify full certificate">verify-full (secure)
-                                </option>
-                            </x-forms.select>
-                        @endif
-                    </div>
-                @endif
-            </div>
-
             <div>
                 <div class="flex flex-col py-2 w-64">
                     <div class="flex items-center gap-2 pb-2">

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

@@ -5,6 +5,9 @@
             <x-forms.button type="submit">
                 Save
             </x-forms.button>
+            <x-modal-input title="Resource Details" buttonTitle="Details">
+                <livewire:project.shared.resource-details :resource="$database" />
+            </x-modal-input>
         </div>
         <div class="flex gap-2">
             <x-forms.input label="Name" id="name" canGate="update" :canResource="$database" />
@@ -56,81 +59,9 @@
                 <x-forms.input placeholder="3000:5432" id="portsMappings" label="Ports Mappings"
                     helper="A comma separated list of ports you would like to map to the host system.<br><span class='inline-block font-bold dark:text-warning'>Example</span>3000:5432,3002:5433" canGate="update" :canResource="$database" />
             </div>
-            <x-forms.input label="MySQL URL (internal)"
-                helper="If you change the user/password/port, this could be different. This is with the default values."
-                type="password" readonly wire:model="db_url" />
-            @if ($db_url_public)
-                <x-forms.input label="MySQL URL (public)"
-                    helper="If you change the user/password/port, this could be different. This is with the default values."
-                    type="password" readonly wire:model="db_url_public" />
-            @endif
         </div>
 
-        <div class="flex flex-col gap-2">
-            <div class="flex items-center justify-between py-2">
-                <div class="flex items-center justify-between w-full">
-                    <h3>SSL Configuration</h3>
-                    @if ($enableSsl && $certificateValidUntil)
-                        <x-modal-confirmation title="Regenerate SSL Certificates"
-                            buttonTitle="Regenerate SSL Certificates" :actions="[
-                                'The SSL certificate of this database will be regenerated.',
-                                'You must restart the database after regenerating the certificate to start using the new certificate.',
-                            ]"
-                            submitAction="regenerateSslCertificate" :confirmWithText="false" :confirmWithPassword="false" />
-                    @endif
-                </div>
-            </div>
-            @if ($enableSsl && $certificateValidUntil)
-                <span class="text-sm">Valid until:
-                    @if (now()->gt($certificateValidUntil))
-                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expired</span>
-                    @elseif(now()->addDays(30)->gt($certificateValidUntil))
-                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expiring
-                            soon</span>
-                    @else
-                        <span>{{ $certificateValidUntil->format('d.m.Y H:i:s') }}</span>
-                    @endif
-                </span>
-            @endif
-        </div>
-        <div class="flex flex-col gap-2">
-            <div class="flex flex-col gap-2">
-                <div class="w-64">
-                    @if (str($database->status)->contains('exited'))
-                        <x-forms.checkbox id="enableSsl" label="Enable SSL"
-                            wire:model.live="enableSsl" instantSave="instantSaveSSL" canGate="update" :canResource="$database" />
-                    @else
-                        <x-forms.checkbox id="enableSsl" label="Enable SSL"
-                            wire:model.live="enableSsl" instantSave="instantSaveSSL" disabled
-                            helper="Database should be stopped to change this settings." />
-                    @endif
-                </div>
-                @if ($enableSsl)
-                    <div class="mx-2">
-                        @if (str($database->status)->contains('exited'))
-                            <x-forms.select id="sslMode" label="SSL Mode" wire:model.live="sslMode"
-                                instantSave="instantSaveSSL"
-                                helper="Choose the SSL verification mode for MySQL connections" canGate="update" :canResource="$database">
-                                <option value="PREFERRED" title="Prefer secure connections">Prefer (secure)</option>
-                                <option value="REQUIRED" title="Require secure connections">Require (secure)</option>
-                                <option value="VERIFY_CA" title="Verify CA certificate">Verify CA (secure)</option>
-                                <option value="VERIFY_IDENTITY" title="Verify full certificate">Verify Full (secure)
-                                </option>
-                            </x-forms.select>
-                        @else
-                            <x-forms.select id="sslMode" label="SSL Mode" instantSave="instantSaveSSL"
-                                disabled helper="Database should be stopped to change this settings.">
-                                <option value="PREFERRED" title="Prefer secure connections">Prefer (secure)</option>
-                                <option value="REQUIRED" title="Require secure connections">Require (secure)</option>
-                                <option value="VERIFY_CA" title="Verify CA certificate">Verify CA (secure)</option>
-                                <option value="VERIFY_IDENTITY" title="Verify full certificate">Verify Full (secure)
-                                </option>
-                            </x-forms.select>
-                        @endif
-                    </div>
-                @endif
-            </div>
-        </div>
+        <livewire:project.database.mysql.status-info :database="$database" />
 
         <div>
             <div class="flex flex-col py-2 w-64">

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

@@ -19,6 +19,9 @@
             <x-forms.button type="submit" canGate="update" :canResource="$database">
                 Save
             </x-forms.button>
+            <x-modal-input title="Resource Details" buttonTitle="Details">
+                <livewire:project.shared.resource-details :resource="$database" />
+            </x-modal-input>
         </div>
         <div class="flex flex-wrap gap-2 sm:flex-nowrap">
             <x-forms.input label="Name" id="name" canGate="update" :canResource="$database" />
@@ -68,114 +71,38 @@
                     helper="A comma separated list of ports you would like to map to the host system.<br><span class='inline-block font-bold dark:text-warning'>Example</span>3000:5432,3002:5433"
                     canGate="update" :canResource="$database" />
             </div>
-
-            <x-forms.input label="Postgres URL (internal)"
-                helper="If you change the user/password/port, this could be different. This is with the default values."
-                type="password" readonly wire:model="db_url" />
-            @if ($db_url_public)
-                <x-forms.input label="Postgres URL (public)"
-                    helper="If you change the user/password/port, this could be different. This is with the default values."
-                    type="password" readonly wire:model="db_url_public" />
-            @endif
         </div>
+        <livewire:project.database.postgresql.status-info :database="$database" />
         <div class="flex flex-col gap-2">
             <div class="flex items-center gap-2 py-2">
-                <h3>SSL Configuration</h3>
-                @if ($enableSsl && $certificateValidUntil)
-                    <x-modal-confirmation title="Regenerate SSL Certificates" buttonTitle="Regenerate SSL Certificates"
-                        :actions="[
-                            'The SSL certificate of this database will be regenerated.',
-                            'You must restart the database after regenerating the certificate to start using the new certificate.',
-                        ]" submitAction="regenerateSslCertificate" :confirmWithText="false"
-                        :confirmWithPassword="false" />
+                <h3>Proxy</h3>
+                <x-loading wire:loading wire:target="instantSave" />
+                @if (data_get($database, 'is_public'))
+                    <x-slide-over fullScreen>
+                        <x-slot:title>Proxy Logs</x-slot:title>
+                        <x-slot:content>
+                            <livewire:project.shared.get-logs :server="$server" :resource="$database"
+                                container="{{ data_get($database, 'uuid') }}-proxy" :collapsible="false" lazy />
+                        </x-slot:content>
+                        <x-forms.button disabled="{{ !data_get($database, 'is_public') }}"
+                            @click="slideOverOpen=true">Logs</x-forms.button>
+                    </x-slide-over>
                 @endif
             </div>
-            @if ($enableSsl && $certificateValidUntil)
-                <span class="text-sm">Valid until:
-                    @if (now()->gt($certificateValidUntil))
-                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expired</span>
-                    @elseif(now()->addDays(30)->gt($certificateValidUntil))
-                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expiring
-                            soon</span>
-                    @else
-                        <span>{{ $certificateValidUntil->format('d.m.Y H:i:s') }}</span>
-                    @endif
-                </span>
-            @endif
+            <div class="flex flex-col gap-2 w-64">
+                <x-forms.checkbox instantSave id="isPublic" label="Make it publicly available"
+                    canGate="update" :canResource="$database" />
+            </div>
+            <div class="flex flex-col gap-2">
+                <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>
         <div class="flex flex-col gap-2">
-            <div class="flex flex-col gap-2">
-                <div class="w-64" wire:key='enable_ssl'>
-                    @if ($database->isExited())
-                        <x-forms.checkbox id="enableSsl" label="Enable SSL" wire:model.live="enableSsl"
-                            instantSave="instantSaveSSL" canGate="update" :canResource="$database" />
-                    @else
-                        <x-forms.checkbox id="enableSsl" label="Enable SSL" wire:model.live="enableSsl"
-                            instantSave="instantSaveSSL" disabled
-                            helper="Database should be stopped to change this settings." />
-                    @endif
-                </div>
-                @if ($enableSsl)
-                    <div class="mx-2">
-                        @if ($database->isExited())
-                            <x-forms.select id="sslMode" label="SSL Mode" wire:model.live="sslMode"
-                                instantSave="instantSaveSSL"
-                                helper="Choose the SSL verification mode for PostgreSQL connections" canGate="update"
-                                :canResource="$database">
-                                <option value="allow" title="Allow insecure connections">allow (insecure)</option>
-                                <option value="prefer" title="Prefer secure connections">prefer (secure)</option>
-                                <option value="require" title="Require secure connections">require (secure)</option>
-                                <option value="verify-ca" title="Verify CA certificate">verify-ca (secure)</option>
-                                <option value="verify-full" title="Verify full certificate">verify-full (secure)
-                                </option>
-                            </x-forms.select>
-                        @else
-                            <x-forms.select id="sslMode" label="SSL Mode" instantSave="instantSaveSSL" disabled
-                                helper="Database should be stopped to change this settings.">
-                                <option value="allow" title="Allow insecure connections">allow (insecure)</option>
-                                <option value="prefer" title="Prefer secure connections">prefer (secure)</option>
-                                <option value="require" title="Require secure connections">require (secure)</option>
-                                <option value="verify-ca" title="Verify CA certificate">verify-ca (secure)</option>
-                                <option value="verify-full" title="Verify full certificate">verify-full (secure)
-                                </option>
-                            </x-forms.select>
-                        @endif
-                    </div>
-                @endif
-
-                <div class="flex flex-col gap-2">
-                    <div class="flex items-center gap-2 py-2">
-                        <h3>Proxy</h3>
-                        <x-loading wire:loading wire:target="instantSave" />
-                        @if (data_get($database, 'is_public'))
-                            <x-slide-over fullScreen>
-                                <x-slot:title>Proxy Logs</x-slot:title>
-                                <x-slot:content>
-                                    <livewire:project.shared.get-logs :server="$server" :resource="$database"
-                                        container="{{ data_get($database, 'uuid') }}-proxy" :collapsible="false" lazy />
-                                </x-slot:content>
-                                <x-forms.button disabled="{{ !data_get($database, 'is_public') }}"
-                                    @click="slideOverOpen=true">Logs</x-forms.button>
-                            </x-slide-over>
-                        @endif
-                    </div>
-                    <div class="flex flex-col gap-2 w-64">
-                        <x-forms.checkbox instantSave id="isPublic" label="Make it publicly available"
-                            canGate="update" :canResource="$database" />
-                    </div>
-                    <div class="flex flex-col gap-2">
-                        <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>
-
-                <div class="flex flex-col gap-2">
-                    <x-forms.textarea label="Custom PostgreSQL Configuration" rows="10" id="postgresConf"
-                        canGate="update" :canResource="$database" />
-                </div>
-            </div>
+            <x-forms.textarea label="Custom PostgreSQL Configuration" rows="10" id="postgresConf"
+                canGate="update" :canResource="$database" />
         </div>
     </form>
 

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

@@ -5,6 +5,9 @@
             <x-forms.button type="submit" canGate="update" :canResource="$database">
                 Save
             </x-forms.button>
+            <x-modal-input title="Resource Details" buttonTitle="Details">
+                <livewire:project.shared.resource-details :resource="$database" />
+            </x-modal-input>
         </div>
         <div class="flex gap-2">
             <x-forms.input label="Name" id="name" canGate="update" :canResource="$database" />
@@ -60,56 +63,8 @@
                     helper="A comma separated list of ports you would like to map to the host system.<br><span class='inline-block font-bold dark:text-warning'>Example</span>3000:5432,3002:5433"
                     canGate="update" :canResource="$database" />
             </div>
-            <x-forms.input label="Redis URL (internal)"
-                helper="If you change the user/password/port, this could be different. This is with the default values."
-                type="password" readonly wire:model="dbUrl" canGate="update" :canResource="$database" />
-            @if ($dbUrlPublic)
-                <x-forms.input label="Redis URL (public)"
-                    helper="If you change the user/password/port, this could be different. This is with the default values."
-                    type="password" readonly wire:model="dbUrlPublic" canGate="update" :canResource="$database" />
-            @endif
-        </div>
-        <div class="flex flex-col gap-2">
-            <div class="flex items-center justify-between py-2">
-                <div class="flex items-center justify-between w-full">
-                    <h3>SSL Configuration</h3>
-                    @if ($enableSsl && $certificateValidUntil)
-                        <x-modal-confirmation title="Regenerate SSL Certificates"
-                            buttonTitle="Regenerate SSL Certificates" :actions="[
-                                'The SSL certificate of this database will be regenerated.',
-                                'You must restart the database after regenerating the certificate to start using the new certificate.',
-                            ]"
-                            submitAction="regenerateSslCertificate" :confirmWithText="false" :confirmWithPassword="false" />
-                    @endif
-                </div>
-            </div>
-            @if ($enableSsl && $certificateValidUntil)
-                <span class="text-sm">Valid until:
-                    @if (now()->gt($certificateValidUntil))
-                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expired</span>
-                    @elseif(now()->addDays(30)->gt($certificateValidUntil))
-                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expiring
-                            soon</span>
-                    @else
-                        <span>{{ $certificateValidUntil->format('d.m.Y H:i:s') }}</span>
-                    @endif
-                </span>
-            @endif
-            <div class="flex flex-col gap-2">
-                <div class="w-64" wire:key='enable_ssl'>
-                    @if (str($database->status)->contains('exited'))
-                        <x-forms.checkbox id="enableSsl" label="Enable SSL"
-                            wire:model.live="enableSsl" instantSave="instantSaveSSL" canGate="update"
-                            :canResource="$database" />
-                    @else
-                        <x-forms.checkbox id="enableSsl" label="Enable SSL"
-                            wire:model.live="enableSsl" instantSave="instantSaveSSL" disabled
-                            helper="Database should be stopped to change this settings." canGate="update"
-                            :canResource="$database" />
-                    @endif
-                </div>
-            </div>
         </div>
+        <livewire:project.database.redis.status-info :database="$database" />
         <div>
             <div class="flex flex-col py-2 w-64">
                 <div class="flex items-center gap-2 pb-2">

resources/views/livewire/project/database/status-info.blade.php

@@ -0,0 +1,6 @@
+<div>
+    <x-database-status-info :database="$database" :label="$label" :db-url="$dbUrl" :db-url-public="$dbUrlPublic"
+        :enable-ssl="$enableSsl" :ssl-mode="$sslMode" :certificate-valid-until="$certificateValidUntil"
+        :supports-ssl="$supportsSsl" :ssl-mode-options="$sslModeOptions" :ssl-mode-helper="$sslModeHelper"
+        :show-public-url-placeholder="$showPublicUrlPlaceholder" :is-exited="$isExited" />
+</div>

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

@@ -43,134 +43,12 @@
                     @endif
 
                     @foreach ($applications as $application)
-                        <div @class([
-                            'border-l border-dashed border-red-500' => str(
-                                $application->status)->contains(['exited']),
-                            'border-l border-dashed border-success' => str(
-                                $application->status)->contains(['running']),
-                            'border-l border-dashed border-warning' => str(
-                                $application->status)->contains(['starting']),
-                            'flex gap-2 box-without-bg-without-border dark:bg-coolgray-100 bg-white dark:hover:text-neutral-300 group',
-                        ])>
-                            <div class="flex flex-row w-full">
-                                <div class="flex flex-col flex-1">
-                                    <div class="pb-2">
-                                        @if ($application->human_name)
-                                            {{ Str::headline($application->human_name) }}
-                                        @else
-                                            {{ Str::headline($application->name) }}
-                                        @endif
-                                        <span class="text-xs">({{ $application->image }})</span>
-                                    </div>
-                                    @if ($application->configuration_required)
-                                        <span class="text-xs text-error">(configuration required)</span>
-                                    @endif
-                                    @if ($application->description)
-                                        <span class="text-xs">{{ Str::limit($application->description, 60) }}</span>
-                                    @endif
-                                    @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">
-                                                    <x-slot:content>
-                                                        <span class="cursor-pointer">
-                                                            <svg xmlns="http://www.w3.org/2000/svg"
-                                                                class="w-4 h-4 dark:text-warning text-coollabs"
-                                                                viewBox="0 0 24 24">
-                                                                <g fill="none" stroke="currentColor"
-                                                                    stroke-linecap="round" stroke-linejoin="round"
-                                                                    stroke-width="2">
-                                                                    <path
-                                                                        d="m12 15l8.385-8.415a2.1 2.1 0 0 0-2.97-2.97L9 12v3h3zm4-10l3 3" />
-                                                                    <path d="M9 7.07A7 7 0 0 0 10 21a7 7 0 0 0 6.929-6" />
-                                                                </g>
-                                                            </svg>
-
-                                                        </span>
-                                                    </x-slot:content>
-                                                    <livewire:project.service.edit-domain
-                                                        applicationId="{{ $application->id }}"
-                                                        wire:key="edit-domain-{{ $application->id }}" />
-                                                </x-modal-input>
-                                            @endcan
-                                        </span>
-                                    @endif
-                                    <div class="pt-2 text-xs">{{ formatContainerStatus($application->status) }}</div>
-                                </div>
-                                <div class="flex items-center px-4">
-                                    <a class="mx-4 text-xs font-bold hover:underline" {{ wireNavigate() }}
-                                        href="{{ route('project.service.index', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'service_uuid' => $service->uuid, 'stack_service_uuid' => $application->uuid]) }}">
-                                        Settings
-                                    </a>
-                                    @if (str($application->status)->contains('running'))
-                                        @can('update', $service)
-                                            <x-modal-confirmation title="Confirm Service Application Restart?"
-                                                buttonTitle="Restart"
-                                                submitAction="restartApplication({{ $application->id }})" :actions="[
-                                                    'The selected service application will be unavailable during the restart.',
-                                                    'If the service application is currently in use data could be lost.',
-                                                ]"
-                                                :confirmWithText="false" :confirmWithPassword="false"
-                                                step2ButtonText="Restart Service Container" />
-                                        @endcan
-                                    @endif
-                                </div>
-                            </div>
-                        </div>
+                        <livewire:project.service.resource-card :service="$service" :resource="$application"
+                            :parameters="$parameters" wire:key="service-application-card-{{ $application->id }}" />
                     @endforeach
                     @foreach ($databases as $database)
-                        <div @class([
-                            'border-l border-dashed border-red-500' => str($database->status)->contains(
-                                ['exited']),
-                            'border-l border-dashed border-success' => str($database->status)->contains(
-                                ['running']),
-                            'border-l border-dashed border-warning' => str($database->status)->contains(
-                                ['restarting']),
-                            'flex gap-2 box-without-bg-without-border dark:bg-coolgray-100 bg-white dark:hover:text-neutral-300 group',
-                        ])>
-                            <div class="flex flex-row w-full">
-                                <div class="flex flex-col flex-1">
-                                    <div class="pb-2">
-                                        @if ($database->human_name)
-                                            {{ Str::headline($database->human_name) }}
-                                        @else
-                                            {{ Str::headline($database->name) }}
-                                        @endif
-                                        <span class="text-xs">({{ $database->image }})</span>
-                                    </div>
-                                    @if ($database->configuration_required)
-                                        <span class="text-xs text-error">(configuration required)</span>
-                                    @endif
-                                    @if ($database->description)
-                                        <span class="text-xs">{{ Str::limit($database->description, 60) }}</span>
-                                    @endif
-                                    <div class="text-xs">{{ formatContainerStatus($database->status) }}</div>
-                                </div>
-                                <div class="flex items-center px-4">
-                                    @if ($database->isBackupSolutionAvailable() || $database->is_migrated)
-                                        <a class="mx-4 text-xs font-bold hover:underline" {{ wireNavigate() }}
-                                            href="{{ route('project.service.database.backups', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'service_uuid' => $service->uuid, 'stack_service_uuid' => $database->uuid]) }}">
-                                            Backups
-                                        </a>
-                                    @endif
-                                    <a class="mx-4 text-xs font-bold hover:underline" {{ wireNavigate() }}
-                                        href="{{ route('project.service.index', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'service_uuid' => $service->uuid, 'stack_service_uuid' => $database->uuid]) }}">
-                                        Settings
-                                    </a>
-                                    @if (str($database->status)->contains('running'))
-                                        @can('update', $service)
-                                            <x-modal-confirmation title="Confirm Service Database Restart?"
-                                                buttonTitle="Restart" submitAction="restartDatabase({{ $database->id }})"
-                                                :actions="[
-                                                    'This service database will be unavailable during the restart.',
-                                                    'If the service database is currently in use data could be lost.',
-                                                ]" :confirmWithText="false" :confirmWithPassword="false"
-                                                step2ButtonText="Restart Database" />
-                                        @endcan
-                                    @endif
-                                </div>
-                            </div>
-                        </div>
+                        <livewire:project.service.resource-card :service="$service" :resource="$database"
+                            :parameters="$parameters" wire:key="service-database-card-{{ $database->id }}" />
                     @endforeach
                 </div>
             @elseif ($currentRoute === 'project.service.environment-variables')

resources/views/livewire/project/service/resource-card.blade.php

@@ -0,0 +1,77 @@
+<div @class([
+    'border-l border-dashed border-red-500' => str($resource->status)->contains(['exited']),
+    'border-l border-dashed border-success' => str($resource->status)->contains(['running']),
+    'border-l border-dashed border-warning' => str($resource->status)->contains(['starting', 'restarting']),
+    'flex gap-2 box-without-bg-without-border dark:bg-coolgray-100 bg-white dark:hover:text-neutral-300 group',
+])>
+    <div class="flex flex-row w-full">
+        <div class="flex flex-col flex-1">
+            <div class="pb-2">
+                @if ($resource->human_name)
+                    {{ Str::headline($resource->human_name) }}
+                @else
+                    {{ Str::headline($resource->name) }}
+                @endif
+                <span class="text-xs">({{ $resource->image }})</span>
+            </div>
+            @if ($resource->configuration_required)
+                <span class="text-xs text-error">(configuration required)</span>
+            @endif
+            @if ($resource->description)
+                <span class="text-xs">{{ Str::limit($resource->description, 60) }}</span>
+            @endif
+            @if ($isApplication && $resource->fqdn)
+                <span class="flex gap-1 text-xs">{{ Str::limit($resource->fqdn, 60) }}
+                    @can('update', $service)
+                        <x-modal-input title="Edit Domains" :closeOutside="false">
+                            <x-slot:content>
+                                <span class="cursor-pointer">
+                                    <svg xmlns="http://www.w3.org/2000/svg"
+                                        class="w-4 h-4 dark:text-warning text-coollabs"
+                                        viewBox="0 0 24 24">
+                                        <g fill="none" stroke="currentColor" stroke-linecap="round"
+                                            stroke-linejoin="round" stroke-width="2">
+                                            <path d="m12 15l8.385-8.415a2.1 2.1 0 0 0-2.97-2.97L9 12v3h3zm4-10l3 3" />
+                                            <path d="M9 7.07A7 7 0 0 0 10 21a7 7 0 0 0 6.929-6" />
+                                        </g>
+                                    </svg>
+                                </span>
+                            </x-slot:content>
+                            <livewire:project.service.edit-domain applicationId="{{ $resource->id }}"
+                                wire:key="edit-domain-{{ $resource->id }}" />
+                        </x-modal-input>
+                    @endcan
+                </span>
+            @endif
+            <div @class(['pt-2' => $isApplication, 'text-xs'])>{{ formatContainerStatus($resource->status) }}</div>
+        </div>
+        <div class="flex items-center px-4">
+            @if ($isDatabase && ($resource->isBackupSolutionAvailable() || $resource->is_migrated))
+                <a class="mx-4 text-xs font-bold hover:underline" {{ wireNavigate() }}
+                    href="{{ route('project.service.database.backups', [...$parameters, 'stack_service_uuid' => $resource->uuid]) }}">
+                    Backups
+                </a>
+            @endif
+            <a class="mx-4 text-xs font-bold hover:underline" {{ wireNavigate() }}
+                href="{{ route('project.service.index', [...$parameters, 'stack_service_uuid' => $resource->uuid]) }}">
+                Settings
+            </a>
+            @if (str($resource->status)->contains('running'))
+                @can('update', $service)
+                    <x-modal-confirmation :title="$isApplication ? 'Confirm Service Application Restart?' : 'Confirm Service Database Restart?'"
+                        buttonTitle="Restart" submitAction="restart" :actions="$isApplication
+                            ? [
+                                'The selected service application will be unavailable during the restart.',
+                                'If the service application is currently in use data could be lost.',
+                            ]
+                            : [
+                                'This service database will be unavailable during the restart.',
+                                'If the service database is currently in use data could be lost.',
+                            ]"
+                        :confirmWithText="false" :confirmWithPassword="false"
+                        :step2ButtonText="$isApplication ? 'Restart Service Container' : 'Restart Database'" />
+                @endcan
+            @endif
+        </div>
+    </div>
+</div>

resources/views/livewire/project/service/stack-form.blade.php

@@ -12,6 +12,9 @@
                     <livewire:project.service.edit-compose serviceId="{{ $service->id }}" />
                 </x-modal-input>
             @endcan
+            <x-modal-input title="Resource Details" buttonTitle="Details">
+                <livewire:project.shared.resource-details :resource="$service" />
+            </x-modal-input>
         </div>
         <div>Configuration</div>
     </div>

resources/views/livewire/project/shared/configuration-checker.blade.php

@@ -1,6 +1,6 @@
 <div>
     @if ($isConfigurationChanged && !is_null($resource->config_hash) && !$resource->isExited())
-        <div x-data="{ configurationDiffModalOpen: false }">
+        <div x-data="{ configurationDiffModalOpen: false, expandedRows: {} }">
             <x-popup-small>
                 <x-slot:title>
                     The latest configuration has not been applied

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

@@ -274,10 +274,13 @@
                     <div>({{ $pull_request }})</div>
                 @endif
                 @if ($streamLogs)
-                    <x-loading wire:poll.2000ms='getLogs(true)' />
+                    <x-loading />
                 @endif
             </div>
         @endif
+        @if ($streamLogs)
+            <div class="sr-only" wire:poll.2000ms="getLogs(true)" aria-hidden="true"></div>
+        @endif
         <div x-show="expanded" {{ $collapsible ? 'x-collapse' : '' }}
             :class="fullscreen ? 'fullscreen flex flex-col !overflow-visible' : 'relative w-full {{ $collapsible ? 'py-4' : '' }} mx-auto'"
             :style="fullscreen ? 'max-height: none !important; height: 100% !important;' : ''">
@@ -520,20 +523,19 @@
                                     // Parse timestamp from log line (ISO 8601 format: 2025-12-04T11:48:39.136764033Z)
                                     $timestamp = '';
                                     $logContent = $line;
-                                    if (preg_match('/^(\d{4})-(\d{2})-(\d{2})T(\d{2}:\d{2}:\d{2})(?:\.(\d+))?Z?\s(.*)$/', $line, $matches)) {
-                                        $year = $matches[1];
-                                        $month = $matches[2];
-                                        $day = $matches[3];
-                                        $time = $matches[4];
-                                        $microseconds = isset($matches[5]) ? substr($matches[5], 0, 6) : '000000';
-                                        $logContent = $matches[6];
+                                    if (preg_match('/^(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2})(?:\.(\d+))?Z?\s(.*)$/', $line, $matches)) {
+                                        $microseconds = isset($matches[2]) ? substr($matches[2], 0, 6) : '000000';
+                                        $logContent = $matches[3];
 
-                                        // Convert month number to abbreviated name
-                                        $monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-                                        $monthName = $monthNames[(int)$month - 1] ?? $month;
-
-                                        // Format for display: 2025-Dec-04 09:44:58
-                                        $timestamp = "{$year}-{$monthName}-{$day} {$time}";
+                                        // Convert UTC Docker timestamp to server timezone for display
+                                        $carbonTs = \Carbon\Carbon::parse($matches[1], 'UTC');
+                                        $serverTz = getServerTimezone($server);
+                                        try {
+                                            $carbonTs->setTimezone($serverTz);
+                                        } catch (\Exception) {
+                                            // keep UTC
+                                        }
+                                        $timestamp = $carbonTs->format('Y-M-d H:i:s');
                                         // Include microseconds in key for uniqueness
                                         $lineKey = "{$timestamp}.{$microseconds}";
                                     }

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

@@ -1,6 +1,6 @@
 <form wire:submit='submit' class="flex flex-col">
     <div class="flex items-center gap-2">
-        <h2>Healthchecks</h2>
+        <h2>Healthcheck</h2>
         <x-forms.button canGate="update" :canResource="$resource" type="submit">Save</x-forms.button>
         @if (!$healthCheckEnabled)
             <x-modal-confirmation title="Confirm Healthcheck Enable?" buttonTitle="Enable Healthcheck"

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

@@ -5,13 +5,19 @@
     <div class="pb-4">Basic metrics for your application container.</div>
     <div>
         @if ($resource->getMorphClass() === 'App\Models\Application' && $resource->build_pack === 'dockercompose')
-            <div class="alert alert-warning">Metrics are not available for Docker Compose applications yet!</div>
+            <x-callout type="warning" title="Not Available">
+                Metrics are not available for Docker Compose applications yet!
+            </x-callout>
         @elseif(!$resource->destination->server->isMetricsEnabled())
-            <div class="alert alert-warning pb-1">Metrics are only available for servers with Sentinel & Metrics enabled!</div>
-            <div>Go to <a class="underline dark:text-white" href="{{ route('server.show', $resource->destination->server->uuid) }}/sentinel" {{ wireNavigate() }}>Server settings</a> to enable it.</div>
+            <x-callout type="info" title="Metrics Not Enabled">
+                Metrics are only available for servers with Sentinel & Metrics enabled.
+                Go to <a class="underline font-semibold" href="{{ route('server.metrics', ['server_uuid' => $resource->destination->server->uuid]) }}" {{ wireNavigate() }}>Server Metrics</a> to enable it.
+            </x-callout>
         @else
             @if (!str($resource->status)->contains('running'))
-                <div class="alert alert-warning">Metrics are only available when the application container is running!</div>
+                <x-callout type="warning" title="Container Not Running">
+                    Metrics are only available when the application container is running!
+                </x-callout>
             @else
                 <div>
                 <x-forms.select label="Interval" wire:change="setInterval" id="interval">

resources/views/livewire/project/shared/resource-details.blade.php

@@ -0,0 +1,57 @@
+<div class="w-full max-h-[70vh] overflow-y-auto pr-1 -mt-4">
+    <div class="pb-4 text-sm dark:text-neutral-400">Identifiers for this resource. Read-only</div>
+
+    <div class="flex flex-col gap-6">
+        <div>
+            <h3>Resource</h3>
+            <div class="pt-2 grid grid-cols-1 gap-3 md:grid-cols-2">
+                <x-forms.copy-button label="Name" :text="$resource->name ?? ''" />
+                <x-forms.copy-button label="UUID" :text="$resource->uuid ?? ''" />
+            </div>
+        </div>
+
+        @if ($environment_uuid)
+            <div>
+                <h3>Environment</h3>
+                <div class="pt-2 grid grid-cols-1 gap-3 md:grid-cols-2">
+                    <x-forms.copy-button label="Name" :text="$environment_name ?? ''" />
+                    <x-forms.copy-button label="UUID" :text="$environment_uuid" />
+                </div>
+            </div>
+        @endif
+
+        @if ($project_uuid)
+            <div>
+                <h3>Project</h3>
+                <div class="pt-2 grid grid-cols-1 gap-3 md:grid-cols-2">
+                    <x-forms.copy-button label="Name" :text="$project_name ?? ''" />
+                    <x-forms.copy-button label="UUID" :text="$project_uuid" />
+                </div>
+            </div>
+        @endif
+
+        @if ($server_uuid)
+            <div>
+                <h3>Server</h3>
+                <div class="pt-2 grid grid-cols-1 gap-3 md:grid-cols-2">
+                    <x-forms.copy-button label="Name" :text="$server_name ?? ''" />
+                    <x-forms.copy-button label="UUID" :text="$server_uuid" />
+                </div>
+            </div>
+        @endif
+
+        @if (! empty($stack_applications) || ! empty($stack_databases))
+            <div>
+                <h3>Stack Sub-Resources</h3>
+                <div class="pt-2 grid grid-cols-1 gap-3 md:grid-cols-2">
+                    @foreach ($stack_applications as $item)
+                        <x-forms.copy-button :label="'Application — ' . $item['name']" :text="$item['uuid']" />
+                    @endforeach
+                    @foreach ($stack_databases as $item)
+                        <x-forms.copy-button :label="'Database — ' . $item['name']" :text="$item['uuid']" />
+                    @endforeach
+                </div>
+            </div>
+        @endif
+    </div>
+</div>

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

@@ -1,4 +1,7 @@
 <div id="terminal-container" x-data="terminalData()">
+    @if ($isTerminalConnected)
+        <div class="hidden" aria-hidden="true" wire:poll.keep-alive.30s="keepTerminalPageAlive"></div>
+    @endif
     @if (!$hasShell)
         <div class="flex pt-4 items-center justify-center w-full py-4 mx-auto">
             <div class="p-4 w-full rounded-sm border dark:bg-coolgray-100 dark:border-coolgray-300">
@@ -18,10 +21,37 @@
         </div>
     @endif
     <div x-ref="terminalWrapper"
-        :class="fullscreen ? 'fullscreen !bg-black' : 'relative w-full h-full py-4 mx-auto max-h-[510px]'">
+        :class="fullscreen ? 'fixed inset-0 z-[9999] m-0 h-[100dvh] w-screen max-w-none overflow-hidden rounded-none !bg-black p-0' : 'relative w-full h-full py-4 mx-auto max-h-[510px]'">
         <!-- Terminal container -->
+        <div x-show="terminalActive" x-cloak class="mb-2 flex justify-start">
+            <div class="inline-flex rounded-sm border px-2 py-1 text-xs font-medium"
+                :class="terminalSessionTimerClass()" x-text="terminalSessionRemainingLabel()">
+            </div>
+        </div>
         <div id="terminal" wire:ignore
-            :class="fullscreen ? 'px-2 py-1 h-full bg-black' : 'px-2 py-1 rounded-sm bg-black'" x-show="terminalActive">
+            :class="fullscreen ? (mobileToolbarCollapsed ? 'h-[calc(100dvh-3.5rem)] mb-14 px-2 py-1 bg-black' : 'h-[calc(100dvh-6rem)] mb-[6rem] px-2 py-1 bg-black') : 'h-[510px] max-h-[calc(100dvh-10rem)] overflow-hidden px-2 py-1 rounded-sm bg-black'"
+            x-show="terminalActive">
+        </div>
+        <div x-show="terminalActive" x-cloak
+            :class="fullscreen ? 'absolute inset-x-0 bottom-0 z-[9999] px-2 pb-2' : 'relative mt-2'"
+            class="sm:hidden" data-terminal-mobile-toolbar>
+            <div class="mx-auto max-w-3xl rounded-lg border border-white/10 bg-black/90 p-1.5 text-white shadow-lg backdrop-blur">
+                <div class="flex items-center justify-between gap-2">
+                    <span class="px-2 text-[11px] font-medium uppercase tracking-wide text-neutral-400">Terminal keys</span>
+                    <button type="button" class="rounded px-2 py-1 text-xs text-neutral-300 hover:bg-white/10 hover:text-white"
+                        x-on:click="mobileToolbarCollapsed = !mobileToolbarCollapsed; $nextTick(() => resizeTerminal())"
+                        x-text="mobileToolbarCollapsed ? 'Show' : 'Hide'"
+                        aria-label="Toggle mobile terminal toolbar"></button>
+                </div>
+                <div x-show="!mobileToolbarCollapsed" class="mt-1 grid grid-cols-6 gap-1">
+                    <button type="button" class="terminal-mobile-key" x-on:click="sendTerminalControl('arrowUp')" aria-label="Previous command">↑</button>
+                    <button type="button" class="terminal-mobile-key" x-on:click="sendTerminalControl('arrowDown')" aria-label="Next command">↓</button>
+                    <button type="button" class="terminal-mobile-key" x-on:click="sendTerminalControl('arrowLeft')" aria-label="Move cursor left">←</button>
+                    <button type="button" class="terminal-mobile-key" x-on:click="sendTerminalControl('arrowRight')" aria-label="Move cursor right">→</button>
+                    <button type="button" class="terminal-mobile-key" x-on:click="sendTerminalControl('tab')">Tab</button>
+                    <button type="button" class="terminal-mobile-key" x-on:click="sendTerminalControl('escape')">Esc</button>
+                </div>
+            </div>
         </div>
         <button title="Minimize" x-show="fullscreen" class="fixed bg-black/40 top-4 right-6 text-white"
             x-on:click="makeFullscreen"><svg class="w-5 h-5 text-gray-500 hover:text-white bg-black/80"

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

@@ -2,11 +2,11 @@
     <div class="flex items-center gap-2">
         <h2>Webhooks</h2>
         <x-helper
-            helper="For more details goto our <a class='underline dark:text-white' href='https://coolify.io/docs/api-reference/api/operations/deploy-by-tag-or-uuid' target='_blank'>docs</a>." />
+            helper="For more details goto our <a class='underline dark:text-white' href='https://coolify.io/docs/api-reference/authorization' target='_blank'>docs</a>." />
     </div>
     <div>
         <x-forms.input readonly
-            helper="See details in our <a target='_blank' class='underline dark:text-white' href='https://coolify.io/docs/api-reference/api/operations/deploy-by-tag-or-uuid'>documentation</a>."
+            helper="See details in our <a target='_blank' class='underline dark:text-white' href='https://coolify.io/docs/api-reference/authorization'>documentation</a>."
             label="Deploy Webhook (auth required)" id="deploywebhook"></x-forms.input>
     </div>
     @if ($resource->type() === 'application')

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

@@ -6,7 +6,18 @@
     <div class="flex flex-col h-full gap-8 sm:flex-row">
         <x-server.sidebar :server="$server" activeMenu="metrics" />
         <div class="w-full">
-            <h2>Metrics</h2>
+            <div class="flex items-center gap-2">
+                <h2>Metrics</h2>
+                @if ($server->isMetricsEnabled())
+                    <x-forms.button canGate="update" :canResource="$server" wire:click='toggleMetrics'>
+                        Disable Metrics
+                    </x-forms.button>
+                @elseif ($server->isSentinelEnabled())
+                    <x-forms.button canGate="update" :canResource="$server" isHighlighted wire:click='toggleMetrics'>
+                        Enable Metrics
+                    </x-forms.button>
+                @endif
+            </div>
             <div class="pb-4">Basic metrics for your server.</div>
             @if ($server->isMetricsEnabled())
                 <div @if ($poll) wire:poll.5000ms='pollData' @endif x-init="$wire.loadData()">
@@ -288,8 +299,16 @@
                     </div>
                 </div>
             @else
-                <div>Metrics are disabled for this server. Enable them in <a class="underline dark:text-white"
-                        href="{{ route('server.show', ['server_uuid' => $server->uuid]) }}/sentinel" {{ wireNavigate() }}>Sentinel</a> settings.</div>
+                @if ($server->isSentinelEnabled())
+                    <x-callout type="info" title="Metrics Disabled">
+                        Metrics are disabled for this server. Click "Enable Metrics" above to start collecting metrics.
+                    </x-callout>
+                @else
+                    <x-callout type="info" title="Sentinel Required">
+                        Metrics require Sentinel to be enabled.
+                        Please <a class="underline font-semibold" href="{{ route('server.sentinel', ['server_uuid' => $server->uuid]) }}" {{ wireNavigate() }}>enable Sentinel</a> first.
+                    </x-callout>
+                @endif
             @endif
         </div>
     </div>

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

@@ -29,6 +29,9 @@
                             <x-forms.button>{{ data_get($docker, 'network') }} </x-forms.button>
                         </a>
                     @endforeach
+                    @if ($server->standaloneDockers->isEmpty() && $server->swarmDockers->isEmpty())
+                        <div class="text-sm text-neutral-500">No destinations configured for this server yet.</div>
+                    @endif
                 </div>
                 @if ($networks->count() > 0)
                     <div class="pt-2">

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

@@ -58,6 +58,17 @@
                 </div>
             </div>
         @endif
+        @if ($server->isSentinelEnabled())
+            <div class="flex">
+                <div class="flex items-center">
+                    @if ($server->isSentinelLive())
+                        <x-status.running status="Sentinel In Sync" noLoading />
+                    @else
+                        <x-status.stopped status="Sentinel Out of Sync" noLoading />
+                    @endif
+                </div>
+            </div>
+        @endif
     </div>
     <div class="subtitle">{{ data_get($server, 'name') }}</div>
     <div class="navbar-main">
@@ -70,7 +81,7 @@
             </a>
 
             @if (!$server->isSwarmWorker() && !$server->settings->is_build_server)
-                        <a class="{{ request()->routeIs('server.proxy') ? 'dark:text-white' : '' }} flex items-center gap-1" href="{{ route('server.proxy', [
+                        <a class="{{ request()->routeIs('server.proxy') || request()->routeIs('server.proxy.*') ? 'dark:text-white' : '' }} flex items-center gap-1" href="{{ route('server.proxy', [
                     'server_uuid' => data_get($server, 'uuid'),
                 ]) }}" {{ wireNavigate() }}>
                             Proxy
@@ -82,6 +93,19 @@
                             @endif
                         </a>
             @endif
+            @if ($server->isFunctional() && !$server->isSwarm() && !$server->settings->is_build_server)
+                        <a class="{{ request()->routeIs('server.sentinel') || request()->routeIs('server.sentinel.*') ? 'dark:text-white' : '' }} flex items-center gap-1" href="{{ route('server.sentinel', [
+                    'server_uuid' => data_get($server, 'uuid'),
+                ]) }}" {{ wireNavigate() }}>
+                            Sentinel
+                            @if ($server->isSentinelEnabled() && !$server->isSentinelLive())
+                                <svg class="w-4 h-4 text-warning" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
+                                    <path fill="currentColor"
+                                        d="M236.8 188.09L149.35 36.22a24.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 .02-23.72m-13.87 15.71a8.5 8.5 0 0 1-7.48 4.2H40.55a8.5 8.5 0 0 1-7.48-4.2a7.59 7.59 0 0 1 0-7.72l87.45-151.87a8.75 8.75 0 0 1 15 0l87.45 151.87a7.59 7.59 0 0 1-.04 7.72M120 144v-40a8 8 0 0 1 16 0v40a8 8 0 0 1-16 0m20 36a12 12 0 1 1-12-12a12 12 0 0 1 12 12" />
+                                </svg>
+                            @endif
+                        </a>
+            @endif
             <a class="{{ request()->routeIs('server.resources') ? 'dark:text-white' : '' }}" href="{{ route('server.resources', [
     'server_uuid' => data_get($server, 'uuid'),
 ]) }}" {{ wireNavigate() }}>

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

@@ -1,111 +1,73 @@
 <div>
-    <x-slot:title>
-        {{ data_get_str($server, 'name')->limit(10) }} > Sentinel | Coolify
-    </x-slot>
-    <livewire:server.navbar :server="$server" />
-    <div class="flex flex-col h-full gap-8 sm:flex-row">
-        <x-server.sidebar :server="$server" activeMenu="sentinel" />
-        <div class="w-full">
-            <form wire:submit.prevent='submit'>
-                <div class="flex gap-2 items-center pb-2">
-                    <h2>Sentinel</h2>
-                    <x-helper helper="Sentinel reports your server's & container's health and collects metrics." />
-                    @if ($server->isSentinelEnabled())
-                        <div class="flex gap-2 items-center">
-                            @if ($server->isSentinelLive())
-                                <x-status.running status="In sync" noLoading title="{{ $sentinelUpdatedAt }}" />
-                                <x-forms.button type="submit" canGate="update" :canResource="$server">Save</x-forms.button>
-                                <x-forms.button wire:click='restartSentinel' canGate="update" :canResource="$server">Restart</x-forms.button>
-                                <x-slide-over fullScreen>
-                                    <x-slot:title>Sentinel Logs</x-slot:title>
-                                    <x-slot:content>
-                                        <livewire:project.shared.get-logs :server="$server"
-                                            container="coolify-sentinel" displayName="Sentinel" :collapsible="false"
-                                            lazy />
-                                    </x-slot:content>
-                                    <x-forms.button @click="slideOverOpen=true">Logs</x-forms.button>
-                                </x-slide-over>
-                            @else
-                                <x-status.stopped status="Out of sync" noLoading
-                                    title="{{ $sentinelUpdatedAt }}" />
-                                <x-forms.button type="submit" canGate="update" :canResource="$server">Save</x-forms.button>
-                                <x-forms.button wire:click='restartSentinel' canGate="update" :canResource="$server">Sync</x-forms.button>
-                                <x-slide-over fullScreen>
-                                    <x-slot:title>Sentinel Logs</x-slot:title>
-                                    <x-slot:content>
-                                        <livewire:project.shared.get-logs :server="$server"
-                                            container="coolify-sentinel" displayName="Sentinel" :collapsible="false"
-                                            lazy />
-                                    </x-slot:content>
-                                    <x-forms.button @click="slideOverOpen=true">Logs</x-forms.button>
-                                </x-slide-over>
-                            @endif
-                        </div>
-                    @endif
+    <form wire:submit.prevent='submit'>
+        <div class="flex gap-2 items-center pb-2">
+            <h2>Sentinel</h2>
+            <x-helper helper="Sentinel reports your server's & container's health and collects metrics." />
+            @if (!$isSentinelEnabled)
+                <x-forms.button canGate="update" :canResource="$server" isHighlighted wire:click="toggleSentinel">Enable Sentinel</x-forms.button>
+            @else
+                <div class="flex gap-2 items-center">
+                    <x-forms.button type="submit" canGate="update" :canResource="$server">Save</x-forms.button>
+                    <x-forms.button wire:click='restartSentinel' canGate="update" :canResource="$server">
+                        {{ $server->isSentinelLive() ? 'Restart' : 'Sync' }}
+                    </x-forms.button>
+                    <x-forms.button canGate="update" :canResource="$server" wire:click="toggleSentinel">Disable Sentinel</x-forms.button>
                 </div>
-                <div class="flex flex-col gap-2">
-                    <div class="w-full sm:w-96">
-                        <x-forms.checkbox canGate="update" :canResource="$server" wire:model.live="isSentinelEnabled"
-                            label="Enable Sentinel" />
-                        @if ($server->isSentinelEnabled())
-                            @if (isDev())
-                                <x-forms.checkbox canGate="update" :canResource="$server" id="isSentinelDebugEnabled"
-                                    label="Enable Sentinel (with debug)" instantSave />
-                            @endif
-                            <x-forms.checkbox canGate="update" :canResource="$server" instantSave
-                                id="isMetricsEnabled" label="Enable Metrics" />
-                        @else
-                            @if (isDev())
-                                <x-forms.checkbox id="isSentinelDebugEnabled" label="Enable Sentinel (with debug)"
-                                    disabled instantSave />
-                            @endif
-                            <x-forms.checkbox instantSave disabled id="isMetricsEnabled"
-                                label="Enable Metrics (enable Sentinel first)" />
-                        @endif
-                    </div>
-                    @if (isDev() && $server->isSentinelEnabled())
-                        <div class="pt-4" x-data="{
-                            customImage: localStorage.getItem('sentinel_custom_docker_image_{{ $server->uuid }}') || '',
-                            saveCustomImage() {
-                                localStorage.setItem('sentinel_custom_docker_image_{{ $server->uuid }}', this.customImage);
-                                $wire.set('sentinelCustomDockerImage', this.customImage);
-                            }
-                        }" x-init="$wire.set('sentinelCustomDockerImage', customImage)">
-                            <x-forms.input x-model="customImage" @input.debounce.500ms="saveCustomImage()"
-                                placeholder="e.g., sentinel:latest or myregistry/sentinel:dev"
-                                label="Custom Sentinel Docker Image (Dev Only)"
-                                helper="Override the default Sentinel Docker image for testing. Leave empty to use the default." />
-                        </div>
-                    @endif
-                    @if ($server->isSentinelEnabled())
-                        <div class="flex flex-wrap gap-2 sm:flex-nowrap items-end">
-                            <x-forms.input canGate="update" :canResource="$server" type="password" id="sentinelToken"
-                                label="Sentinel token" required helper="Token for Sentinel." />
-                            <x-forms.button canGate="update" :canResource="$server"
-                                wire:click="regenerateSentinelToken">Regenerate</x-forms.button>
-                        </div>
-
-                        <x-forms.input canGate="update" :canResource="$server" id="sentinelCustomUrl" required
-                            label="Coolify URL"
-                            helper="URL to your Coolify instance. If it is empty that means you do not have a FQDN set for your Coolify instance." />
-
-                        <div class="flex flex-col gap-2">
-                            <div class="flex flex-wrap gap-2 sm:flex-nowrap">
-                                <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" 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" type="number" min="10"
-                                    id="sentinelPushIntervalSeconds" label="Push interval (seconds)" required
-                                    helper="Interval at which metrics data is sent to the collector." />
-                            </div>
-                        </div>
-                    @endif
-                </div>
-            </form>
+            @endif
         </div>
-    </div>
+        @if ($isSentinelEnabled && !$server->isSentinelLive())
+            <x-callout type="warning" title="Out of Sync" class="mt-2">
+                Sentinel is not in sync with your server. Click "Sync" to re-sync.
+            </x-callout>
+        @endif
+        <div class="flex flex-col gap-2 pt-2">
+            @if ($isSentinelEnabled && isDev())
+                <div class="w-full sm:w-96">
+                    <x-forms.checkbox canGate="update" :canResource="$server" id="isSentinelDebugEnabled"
+                        label="Enable Sentinel (with debug)" instantSave />
+                </div>
+            @endif
+            @if (isDev() && $server->isSentinelEnabled())
+                <div class="pt-4" x-data="{
+                    customImage: localStorage.getItem('sentinel_custom_docker_image_{{ $server->uuid }}') || '',
+                    saveCustomImage() {
+                        localStorage.setItem('sentinel_custom_docker_image_{{ $server->uuid }}', this.customImage);
+                        $wire.set('sentinelCustomDockerImage', this.customImage);
+                    }
+                }" x-init="$wire.set('sentinelCustomDockerImage', customImage)">
+                    <x-forms.input canGate="update" :canResource="$server" x-model="customImage"
+                        @input.debounce.500ms="saveCustomImage()"
+                        placeholder="e.g., sentinel:latest or myregistry/sentinel:dev"
+                        label="Custom Sentinel Docker Image (Dev Only)"
+                        helper="Override the default Sentinel Docker image for testing. Leave empty to use the default." />
+                </div>
+            @endif
+            @if ($server->isSentinelEnabled())
+                <div class="flex flex-wrap gap-2 sm:flex-nowrap items-end">
+                    <x-forms.input canGate="update" :canResource="$server" id="sentinelCustomUrl" required
+                        label="Coolify URL"
+                        helper="URL to your Coolify instance. If it is empty that means you do not have a FQDN set for your Coolify instance." />
+                    <x-forms.input canGate="update" :canResource="$server" type="password" id="sentinelToken"
+                        label="Sentinel token" required helper="Token for Sentinel." />
+                    <x-forms.button canGate="update" :canResource="$server"
+                        wire:click="regenerateSentinelToken">Regenerate</x-forms.button>
+                </div>
+
+                <div class="flex flex-col gap-2">
+                    <div class="flex flex-wrap gap-2 sm:flex-nowrap">
+                        <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" 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" type="number" min="10"
+                            id="sentinelPushIntervalSeconds" label="Push interval (seconds)" required
+                            helper="Interval at which metrics data is sent to the collector." />
+                    </div>
+                </div>
+            @endif
+        </div>
+    </form>
 </div>

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

@@ -0,0 +1,13 @@
+<div>
+    <x-slot:title>
+        Sentinel Logs | Coolify
+    </x-slot>
+    <livewire:server.navbar :server="$server" />
+    <div class="flex flex-col h-full gap-8 sm:flex-row">
+        <x-server.sidebar-sentinel :server="$server" :parameters="$parameters" />
+        <div class="w-full">
+            <h2 class="pb-4">Logs</h2>
+            <livewire:project.shared.get-logs :server="$server" container="coolify-sentinel" displayName="Sentinel" :collapsible="false" />
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,16 @@
+<div>
+    <x-slot:title>
+        Sentinel Configuration | Coolify
+    </x-slot>
+    <livewire:server.navbar :server="$server" />
+    @if ($server->isFunctional())
+        <div class="flex flex-col h-full gap-8 sm:flex-row">
+            <x-server.sidebar-sentinel :server="$server" :parameters="$parameters" />
+            <div class="w-full">
+                <livewire:server.sentinel :server="$server" />
+            </div>
+        </div>
+    @else
+        <div>Server is not validated. Validate first.</div>
+    @endif
+</div>

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

@@ -103,142 +103,102 @@
             return new Date(b.published_at) - new Date(a.published_at);
         });
     }
-}" @click.outside="dropdownOpen = false">
-    <!-- Custom Dropdown without arrow -->
-    <div class="relative">
-        <button @click="dropdownOpen = !dropdownOpen"
-            class="relative p-2 dark:text-neutral-400 hover:dark:text-white transition-colors cursor-pointer"
-            title="Preferences">
-            <!-- Sliders Icon -->
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" title="Preferences">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                    d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
+}" @click.outside="dropdownOpen = false" class="{{ $trigger === 'changelog-sidebar' ? 'w-full' : '' }}">
+    @if ($trigger === 'changelog-sidebar')
+        <button wire:click="openWhatsNewModal" type="button" title="What's New" aria-label="What's New"
+            class="relative text-left menu-item">
+            <svg class="menu-item-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"
+                    d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.091-3.091L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.091-3.091L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.091 3.091L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.091 3.091ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.456-2.456L14.25 6l1.035-.259a3.375 3.375 0 0 0 2.456-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" />
             </svg>
-
-            <!-- Unread Count Badge -->
+            <span class="text-left menu-item-label" :class="collapsed && 'lg:hidden'">What's New</span>
             @if ($unreadCount > 0)
                 <span
-                    class="absolute -top-1 -right-1 bg-error text-white text-xs rounded-full w-4.5 h-4.5 flex items-center justify-center">
+                    class="absolute top-0 right-0 bg-error text-white text-[10px] rounded-full min-w-4 h-4 px-1 flex items-center justify-center"
+                    aria-label="{{ $unreadCount }} unread changelog {{ Str::plural('entry', $unreadCount) }}">
                     {{ $unreadCount > 9 ? '9+' : $unreadCount }}
                 </span>
             @endif
         </button>
+    @else
+        <!-- Custom Dropdown without arrow -->
+        <div class="relative">
+            <button @click="dropdownOpen = !dropdownOpen"
+                class="relative p-2 dark:text-neutral-400 hover:dark:text-white transition-colors cursor-pointer"
+                title="Preferences">
+                <!-- Sliders Icon -->
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" title="Preferences">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
+                </svg>
 
-        <!-- Dropdown Menu -->
-        <div x-show="dropdownOpen" x-transition:enter="ease-out duration-200"
-            x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0"
-            x-transition:leave="ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0"
-            x-transition:leave-end="opacity-0 -translate-y-2" class="absolute right-0 top-full mt-1 z-50 w-48" x-cloak>
-            <div
-                class="p-1 bg-white border rounded-sm shadow-lg dark:bg-coolgray-200 dark:border-coolgray-300 border-neutral-300">
-                <div class="flex flex-col gap-1">
-                    <!-- What's New Section -->
-                    @if ($unreadCount > 0)
-                        <button wire:click="openWhatsNewModal" @click="dropdownOpen = false"
-                            class="px-1 dropdown-item-no-padding flex items-center justify-between">
-                            <div class="flex items-center gap-2">
-                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                                </svg>
-                                <span>What's New</span>
-                            </div>
-                            <span
-                                class="bg-error text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
-                                {{ $unreadCount > 9 ? '9+' : $unreadCount }}
-                            </span>
+                <!-- Unread Count Badge -->
+                @if ($unreadCount > 0)
+                    <span
+                        class="absolute -top-1 -right-1 bg-error text-white text-xs rounded-full w-4.5 h-4.5 flex items-center justify-center">
+                        {{ $unreadCount > 9 ? '9+' : $unreadCount }}
+                    </span>
+                @endif
+            </button>
+
+            <!-- Dropdown Menu -->
+            <div x-show="dropdownOpen" x-transition:enter="ease-out duration-200"
+                x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0"
+                x-transition:leave="ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0"
+                x-transition:leave-end="opacity-0 -translate-y-2" class="absolute right-0 top-full mt-1 z-50 w-48" x-cloak>
+                <div
+                    class="p-1 bg-white border rounded-sm shadow-lg dark:bg-coolgray-200 dark:border-coolgray-300 border-neutral-300">
+                    <div class="flex flex-col gap-1">
+                        <!-- Width Section -->
+                        <div
+                            class="my-1 font-bold border-b dark:border-coolgray-500 border-neutral-300 dark:text-white text-md">
+                            Width</div>
+                        <button @click="switchWidth(); dropdownOpen = false"
+                            class="px-1 dropdown-item-no-padding flex items-center gap-2" x-show="full === 'full'">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M4 6h16M4 12h16M4 18h7" />
+                            </svg>
+                            <span>Center</span>
                         </button>
-                    @else
-                        <button wire:click="openWhatsNewModal" @click="dropdownOpen = false"
+                        <button @click="switchWidth(); dropdownOpen = false"
+                            class="px-1 dropdown-item-no-padding flex items-center gap-2" x-show="full === 'center'">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M4 6h16M4 12h16M4 18h16" />
+                            </svg>
+                            <span>Full</span>
+                        </button>
+
+                        <!-- Zoom Section -->
+                        <div
+                            class="my-1 font-bold border-b dark:border-coolgray-500 border-neutral-300 dark:text-white text-md">
+                            Zoom</div>
+                        <button @click="setZoom(100); dropdownOpen = false"
                             class="px-1 dropdown-item-no-padding flex items-center gap-2">
                             <svg class="w-4 h-4" 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" />
+                                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                             </svg>
-                            <span>Changelog</span>
+                            <span>100%</span>
                         </button>
-                    @endif
-
-                    <!-- Divider -->
-                    <div class="border-b dark:border-coolgray-500 border-neutral-300"></div>
-
-                    <!-- Theme Section -->
-                    <div class="font-bold border-b dark:border-coolgray-500 border-neutral-300 dark:text-white pb-1">
-                        Appearance</div>
-                    <button @click="setTheme('dark'); dropdownOpen = false"
-                        class="px-1 dropdown-item-no-padding flex items-center gap-2">
-                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-                        </svg>
-                        <span>Dark</span>
-                    </button>
-                    <button @click="setTheme('light'); dropdownOpen = false"
-                        class="px-1 dropdown-item-no-padding flex items-center gap-2">
-                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-                        </svg>
-                        <span>Light</span>
-                    </button>
-                    <button @click="setTheme('system'); dropdownOpen = false"
-                        class="px-1 dropdown-item-no-padding flex items-center gap-2">
-                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-                        </svg>
-                        <span>System</span>
-                    </button>
-
-                    <!-- Width Section -->
-                    <div
-                        class="my-1 font-bold border-b dark:border-coolgray-500 border-neutral-300 dark:text-white text-md">
-                        Width</div>
-                    <button @click="switchWidth(); dropdownOpen = false"
-                        class="px-1 dropdown-item-no-padding flex items-center gap-2" x-show="full === 'full'">
-                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                d="M4 6h16M4 12h16M4 18h7" />
-                        </svg>
-                        <span>Center</span>
-                    </button>
-                    <button @click="switchWidth(); dropdownOpen = false"
-                        class="px-1 dropdown-item-no-padding flex items-center gap-2" x-show="full === 'center'">
-                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                d="M4 6h16M4 12h16M4 18h16" />
-                        </svg>
-                        <span>Full</span>
-                    </button>
-
-                    <!-- Zoom Section -->
-                    <div
-                        class="my-1 font-bold border-b dark:border-coolgray-500 border-neutral-300 dark:text-white text-md">
-                        Zoom</div>
-                    <button @click="setZoom(100); dropdownOpen = false"
-                        class="px-1 dropdown-item-no-padding flex items-center gap-2">
-                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                        </svg>
-                        <span>100%</span>
-                    </button>
-                    <button @click="setZoom(90); dropdownOpen = false"
-                        class="px-1 dropdown-item-no-padding flex items-center gap-2">
-                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 10h4v4h-4v-4z" />
-                        </svg>
-                        <span>90%</span>
-                    </button>
+                        <button @click="setZoom(90); dropdownOpen = false"
+                            class="px-1 dropdown-item-no-padding flex items-center gap-2">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 10h4v4h-4v-4z" />
+                            </svg>
+                            <span>90%</span>
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
+    @endif
 
     <!-- What's New Modal -->
     @if ($showWhatsNewModal)
-        <div class="fixed inset-0 z-50 flex items-center justify-center py-6 px-4"
+        <div class="fixed inset-0 z-[60] flex items-center justify-center py-6 px-4"
             @keydown.escape.window="$wire.closeWhatsNewModal()">
             <!-- Background overlay -->
             <div class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-xs" wire:click="closeWhatsNewModal">
@@ -262,8 +222,7 @@
                     </div>
                     <div class="flex items-center gap-2">
                         @if (isDev())
-                            <x-forms.button wire:click="manualFetchChangelog"
-                                class="bg-coolgray-200 hover:bg-coolgray-300">
+                            <x-forms.button wire:click="manualFetchChangelog">
                                 <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                         d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />

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

@@ -5,7 +5,8 @@
                 <h1>GitHub App</h1>
                 <div class="flex gap-2">
                     @if (data_get($github_app, 'installation_id'))
-                        <x-forms.button canGate="update" :canResource="$github_app" type="submit">Save</x-forms.button>
+                        <x-forms.button canGate="update" :canResource="$github_app" type="submit"
+                            :disabled="$activeTab !== 'general'">Save</x-forms.button>
                     @endif
                     @can('delete', $github_app)
                         @if ($applications->count() > 0)
@@ -39,170 +40,187 @@
                     Install Repositories on GitHub
                 </a>
             @else
-                <div class="flex flex-col gap-2">
-                    <div class="flex flex-col sm:flex-row gap-2">
-                        <div class="flex flex-col sm:flex-row items-start sm:items-end gap-2 w-full">
-                            <x-forms.input canGate="update" :canResource="$github_app" id="name" label="App Name" />
-                            <x-forms.button canGate="update" :canResource="$github_app" wire:click.prevent="updateGithubAppName">
-                                Sync Name
-                            </x-forms.button>
-                            @can('update', $github_app)
-                                <a href="{{ $this->getGithubAppNameUpdatePath() }}">
-                                    <x-forms.button
-                                        class="bg-transparent border-transparent hover:bg-transparent hover:border-transparent hover:underline">
-                                        Rename
-                                        <x-external-link />
-                                    </x-forms.button>
-                                </a>
-                                <a href="{{ getInstallationPath($github_app) }}" class="w-fit">
-                                    <x-forms.button
-                                        class="bg-transparent border-transparent hover:bg-transparent hover:border-transparent hover:underline whitespace-nowrap">
-                                        Update Repositories
+                <div class="navbar-main">
+                    <nav class="flex shrink-0 gap-6 items-center whitespace-nowrap scrollbar min-h-10">
+                        <a class="{{ request()->routeIs('source.github.show') ? 'dark:text-white' : '' }}"
+                            {{ wireNavigate() }}
+                            href="{{ route('source.github.show', ['github_app_uuid' => $github_app->uuid]) }}">
+                            General
+                        </a>
+                        <a class="{{ request()->routeIs('source.github.permissions') ? 'dark:text-white' : '' }}"
+                            {{ wireNavigate() }}
+                            href="{{ route('source.github.permissions', ['github_app_uuid' => $github_app->uuid]) }}">
+                            Permissions
+                        </a>
+                        <a class="{{ request()->routeIs('source.github.resources') ? 'dark:text-white' : '' }}"
+                            {{ wireNavigate() }}
+                            href="{{ route('source.github.resources', ['github_app_uuid' => $github_app->uuid]) }}">
+                            Resources
+                        </a>
+                    </nav>
+                </div>
+
+                <div class="pt-4">
+                    <div class="flex flex-col gap-2" @if ($activeTab !== 'general') hidden @endif>
+                        <div class="flex flex-col sm:flex-row gap-2">
+                            <div class="flex flex-col sm:flex-row items-start sm:items-end gap-2 w-full">
+                                <x-forms.input canGate="update" :canResource="$github_app" id="name" label="App Name" />
+                                <x-forms.button canGate="update" :canResource="$github_app" wire:click.prevent="updateGithubAppName">
+                                    Sync Name
+                                </x-forms.button>
+                                @can('update', $github_app)
+                                    <a href="{{ $this->getGithubAppNameUpdatePath() }}">
+                                        <x-forms.button canGate="update" :canResource="$github_app"
+                                            class="bg-transparent border-transparent hover:bg-transparent hover:border-transparent hover:underline">
+                                            Rename
+                                            <x-external-link />
+                                        </x-forms.button>
+                                    </a>
+                                    <a href="{{ getInstallationPath($github_app) }}" class="w-fit">
+                                        <x-forms.button canGate="update" :canResource="$github_app"
+                                            class="bg-transparent border-transparent hover:bg-transparent hover:border-transparent hover:underline whitespace-nowrap">
+                                            Update Repositories
+                                            <x-external-link />
+                                        </x-forms.button>
+                                    </a>
+                                @endcan
+                            </div>
+                        </div>
+                        <x-forms.input canGate="update" :canResource="$github_app" id="organization" label="Organization"
+                            placeholder="If empty, personal user will be used" />
+                        @if (!isCloud())
+                            <div class="w-48">
+                                <x-forms.checkbox canGate="update" :canResource="$github_app" label="System Wide?"
+                                    helper="If checked, this GitHub App will be available for everyone in this Coolify instance."
+                                    instantSave id="isSystemWide" />
+                            </div>
+                            @if ($isSystemWide)
+                                <x-callout type="warning" title="Not Recommended">
+                                    System-wide GitHub Apps are shared across all teams on this Coolify instance. This means any team can use this GitHub App to deploy applications from your repositories. For better security and isolation, it's recommended to create team-specific GitHub Apps instead.
+                                </x-callout>
+                            @endif
+                        @endif
+                        <div class="flex flex-col sm:flex-row gap-2">
+                            <x-forms.input canGate="update" :canResource="$github_app" id="htmlUrl" label="HTML Url" />
+                            <x-forms.input canGate="update" :canResource="$github_app" id="apiUrl" label="API Url" />
+                        </div>
+                        <div class="flex flex-col sm:flex-row gap-2">
+                            <x-forms.input canGate="update" :canResource="$github_app" id="customUser" label="User"
+                                required />
+                            <x-forms.input canGate="update" :canResource="$github_app" type="number" id="customPort"
+                                label="Port" required />
+                        </div>
+                        <div class="flex flex-col sm:flex-row gap-2">
+                            <x-forms.input canGate="update" :canResource="$github_app" type="number" id="appId"
+                                label="App Id" required />
+                            <x-forms.input canGate="update" :canResource="$github_app" type="number"
+                                id="installationId" label="Installation Id" required />
+                        </div>
+                        <div class="flex flex-col sm:flex-row gap-2">
+                            <x-forms.input canGate="update" :canResource="$github_app" id="clientId" label="Client Id"
+                                type="password" required />
+                            <x-forms.input canGate="update" :canResource="$github_app" id="clientSecret"
+                                label="Client Secret" type="password" required />
+                            <x-forms.input canGate="update" :canResource="$github_app" id="webhookSecret"
+                                label="Webhook Secret" type="password" required />
+                        </div>
+                        <div class="flex gap-2">
+                            <x-forms.select canGate="update" :canResource="$github_app" id="privateKeyId"
+                                label="Private Key" required>
+                                @if (blank($github_app->private_key_id))
+                                    <option value="0" selected>Select a private key</option>
+                                @endif
+                                @foreach ($privateKeys as $privateKey)
+                                    <option value="{{ $privateKey->id }}">{{ $privateKey->name }}</option>
+                                @endforeach
+                            </x-forms.select>
+                        </div>
+                    </div>
+
+                    <div class="flex flex-col gap-2" @if ($activeTab !== 'permissions') hidden @endif>
+                        <div class="flex flex-col sm:flex-row items-start sm:items-end gap-2">
+                            <h2>Permissions</h2>
+                            @can('view', $github_app)
+                                <x-forms.button canGate="view" :canResource="$github_app" wire:click.prevent="checkPermissions">Refetch</x-forms.button>
+                                <a href="{{ getPermissionsPath($github_app) }}">
+                                    <x-forms.button canGate="view" :canResource="$github_app" class="bg-transparent border-transparent hover:bg-transparent hover:border-transparent hover:underline">
+                                        Update
                                         <x-external-link />
                                     </x-forms.button>
                                 </a>
                             @endcan
                         </div>
-                    </div>
-                    <x-forms.input canGate="update" :canResource="$github_app" id="organization" label="Organization"
-                        placeholder="If empty, personal user will be used" />
-                    @if (!isCloud())
-                        <div class="w-48">
-                            <x-forms.checkbox canGate="update" :canResource="$github_app" label="System Wide?"
-                                helper="If checked, this GitHub App will be available for everyone in this Coolify instance."
-                                instantSave id="isSystemWide" />
+                        <div class="flex flex-col sm:flex-row gap-2">
+                            <x-forms.input canGate="view" :canResource="$github_app" id="contents" helper="read - mandatory." label="Content" readonly
+                                placeholder="N/A" />
+                            <x-forms.input canGate="view" :canResource="$github_app" id="metadata" helper="read - mandatory." label="Metadata" readonly
+                                placeholder="N/A" />
+                            <x-forms.input canGate="view" :canResource="$github_app" id="pullRequests"
+                                helper="write access needed to use deployment status update in previews."
+                                label="Pull Request" readonly placeholder="N/A" />
                         </div>
-                        @if ($isSystemWide)
-                            <x-callout type="warning" title="Not Recommended">
-                                System-wide GitHub Apps are shared across all teams on this Coolify instance. This means any team can use this GitHub App to deploy applications from your repositories. For better security and isolation, it's recommended to create team-specific GitHub Apps instead.
-                            </x-callout>
+                    </div>
+
+                    <div class="flex flex-col" @if ($activeTab !== 'resources') hidden @endif x-data="{ search: '' }">
+                        @if ($applications->isEmpty())
+                            <div class="py-4 text-sm opacity-70">
+                                No resources are currently using this GitHub App.
+                            </div>
+                        @else
+                            <x-forms.input canGate="view" :canResource="$github_app" placeholder="Search resources..." x-model="search" id="null" />
+                            <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">Project</th>
+                                                    <th class="px-5 py-3 text-xs font-medium text-left uppercase">Environment</th>
+                                                    <th class="px-5 py-3 text-xs font-medium text-left uppercase">Name</th>
+                                                    <th class="px-5 py-3 text-xs font-medium text-left uppercase">Type</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody class="divide-y">
+                                                @foreach ($applications->sortBy('name', SORT_NATURAL) as $resource)
+                                                    @php
+                                                        $projectName = (string) data_get($resource->project(), 'name');
+                                                        $environmentName = (string) data_get($resource, 'environment.name');
+                                                        $resourceName = (string) $resource->name;
+                                                        $resourceType = (string) str($resource->type())->headline();
+                                                    @endphp
+                                                    <tr class="dark:hover:bg-coolgray-300 hover:bg-neutral-100"
+                                                        x-show="search === ''
+                                                            || '{{ strtolower(addslashes($projectName)) }}'.includes(search.toLowerCase())
+                                                            || '{{ strtolower(addslashes($environmentName)) }}'.includes(search.toLowerCase())
+                                                            || '{{ strtolower(addslashes($resourceName)) }}'.includes(search.toLowerCase())
+                                                            || '{{ strtolower(addslashes($resourceType)) }}'.includes(search.toLowerCase())">
+                                                        <td class="px-5 py-4 text-sm whitespace-nowrap">
+                                                            {{ $projectName }}
+                                                        </td>
+                                                        <td class="px-5 py-4 text-sm whitespace-nowrap">
+                                                            {{ $environmentName }}
+                                                        </td>
+                                                        <td class="px-5 py-4 text-sm whitespace-nowrap">
+                                                            <a {{ wireNavigate() }} href="{{ $resource->link() }}">
+                                                                {{ $resourceName }}
+                                                                <x-internal-link />
+                                                            </a>
+                                                        </td>
+                                                        <td class="px-5 py-4 text-sm whitespace-nowrap">
+                                                            {{ $resourceType }}
+                                                        </td>
+                                                    </tr>
+                                                @endforeach
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </div>
+                            </div>
                         @endif
-                    @endif
-                    <div class="flex flex-col sm:flex-row gap-2">
-                        <x-forms.input canGate="update" :canResource="$github_app" id="htmlUrl" label="HTML Url" />
-                        <x-forms.input canGate="update" :canResource="$github_app" id="apiUrl" label="API Url" />
-                    </div>
-                    <div class="flex flex-col sm:flex-row gap-2">
-                        <x-forms.input canGate="update" :canResource="$github_app" id="customUser" label="User"
-                            required />
-                        <x-forms.input canGate="update" :canResource="$github_app" type="number" id="customPort"
-                            label="Port" required />
-                    </div>
-                    <div class="flex flex-col sm:flex-row gap-2">
-                        <x-forms.input canGate="update" :canResource="$github_app" type="number" id="appId"
-                            label="App Id" required />
-                        <x-forms.input canGate="update" :canResource="$github_app" type="number"
-                            id="installationId" label="Installation Id" required />
-                    </div>
-                    <div class="flex flex-col sm:flex-row gap-2">
-                        <x-forms.input canGate="update" :canResource="$github_app" id="clientId" label="Client Id"
-                            type="password" required />
-                        <x-forms.input canGate="update" :canResource="$github_app" id="clientSecret"
-                            label="Client Secret" type="password" required />
-                        <x-forms.input canGate="update" :canResource="$github_app" id="webhookSecret"
-                            label="Webhook Secret" type="password" required />
-                    </div>
-                    <div class="flex gap-2">
-                        <x-forms.select canGate="update" :canResource="$github_app" id="privateKeyId"
-                            label="Private Key" required>
-                            @if (blank($github_app->private_key_id))
-                                <option value="0" selected>Select a private key</option>
-                            @endif
-                            @foreach ($privateKeys as $privateKey)
-                                <option value="{{ $privateKey->id }}">{{ $privateKey->name }}</option>
-                            @endforeach
-                        </x-forms.select>
-                    </div>
-                    <div class="flex flex-col sm:flex-row items-start sm:items-end gap-2">
-                        <h2 class="pt-4">Permissions</h2>
-                        @can('view', $github_app)
-                            <x-forms.button wire:click.prevent="checkPermissions">Refetch</x-forms.button>
-                            <a href="{{ getPermissionsPath($github_app) }}">
-                                <x-forms.button>
-                                    Update
-                                    <x-external-link />
-                                </x-forms.button>
-                            </a>
-                        @endcan
-                    </div>
-                    <div class="flex flex-col sm:flex-row gap-2">
-                        <x-forms.input id="contents" helper="read - mandatory." label="Content" readonly
-                            placeholder="N/A" />
-                        <x-forms.input id="metadata" helper="read - mandatory." label="Metadata" readonly
-                            placeholder="N/A" />
-                        {{-- <x-forms.input id="administration"
-                            helper="read:write access needed to setup servers as GitHub Runner." label="Administration"
-                            readonly placeholder="N/A" /> --}}
-                        <x-forms.input id="pullRequests"
-                            helper="write access needed to use deployment status update in previews."
-                            label="Pull Request" readonly placeholder="N/A" />
                     </div>
                 </div>
             @endif
         </form>
-        @if (data_get($github_app, 'installation_id'))
-            <div class="w-full pt-10">
-                <div class="h-full">
-                    <div class="flex flex-col">
-                        <div class="flex gap-2">
-                            <h2>Resources</h2>
-                        </div>
-                        <div class="pb-4 title">Here you can find all resources that are using this source.</div>
-                    </div>
-                    @if ($applications->isEmpty())
-                        <div class="py-4 text-sm opacity-70">
-                            No resources are currently using this GitHub App.
-                        </div>
-                    @else
-                        <div class="flex flex-col">
-                            <div class="flex flex-col">
-                                <div class="overflow-x-auto">
-                                    <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">
-                                                            Project
-                                                        </th>
-                                                        <th class="px-5 py-3 text-xs font-medium text-left uppercase">
-                                                            Environment</th>
-                                                        <th class="px-5 py-3 text-xs font-medium text-left uppercase">Name
-                                                        </th>
-                                                        <th class="px-5 py-3 text-xs font-medium text-left uppercase">Type
-                                                        </th>
-                                                    </tr>
-                                                </thead>
-                                                <tbody class="divide-y">
-                                                    @foreach ($applications->sortBy('name',SORT_NATURAL) as $resource)
-                                                        <tr>
-                                                            <td class="px-5 py-4 text-sm whitespace-nowrap">
-                                                                {{ data_get($resource->project(), 'name') }}
-                                                            </td>
-                                                            <td class="px-5 py-4 text-sm whitespace-nowrap">
-                                                                {{ data_get($resource, 'environment.name') }}
-                                                            </td>
-                                                            <td class="px-5 py-4 text-sm whitespace-nowrap"><a
-                                                                    class=""
-                                                                    {{ wireNavigate() }}
-                                                                    href="{{ $resource->link() }}">{{ $resource->name }}
-                                                                    <x-internal-link /></a>
-                                                            </td>
-                                                            <td class="px-5 py-4 text-sm whitespace-nowrap">
-                                                                {{ str($resource->type())->headline() }}</td>
-                                                        </tr>
-                                                    @endforeach
-                                                </tbody>
-                                            </table>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    @endif
-                </div>
-            </div>
-        @endif
     @else
         <div class="flex flex-col sm:flex-row sm:items-center gap-2 pb-4">
             <h1>GitHub App</h1>
@@ -216,89 +234,138 @@
                 @endcan
             </div>
         </div>
-        <div class="flex flex-col gap-2">
+        <div class="flex items-center justify-center min-h-[calc(100vh-12rem)]">
+            <div class="mx-auto grid w-full max-w-5xl grid-cols-1 gap-4 lg:grid-cols-2">
             @can('create', $github_app)
-                <h3>Manual Installation</h3>
-                <div class="flex gap-2 items-center">
-                    If you want to fill the form manually, you can continue below. Only for advanced users.
-                    <x-forms.button wire:click.prevent="createGithubAppManually">
-                        Continue
-                    </x-forms.button>
-                </div>
-                <h3>Automated Installation</h3>
-                <div class=" pb-5 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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                    </svg>
-                    <span>You must complete this step before you can use this source!</span>
+                <section class="box-without-bg flex-col gap-4 p-6 h-full transition-all duration-200"
+                    x-data="{
+                        webhookEndpoint: $wire.entangle('webhook_endpoint').live,
+                        useCustomWebhookEndpoint: $wire.entangle('use_custom_webhook_endpoint').live,
+                        customWebhookEndpoint: $wire.entangle('custom_webhook_endpoint').live,
+                    }">
+                    <div class="flex flex-col gap-4 text-left h-full">
+                        <div class="flex items-center justify-between">
+                            <svg class="size-10" 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="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
+                            </svg>
+                            <span
+                                class="px-2 py-1 text-xs font-bold uppercase tracking-wide bg-coollabs/10 dark:bg-warning/20 text-coollabs dark:text-warning rounded">
+                                Recommended
+                            </span>
+                        </div>
+                        <div>
+                            <h3 class="text-xl font-bold mb-2">Automated Installation</h3>
+                            <p class="text-sm dark:text-neutral-400">
+                                Register a GitHub App via GitHub's manifest flow. Permissions and webhooks are pre-configured.
+                            </p>
+                        </div>
+                        <div class="flex flex-col gap-3 pt-4 border-t border-neutral-200 dark:border-coolgray-400">
+                            @if (!isCloud() || isDev())
+                                <x-forms.checkbox canGate="create" :canResource="$github_app"
+                                    x-model="useCustomWebhookEndpoint" id="use_custom_webhook_endpoint"
+                                    label="Use custom webhook endpoint"
+                                    helper="Enable this when the public URL GitHub should call differs from Coolify's configured URL, for example behind Cloudflare Tunnel." />
+                                <div x-show="!useCustomWebhookEndpoint">
+                                    <x-forms.select canGate="create" :canResource="$github_app"
+                                        wire:model.live='webhook_endpoint' x-model="webhookEndpoint"
+                                        label="Selected endpoint"
+                                        helper="GitHub will use this endpoint unless custom mode is enabled.">
+                                        @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 (config('app.url'))
+                                            <option value="{{ config('app.url') }}">Use {{ config('app.url') }}</option>
+                                        @endif
+                                    </x-forms.select>
+                                </div>
+                                <div x-cloak x-show="useCustomWebhookEndpoint">
+                                    <x-forms.input canGate="create" :canResource="$github_app"
+                                        x-model="customWebhookEndpoint" id="custom_webhook_endpoint" type="url"
+                                        label="Custom endpoint" placeholder="https://coolify.example.com"
+                                        helper="GitHub will use this custom public URL. Do not include /webhooks." />
+                                </div>
+                            @else
+                                <div class="text-sm dark:text-neutral-400">You need to register a GitHub App before using this source.</div>
+                            @endif
+
+                            <div class="flex w-full flex-col gap-2">
+                                <x-forms.checkbox canGate="create" :canResource="$github_app" disabled id="default_permissions" label="Mandatory"
+                                    helper="Contents: read<br>Metadata: read<br>Email: read" />
+                                <x-forms.checkbox canGate="create" :canResource="$github_app" id="preview_deployment_permissions" label="Preview Deployments"
+                                    helper="Necessary for updating pull requests with useful comments (deployment status, links, etc.)<br><br>Pull Request: read & write" />
+                            </div>
+                        </div>
+                        <div class="mt-auto pt-2">
+                            <x-forms.button canGate="create" :canResource="$github_app" class="w-full justify-center" isHighlighted
+                                x-on:click.prevent="createGithubApp(webhookEndpoint, useCustomWebhookEndpoint, customWebhookEndpoint, {{ Illuminate\Support\Js::from($preview_deployment_permissions) }}, {{ Illuminate\Support\Js::from($administration) }})">
+                                Register Now
+                            </x-forms.button>
+                        </div>
+                    </div>
+                </section>
+
+                <section class="box-without-bg flex-col gap-4 p-6 h-full transition-all duration-200">
+                    <div class="flex flex-col gap-4 text-left h-full">
+                        <div class="flex items-center justify-between">
+                            <svg class="size-10" 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="M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 11-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 004.486-6.336l-3.276 3.277a3.004 3.004 0 01-2.25-2.25l3.276-3.276a4.5 4.5 0 00-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008z" />
+                            </svg>
+                            <span
+                                class="px-2 py-1 text-xs font-bold uppercase tracking-wide bg-neutral-100 dark:bg-coolgray-300 dark:text-neutral-400 rounded">
+                                Advanced
+                            </span>
+                        </div>
+                        <div>
+                            <h3 class="text-xl font-bold mb-2">Manual Installation</h3>
+                            <p class="text-sm dark:text-neutral-400">
+                                Fill the GitHub App form manually. For self-hosted GitHub Enterprise or custom permission setups.
+                            </p>
+                        </div>
+                        <div class="mt-auto pt-2">
+                            <x-forms.button canGate="create" :canResource="$github_app" class="w-full justify-center" wire:click.prevent="createGithubAppManually">
+                                Continue
+                            </x-forms.button>
+                        </div>
+                    </div>
+                </section>
+            @else
+                <div class="pb-10">
+                    <x-callout type="danger" title="Insufficient Permissions">
+                        You don't have permission to create new GitHub Apps. Please contact your team administrator.
+                    </x-callout>
                 </div>
             @endcan
-            <div class="flex flex-col">
-                <div class="pb-10">
-                    @can('create', $github_app)
-                        @if (!isCloud() || isDev())
-                            <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 (config('app.url'))
-                                        <option value="{{ config('app.url') }}">Use {{ config('app.url') }}</option>
-                                    @endif
-                                </x-forms.select>
-                                <x-forms.button isHighlighted
-                                    x-on:click.prevent="createGithubApp('{{ $webhook_endpoint }}','{{ $preview_deployment_permissions }}',{{ $administration }})">
-                                    Register Now
-                                </x-forms.button>
-                            </div>
-                        @else
-                            <div class="flex flex-col sm:flex-row gap-2">
-                                <h2>Register a GitHub App</h2>
-                                <x-forms.button isHighlighted
-                                    x-on:click.prevent="createGithubApp('{{ $webhook_endpoint }}','{{ $preview_deployment_permissions }}',{{ $administration }})">
-                                    Register Now
-                                </x-forms.button>
-                            </div>
-                            <div>You need to register a GitHub App before using this source.</div>
-                        @endif
-
-                        <div class="flex w-full flex-col gap-2 pt-4 sm:w-96">
-                            <x-forms.checkbox disabled id="default_permissions" label="Mandatory"
-                                helper="Contents: read<br>Metadata: read<br>Email: read" />
-                            <x-forms.checkbox id="preview_deployment_permissions" label="Preview Deployments "
-                                helper="Necessary for updating pull requests with useful comments (deployment status, links, etc.)<br><br>Pull Request: read & write" />
-                            {{-- <x-forms.checkbox id="administration" label="Administration (for Github Runners)"
-                            helper="Necessary for adding Github Runners to repositories.<br><br>Administration: read & write" /> --}}
-                        </div>
-                    @else
-                        <x-callout type="danger" title="Insufficient Permissions">
-                            You don't have permission to create new GitHub Apps. Please contact your team administrator.
-                        </x-callout>
-                    @endcan
-                </div>
             </div>
+        </div>
             <script>
-                function createGithubApp(webhook_endpoint, preview_deployment_permissions, administration) {
+                function createGithubApp(webhook_endpoint, use_custom_webhook_endpoint, custom_webhook_endpoint, preview_deployment_permissions, administration) {
                     const {
                         organization,
-                        uuid,
                         html_url
-                    } = @json($github_app);
-                    if (!webhook_endpoint) {
-                        alert('Please select a webhook endpoint.');
+                    } = @js($github_app->only(['organization', 'html_url']));
+                    const selectedEndpoint = webhook_endpoint ? webhook_endpoint.trim() : '';
+                    const customEndpoint = custom_webhook_endpoint ? custom_webhook_endpoint.trim() : '';
+                    if (use_custom_webhook_endpoint && !customEndpoint) {
+                        alert('Please enter a custom webhook endpoint.');
                         return;
                     }
-                    let baseUrl = webhook_endpoint;
+                    if (!use_custom_webhook_endpoint && !selectedEndpoint) {
+                        alert('Please enter a webhook endpoint.');
+                        return;
+                    }
+                    let baseUrl = (use_custom_webhook_endpoint ? customEndpoint : selectedEndpoint).replace(/\/+$/, '');
                     const name = @js($name);
+                    const manifestState = @js($manifestState);
                     const isDev = @js(config('app.env')) ===
                         'local';
                     const devWebhook = @js(config('constants.webhooks.dev_webhook'));
@@ -333,14 +400,14 @@
                         callback_urls: [`${baseUrl}/login/github/app`],
                         public: false,
                         request_oauth_on_install: false,
-                        setup_url: `${webhookBaseUrl}/source/github/install?source=${uuid}`,
+                        setup_url: `${webhookBaseUrl}/source/github/install`,
                         setup_on_update: true,
                         default_permissions,
                         default_events
                     };
                     const form = document.createElement('form');
                     form.setAttribute('method', 'post');
-                    form.setAttribute('action', `${html_url}/${path}?state=${uuid}`);
+                    form.setAttribute('action', `${html_url}/${path}?state=${manifestState}`);
                     const input = document.createElement('input');
                     input.setAttribute('id', 'manifest');
                     input.setAttribute('name', 'manifest');

resources/views/livewire/upgrade.blade.php

@@ -6,17 +6,17 @@
     })">
     @if ($isUpgradeAvailable)
         <div :class="{ 'z-40': modalOpen }" class="relative w-auto h-auto">
-            <button class="menu-item" @click="modalOpen=true" x-show="showProgress">
+            <button title="Upgrade in progress" aria-label="Upgrade in progress" class="menu-item" @click="modalOpen=true" x-show="showProgress">
                 <svg xmlns="http://www.w3.org/2000/svg"
-                    class="w-6 h-6 text-pink-500 transition-colors hover:text-pink-300 lds-heart" viewBox="0 0 24 24"
+                    class="text-pink-500 transition-colors menu-item-icon hover:text-pink-300 lds-heart" 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="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
                 </svg>
-                In progress
+                <span class="text-left menu-item-label" :class="collapsed && 'lg:hidden'">In progress</span>
             </button>
-            <button class="menu-item cursor-pointer" @click="modalOpen=true" x-show="!showProgress">
-                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-pink-500 transition-colors hover:text-pink-300"
+            <button title="Upgrade" aria-label="Upgrade" class="menu-item cursor-pointer" @click="modalOpen=true" x-show="!showProgress">
+                <svg xmlns="http://www.w3.org/2000/svg" class="text-pink-500 transition-colors menu-item-icon hover:text-pink-300"
                     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" />
@@ -25,7 +25,7 @@
                     <path d="M9 21h6" />
                     <path d="M9 18h6" />
                 </svg>
-                Upgrade
+                <span class="text-left menu-item-label" :class="collapsed && 'lg:hidden'">Upgrade</span>
             </button>
             <template x-teleport="body">
                 <div x-show="modalOpen"