Merge branch 'next' into fix_breadcrumb

2026-10-15 20:15:45 +00:00 · 2025-12-15 15:51:49 +01:00
commit 651e19fefe
@@ -19,7 +19,7 @@
        </div>
    @else
        <div class="dropdown-item" wire:click='deploy(true)'>
-            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
+            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" 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
@@ -8,133 +8,85 @@
            data_get($application, 'previews', collect([]))->count() > 0 ||
            data_get($application, 'ports_mappings_array')) &&
            data_get($application, 'settings.is_raw_compose_deployment_enabled') !== true)
-        @if (data_get($application, 'gitBrancLocation'))
-            <a target="_blank" class="dropdown-item" href="{{ $application->gitBranchLocation }}">
-                <x-git-icon git="{{ $application->source?->getMorphClass() }}" />
-                Git Repository
-            </a>
-        @endif
-        @if (data_get($application, 'build_pack') === 'dockercompose')
-            @foreach (collect(json_decode($this->application->docker_compose_domains)) as $fqdn)
-                @if (data_get($fqdn, 'domain'))
-                    @foreach (explode(',', data_get($fqdn, 'domain')) as $domain)
-                        <a class="dropdown-item" target="_blank" href="{{ getFqdnWithoutPort($domain) }}">
-                            <svg 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="M9 15l6 -6" />
-                                <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
-                                <path
-                                    d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
-                            </svg>{{ getFqdnWithoutPort($domain) }}
-                        </a>
-                    @endforeach
-                @endif
-            @endforeach
-        @endif
-        @if (data_get($application, 'fqdn'))
-            @foreach (str(data_get($application, 'fqdn'))->explode(',') as $fqdn)
-                <a class="dropdown-item" target="_blank" href="{{ getFqdnWithoutPort($fqdn) }}">
-                    <svg 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="M9 15l6 -6" />
-                        <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
-                        <path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
-                    </svg>{{ getFqdnWithoutPort($fqdn) }}
+        <div class="flex flex-col gap-1">
+            @if (data_get($application, 'gitBrancLocation'))
+                <a target="_blank" class="dropdown-item" href="{{ $application->gitBranchLocation }}">
+                    <x-git-icon git="{{ $application->source?->getMorphClass() }}" />
+                    Git Repository
                </a>
-            @endforeach
-        @endif
-        @if (data_get($application, 'previews', collect())->count() > 0)
-            @if (data_get($application, 'build_pack') === 'dockercompose')
-                @foreach ($application->previews as $preview)
-                    @foreach (collect(json_decode($preview->docker_compose_domains)) as $fqdn)
-                        @if (data_get($fqdn, 'domain'))
-                            @foreach (explode(',', data_get($fqdn, 'domain')) as $domain)
-                                <a class="dropdown-item" target="_blank" href="{{ getFqdnWithoutPort($domain) }}">
-                                    <svg 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="M9 15l6 -6" />
-                                        <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
-                                        <path
-                                            d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
-                                    </svg>PR{{ data_get($preview, 'pull_request_id') }} |
-                                    {{ getFqdnWithoutPort($domain) }}
-                                </a>
-                            @endforeach
-                        @endif
-                    @endforeach
-                @endforeach
-            @else
-                @foreach (data_get($application, 'previews') as $preview)
-                    @if (data_get($preview, 'fqdn'))
-                        <a class="dropdown-item" target="_blank"
-                            href="{{ getFqdnWithoutPort(data_get($preview, 'fqdn')) }}">
-                            <svg 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="M9 15l6 -6" />
-                                <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
-                                <path
-                                    d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
-                            </svg>
-                            PR{{ data_get($preview, 'pull_request_id') }} |
-                            {{ data_get($preview, 'fqdn') }}
-                        </a>
-                    @endif
-                @endforeach
            @endif
-        @endif
-        @if (data_get($application, 'ports_mappings_array'))
-            @foreach ($application->ports_mappings_array as $port)
-                @if ($application->destination->server->id === 0)
-                    <a class="dropdown-item" target="_blank" href="http://localhost:{{ explode(':', $port)[0] }}">
-                        <svg 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="M9 15l6 -6" />
-                            <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
-                            <path
-                                d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
-                        </svg>
-                        Port {{ $port }}
-                    </a>
-                @else
-                    <a class="dropdown-item" target="_blank"
-                        href="http://{{ $application->destination->server->ip }}:{{ explode(':', $port)[0] }}">
-                        <svg 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="M9 15l6 -6" />
-                            <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
-                            <path
-                                d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
-                        </svg>
-                        {{ $application->destination->server->ip }}:{{ explode(':', $port)[0] }}
-                    </a>
-                    @if (count($application->additional_servers) > 0)
-                        @foreach ($application->additional_servers as $server)
-                            <a class="dropdown-item" target="_blank"
-                                href="http://{{ $server->ip }}:{{ explode(':', $port)[0] }}">
-                                <svg 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="M9 15l6 -6" />
-                                    <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
-                                    <path
-                                        d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
-                                </svg>
-                                {{ $server->ip }}:{{ explode(':', $port)[0] }}
+            @if (data_get($application, 'build_pack') === 'dockercompose')
+                @foreach (collect(json_decode($this->application->docker_compose_domains)) as $fqdn)
+                    @if (data_get($fqdn, 'domain'))
+                        @foreach (explode(',', data_get($fqdn, 'domain')) as $domain)
+                            <a class="dropdown-item" target="_blank" href="{{ getFqdnWithoutPort($domain) }}">
+                                <x-external-link class="size-4" />{{ getFqdnWithoutPort($domain) }}
                            </a>
                        @endforeach
                    @endif
+                @endforeach
+            @endif
+            @if (data_get($application, 'fqdn'))
+                @foreach (str(data_get($application, 'fqdn'))->explode(',') as $fqdn)
+                    <a class="dropdown-item" target="_blank" href="{{ getFqdnWithoutPort($fqdn) }}">
+                        <x-external-link class="size-4" />{{ getFqdnWithoutPort($fqdn) }}
+                    </a>
+                @endforeach
+            @endif
+            @if (data_get($application, 'previews', collect())->count() > 0)
+                @if (data_get($application, 'build_pack') === 'dockercompose')
+                    @foreach ($application->previews as $preview)
+                        @foreach (collect(json_decode($preview->docker_compose_domains)) as $fqdn)
+                            @if (data_get($fqdn, 'domain'))
+                                @foreach (explode(',', data_get($fqdn, 'domain')) as $domain)
+                                    <a class="dropdown-item" target="_blank" href="{{ getFqdnWithoutPort($domain) }}">
+                                        <x-external-link class="size-4" />PR{{ data_get($preview, 'pull_request_id') }}
+                                        |
+                                        {{ getFqdnWithoutPort($domain) }}
+                                    </a>
+                                @endforeach
+                            @endif
+                        @endforeach
+                    @endforeach
+                @else
+                    @foreach (data_get($application, 'previews') as $preview)
+                        @if (data_get($preview, 'fqdn'))
+                            <a class="dropdown-item" target="_blank"
+                                href="{{ getFqdnWithoutPort(data_get($preview, 'fqdn')) }}">
+                                <x-external-link class="size-4" />
+                                PR{{ data_get($preview, 'pull_request_id') }} |
+                                {{ data_get($preview, 'fqdn') }}
+                            </a>
+                        @endif
+                    @endforeach
                @endif
-            @endforeach
-        @endif
+            @endif
+            @if (data_get($application, 'ports_mappings_array'))
+                @foreach ($application->ports_mappings_array as $port)
+                    @if ($application->destination->server->id === 0)
+                        <a class="dropdown-item" target="_blank" href="http://localhost:{{ explode(':', $port)[0] }}">
+                            <x-external-link class="size-4" />
+                            Port {{ $port }}
+                        </a>
+                    @else
+                        <a class="dropdown-item" target="_blank"
+                            href="http://{{ $application->destination->server->ip }}:{{ explode(':', $port)[0] }}">
+                            <x-external-link class="size-4" />
+                            {{ $application->destination->server->ip }}:{{ explode(':', $port)[0] }}
+                        </a>
+                        @if (count($application->additional_servers) > 0)
+                            @foreach ($application->additional_servers as $server)
+                                <a class="dropdown-item" target="_blank"
+                                    href="http://{{ $server->ip }}:{{ explode(':', $port)[0] }}">
+                                    <x-external-link class="size-4" />
+                                    {{ $server->ip }}:{{ explode(':', $port)[0] }}
+                                </a>
+                            @endforeach
+                        @endif
+                    @endif
+                @endforeach
+            @endif
+        </div>
    @else
        <div class="px-2 py-1.5 text-xs">No links available</div>
    @endif
@@ -0,0 +1,47 @@
+@props(['currentStep' => 1, 'totalSteps' => 3])
+
+<div class="w-full max-w-2xl mx-auto mb-8">
+    <div class="flex items-center justify-between">
+        @for ($i = 1; $i <= $totalSteps; $i++)
+            <div class="flex items-center {{ $i < $totalSteps ? 'flex-1' : '' }}">
+                <div class="flex flex-col items-center">
+                    <div
+                        class="flex items-center justify-center size-10 rounded-full border-2 transition-all duration-300
+                        {{ $i < $currentStep ? 'bg-success border-success' : 'border-neutral-200 dark:border-coolgray-300' }}
+                        {{ $i === $currentStep ? 'bg-white dark:bg-coolgray-500' : '' }}
+                       ">
+                        @if ($i < $currentStep)
+                            <svg class="size-5 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+                                fill="currentColor">
+                                <path fill-rule="evenodd"
+                                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                                    clip-rule="evenodd" />
+                            </svg>
+                        @else
+                            <span
+                                class="text-sm font-bold text-black dark:text-white">
+                                {{ $i }}
+                            </span>
+                        @endif
+                    </div>
+                    <span
+                        class="mt-2 text-xs font-medium text-black dark:text-white">
+                        @if ($i === 1)
+                            Server
+                        @elseif ($i === 2)
+                            Connection
+                        @elseif ($i === 3)
+                            Complete
+                        @endif
+                    </span>
+                </div>
+                @if ($i < $totalSteps)
+                    <div
+                        class="flex-1 h-0.5 mx-4 transition-all duration-300
+                        {{ $i < $currentStep ? 'bg-success' : 'bg-neutral-200 dark:bg-coolgray-300' }}">
+                    </div>
+                @endif
+            </div>
+        @endfor
+    </div>
+</div>
@@ -1,25 +1,29 @@
-<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
-    <div class="box-border col-span-2 lg:min-w-[24rem] lg:min-h-[21rem]">
-        <h1 class="text-2xl font-bold lg:text-5xl">{{ $title }}</h1>
-        <div class="py-6">
+<div class="w-full max-w-4xl">
+    <div class=" rounded-lg shadow-sm border border-neutral-200 dark:border-coolgray-300 overflow-hidden">
+        <div class="p-8 lg:p-12">
+            <h1 class="text-3xl font-bold lg:text-4xl mb-4">{{ $title }}</h1>
            @isset($question)
-                <p class="dark:text-neutral-400">
+                <div class="text-base lg:text-lg dark:text-neutral-400 mb-8">
                    {{ $question }}
-                </p>
+                </div>
            @endisset
+
+            @if ($actions)
+                <div class="flex flex-col gap-4">
+                    {{ $actions }}
+                </div>
+            @endif
        </div>
-        @if ($actions)
-            <div class="flex flex-col flex-wrap gap-4 lg:items-center md:flex-row">
-                {{ $actions }}
+
+        @isset($explanation)
+            <div class=" border-t border-neutral-200 dark:border-coolgray-300 p-8 lg:p-12 ">
+                <h3 class="text-sm font-bold uppercase tracking-wide mb-4 dark:text-neutral-400">
+                    Technical Details
+                </h3>
+                <div class="space-y-3 text-sm dark:text-neutral-400">
+                    {{ $explanation }}
+                </div>
            </div>
-        @endif
+        @endisset
    </div>
-    @isset($explanation)
-        <div class="col-span-1">
-            <h3 class="pb-8 font-bold">Explanation</h3>
-            <div class="space-y-4">
-                {{ $explanation }}
-            </div>
-        </div>
-    @endisset
 </div>
@@ -0,0 +1,69 @@
+@props(['type' => 'warning', 'title' => 'Warning', 'class' => '', 'dismissible' => false, 'onDismiss' => null])
+
+@php
+    $icons = [
+        'warning' => '<svg class="w-5 h-5 text-warning-600 dark:text-warning-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>',
+
+        'danger' => '<svg class="w-5 h-5 text-red-600 dark:text-red-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path></svg>',
+
+        'info' => '<svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>',
+
+        'success' => '<svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>'
+    ];
+
+    $colors = [
+        'warning' => [
+            'bg' => 'bg-warning-50 dark:bg-warning-900/30',
+            'border' => 'border-warning-300 dark:border-warning-800',
+            'title' => 'text-warning-800 dark:text-warning-300',
+            'text' => 'text-warning-700 dark:text-warning-200'
+        ],
+        'danger' => [
+            'bg' => 'bg-red-50 dark:bg-red-900/30',
+            'border' => 'border-red-300 dark:border-red-800',
+            'title' => 'text-red-800 dark:text-red-300',
+            'text' => 'text-red-700 dark:text-red-200'
+        ],
+        'info' => [
+            'bg' => 'bg-blue-50 dark:bg-blue-900/30',
+            'border' => 'border-blue-300 dark:border-blue-800',
+            'title' => 'text-blue-800 dark:text-blue-300',
+            'text' => 'text-blue-700 dark:text-blue-200'
+        ],
+        'success' => [
+            'bg' => 'bg-green-50 dark:bg-green-900/30',
+            'border' => 'border-green-300 dark:border-green-800',
+            'title' => 'text-green-800 dark:text-green-300',
+            'text' => 'text-green-700 dark:text-green-200'
+        ]
+    ];
+
+    $colorScheme = $colors[$type] ?? $colors['warning'];
+    $icon = $icons[$type] ?? $icons['warning'];
+@endphp
+
+<div {{ $attributes->merge(['class' => 'relative p-4 border rounded-lg ' . $colorScheme['bg'] . ' ' . $colorScheme['border'] . ' ' . $class]) }}>
+    <div class="flex items-start">
+        <div class="flex-shrink-0">
+            {!! $icon !!}
+        </div>
+        <div class="ml-3 {{ $dismissible ? 'pr-8' : '' }}">
+            <div class="text-base font-bold {{ $colorScheme['title'] }}">
+                {{ $title }}
+            </div>
+            <div class="mt-2 text-sm {{ $colorScheme['text'] }}">
+                {{ $slot }}
+            </div>
+        </div>
+        @if($dismissible && $onDismiss)
+            <button type="button" @click.stop="{{ $onDismiss }}"
+                    class="absolute top-2 right-2 p-1 rounded hover:bg-black/10 dark:hover:bg-white/10 transition-colors"
+                    aria-label="Dismiss">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
+                     stroke="currentColor" class="w-4 h-4 {{ $colorScheme['text'] }}">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+            </button>
+        @endif
+    </div>
+</div>
@@ -0,0 +1,87 @@
+@props([
+    'conflicts' => [],
+    'showModal' => false,
+    'confirmAction' => 'confirmDomainUsage',
+])
+
+@if ($showModal && count($conflicts) > 0)
+    <div x-data="{ modalOpen: true }" x-init="$nextTick(() => { modalOpen = true })"
+        @keydown.escape.window="modalOpen = false; $wire.set('showDomainConflictModal', false)"
+        :class="{ 'z-40': modalOpen }" class="relative w-auto h-auto">
+        <template x-teleport="body">
+            <div x-show="modalOpen"
+                class="fixed top-0 lg:pt-10 left-0 z-99 flex items-start justify-center w-screen h-screen" x-cloak>
+                <div x-show="modalOpen" class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-xs"></div>
+                <div x-show="modalOpen" x-trap.inert.noscroll="modalOpen" x-transition:enter="ease-out duration-100"
+                    x-transition:enter-start="opacity-0 -translate-y-2 sm:scale-95"
+                    x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+                    x-transition:leave="ease-in duration-100"
+                    x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+                    x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
+                    class="relative w-full py-6 border rounded-sm min-w-full lg:min-w-[36rem] max-w-[48rem] bg-neutral-100 border-neutral-400 dark:bg-base px-7 dark:border-coolgray-300">
+                    <div class="flex justify-between items-center pb-3">
+                        <h2 class="pr-8 font-bold">Domain Already In Use</h2>
+                        <button @click="modalOpen = false; $wire.set('showDomainConflictModal', false)"
+                            class="flex absolute top-2 right-2 justify-center items-center w-8 h-8 rounded-full dark:text-white hover:bg-coolgray-300">
+                            <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                stroke-width="1.5" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        </button>
+                    </div>
+                    <div class="relative w-auto">
+                        <x-callout type="danger" title="Domain Conflict Detected" class="mb-4">
+                            The following domain(s) are already in use by other resources. Using the same domain for
+                            multiple resources can cause routing conflicts and unpredictable behavior.
+                        </x-callout>
+
+                        <div class="mb-4">
+                            <ul class="space-y-2">
+                                @foreach ($conflicts as $conflict)
+                                    <li class="flex items-start text-red-500">
+                                        <div>
+                                            <strong>{{ $conflict['domain'] }}</strong> is used by
+                                            @if ($conflict['resource_type'] === 'instance')
+                                                <strong>{{ $conflict['resource_name'] }}</strong>
+                                            @else
+                                                <a href="{{ $conflict['resource_link'] }}" target="_blank"
+                                                    class="underline hover:text-red-400">
+                                                    {{ $conflict['resource_name'] }}
+                                                </a>
+                                            @endif
+                                            ({{ $conflict['resource_type'] }})
+                                        </div>
+                                    </li>
+                                @endforeach
+                            </ul>
+                        </div>
+
+                        <x-callout type="warning" title="What will happen if you continue?" class="mb-4">
+                            @if (isset($consequences))
+                                {{ $consequences }}
+                            @else
+                                <ul class="mt-2 ml-4 list-disc">
+                                    <li>Only one resource will be accessible at this domain</li>
+                                    <li>The routing behavior will be unpredictable</li>
+                                    <li>You may experience service disruptions</li>
+                                    <li>SSL certificates might not work correctly</li>
+                                </ul>
+                            @endif
+                        </x-callout>
+
+                        <div class="flex flex-wrap gap-2 justify-between mt-4">
+                            <x-forms.button @click="modalOpen = false; $wire.set('showDomainConflictModal', false)"
+                                class="w-auto dark:bg-coolgray-200 dark:hover:bg-coolgray-300">
+                                Cancel
+                            </x-forms.button>
+                            <x-forms.button wire:click="{{ $confirmAction }}" @click="modalOpen = false" class="w-auto"
+                                isError>
+                                I understand, proceed anyway
+                            </x-forms.button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </div>
+@endif
@@ -16,7 +16,8 @@
    <div x-show="dropdownOpen" @click.away="dropdownOpen=false" x-transition:enter="ease-out duration-200"
        x-transition:enter-start="-translate-y-2" x-transition:enter-end="translate-y-0"
        class="absolute top-0 z-50 mt-6 min-w-max" x-cloak>
-        <div class="p-1 mt-1 bg-white border rounded-sm shadow-sm dark:bg-coolgray-200 dark:border-black border-neutral-300">
+        <div
+            class="p-1 mt-1 bg-white border rounded-sm shadow-sm dark:bg-coolgray-200 dark:border-coolgray-300 border-neutral-300">
            {{ $slot }}
        </div>
    </div>
@@ -0,0 +1,37 @@
+@props(['problematicVariables' => []])
+
+<template x-data="{
+    problematicVars: @js($problematicVariables),
+    get showWarning() {
+        const currentKey = $wire.key;
+        const currentValue = $wire.value;
+        const isBuildtime = $wire.is_buildtime;
+
+        if (!isBuildtime || !currentKey) return false;
+        if (!this.problematicVars.hasOwnProperty(currentKey)) return false;
+
+        const config = this.problematicVars[currentKey];
+        if (!config || !config.problematic_values) return false;
+
+        // Check if current value matches any problematic values
+        const lowerValue = String(currentValue).toLowerCase();
+        return config.problematic_values.some(pv => pv.toLowerCase() === lowerValue);
+    },
+    get warningMessage() {
+        if (!this.showWarning) return null;
+        const config = this.problematicVars[$wire.key];
+        if (!config) return null;
+        return config.issue;
+    },
+    get recommendation() {
+        if (!this.showWarning) return null;
+        const config = this.problematicVars[$wire.key];
+        if (!config) return null;
+        return `Recommendation: ${config.recommendation}`;
+    }
+}" x-if="showWarning">
+    <x-callout type="warning" title="Caution">
+        <div class="text-sm" x-text="warningMessage"></div>
+        <div class="text-sm" x-text="recommendation"></div>
+    </x-callout>
+</template>
@@ -1,7 +1,6 @@
-<svg class="inline-flex w-3 h-3 ml-1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
-    focusable="false" viewBox="0 0 24 24">
-    <path d="M0 0h24v24H0V0z" fill="none">
-    </path>
-    <path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z" fill="currentColor">
-    </path>
+@props(['class' => 'inline-flex w-3 h-3 dark:text-neutral-400 text-black'])
+
+<svg {{ $attributes->merge(['class' => $class]) }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+        d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
 </svg>
@@ -32,14 +32,14 @@
            <input type="checkbox" @disabled($disabled) {{ $attributes->merge(['class' => $defaultClass]) }}
                wire:loading.attr="disabled"
                wire:click='{{ $instantSave === 'instantSave' || $instantSave == '1' ? 'instantSave' : $instantSave }}'
-                wire:model={{ $id }} @if ($checked) checked @endif />
+                wire:model={{ $modelBinding }} id="{{ $htmlId }}" @if ($checked) checked @endif />
        @else
            @if ($domValue)
                <input type="checkbox" @disabled($disabled) {{ $attributes->merge(['class' => $defaultClass]) }}
-                    value={{ $domValue }} @if ($checked) checked @endif />
+                    value={{ $domValue }} id="{{ $htmlId }}" @if ($checked) checked @endif />
            @else
                <input type="checkbox" @disabled($disabled) {{ $attributes->merge(['class' => $defaultClass]) }}
-                    wire:model={{ $value ?? $id }} @if ($checked) checked @endif />
+                    wire:model={{ $value ?? $modelBinding }} id="{{ $htmlId }}" @if ($checked) checked @endif />
            @endif
        @endif
    </label>
@@ -1,6 +1,6 @@
 <div class="w-full">
-    <label>
-        @if ($label)
+    @if ($label)
+        <label class="flex gap-1 items-center mb-1 text-sm font-medium {{ $disabled ? 'text-neutral-600' : '' }}">
            {{ $label }}
            @if ($required)
                <x-highlighted text="*" />
@@ -8,37 +8,281 @@
            @if ($helper)
                <x-helper :helper="$helper" />
            @endif
-        @endif
-        <input list={{ $id }} {{ $attributes->merge(['class' => $defaultClass]) }} @required($required)
-            wire:dirty.class.remove='dark:text-white' wire:dirty.class="text-black bg-warning" wire:loading.attr="disabled"
-            name={{ $id }}
-            @if ($attributes->whereStartsWith('wire:model')->first()) {{ $attributes->whereStartsWith('wire:model')->first() }} @else wire:model={{ $id }} @endif
-            @if ($attributes->whereStartsWith('onUpdate')->first()) wire:change={{ $attributes->whereStartsWith('onUpdate')->first() }} wire:keydown.enter={{ $attributes->whereStartsWith('onUpdate')->first() }} wire:blur={{ $attributes->whereStartsWith('onUpdate')->first() }} @else wire:change={{ $id }} wire:blur={{ $id }} wire:keydown.enter={{ $id }} @endif>
-        <datalist id={{ $id }}>
-            {{ $slot }}
-        </datalist>
-    </label>
-    @error($id)
+        </label>
+    @endif
+
+    @if ($multiple)
+        {{-- Multiple Selection Mode with Alpine.js --}}
+        <div x-data="{
+                open: false,
+                search: '',
+                selected: @entangle($modelBinding).live,
+                options: [],
+                filteredOptions: [],
+
+                init() {
+                    this.options = Array.from(this.$refs.datalist.querySelectorAll('option')).map(opt => {
+                        // Try to parse as integer, fallback to string
+                        let value = opt.value;
+                        const intValue = parseInt(value, 10);
+                        if (!isNaN(intValue) && intValue.toString() === value) {
+                            value = intValue;
+                        }
+                        return {
+                            value: value,
+                            text: opt.textContent.trim()
+                        };
+                    });
+                    this.filteredOptions = this.options;
+                    // Ensure selected is always an array
+                    if (!Array.isArray(this.selected)) {
+                        this.selected = [];
+                    }
+                },
+
+                filterOptions() {
+                    if (!this.search) {
+                        this.filteredOptions = this.options;
+                        return;
+                    }
+                    const searchLower = this.search.toLowerCase();
+                    this.filteredOptions = this.options.filter(opt =>
+                        opt.text.toLowerCase().includes(searchLower)
+                    );
+                },
+
+                toggleOption(value) {
+                    // Ensure selected is an array
+                    if (!Array.isArray(this.selected)) {
+                        this.selected = [];
+                    }
+                    const index = this.selected.indexOf(value);
+                    if (index > -1) {
+                        this.selected.splice(index, 1);
+                    } else {
+                        this.selected.push(value);
+                    }
+                    this.search = '';
+                    this.filterOptions();
+                    // Focus input after selection
+                    this.$refs.searchInput.focus();
+                },
+
+                removeOption(value, event) {
+                    // Ensure selected is an array
+                    if (!Array.isArray(this.selected)) {
+                        this.selected = [];
+                        return;
+                    }
+                    // Prevent triggering container click
+                    event.stopPropagation();
+                    const index = this.selected.indexOf(value);
+                    if (index > -1) {
+                        this.selected.splice(index, 1);
+                    }
+                },
+
+                isSelected(value) {
+                    // Ensure selected is an array
+                    if (!Array.isArray(this.selected)) {
+                        return false;
+                    }
+                    return this.selected.includes(value);
+                },
+
+                getSelectedText(value) {
+                    const option = this.options.find(opt => opt.value == value);
+                    return option ? option.text : value;
+                }
+            }" @click.outside="open = false" class="relative">
+
+            {{-- Unified Input Container with Tags Inside --}}
+            <div @click="$refs.searchInput.focus()" x-data="{ focused: false }" @focusin="focused = true" @focusout="focused = false"
+                class="flex flex-wrap gap-1.5 max-h-40 overflow-y-auto scrollbar py-1.5  px-2 w-full text-sm rounded-sm border-0 bg-white dark:bg-coolgray-100 cursor-text px-1 text-black dark:text-white"
+                :style="focused ? 'box-shadow: inset 4px 0 0 #6b16ed, inset 0 0 0 2px #e5e5e5;' : 'box-shadow: inset 4px 0 0 transparent, inset 0 0 0 2px #e5e5e5;'"
+                x-init="$watch('focused', () => { if ($root.classList.contains('dark') || document.documentElement.classList.contains('dark')) { $el.style.boxShadow = focused ? 'inset 4px 0 0 #fcd452, inset 0 0 0 2px #242424' : 'inset 4px 0 0 transparent, inset 0 0 0 2px #242424'; } })"
+                :class="{
+                        'opacity-50': {{ $disabled ? 'true' : 'false' }}
+                    }" wire:loading.class="opacity-50"
+                wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]">
+
+                {{-- Selected Tags Inside Input --}}
+                <template x-for="value in selected" :key="value">
+                    <button type="button" @click.stop="removeOption(value, $event)"
+                        :disabled="{{ $disabled ? 'true' : 'false' }}"
+                        class="inline-flex items-center gap-1.5 px-2 py-0.5 text-xs bg-coolgray-200 dark:bg-coolgray-700 rounded whitespace-nowrap {{ $disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:bg-red-100 dark:hover:bg-red-900/20 hover:text-red-600 dark:hover:text-red-400' }}"
+                        aria-label="Remove">
+                        <span x-text="getSelectedText(value)" class="max-w-[200px] truncate"></span>
+                    </button>
+                </template>
+
+                {{-- Search Input (Borderless, Inside Container) --}}
+                <input type="text" x-model="search" x-ref="searchInput" @input="filterOptions()" @focus="open = true"
+                    @keydown.escape="open = false" :placeholder="(Array.isArray(selected) && selected.length > 0) ? '' :
+                        {{ json_encode($placeholder ?: 'Search...') }}" @required($required) @readonly($readonly)
+                    @disabled($disabled) @if ($autofocus) autofocus @endif
+                    class="flex-1 min-w-[120px] text-sm border-0 outline-none bg-transparent p-0 focus:ring-0 placeholder:text-neutral-400 dark:placeholder:text-neutral-600 text-black dark:text-white" />
+            </div>
+
+            {{-- Dropdown Options --}}
+            <div x-show="open && !{{ $disabled ? 'true' : 'false' }}" x-transition
+                class="absolute z-50 w-full mt-1 bg-white dark:bg-coolgray-100 border border-neutral-300 dark:border-coolgray-400 rounded shadow-lg max-h-60 overflow-auto scrollbar">
+
+                <template x-if="filteredOptions.length === 0">
+                    <div class="px-3 py-2 text-sm text-neutral-500 dark:text-neutral-400">
+                        No options found
+                    </div>
+                </template>
+
+                <template x-for="option in filteredOptions" :key="option.value">
+                    <div @click="toggleOption(option.value)"
+                        class="px-3 py-2 cursor-pointer hover:bg-neutral-100 dark:hover:bg-coolgray-200 flex items-center gap-3"
+                        :class="{ 'bg-neutral-50 dark:bg-coolgray-300': isSelected(option.value) }">
+                        <input type="checkbox" :checked="isSelected(option.value)"
+                            class="w-4 h-4 rounded border-neutral-300 dark:border-neutral-600 bg-white dark:bg-coolgray-100 text-black dark:text-white checked:bg-white dark:checked:bg-coolgray-100 focus:ring-coollabs dark:focus:ring-warning pointer-events-none"
+                            tabindex="-1">
+                        <span class="text-sm flex-1" x-text="option.text"></span>
+                    </div>
+                </template>
+            </div>
+
+            {{-- Hidden datalist for options --}}
+            <datalist x-ref="datalist" style="display: none;">
+                {{ $slot }}
+            </datalist>
+        </div>
+    @else
+            {{-- Single Selection Mode with Alpine.js --}}
+            <div x-data="{
+            open: false,
+            search: '',
+            selected: @entangle(($attributes->whereStartsWith('wire:model')->first() ? $attributes->wire('model')->value() : $modelBinding)).live,
+            options: [],
+            filteredOptions: [],
+
+            init() {
+                this.options = Array.from(this.$refs.datalist.querySelectorAll('option')).map(opt => {
+                    // Skip disabled options
+                    if (opt.disabled) {
+                        return null;
+                    }
+                    // Try to parse as integer, fallback to string
+                    let value = opt.value;
+                    const intValue = parseInt(value, 10);
+                    if (!isNaN(intValue) && intValue.toString() === value) {
+                        value = intValue;
+                    }
+                    return {
+                        value: value,
+                        text: opt.textContent.trim()
+                    };
+                }).filter(opt => opt !== null);
+                this.filteredOptions = this.options;
+            },
+
+            filterOptions() {
+                if (!this.search) {
+                    this.filteredOptions = this.options;
+                    return;
+                }
+                const searchLower = this.search.toLowerCase();
+                this.filteredOptions = this.options.filter(opt =>
+                    opt.text.toLowerCase().includes(searchLower)
+                );
+            },
+
+            selectOption(value) {
+                this.selected = value;
+                this.search = '';
+                this.open = false;
+                this.filterOptions();
+            },
+
+            openDropdown() {
+                if ({{ $disabled ? 'true' : 'false' }}) return;
+                this.open = true;
+                this.$nextTick(() => {
+                    if (this.$refs.searchInput) {
+                        this.$refs.searchInput.focus();
+                    }
+                });
+            },
+
+            getSelectedText() {
+                if (!this.selected || this.selected === 'default') return '';
+                const option = this.options.find(opt => opt.value == this.selected);
+                return option ? option.text : this.selected;
+            },
+
+            isDefaultValue() {
+                return !this.selected || this.selected === 'default' || this.selected === '';
+            }
+        }" @click.outside="open = false" class="relative">
+
+                {{-- Hidden input for form validation --}}
+                <input type="hidden" :value="selected" @required($required) />
+
+                {{-- Input Container --}}
+                <div @click="openDropdown()" x-data="{ focused: false }" @focusin="focused = true" @focusout="focused = false"
+                    class="flex items-center gap-2 py-1.5 w-full text-sm rounded-sm border-0 bg-white dark:bg-coolgray-100 cursor-text text-black dark:text-white"
+                    :style="focused ? 'box-shadow: inset 4px 0 0 #6b16ed, inset 0 0 0 2px #e5e5e5;' : 'box-shadow: inset 4px 0 0 transparent, inset 0 0 0 2px #e5e5e5;'"
+                    x-init="$watch('focused', () => { if ($root.classList.contains('dark') || document.documentElement.classList.contains('dark')) { $el.style.boxShadow = focused ? 'inset 4px 0 0 #fcd452, inset 0 0 0 2px #242424' : 'inset 4px 0 0 transparent, inset 0 0 0 2px #242424'; } })"
+                    :class="{
+                    'opacity-50': {{ $disabled ? 'true' : 'false' }}
+                }" wire:loading.class="opacity-50" wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]">
+
+                    {{-- Display Selected Value or Search Input --}}
+                    <div class="flex-1 flex items-center min-w-0 px-1">
+                        <template x-if="!isDefaultValue() && !open">
+                            <span class="text-sm flex-1 truncate text-black dark:text-white px-2"
+                                x-text="getSelectedText()"></span>
+                        </template>
+                        <input type="text" x-show="isDefaultValue() || open" x-model="search" x-ref="searchInput"
+                            @input="filterOptions()" @focus="open = true" @keydown.escape="open = false"
+                            :placeholder="{{ json_encode($placeholder ?: 'Search...') }}" @readonly($readonly)
+                            @disabled($disabled) @if ($autofocus) autofocus @endif
+                            class="flex-1 text-sm border-0 outline-none bg-transparent p-0 focus:ring-0 placeholder:text-neutral-400 dark:placeholder:text-neutral-600 text-black dark:text-white px-2" />
+                    </div>
+
+                    {{-- Dropdown Arrow --}}
+                    <button type="button" @click.stop="open = !open" :disabled="{{ $disabled ? 'true' : 'false' }}"
+                        class="shrink-0 text-neutral-400 px-2 {{ $disabled ? 'cursor-not-allowed' : 'cursor-pointer' }}">
+                        <svg class="w-4 h-4 transition-transform" :class="{ 'rotate-180': open }" fill="none"
+                            stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                        </svg>
+                    </button>
+                </div>
+
+                {{-- Dropdown Options --}}
+                <div x-show="open && !{{ $disabled ? 'true' : 'false' }}" x-transition
+                    class="absolute z-50 w-full mt-1 bg-white dark:bg-coolgray-100 border border-neutral-300 dark:border-coolgray-400 rounded shadow-lg max-h-60 overflow-auto scrollbar">
+
+                    <template x-if="filteredOptions.length === 0">
+                        <div class="px-3 py-2 text-sm text-neutral-500 dark:text-neutral-400">
+                            No options found
+                        </div>
+                    </template>
+
+                    <template x-for="option in filteredOptions" :key="option.value">
+                        <div @click="selectOption(option.value)"
+                            class="px-3 py-2 cursor-pointer hover:bg-neutral-100 dark:hover:bg-coolgray-200"
+                            :class="{ 'bg-neutral-50 dark:bg-coolgray-300': selected == option.value }">
+                            <span class="text-sm" x-text="option.text"></span>
+                        </div>
+                    </template>
+                </div>
+
+                {{-- Hidden datalist for options --}}
+                <datalist x-ref="datalist" style="display: none;">
+                    {{ $slot }}
+                </datalist>
+            </div>
+    @endif
+
+    @error($modelBinding)
        <label class="label">
            <span class="text-red-500 label-text-alt">{{ $message }}</span>
        </label>
    @enderror
-    {{-- <script>
-        const input = document.querySelector(`input[list={{ $id }}]`);
-        input.addEventListener('focus', function(e) {
-            const input = e.target.value;
-            const datalist = document.getElementById('{{ $id }}');
-            if (datalist.options) {
-                for (let option of datalist.options) {
-                    // change background color to red on all options
-                    option.style.display = "none";
-                    if (option.value.includes(input)) {
-                        option.style.display = "block";
-                    }
-
-
-                }
-            }
-        });
-    </script> --}}
-</div>
+</div>
@@ -0,0 +1,274 @@
+<div class="w-full">
+    @if ($label)
+        <label class="flex gap-1 items-center mb-1 text-sm font-medium">{{ $label }}
+            @if ($required)
+                <x-highlighted text="*" />
+            @endif
+            @if ($helper)
+                <x-helper :helper="$helper" />
+            @endif
+        </label>
+    @endif
+
+    <div class="relative" x-data="{
+            type: '{{ $type }}',
+            showDropdown: false,
+            suggestions: [],
+            selectedIndex: 0,
+            cursorPosition: 0,
+            currentScope: null,
+            availableScopes: ['team', 'project', 'environment'],
+            availableVars: @js($availableVars),
+            scopeUrls: @js($scopeUrls),
+
+            handleInput() {
+                const input = this.$refs.input;
+                if (!input) return;
+
+                const value = input.value || '';
+
+                this.cursorPosition = input.selectionStart || 0;
+                const textBeforeCursor = value.substring(0, this.cursorPosition);
+
+                const openBraces = '{' + '{';
+                const lastBraceIndex = textBeforeCursor.lastIndexOf(openBraces);
+
+                if (lastBraceIndex === -1) {
+                    this.showDropdown = false;
+                    return;
+                }
+
+                if (lastBraceIndex > 0 && textBeforeCursor[lastBraceIndex - 1] === '{') {
+                    this.showDropdown = false;
+                    return;
+                }
+
+                const textAfterBrace = textBeforeCursor.substring(lastBraceIndex);
+                const closeBraces = '}' + '}';
+                if (textAfterBrace.includes(closeBraces)) {
+                    this.showDropdown = false;
+                    return;
+                }
+
+                const content = textAfterBrace.substring(2).trim();
+
+                if (content === '') {
+                    this.currentScope = null;
+                    this.suggestions = this.availableScopes.map(scope => ({
+                        type: 'scope',
+                        value: scope,
+                        display: scope
+                    }));
+                    this.selectedIndex = 0;
+                    this.showDropdown = true;
+                } else if (content.includes('.')) {
+                    const [scope, partial] = content.split('.');
+
+                    if (!this.availableScopes.includes(scope)) {
+                        this.showDropdown = false;
+                        return;
+                    }
+
+                    this.currentScope = scope;
+                    const scopeVars = this.availableVars[scope] || [];
+                    const filtered = scopeVars.filter(v =>
+                        v.toLowerCase().includes((partial || '').toLowerCase())
+                    );
+
+                    if (filtered.length === 0 && scopeVars.length === 0) {
+                        this.suggestions = [];
+                        this.showDropdown = true;
+                    } else {
+                        this.suggestions = filtered.map(varName => ({
+                            type: 'variable',
+                            value: varName,
+                            display: `${scope}.${varName}`,
+                            scope: scope
+                        }));
+                        this.selectedIndex = 0;
+                        this.showDropdown = filtered.length > 0;
+                    }
+                } else {
+                    this.currentScope = null;
+                    const filtered = this.availableScopes.filter(scope =>
+                        scope.toLowerCase().includes(content.toLowerCase())
+                    );
+
+                    this.suggestions = filtered.map(scope => ({
+                        type: 'scope',
+                        value: scope,
+                        display: scope
+                    }));
+                    this.selectedIndex = 0;
+                    this.showDropdown = filtered.length > 0;
+                }
+            },
+
+            getScopeUrl(scope) {
+                return this.scopeUrls[scope] || this.scopeUrls['default'];
+            },
+
+            selectSuggestion(suggestion) {
+                const input = this.$refs.input;
+                if (!input) return;
+
+                const value = input.value || '';
+                const textBeforeCursor = value.substring(0, this.cursorPosition);
+                const textAfterCursor = value.substring(this.cursorPosition);
+                const openBraces = '{' + '{';
+                const lastBraceIndex = textBeforeCursor.lastIndexOf(openBraces);
+
+                if (suggestion.type === 'scope') {
+                    const newText = value.substring(0, lastBraceIndex) +
+                                  openBraces + ' ' + suggestion.value + '.' +
+                                  textAfterCursor;
+                    input.value = newText;
+                    this.cursorPosition = lastBraceIndex + 3 + suggestion.value.length + 1;
+
+                    this.$nextTick(() => {
+                        input.setSelectionRange(this.cursorPosition, this.cursorPosition);
+                        input.focus();
+                        this.handleInput();
+                    });
+                } else {
+                    const closeBraces = '}' + '}';
+                    const newText = value.substring(0, lastBraceIndex) +
+                                  openBraces + ' ' + suggestion.display + ' ' + closeBraces +
+                                  textAfterCursor;
+                    input.value = newText;
+                    this.cursorPosition = lastBraceIndex + 3 + suggestion.display.length + 3;
+
+                    input.dispatchEvent(new Event('input'));
+
+                    this.showDropdown = false;
+                    this.selectedIndex = 0;
+
+                    this.$nextTick(() => {
+                        input.setSelectionRange(this.cursorPosition, this.cursorPosition);
+                        input.focus();
+                    });
+                }
+            },
+
+            handleKeydown(event) {
+                if (!this.showDropdown) return;
+                if (!this.suggestions || this.suggestions.length === 0) return;
+
+                if (event.key === 'ArrowDown') {
+                    event.preventDefault();
+                    this.selectedIndex = (this.selectedIndex + 1) % this.suggestions.length;
+                    this.$nextTick(() => {
+                        const el = document.getElementById('suggestion-' + this.selectedIndex);
+                        if (el) {
+                            el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                        }
+                    });
+                } else if (event.key === 'ArrowUp') {
+                    event.preventDefault();
+                    this.selectedIndex = this.selectedIndex <= 0 ? this.suggestions.length - 1 : this.selectedIndex - 1;
+                    this.$nextTick(() => {
+                        const el = document.getElementById('suggestion-' + this.selectedIndex);
+                        if (el) {
+                            el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                        }
+                    });
+                } else if (event.key === 'Enter' && this.showDropdown) {
+                    event.preventDefault();
+                    if (this.suggestions[this.selectedIndex]) {
+                        this.selectSuggestion(this.suggestions[this.selectedIndex]);
+                    }
+                } else if (event.key === 'Escape') {
+                    this.showDropdown = false;
+                }
+            }
+        }"
+        @click.outside="showDropdown = false">
+
+        @if ($type === 'password' && $allowToPeak)
+            <div x-on:click="changePasswordFieldType"
+                class="flex absolute inset-y-0 right-0 items-center pr-2 cursor-pointer dark:hover:text-white z-10">
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
+                    stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                    <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
+                    <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
+                </svg>
+            </div>
+        @endif
+
+        <input
+            x-ref="input"
+            @input="handleInput()"
+            @keydown="handleKeydown($event)"
+            @click="handleInput()"
+            autocomplete="{{ $autocomplete }}"
+            {{ $attributes->merge(['class' => $defaultClass]) }}
+            @required($required)
+            @readonly($readonly)
+            @if ($modelBinding !== 'null')
+                wire:model="{{ $modelBinding }}"
+                wire:dirty.class="dark:border-l-warning border-l-coollabs border-l-4"
+            @endif
+            wire:loading.attr="disabled"
+            @if ($type === 'password')
+                :type="type"
+            @else
+                type="{{ $type }}"
+            @endif
+            @disabled($disabled)
+            @if ($htmlId !== 'null') id="{{ $htmlId }}" @endif
+            name="{{ $name }}"
+            placeholder="{{ $attributes->get('placeholder') }}"
+            @if ($autofocus) autofocus @endif>
+
+        {{-- Dropdown for suggestions --}}
+        <div x-show="showDropdown"
+             x-transition
+             class="absolute z-[60] w-full mt-1 bg-white dark:bg-coolgray-100 border border-neutral-300 dark:border-coolgray-400 rounded shadow-lg">
+
+            <template x-if="suggestions.length === 0 && currentScope">
+                <div class="px-3 py-2 text-sm text-neutral-500 dark:text-neutral-400">
+                    <div>No shared variables found in <span class="font-semibold" x-text="currentScope"></span> scope.</div>
+                    <a :href="getScopeUrl(currentScope)"
+                       class="text-coollabs dark:text-warning hover:underline text-xs mt-1 inline-block"
+                       target="_blank">
+                        Add <span x-text="currentScope"></span> variables →
+                    </a>
+                </div>
+            </template>
+
+            <div x-show="suggestions.length > 0"
+                 x-ref="dropdownList"
+                 class="max-h-48 overflow-y-scroll"
+                 style="scrollbar-width: thin;">
+                <template x-for="(suggestion, index) in suggestions" :key="index">
+                    <div :id="'suggestion-' + index"
+                         @click="selectSuggestion(suggestion)"
+                         class="px-3 py-2 cursor-pointer hover:bg-neutral-100 dark:hover:bg-coolgray-200 flex items-center gap-2"
+                         :class="{ 'bg-neutral-50 dark:bg-coolgray-300': index === selectedIndex }">
+                        <template x-if="suggestion.type === 'scope'">
+                            <span class="text-xs px-2 py-0.5 bg-coollabs/10 dark:bg-warning/10 text-coollabs dark:text-warning rounded">
+                                SCOPE
+                            </span>
+                        </template>
+                        <template x-if="suggestion.type === 'variable'">
+                            <span class="text-xs px-2 py-0.5 bg-green-500/10 text-green-600 dark:text-green-400 rounded">
+                                VAR
+                            </span>
+                        </template>
+                        <span class="text-sm font-mono" x-text="suggestion.display"></span>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+
+    @if (!$label && $helper)
+        <x-helper :helper="$helper" />
+    @endif
+    @error($modelBinding)
+        <label class="label">
+            <span class="text-red-500 label-text-alt">{{ $message }}</span>
+        </label>
+    @enderror
+</div>
@@ -27,30 +27,30 @@
            @endif
            <input autocomplete="{{ $autocomplete }}" value="{{ $value }}"
                {{ $attributes->merge(['class' => $defaultClass]) }} @required($required)
-                @if ($id !== 'null') wire:model={{ $id }} @endif
-                wire:dirty.class.remove='dark:focus:ring-coolgray-300 dark:ring-coolgray-300'
-                wire:dirty.class="dark:focus:ring-warning dark:ring-warning" wire:loading.attr="disabled"
-                type="{{ $type }}" @readonly($readonly) @disabled($disabled) id="{{ $id }}"
+                @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') }}">
+                aria-placeholder="{{ $attributes->get('placeholder') }}"
+                @if ($autofocus) x-ref="autofocusInput" @endif>

        </div>
    @else
        <input autocomplete="{{ $autocomplete }}" @if ($value) value="{{ $value }}" @endif
            {{ $attributes->merge(['class' => $defaultClass]) }} @required($required) @readonly($readonly)
-            @if ($id !== 'null') wire:model={{ $id }} @endif
-            wire:dirty.class.remove='dark:focus:ring-coolgray-300 dark:ring-coolgray-300'
-            wire:dirty.class="dark:focus:ring-warning dark:ring-warning" wire:loading.attr="disabled"
+            @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 }}" @disabled($disabled) min="{{ $attributes->get('min') }}"
            max="{{ $attributes->get('max') }}" minlength="{{ $attributes->get('minlength') }}"
            maxlength="{{ $attributes->get('maxlength') }}"
-            @if ($id !== 'null') id={{ $id }} @endif name="{{ $name }}"
-            placeholder="{{ $attributes->get('placeholder') }}">
+            @if ($htmlId !== 'null') id={{ $htmlId }} @endif name="{{ $name }}"
+            placeholder="{{ $attributes->get('placeholder') }}"
+            @if ($autofocus) x-ref="autofocusInput" @endif>
    @endif
    @if (!$label && $helper)
        <x-helper :helper="$helper" />
    @endif
-    @error($id)
+    @error($modelBinding)
        <label class="label">
            <span class="text-red-500 label-text-alt">{{ $message }}</span>
        </label>
@@ -30,12 +30,22 @@
            document.getElementById(this.monacoId).dispatchEvent(new CustomEvent('monaco-editor-focused', { detail: { monacoId: this.monacoId } }));
        },
        monacoEditorAddLoaderScriptToHead() {
-            let script = document.createElement('script');
-            script.src = `/js/monaco-editor-${this.monacoVersion}/min/vs/loader.js`;
-            document.head.appendChild(script);
+            // Use a global flag to prevent duplicate script loading
+            if (!window.__coolifyMonacoLoaderAdding && typeof _amdLoaderGlobal === 'undefined') {
+                window.__coolifyMonacoLoaderAdding = true;
+                let script = document.createElement('script');
+                script.src = `/js/monaco-editor-${this.monacoVersion}/min/vs/loader.js`;
+                script.onload = () => {
+                    window.__coolifyMonacoLoaderAdding = false;
+                };
+                script.onerror = () => {
+                    window.__coolifyMonacoLoaderAdding = false;
+                };
+                document.head.appendChild(script);
+            }
        }
    }" x-modelable="monacoContent">
-        <div x-cloak x-init="if (typeof _amdLoaderGlobal == 'undefined') {
+        <div x-cloak x-init="if (typeof _amdLoaderGlobal == 'undefined' && !window.__coolifyMonacoLoaderAdding) {
            monacoEditorAddLoaderScriptToHead();
        }
        checkTheme();
@@ -81,8 +91,13 @@
                    document.getElementById(monacoId).addEventListener('monaco-editor-focused', (event) => {
                        editor.focus();
                    });
-        
+
                    updatePlaceholder(editor.getValue());
+
+                    @if ($autofocus)
+                    // Auto-focus the editor
+                    setTimeout(() => editor.focus(), 100);
+                    @endif
        
                    $watch('monacoContent', value => {
                        if (editor.getValue() !== value) {
@@ -99,7 +114,7 @@
        }, 5);" :id="monacoId">
        </div>
        <div class="relative z-10 w-full h-full">
-            <div x-ref="monacoEditorElement" class="w-full h-96 text-md {{ $readonly ? 'opacity-65' : '' }}"></div>
+            <div x-ref="monacoEditorElement" class="w-full text-md {{ $readonly ? 'opacity-65' : '' }}" style="height: var(--editor-height, calc(100vh - 20rem)); min-height: 300px;"></div>
            <div x-ref="monacoPlaceholderElement" x-show="monacoPlaceholder" @click="monacoEditorFocus()"
                :style="'font-size: ' + monacoFontSize"
                class="w-full text-sm font-mono absolute z-50 text-gray-500 ml-14 -translate-x-0.5 mt-0.5 left-0 top-0"
@@ -11,12 +11,11 @@
        </label>
    @endif
    <select {{ $attributes->merge(['class' => $defaultClass]) }} @disabled($disabled) @required($required)
-        wire:dirty.class.remove='dark:focus:ring-coolgray-300 dark:ring-coolgray-300'
-        wire:dirty.class="dark:focus:ring-warning dark:ring-warning" wire:loading.attr="disabled" name={{ $id }}
-        @if ($attributes->whereStartsWith('wire:model')->first()) {{ $attributes->whereStartsWith('wire:model')->first() }} @else wire:model={{ $id }} @endif>
+        wire:loading.attr="disabled" name={{ $modelBinding }} id="{{ $htmlId }}"
+        @if ($attributes->whereStartsWith('wire:model')->first()) {{ $attributes->whereStartsWith('wire:model')->first() }} 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={{ $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>
        {{ $slot }}
    </select>
-    @error($id)
+    @error($modelBinding)
        <label class="label">
            <span class="text-red-500 label-text-alt">{{ $message }}</span>
        </label>
@@ -25,9 +25,9 @@
        </label>
    @endif
    @if ($useMonacoEditor)
-        <x-forms.monaco-editor id="{{ $id }}" language="{{ $monacoEditorLanguage }}" name="{{ $name }}"
-            name="{{ $id }}" model="{{ $value ?? $id }}" wire:model="{{ $value ?? $id }}"
-            readonly="{{ $readonly }}" label="dockerfile" />
+        <x-forms.monaco-editor id="{{ $modelBinding }}" language="{{ $monacoEditorLanguage }}" name="{{ $name }}"
+            name="{{ $modelBinding }}" model="{{ $value ?? $modelBinding }}" wire:model="{{ $value ?? $modelBinding }}"
+            readonly="{{ $readonly }}" label="dockerfile" autofocus="{{ $autofocus }}" />
    @else
        @if ($type === 'password')
            <div class="relative" x-data="{ type: 'password' }">
@@ -45,35 +45,34 @@
                @endif
                <input x-cloak x-show="type === 'password'" value="{{ $value }}"
                    {{ $attributes->merge(['class' => $defaultClassInput]) }} @required($required)
-                    @if ($id !== 'null') wire:model={{ $id }} @endif
-                    wire:dirty.class.remove='dark:focus:ring-coolgray-300 dark:ring-coolgray-300'
-                    wire:dirty.class="dark:focus:ring-warning dark:ring-warning" wire:loading.attr="disabled"
-                    type="{{ $type }}" @readonly($readonly) @disabled($disabled) id="{{ $id }}"
+                    @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="{{ $id }}"
+                    @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 ?? $id }}
-                     wire:dirty.class.remove='dark:focus:ring-coolgray-300 dark:ring-coolgray-300' wire:dirty.class="dark:focus:ring-warning dark:ring-warning" @endif
-                    @disabled($disabled) @readonly($readonly) @required($required) id="{{ $id }}"
-                    name="{{ $name }}" name={{ $id }}></textarea>
+            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
            <textarea minlength="{{ $minlength }}" maxlength="{{ $maxlength }}"
                {{ $allowTab ? '@keydown.tab=handleKeydown' : '' }} placeholder="{{ $placeholder }}"
                {{ !$spellcheck ? 'spellcheck=false' : '' }} {{ $attributes->merge(['class' => $defaultClass]) }}
-                @if ($realtimeValidation) wire:model.debounce.200ms="{{ $id }}"
+                @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 ?? $id }}
-    wire:dirty.class.remove='dark:focus:ring-coolgray-300 dark:ring-coolgray-300' wire:dirty.class="dark:focus:ring-warning dark:ring-warning" @endif
-                @disabled($disabled) @readonly($readonly) @required($required) id="{{ $id }}"
-                name="{{ $name }}" name={{ $id }}></textarea>
+    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>
        @endif
    @endif
-    @error($id)
+    @error($modelBinding)
        <label class="label">
            <span class="text-red-500 label-text-alt">{{ $message }}</span>
        </label>
@@ -11,6 +11,7 @@
    'content' => null,
    'checkboxes' => [],
    'actions' => [],
+    'warningMessage' => null,
    'confirmWithText' => true,
    'confirmationText' => 'Confirm Deletion',
    'confirmationLabel' => 'Please confirm the execution of the actions by entering the Name below',
@@ -28,24 +29,34 @@

@php
    use App\Models\InstanceSettings;
+    // Global setting to disable ALL two-step confirmation (text + password)
    $disableTwoStepConfirmation = data_get(InstanceSettings::get(), 'disable_two_step_confirmation');
+    // Skip ONLY password confirmation for OAuth users (they have no password)
+    $skipPasswordConfirmation = shouldSkipPasswordConfirmation();
    if ($temporaryDisableTwoStepConfirmation) {
        $disableTwoStepConfirmation = false;
+        $skipPasswordConfirmation = false;
    }
+    // When password step is skipped, Step 2 becomes final - change button text from "Continue" to "Confirm"
+    $effectiveStep2ButtonText = ($skipPasswordConfirmation && $step2ButtonText === 'Continue') ? 'Confirm' : $step2ButtonText;
@endphp

 <div {{ $ignoreWire ? 'wire:ignore' : '' }} x-data="{
    modalOpen: false,
    step: {{ empty($checkboxes) ? 2 : 1 }},
    initialStep: {{ empty($checkboxes) ? 2 : 1 }},
-    finalStep: {{ $confirmWithPassword && !$disableTwoStepConfirmation ? 3 : 2 }},
+    finalStep: {{ $confirmWithPassword && !$skipPasswordConfirmation ? 3 : 2 }},
    deleteText: '',
    password: '',
    actions: @js($actions),
-    confirmationText: @js(html_entity_decode($confirmationText, ENT_QUOTES, 'UTF-8')),
+    confirmationText: (() => {
+        const textarea = document.createElement('textarea');
+        textarea.innerHTML = @js($confirmationText);
+        return textarea.value;
+    })(),
    userConfirmationText: '',
    confirmWithText: @js($confirmWithText && !$disableTwoStepConfirmation),
-    confirmWithPassword: @js($confirmWithPassword && !$disableTwoStepConfirmation),
+    confirmWithPassword: @js($confirmWithPassword && !$skipPasswordConfirmation),
    submitAction: @js($submitAction),
    dispatchAction: @js($dispatchAction),
    passwordError: '',
@@ -54,6 +65,7 @@
    dispatchEventType: @js($dispatchEventType),
    dispatchEventMessage: @js($dispatchEventMessage),
    disableTwoStepConfirmation: @js($disableTwoStepConfirmation),
+    skipPasswordConfirmation: @js($skipPasswordConfirmation),
    resetModal() {
        this.step = this.initialStep;
        this.deleteText = '';
@@ -63,7 +75,7 @@
        $wire.$refresh();
    },
    step1ButtonText: @js($step1ButtonText),
-    step2ButtonText: @js($step2ButtonText),
+    step2ButtonText: @js($effectiveStep2ButtonText),
    step3ButtonText: @js($step3ButtonText),
    validatePassword() {
        if (this.confirmWithPassword && !this.password) {
@@ -87,10 +99,14 @@
        const paramsMatch = this.submitAction.match(/\((.*?)\)/);
        const params = paramsMatch ? paramsMatch[1].split(',').map(param => param.trim()) : [];

-        if (this.confirmWithPassword) {
-            params.push(this.password);
+        // Always pass password parameter (empty string if password confirmation is skipped)
+        // This ensures consistent method signature for backend Livewire methods
+        params.push(this.confirmWithPassword ? this.password : '');
+
+        // Only pass selectedActions if there are checkboxes with selections
+        if (this.selectedActions.length > 0) {
+            params.push(this.selectedActions);
        }
-        params.push(this.selectedActions);
        return $wire[methodName](...params)
            .then(result => {
                if (result === true) {
@@ -109,7 +125,7 @@
        }
    }
 }"
-    @keydown.escape.window="modalOpen = false; resetModal()" :class="{ 'z-40': modalOpen }"
+    @keydown.escape.window="if (modalOpen) { modalOpen = false; resetModal(); }" :class="{ 'z-40': modalOpen }"
    class="relative w-auto h-auto">
    @if ($customButton)
        @if ($buttonFullWidth)
@@ -172,7 +188,7 @@
    @endif
    <template x-teleport="body">
        <div x-show="modalOpen"
-            class="fixed top-0 lg:pt-10 left-0 z-99 flex items-start justify-center w-screen h-screen" x-cloak>
+            class="fixed top-0 left-0 z-99 flex items-center justify-center w-screen h-screen p-4" x-cloak>
            <div x-show="modalOpen" class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-xs">
            </div>
            <div x-show="modalOpen" x-trap.inert.noscroll="modalOpen" x-transition:enter="ease-out duration-100"
@@ -181,8 +197,8 @@
                x-transition:leave="ease-in duration-100"
                x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
-                class="relative w-full py-6 border rounded-sm min-w-full lg:min-w-[36rem] max-w-[48rem] bg-neutral-100 border-neutral-400 dark:bg-base px-7 dark:border-coolgray-300">
-                <div class="flex justify-between items-center pb-3">
+                class="relative w-full border rounded-sm min-w-full lg:min-w-[36rem] max-w-[48rem] max-h-[calc(100vh-2rem)] bg-neutral-100 border-neutral-400 dark:bg-base dark:border-coolgray-300 flex flex-col">
+                <div class="flex justify-between items-center py-6 px-7 shrink-0">
                    <h3 class="pr-8 text-2xl font-bold">{{ $title }}</h3>
                    <button @click="modalOpen = false; resetModal()"
                        class="flex absolute top-2 right-2 justify-center items-center w-8 h-8 rounded-full dark:text-white hover:bg-coolgray-300">
@@ -192,13 +208,10 @@
                        </svg>
                    </button>
                </div>
-                <div class="relative w-auto">
+                <div class="relative w-auto overflow-y-auto px-7 pb-6" style="-webkit-overflow-scrolling: touch;">
                    @if (!empty($checkboxes))
                        <!-- Step 1: Select actions -->
                        <div x-show="step === 1">
-                            <div class="flex justify-between items-center">
-                                <h4>Actions</h4>
-                            </div>
                            @foreach ($checkboxes as $index => $checkbox)
                                <div class="flex justify-between items-center mb-2">
                                    <x-forms.checkbox fullWidth :label="$checkbox['label']" :id="$checkbox['id']"
@@ -222,11 +235,9 @@

                    <!-- Step 2: Confirm deletion -->
                    <div x-show="step === 2">
-                        <div class="p-4 mb-4 text-white border-l-4 border-red-500 bg-error" role="alert">
-                            <p class="font-bold">Warning</p>
-                            <p>This operation is permanent and cannot be undone. Please think again before proceeding!
-                            </p>
-                        </div>
+                        <x-callout type="danger" title="Warning" class="mb-4">
+                            {!! $warningMessage ?: 'This operation is permanent and cannot be undone. Please think again before proceeding!' !!}
+                        </x-callout>
                        <div class="mb-4">The following actions will be performed:</div>
                        <ul class="mb-4 space-y-2">
                            @foreach ($actions as $action)
@@ -250,6 +261,18 @@
                                        <span>{{ $checkbox['label'] }}</span>
                                    </li>
                                </template>
+                                @if (isset($checkbox['default_warning']))
+                                    <template x-if="!selectedActions.includes('{{ $checkbox['id'] }}')">
+                                        <li class="flex items-center text-red-500">
+                                            <svg class="shrink-0 mr-2 w-5 h-5" fill="none" stroke="currentColor"
+                                                viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                    d="M6 18L18 6M6 6l12 12"></path>
+                                            </svg>
+                                            <span>{{ $checkbox['default_warning'] }}</span>
+                                        </li>
+                                    </template>
+                                @endif
                            @endforeach
                        </ul>
                        @if (!$disableTwoStepConfirmation)
@@ -257,8 +280,21 @@
                                <div class="mb-4">
                                    <h4 class="mb-2 text-lg font-semibold">Confirm Actions</h4>
                                    <p class="mb-2 text-sm">{{ $confirmationLabel }}</p>
-                                    <div class="relative mb-2">
-                                        <x-forms.copy-button :text="html_entity_decode($confirmationText, ENT_QUOTES, 'UTF-8')" />
+                                    <div class="relative mb-2" x-data="{ decodedText: confirmationText }">
+                                        <div class="relative">
+                                            <input type="text" x-model="decodedText" readonly class="input">
+                                            <button x-show="window.isSecureContext"
+                                                @click.prevent="navigator.clipboard.writeText(decodedText); $el.innerHTML = '<svg class=\'w-5 h-5 text-green-500\' fill=\'none\' stroke=\'currentColor\' viewBox=\'0 0 24 24\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M5 13l4 4L19 7\' /></svg>'; setTimeout(() => $el.innerHTML = '<svg class=\'w-5 h-5\' fill=\'none\' stroke=\'currentColor\' viewBox=\'0 0 24 24\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\' /></svg>', 1000)"
+                                                class="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-gray-400 hover:text-gray-300 transition-colors"
+                                                title="Copy to clipboard">
+                                                <svg class="w-5 h-5" fill="none" stroke="currentColor"
+                                                    viewBox="0 0 24 24">
+                                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                                        stroke-width="2"
+                                                        d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                                                </svg>
+                                            </button>
+                                        </div>
                                    </div>

                                    <label for="userConfirmationText"
@@ -291,7 +327,7 @@
                                    if (dispatchEvent) {
                                        $wire.dispatch(dispatchEventType, dispatchEventMessage);
                                    }
-                                    if (confirmWithPassword && !disableTwoStepConfirmation) {
+                                    if (confirmWithPassword && !skipPasswordConfirmation) {
                                        step++;
                                    } else {
                                        modalOpen = false;
@@ -305,12 +341,11 @@
                    </div>

                    <!-- Step 3: Password confirmation -->
-                    @if (!$disableTwoStepConfirmation)
+                    @if (!$skipPasswordConfirmation)
                        <div x-show="step === 3 && confirmWithPassword">
-                            <div class="p-4 mb-4 text-white border-l-4 border-red-500 bg-error" role="alert">
-                                <p class="font-bold">Final Confirmation</p>
-                                <p>Please enter your password to confirm this destructive action.</p>
-                            </div>
+                            <x-callout type="danger" title="Final Confirmation" class="mb-4">
+                                Please enter your password to confirm this destructive action.
+                            </x-callout>
                            <div class="flex flex-col gap-2 mb-4">
                                @php
                                    $passwordConfirm = Str::uuid();
@@ -8,8 +8,18 @@
    'content' => null,
    'closeOutside' => true,
    'minWidth' => '36rem',
+    'maxWidth' => '48rem',
+    'isFullWidth' => false,
 ])
-<div x-data="{ modalOpen: false }" :class="{ 'z-40': modalOpen }" @keydown.window.escape="modalOpen=false"
+
+@php
+    $modalId = 'modal-' . uniqid();
+@endphp
+
+
+<div x-data="{ modalOpen: false }"
+    x-init="$watch('modalOpen', value => { if (!value) { $wire.dispatch('modalClosed') } })"
+    :class="{ 'z-40': modalOpen }" @keydown.window.escape="modalOpen=false"
    class="relative w-auto h-auto" wire:ignore>
    @if ($content)
        <div @click="modalOpen=true">
@@ -17,42 +27,43 @@
        </div>
    @else
        @if ($disabled)
-            <x-forms.button isError disabled>{{ $buttonTitle }}</x-forms.button>
+            <x-forms.button isError disabled @class(['w-full' => $isFullWidth])>{{ $buttonTitle }}</x-forms.button>
        @elseif ($isErrorButton)
-            <x-forms.button isError @click="modalOpen=true">{{ $buttonTitle }}</x-forms.button>
+            <x-forms.button isError @click="modalOpen=true" @class(['w-full' => $isFullWidth])>{{ $buttonTitle }}</x-forms.button>
        @elseif ($isHighlightedButton)
-            <x-forms.button isHighlighted @click="modalOpen=true">{{ $buttonTitle }}</x-forms.button>
+            <x-forms.button isHighlighted @click="modalOpen=true" @class(['w-full' => $isFullWidth])>{{ $buttonTitle }}</x-forms.button>
        @else
-            <x-forms.button @click="modalOpen=true">{{ $buttonTitle }}</x-forms.button>
+            <x-forms.button @click="modalOpen=true" @class(['w-full' => $isFullWidth])>{{ $buttonTitle }}</x-forms.button>
        @endif
    @endif
    <template x-teleport="body">
        <div x-show="modalOpen"
-            class="fixed top-0 left-0 lg:px-0 px-4 z-99 flex items-center justify-center w-screen h-screen">
+            x-init="$watch('modalOpen', value => { if(value) { $nextTick(() => { const firstInput = $el.querySelector('input, textarea, select'); firstInput?.focus(); }) } })"
+            class="fixed top-0 left-0 z-99 flex items-center justify-center w-screen h-screen p-4">
            <div x-show="modalOpen" x-transition:enter="ease-out duration-100" x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-100"
                x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
                @if ($closeOutside) @click="modalOpen=false" @endif
                class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-xs"></div>
-            <div x-show="modalOpen" x-trap.inert.noscroll="modalOpen"
+            <div id="{{ $modalId }}" x-show="modalOpen" x-trap.inert.noscroll="modalOpen"
                x-transition:enter="ease-out duration-100"
                x-transition:enter-start="opacity-0 -translate-y-2 sm:scale-95"
                x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                x-transition:leave="ease-in duration-100"
                x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
-                class="relative w-full py-6 border rounded-sm drop-shadow-sm min-w-full lg:min-w-[{{ $minWidth }}] max-w-fit bg-white border-neutral-200 dark:bg-base px-6 dark:border-coolgray-300">
-                <div class="flex items-center justify-between pb-3">
+                class="relative w-full min-w-full lg:min-w-[{{ $minWidth }}] max-w-[{{ $maxWidth }}] max-h-[calc(100vh-2rem)] border rounded-sm drop-shadow-sm bg-white border-neutral-200 dark:bg-base dark:border-coolgray-300 flex flex-col">
+                <div class="flex items-center justify-between py-6 px-6 shrink-0">
                    <h3 class="text-2xl font-bold">{{ $title }}</h3>
                    <button @click="modalOpen=false"
-                        class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 rounded-full dark:text-white hover:bg-neutral-100 dark:hover:bg-coolgray-300 outline-0">
+                        class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 rounded-full dark:text-white hover:bg-neutral-100 dark:hover:bg-coolgray-300 outline-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-coollabs dark:focus-visible:ring-warning focus-visible:ring-offset-2 dark:focus-visible:ring-offset-base">
                        <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                            stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
-                <div class="relative flex items-center justify-center w-auto">
+                <div class="relative flex items-center justify-center w-auto overflow-y-auto px-6 pb-6" style="-webkit-overflow-scrolling: touch;">
                    {{ $slot }}
                </div>
            </div>
@@ -1,7 +1,7 @@
 <dialog id="{{ $modalId }}" class="modal">
    @if ($yesOrNo)
-        <form method="dialog" class="rounded-sm modal-box" @if (!$noSubmit) wire:submit='submit' @endif>
-            <div class="flex items-start">
+        <form method="dialog" class="rounded-sm modal-box max-h-[calc(100vh-5rem)] flex flex-col" @if (!$noSubmit) wire:submit='submit' @endif>
+            <div class="flex items-start overflow-y-auto" style="-webkit-overflow-scrolling: touch;">
                <div class="flex items-center justify-center shrink-0 w-10 h-10 mr-4 rounded-full">
                    <svg class="w-8 h-8 text-error" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" aria-hidden="true">
@@ -33,7 +33,8 @@
            </div>
        </form>
    @else
-        <form method="dialog" class="flex flex-col w-11/12 max-w-5xl gap-2 rounded-sm modal-box"
+        <form method="dialog" class="flex flex-col w-11/12 max-w-5xl max-h-[calc(100vh-5rem)] gap-2 rounded-sm modal-box overflow-y-auto"
+            style="-webkit-overflow-scrolling: touch;"
            @if ($submitWireAction) wire:submit={{ $submitWireAction }} @endif
            @if (!$noSubmit && !$submitWireAction) wire:submit='submit' @endif>
            @isset($modalTitle)
@@ -1,119 +1,101 @@
-<nav class="flex flex-col flex-1 px-2 bg-white border-r dark:border-coolgray-200 dark:bg-base" x-data="{
-    switchWidth() {
-            if (this.full === 'full') {
-                localStorage.setItem('pageWidth', 'center');
-            } else {
-                localStorage.setItem('pageWidth', 'full');
-            }
-            window.location.reload();
-        },
-        setZoom(zoom) {
-            localStorage.setItem('zoom', zoom);
-            window.location.reload();
-        },
-        init() {
-            this.full = localStorage.getItem('pageWidth');
-            this.zoom = localStorage.getItem('zoom');
-            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-                const userSettings = localStorage.getItem('theme');
-                if (userSettings !== 'system') {
-                    return;
-                }
-                if (e.matches) {
-                    document.documentElement.classList.add('dark');
+<nav class="flex flex-col flex-1 px-2 bg-white border-r dark:border-coolgray-200 border-neutral-300 dark:bg-base"
+    x-data="{
+        switchWidth() {
+                if (this.full === 'full') {
+                    localStorage.setItem('pageWidth', 'center');
                } else {
+                    localStorage.setItem('pageWidth', 'full');
+                }
+                window.location.reload();
+            },
+            setZoom(zoom) {
+                localStorage.setItem('zoom', zoom);
+                window.location.reload();
+            },
+            init() {
+                this.full = localStorage.getItem('pageWidth');
+                this.zoom = localStorage.getItem('zoom');
+                window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+                    const userSettings = localStorage.getItem('theme');
+                    if (userSettings !== 'system') {
+                        return;
+                    }
+                    if (e.matches) {
+                        document.documentElement.classList.add('dark');
+                    } else {
+                        document.documentElement.classList.remove('dark');
+                    }
+                });
+                this.queryTheme();
+                this.checkZoom();
+            },
+            setTheme(type) {
+                this.theme = type;
+                localStorage.setItem('theme', type);
+                this.queryTheme();
+            },
+            queryTheme() {
+                const darkModePreference = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                const userSettings = localStorage.getItem('theme') || 'dark';
+                localStorage.setItem('theme', userSettings);
+                if (userSettings === 'dark') {
+                    document.documentElement.classList.add('dark');
+                    this.theme = 'dark';
+                } else if (userSettings === 'light') {
+                    document.documentElement.classList.remove('dark');
+                    this.theme = 'light';
+                } else if (darkModePreference) {
+                    this.theme = 'system';
+                    document.documentElement.classList.add('dark');
+                } else if (!darkModePreference) {
+                    this.theme = 'system';
                    document.documentElement.classList.remove('dark');
                }
-            });
-            this.queryTheme();
-            this.checkZoom();
-        },
-        setTheme(type) {
-            this.theme = type;
-            localStorage.setItem('theme', type);
-            this.queryTheme();
-        },
-        queryTheme() {
-            const darkModePreference = window.matchMedia('(prefers-color-scheme: dark)').matches;
-            const userSettings = localStorage.getItem('theme') || 'dark';
-            localStorage.setItem('theme', userSettings);
-            if (userSettings === 'dark') {
-                document.documentElement.classList.add('dark');
-                this.theme = 'dark';
-            } else if (userSettings === 'light') {
-                document.documentElement.classList.remove('dark');
-                this.theme = 'light';
-            } else if (darkModePreference) {
-                this.theme = 'system';
-                document.documentElement.classList.add('dark');
-            } else if (!darkModePreference) {
-                this.theme = 'system';
-                document.documentElement.classList.remove('dark');
+            },
+            checkZoom() {
+                if (this.zoom === null) {
+                    this.setZoom(100);
+                }
+                if (this.zoom === '90') {
+                    const style = document.createElement('style');
+                    style.textContent = `
+                                                    html {
+                                                        font-size: 93.75%;
+                                                    }
+                                
+                                                    :root {
+                                                        --vh: 1vh;
+                                                    }
+                                
+                                                    @media (min-width: 1024px) {
+                                                        html {
+                                                            font-size: 87.5%;
+                                                        }
+                                                    }
+                                                `;
+                    document.head.appendChild(style);
+                }
            }
-        },
-        checkZoom() {
-            if (this.zoom === null) {
-                this.setZoom(100);
-            }
-            if (this.zoom === '90') {
-                const style = document.createElement('style');
-                style.textContent = `
-                    html {
-                        font-size: 93.75%;
-                    }
-
-                    :root {
-                        --vh: 1vh;
-                    }
-
-                    @media (min-width: 1024px) {
-                        html {
-                            font-size: 87.5%;
-                        }
-                    }
-                `;
-                document.head.appendChild(style);
-            }
-        }
-}">
-    <div class="flex pt-6 pb-4 pl-2">
+    }">
+    <div class="flex lg:pt-6 pt-4 pb-4 pl-2">
        <div class="flex flex-col w-full">
-            <div class="text-2xl font-bold tracking-wide dark:text-white">Coolify</div>
+            <a href="/" class="text-2xl font-bold tracking-wide dark:text-white hover:opacity-80 transition-opacity">Coolify</a>
            <x-version />
        </div>
-        <div class="pt-1">
-            <x-dropdown>
-                <x-slot:title>
-                    <div class="flex justify-end w-8" x-show="theme === 'dark' || theme === 'system'">
-                        <svg class="w-5 h-5 rounded-sm dark:fill-white" xmlns="http://www.w3.org/2000/svg"
-                            viewBox="0 0 24 24">
-                            <path
-                                d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
-                        </svg>
-                    </div>
-                    <div class="flex justify-end w-8" x-show="theme === 'light'">
-                        <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                            <path
-                                d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
-                        </svg>
-                    </div>
-                </x-slot:title>
-                <div class="flex flex-col gap-1">
-                    <div class="font-bold border-b dark:border-coolgray-500 dark:text-white text-md">Color</div>
-                    <button @click="setTheme('dark')" class="px-1 dropdown-item-no-padding">Dark</button>
-                    <button @click="setTheme('light')" class="px-1 dropdown-item-no-padding">Light</button>
-                    <button @click="setTheme('system')" class="px-1 dropdown-item-no-padding">System</button>
-                    <div class="my-1 font-bold border-b dark:border-coolgray-500 dark:text-white text-md">Width</div>
-                    <button @click="switchWidth()" class="px-1 dropdown-item-no-padding"
-                        x-show="full === 'full'">Center</button>
-                    <button @click="switchWidth()" class="px-1 dropdown-item-no-padding"
-                        x-show="full === 'center'">Full</button>
-                    <div class="my-1 font-bold border-b dark:border-coolgray-500 dark:text-white text-md">Zoom</div>
-                    <button @click="setZoom(100)" class="px-1 dropdown-item-no-padding">100%</button>
-                    <button @click="setZoom(90)" class="px-1 dropdown-item-no-padding">90%</button>
-                </div>
-            </x-dropdown>
+        <div>
+            <!-- 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">
+                <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"
+                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                </svg>
+                <kbd
+                    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>
+        <livewire:settings-dropdown />
    </div>
    <div class="px-2 pt-2 pb-7">
        <livewire:switch-team />
@@ -196,8 +178,8 @@
                            class="{{ request()->is('storages*') ? 'menu-item-active menu-item' : 'menu-item' }}"
                            href="{{ route('storage.index') }}">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24">
-                                <g fill="none" stroke="currentColor" stroke-linecap="round"
-                                    stroke-linejoin="round" stroke-width="2">
+                                <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                                    stroke-width="2">
                                    <path d="M4 6a8 3 0 1 0 16 0A8 3 0 1 0 4 6" />
                                    <path d="M4 6v6a8 3 0 0 0 16 0V6" />
                                    <path d="M4 12v6a8 3 0 0 0 16 0v-6" />
@@ -211,8 +193,8 @@
                            class="{{ request()->is('shared-variables*') ? 'menu-item-active menu-item' : 'menu-item' }}"
                            href="{{ route('shared-variables.index') }}">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24">
-                                <g fill="none" stroke="currentColor" stroke-linecap="round"
-                                    stroke-linejoin="round" stroke-width="2">
+                                <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                                    stroke-width="2">
                                    <path
                                        d="M5 4C2.5 9 2.5 14 5 20M19 4c2.5 5 2.5 10 0 16M9 9h1c1 0 1 1 2.016 3.527C13 15 13 16 14 16h1" />
                                    <path d="M8 16c1.5 0 3-2 4-3.5S14.5 9 16 9" />
@@ -260,20 +242,22 @@
                            Tags
                        </a>
                    </li>
-                    <li>
-                        <a title="Terminal"
-                            class="{{ request()->is('terminal*') ? 'menu-item-active menu-item' : 'menu-item' }}"
-                            href="{{ route('terminal') }}">
-                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" 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="M5 7l5 5l-5 5" />
-                                <path d="M12 19l7 0" />
-                            </svg>
-                            Terminal
-                        </a>
-                    </li>
+                    @can('canAccessTerminal')
+                        <li>
+                            <a title="Terminal"
+                                class="{{ request()->is('terminal*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                                href="{{ route('terminal') }}">
+                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" 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="M5 7l5 5l-5 5" />
+                                    <path d="M12 19l7 0" />
+                                </svg>
+                                Terminal
+                            </a>
+                        </li>
+                    @endcan
                    <li>
                        <a title="Profile"
                            class="{{ request()->is('profile*') ? 'menu-item-active menu-item' : 'menu-item' }}"
@@ -307,7 +291,7 @@
                            Teams
                        </a>
                    </li>
-                    @if (isCloud())
+                    @if (isCloud() && auth()->user()->isAdmin())
                        <li>
                            <a title="Subscription"
                                class="{{ request()->is('subscription*') ? 'menu-item-active menu-item' : 'menu-item' }}"
@@ -23,6 +23,10 @@
                href="{{ route('notifications.pushover') }}">
                <button>Pushover</button>
            </a>
+            <a class="{{ request()->routeIs('notifications.webhook') ? 'dark:text-white' : '' }}"
+                href="{{ route('notifications.webhook') }}">
+                <button>Webhook</button>
+            </a>
        </nav>
    </div>
 </div>
@@ -1,25 +1,22 @@
-<div @class([
-    'transition-all duration-150 box-without-bg dark:bg-coolgray-100 bg-white group',
-    'hover:border-l-coollabs cursor-pointer' => !$upgrade,
-    'hover:border-l-red-500 cursor-not-allowed' => $upgrade,
-])>
+ <div @class([
+    'coolbox group',
+    '!cursor-not-allowed hover:border-l-red-500' => $upgrade,
+ ])>
    <div class="flex items-center">
-        {{ $logo }}
-        <div class="flex flex-col pl-2 ">
-            <div class="dark:text-white text-md">
+        <div class="w-[4.5rem] h-[4.5rem] flex items-center justify-center text-black dark:text-white shrink-0 rounded-lg overflow-hidden">
+            {{ $logo }}
+        </div>
+        <div class="flex flex-col pl-3 space-y-1">
+            <div class="dark:text-white text-md font-medium">
                {{ $title }}
            </div>
            @if ($upgrade)
                <div>{{ $upgrade }}</div>
            @else
-                <div class="text-xs font-bold dark:text-neutral-500 dark:group-hover:text-neutral-300">
+                <div class="text-xs dark:text-neutral-400 dark:group-hover:text-neutral-200 line-clamp-2">
                    {{ $description }}
                </div>
            @endif
        </div>
    </div>
-    @isset($documentation)
-        <div class="flex-1"></div>
-        {{ $documentation }}
-    @endisset
 </div>
@@ -6,8 +6,18 @@
            <a href="{{ route('security.private-key.index') }}">
                <button>Private Keys</button>
            </a>
+            @can('viewAny', App\Models\CloudProviderToken::class)
+                <a href="{{ route('security.cloud-tokens') }}">
+                    <button>Cloud Tokens</button>
+                </a>
+            @endcan
+            @can('viewAny', App\Models\CloudInitScript::class)
+                <a href="{{ route('security.cloud-init-scripts') }}">
+                    <button>Cloud-Init Scripts</button>
+                </a>
+            @endcan
            <a href="{{ route('security.api-tokens') }}">
-                <button>API tokens</button>
+                <button>API Tokens</button>
            </a>
        </nav>
    </div>
@@ -1,9 +1,9 @@
-@if ($server->proxySet())
-    <div class="flex flex-col items-start gap-2 min-w-fit">
-        <a class="{{ request()->routeIs('server.proxy') ? 'menu-item menu-item-active' : 'menu-item' }}"
-            href="{{ route('server.proxy', $parameters) }}">
-            <button>Configuration</button>
-        </a>
+<div class="flex flex-col items-start gap-2 min-w-fit">
+    <a class="{{ request()->routeIs('server.proxy') ? 'menu-item menu-item-active' : 'menu-item' }}"
+        href="{{ route('server.proxy', $parameters) }}">
+        <button>Configuration</button>
+    </a>
+    @if ($server->proxySet())
        <a class="{{ request()->routeIs('server.proxy.dynamic-confs') ? 'menu-item menu-item-active' : 'menu-item' }}"
            href="{{ route('server.proxy.dynamic-confs', $parameters) }}">
            <button>Dynamic Configurations</button>
@@ -12,5 +12,5 @@
            href="{{ route('server.proxy.logs', $parameters) }}">
            <button>Logs</button>
        </a>
-    </div>
-@endif
+    @endif
+</div>
@@ -3,4 +3,8 @@
        href="{{ route('server.security.patches', $parameters) }}">
        Server Patching
    </a>
+    <a class="{{ request()->routeIs('server.security.terminal-access') ? 'menu-item menu-item-active' : 'menu-item' }}"
+        href="{{ route('server.security.terminal-access', $parameters) }}">
+        Terminal Access
+    </a>
 </div>
@@ -9,6 +9,11 @@
    <a class="menu-item {{ $activeMenu === 'private-key' ? 'menu-item-active' : '' }}"
        href="{{ route('server.private-key', ['server_uuid' => $server->uuid]) }}">Private Key
    </a>
+    @if ($server->hetzner_server_id)
+        <a class="menu-item {{ $activeMenu === 'cloud-provider-token' ? 'menu-item-active' : '' }}"
+            href="{{ route('server.cloud-provider-token', ['server_uuid' => $server->uuid]) }}">Hetzner Token
+        </a>
+    @endif
    <a class="menu-item {{ $activeMenu === 'ca-certificate' ? 'menu-item-active' : '' }}"
        href="{{ route('server.ca-certificate', ['server_uuid' => $server->uuid]) }}">CA Certificate
    </a>
@@ -30,14 +30,14 @@
        <div class="dropdown-item" @click="$wire.dispatch('forceDeployEvent')">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                stroke-linecap="round" stroke-linejoin="round" data-darkreader-inline-stroke=""
-                style="--darkreader-inline-stroke: currentColor;" class="w-6 h-6" stroke-width="2">
+                style="--darkreader-inline-stroke: currentColor;" class="w-4 h-4" stroke-width="2">
                <path d="M7 7l5 5l-5 5"></path>
                <path d="M13 7l5 5l-5 5"></path>
            </svg>
            Force Deploy
        </div>
        <div class="dropdown-item" wire:click='stop(true)''>
-            <svg class="w-6 h-6" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+            <svg class="w-4 h-4" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
                <path fill="currentColor" d="M26 20h-6v-2h6zm4 8h-6v-2h6zm-2-4h-6v-2h6z" />
                <path fill="currentColor"
                    d="M17.003 20a4.895 4.895 0 0 0-2.404-4.173L22 3l-1.73-1l-7.577 13.126a5.699 5.699 0 0 0-5.243 1.503C3.706 20.24 3.996 28.682 4.01 29.04a1 1 0 0 0 1 .96h14.991a1 1 0 0 0 .6-1.8c-3.54-2.656-3.598-8.146-3.598-8.2Zm-5.073-3.003A3.11 3.11 0 0 1 15.004 20c0 .038.002.208.017.469l-5.9-2.624a3.8 3.8 0 0 1 2.809-.848ZM15.45 28A5.2 5.2 0 0 1 14 25h-2a6.5 6.5 0 0 0 .968 3h-2.223A16.617 16.617 0 0 1 10 24H8a17.342 17.342 0 0 0 .665 4H6c.031-1.836.29-5.892 1.803-8.553l7.533 3.35A13.025 13.025 0 0 0 17.596 28Z" />
@@ -5,13 +5,7 @@
        </x-slot>
        @foreach ($links as $link)
            <a class="dropdown-item" target="_blank" href="{{ $link }}">
-                <svg 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="M9 15l6 -6" />
-                    <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
-                    <path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
-                </svg>{{ $link }}
+                <x-external-link class="size-3.5" />{{ $link }}
            </a>
        @endforeach
    </x-dropdown>
@@ -1,7 +1,13 @@
@props(['closeWithX' => false, 'fullScreen' => false])
 <div x-data="{
    slideOverOpen: false
-}" {{ $attributes->merge(['class' => 'relative w-auto h-auto']) }}>
+}"
+x-init="$watch('slideOverOpen', value => {
+    if (!value) {
+        $dispatch('slideOverClosed')
+    }
+})"
+{{ $attributes->merge(['class' => 'relative w-auto h-auto']) }}>
    {{ $slot }}
    <template x-teleport="body">
        <div x-show="slideOverOpen" @if (!$closeWithX) @keydown.window.escape="slideOverOpen=false" @endif
@@ -1,15 +1,33 @@
@props([
    'status' => 'Degraded',
 ])
+@php
+    // Handle both colon format (backend) and parentheses format (from services.blade.php)
+    // degraded:unhealthy → Degraded (unhealthy)
+    // degraded (unhealthy) → degraded (unhealthy) (already formatted, display as-is)
+
+    if (str($status)->contains('(')) {
+        // Already in parentheses format from services.blade.php - use as-is
+        $displayStatus = $status;
+        $healthStatus = str($status)->after('(')->before(')')->trim()->value();
+    } elseif (str($status)->contains(':') && !str($status)->startsWith('Proxy')) {
+        // Colon format from backend - transform it
+        $parts = explode(':', $status);
+        $displayStatus = str($parts[0])->headline();
+        $healthStatus = $parts[1] ?? null;
+    } else {
+        // Simple status without health
+        $displayStatus = str($status)->headline();
+        $healthStatus = null;
+    }
+@endphp
 <div class="flex items-center" >
    <x-loading wire:loading.delay.longer />
    <span wire:loading.remove.delay.longer class="flex items-center">
        <div class="badge badge-warning"></div>
-        <div class="pl-2 pr-1 text-xs font-bold tracking-widerr dark:text-warning">
-            {{ str($status)->before(':')->headline() }}
-        </div>
-        @if (!str($status)->startsWith('Proxy') && !str($status)->contains('('))
-            <div class="text-xs dark:text-warning">({{ str($status)->after(':') }})</div>
+        <div class="pl-2 pr-1 text-xs font-bold dark:text-warning">{{ $displayStatus }}</div>
+        @if ($healthStatus && !str($displayStatus)->contains('('))
+            <div class="text-xs dark:text-warning">({{ $healthStatus }})</div>
        @endif
    </span>
 </div>
@@ -5,22 +5,29 @@
 ])
@if (str($resource->status)->startsWith('running'))
    <x-status.running :status="$resource->status" :title="$title" :lastDeploymentLink="$lastDeploymentLink" />
-@elseif(str($resource->status)->startsWith('restarting') ||
-        str($resource->status)->startsWith('starting') ||
-        str($resource->status)->startsWith('degraded'))
+@elseif(str($resource->status)->startsWith('degraded'))
+    <x-status.degraded :status="$resource->status" :title="$title" :lastDeploymentLink="$lastDeploymentLink" />
+@elseif(str($resource->status)->startsWith('restarting') || str($resource->status)->startsWith('starting'))
    <x-status.restarting :status="$resource->status" :title="$title" :lastDeploymentLink="$lastDeploymentLink" />
@else
    <x-status.stopped :status="$resource->status" />
@endif
+@if (isset($resource->restart_count) && $resource->restart_count > 0 && !str($resource->status)->startsWith('exited'))
+    <div class="flex items-center pl-2">
+        <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 (!str($resource->status)->contains('exited') && $showRefreshButton)
-    <button wire:loading.remove title="Refresh Status" wire:click='checkStatus'
+    <button wire:loading.remove.delay.shortest wire:target="manualCheckStatus" title="Refresh Status" wire:click='manualCheckStatus'
        class="mx-1 dark:hover:fill-white fill-black dark:fill-warning">
        <svg class="w-4 h-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M12 2a10.016 10.016 0 0 0-7 2.877V3a1 1 0 1 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2H6.218A7.98 7.98 0 0 1 20 12a1 1 0 0 0 2 0A10.012 10.012 0 0 0 12 2zm7.989 13.5h-4.5a1 1 0 0 0 0 2h2.293A7.98 7.98 0 0 1 4 12a1 1 0 0 0-2 0a9.986 9.986 0 0 0 16.989 7.133V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-1-1z" />
        </svg>
    </button>
-    <button wire:loading title="Refreshing Status" wire:click='checkStatus'
+    <button wire:loading.delay.shortest wire:target="manualCheckStatus" title="Refreshing Status" wire:click='manualCheckStatus'
        class="mx-1 dark:hover:fill-white fill-black dark:fill-warning">
        <svg class="w-4 h-4 animate-spin" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path
@@ -4,23 +4,43 @@
    'lastDeploymentLink' => null,
    'noLoading' => false,
 ])
+@php
+    // Handle both colon format (backend) and parentheses format (from services.blade.php)
+    // starting:unknown → Starting (unknown)
+    // starting (unknown) → starting (unknown) (already formatted, display as-is)
+
+    if (str($status)->contains('(')) {
+        // Already in parentheses format from services.blade.php - use as-is
+        $displayStatus = $status;
+        $healthStatus = str($status)->after('(')->before(')')->trim()->value();
+    } elseif (str($status)->contains(':') && !str($status)->startsWith('Proxy')) {
+        // Colon format from backend - transform it
+        $parts = explode(':', $status);
+        $displayStatus = str($parts[0])->headline();
+        $healthStatus = $parts[1] ?? null;
+    } else {
+        // Simple status without health
+        $displayStatus = str($status)->headline();
+        $healthStatus = null;
+    }
+@endphp
 <div class="flex items-center">
    @if (!$noLoading)
        <x-loading wire:loading.delay.longer />
    @endif
    <span wire:loading.remove.delay.longer class="flex items-center">
        <div class="badge badge-warning"></div>
-        <div class="pl-2 pr-1 text-xs font-bold tracking-wider dark:text-warning" @if($title) title="{{$title}}" @endif>
+        <div class="pl-2 pr-1 text-xs font-bold dark:text-warning" @if($title) title="{{$title}}" @endif>
           @if ($lastDeploymentLink)
              <a href="{{ $lastDeploymentLink }}" target="_blank" class="underline cursor-pointer">
-                  {{ str($status)->before(':')->headline() }}
+                  {{ $displayStatus }}
              </a>
          @else
-              {{ str($status)->before(':')->headline() }}
+              {{ $displayStatus }}
          @endif
        </div>
-        @if (!str($status)->startsWith('Proxy') && !str($status)->contains('('))
-            <div class="text-xs dark:text-warning">({{ str($status)->after(':') }})</div>
+        @if ($healthStatus && !str($displayStatus)->contains('('))
+            <div class="text-xs dark:text-warning">({{ $healthStatus }})</div>
        @endif
    </span>
 </div>
@@ -4,29 +4,55 @@
    'lastDeploymentLink' => null,
    'noLoading' => false,
 ])
+@php
+    // Handle both colon format (backend) and parentheses format (from services.blade.php)
+    // running:healthy → Running (healthy)
+    // running (healthy) → running (healthy) (already formatted, display as-is)
+
+    if (str($status)->contains('(')) {
+        // Already in parentheses format from services.blade.php - use as-is
+        $displayStatus = $status;
+        $healthStatus = str($status)->after('(')->before(')')->trim()->value();
+    } elseif (str($status)->contains(':') && !str($status)->startsWith('Proxy')) {
+        // Colon format from backend - transform it
+        $parts = explode(':', $status);
+        $displayStatus = str($parts[0])->headline();
+        $healthStatus = $parts[1] ?? null;
+    } else {
+        // Simple status without health
+        $displayStatus = str($status)->headline();
+        $healthStatus = null;
+    }
+@endphp
 <div class="flex items-center">
    <div class="flex items-center">
        <div wire:loading.delay.longer wire:target="checkProxy(true)" class="badge badge-warning"></div>
        <div wire:loading.remove.delay.longer wire:target="checkProxy(true)" class="badge badge-success"></div>
-        <div class="pl-2 pr-1 text-xs font-bold tracking-wider text-success"
+        <div class="pl-2 pr-1 text-xs font-bold text-success"
            @if ($title) title="{{ $title }}" @endif>
            @if ($lastDeploymentLink)
                <a href="{{ $lastDeploymentLink }}" target="_blank" class="underline cursor-pointer">
-                    {{ str($status)->before(':')->headline() }}
+                    {{ $displayStatus }}
                </a>
            @else
-                {{ str($status)->before(':')->headline() }}
+                {{ $displayStatus }}
            @endif
        </div>
+        @if ($healthStatus && !str($displayStatus)->contains('('))
+            <div class="text-xs text-success">({{ $healthStatus }})</div>
+        @endif
        @php
+            $showUnknownHelper =
+                !str($status)->startsWith('Proxy') &&
+                (str($status)->contains('unknown') || str($healthStatus)->contains('unknown'));
            $showUnhealthyHelper =
                !str($status)->startsWith('Proxy') &&
-                !str($status)->contains('(') &&
-                str($status)->contains('unhealthy');
+                (str($status)->contains('unhealthy') || str($healthStatus)->contains('unhealthy'));
        @endphp
-        @if ($showUnhealthyHelper)
+        @if ($showUnknownHelper)
+        <div class="px-2">
            <x-helper
-                helper="Unhealthy state. <span class='dark:text-warning text-coollabs'>This doesn't mean that the resource is malfunctioning.</span><br><br>- If the resource is accessible, it indicates that no health check is configured - it is not mandatory.<br>- If the resource is not accessible (returning 404 or 503), it may indicate that a health check is needed and has not passed. <span class='dark:text-warning text-coollabs'>Your action is required.</span><br><br>More details in the <a href='https://coolify.io/docs/knowledge-base/proxy/traefik/healthchecks' class='underline dark:text-warning text-coollabs' target='_blank'>documentation</a>.">
+                helper="No health check configured. <span class='dark:text-warning text-coollabs'>The resource may be functioning normally.</span><br><br>Traefik and Caddy will route traffic to this container even without a health check. However, configuring a health check is recommended to ensure the resource is ready before receiving traffic.<br><br>More details in the <a href='https://coolify.io/docs/knowledge-base/proxy/traefik/healthchecks' class='underline dark:text-warning text-coollabs' target='_blank'>documentation</a>.">
                <x-slot:icon>
                    <svg class="hidden w-4 h-4 dark:text-warning lg:block" viewBox="0 0 256 256"
                        xmlns="http://www.w3.org/2000/svg">
@@ -36,6 +62,22 @@
                    </svg>
                </x-slot:icon>
            </x-helper>
+        </div>
+        @endif
+        @if ($showUnhealthyHelper)
+         <div class="px-2">
+            <x-helper
+                helper="Unhealthy state. <span class='dark:text-warning text-coollabs'>The health check is failing.</span><br><br>This resource will <span class='dark:text-warning text-coollabs'>NOT work with Traefik</span> as it expects a healthy state. Your action is required to fix the health check or the underlying issue causing it to fail.<br><br>More details in the <a href='https://coolify.io/docs/knowledge-base/proxy/traefik/healthchecks' class='underline dark:text-warning text-coollabs' target='_blank'>documentation</a>.">
+                <x-slot:icon>
+                    <svg class="hidden w-4 h-4 dark:text-warning lg:block" viewBox="0 0 256 256"
+                        xmlns="http://www.w3.org/2000/svg">
+                        <path fill="currentColor"
+                            d="M240.26 186.1L152.81 34.23a28.74 28.74 0 0 0-49.62 0L15.74 186.1a27.45 27.45 0 0 0 0 27.71A28.31 28.31 0 0 0 40.55 228h174.9a28.31 28.31 0 0 0 24.79-14.19a27.45 27.45 0 0 0 .02-27.71m-20.8 15.7a4.46 4.46 0 0 1-4 2.2H40.55a4.46 4.46 0 0 1-4-2.2a3.56 3.56 0 0 1 0-3.73L124 46.2a4.77 4.77 0 0 1 8 0l87.44 151.87a3.56 3.56 0 0 1 .02 3.73M116 136v-32a12 12 0 0 1 24 0v32a12 12 0 0 1-24 0m28 40a16 16 0 1 1-16-16a16 16 0 0 1 16 16">
+                        </path>
+                    </svg>
+                </x-slot:icon>
+            </x-helper>
+        </div>
        @endif
    </div>

@@ -1,23 +1,26 @@
-@if (str($complexStatus)->contains('running'))
-    <x-status.running :status="$complexStatus" />
-@elseif(str($complexStatus)->contains('starting'))
-    <x-status.restarting :status="$complexStatus" />
-@elseif(str($complexStatus)->contains('restarting'))
-    <x-status.restarting :status="$complexStatus" />
-@elseif(str($complexStatus)->contains('degraded'))
-    <x-status.degraded :status="$complexStatus" />
+@php
+    $displayStatus = formatContainerStatus($complexStatus);
+@endphp
+@if (str($displayStatus)->lower()->contains('running'))
+    <x-status.running :status="$displayStatus" />
+@elseif(str($displayStatus)->lower()->contains('starting'))
+    <x-status.restarting :status="$displayStatus" />
+@elseif(str($displayStatus)->lower()->contains('restarting'))
+    <x-status.restarting :status="$displayStatus" />
+@elseif(str($displayStatus)->lower()->contains('degraded'))
+    <x-status.degraded :status="$displayStatus" />
@else
-    <x-status.stopped :status="$complexStatus" />
+    <x-status.stopped :status="$displayStatus" />
@endif
@if (!str($complexStatus)->contains('exited') && $showRefreshButton)
-    <button wire:loading.remove title="Refresh Status" wire:click='checkStatus'
+    <button wire:loading.remove.delay.shortest wire:target="manualCheckStatus" title="Refresh Status" wire:click='manualCheckStatus'
        class="mx-1 dark:hover:fill-white fill-black dark:fill-warning">
        <svg class="w-4 h-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M12 2a10.016 10.016 0 0 0-7 2.877V3a1 1 0 1 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2H6.218A7.98 7.98 0 0 1 20 12a1 1 0 0 0 2 0A10.012 10.012 0 0 0 12 2zm7.989 13.5h-4.5a1 1 0 0 0 0 2h2.293A7.98 7.98 0 0 1 4 12a1 1 0 0 0-2 0a9.986 9.986 0 0 0 16.989 7.133V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-1-1z" />
        </svg>
    </button>
-    <button wire:loading title="Refreshing Status" wire:click='checkStatus'
+    <button wire:loading.delay.shortest wire:target="manualCheckStatus" title="Refreshing Status" wire:click='manualCheckStatus'
        class="mx-1 dark:hover:fill-white fill-black dark:fill-warning">
        <svg class="w-4 h-4 animate-spin" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path
@@ -2,12 +2,47 @@
    'status' => 'Stopped',
    'noLoading' => false,
 ])
+@php
+    // Handle both colon format (backend) and parentheses format (from services.blade.php)
+    // For exited containers, health status is hidden (health checks don't run on stopped containers)
+    // exited:unhealthy → Exited
+    // exited (unhealthy) → Exited
+
+    if (str($status)->contains('(')) {
+        // Already in parentheses format from services.blade.php - use as-is
+        $displayStatus = $status;
+        $healthStatus = str($status)->after('(')->before(')')->trim()->value();
+
+        // Don't show health status for exited containers (health checks don't run on stopped containers)
+        if (str($displayStatus)->lower()->contains('exited')) {
+            $displayStatus = str($status)->before('(')->trim()->headline();
+            $healthStatus = null;
+        }
+    } elseif (str($status)->contains(':')) {
+        // Colon format from backend - transform it
+        $parts = explode(':', $status);
+        $displayStatus = str($parts[0])->headline();
+        $healthStatus = $parts[1] ?? null;
+
+        // Don't show health status for exited containers (health checks don't run on stopped containers)
+        if (str($displayStatus)->lower()->contains('exited')) {
+            $healthStatus = null;
+        }
+    } else {
+        // Simple status without health
+        $displayStatus = str($status)->headline();
+        $healthStatus = null;
+    }
+@endphp
 <div class="flex items-center">
    @if (!$noLoading)
        <x-loading wire:loading.delay.longer />
    @endif
    <span wire:loading.remove.delay.longer class="flex items-center">
        <div class="badge badge-error "></div>
-        <div class="pl-2 pr-1 text-xs font-bold tracking-wider text-error">{{ str($status)->before(':')->headline() }}</div>
+        <div class="pl-2 pr-1 text-xs font-bold text-error">{{ $displayStatus }}</div>
+        @if ($healthStatus && !str($displayStatus)->contains('('))
+            <div class="text-xs text-error">({{ $healthStatus }})</div>
+        @endif
    </span>
 </div>
@@ -6,7 +6,7 @@
    popToast(custom) {
        let html = '';
        if (typeof custom != 'undefined') {
-            html = custom;
+            html = window.sanitizeHTML(custom);
        }
        toast(this.title, { description: this.description, type: this.type, position: this.position, html: html })
    }
@@ -96,27 +96,27 @@
                        topToast.style.top = '0px';
                    }
                }
-
+        
                let bottomPositionOfFirstToast = this.getBottomPositionOfElement(topToast);
-
+        
                if (this.toasts.length == 1) return;
                let middleToast = document.getElementById(this.toasts[1].id);
                middleToast.style.zIndex = 90;
-
+        
                if (this.expanded) {
                    middleToastPosition = topToast.getBoundingClientRect().height +
                        this.paddingBetweenToasts + 'px';
-
+        
                    if (this.position.includes('bottom')) {
                        middleToast.style.top = 'auto';
                        middleToast.style.bottom = middleToastPosition;
                    } else {
                        middleToast.style.top = middleToastPosition;
                    }
-
+        
                    middleToast.style.scale = '100%';
                    middleToast.style.transform = 'translateY(0px)';
-
+        
                } else {
                    middleToast.style.scale = '94%';
                    if (this.position.includes('bottom')) {
@@ -126,8 +126,8 @@
                        middleToast.style.transform = 'translateY(16px)';
                    }
                }
-
-
+        
+        
                if (this.toasts.length == 2) return;
                let bottomToast = document.getElementById(this.toasts[2].id);
                bottomToast.style.zIndex = 80;
@@ -136,14 +136,14 @@
                        this.paddingBetweenToasts +
                        middleToast.getBoundingClientRect().height +
                        this.paddingBetweenToasts + 'px';
-
+        
                    if (this.position.includes('bottom')) {
                        bottomToast.style.top = 'auto';
                        bottomToast.style.bottom = bottomToastPosition;
                    } else {
                        bottomToast.style.top = bottomToastPosition;
                    }
-
+        
                    bottomToast.style.scale = '100%';
                    bottomToast.style.transform = 'translateY(0px)';
                } else {
@@ -155,9 +155,9 @@
                        bottomToast.style.transform = 'translateY(32px)';
                    }
                }
-
-
-
+        
+        
+        
                if (this.toasts.length == 3) return;
                let burnToast = document.getElementById(this.toasts[3].id);
                burnToast.style.zIndex = 70;
@@ -168,14 +168,14 @@
                        this.paddingBetweenToasts +
                        bottomToast.getBoundingClientRect().height +
                        this.paddingBetweenToasts + 'px';
-
+        
                    if (this.position.includes('bottom')) {
                        burnToast.style.top = 'auto';
                        burnToast.style.bottom = burnToastPosition;
                    } else {
                        burnToast.style.top = burnToastPosition;
                    }
-
+        
                    burnToast.style.scale = '100%';
                    burnToast.style.transform = 'translateY(0px)';
                } else {
@@ -183,40 +183,40 @@
                    this.alignBottom(topToast, burnToast);
                    burnToast.style.transform = 'translateY(48px)';
                }
-
+        
                burnToast.firstElementChild.classList.remove('opacity-100');
                burnToast.firstElementChild.classList.add('opacity-0');
-
+        
                let that = this;
                // Burn 🔥 (remove) last toast
                setTimeout(function() {
                    that.toasts.pop();
                }, 300);
-
+        
                if (this.position.includes('bottom')) {
                    middleToast.style.top = 'auto';
                }
-
+        
                return;
            },
            alignBottom(element1, element2) {
                // Get the top position and height of the first element
                let top1 = element1.offsetTop;
                let height1 = element1.offsetHeight;
-
+        
                // Get the height of the second element
                let height2 = element2.offsetHeight;
-
+        
                // Calculate the top position for the second element
                let top2 = top1 + (height1 - height2);
-
+        
                // Apply the calculated top position to the second element
                element2.style.top = top2 + 'px';
            },
            alignTop(element1, element2) {
                // Get the top position of the first element
                let top1 = element1.offsetTop;
-
+        
                // Apply the same top position to the second element
                element2.style.top = top1 + 'px';
            },
@@ -244,13 +244,13 @@
                    $el.style.height = '0px';
                    return;
                }
-
+        
                lastToast = this.toasts[this.toasts.length - 1];
                lastToastRectangle = document.getElementById(lastToast.id).getBoundingClientRect();
-
+        
                firstToast = this.toasts[0];
                firstToastRectangle = document.getElementById(firstToast.id).getBoundingClientRect();
-
+        
                if (this.toastsHovered) {
                    if (this.position.includes('bottom')) {
                        $el.style.height = ((firstToastRectangle.top + firstToastRectangle.height) - lastToastRectangle.top) + 'px';
@@ -276,13 +276,16 @@
                if(event.detail.position){
                    position = event.detail.position;
                }
+                // Sanitize HTML content to prevent XSS
+                let sanitizedHtml = event.detail.html ? window.sanitizeHTML(event.detail.html) : '';
+                
                toasts.unshift({
                    id: 'toast-' + Math.random().toString(16).slice(2),
                    show: false,
                    message: event.detail.message,
                    description: event.detail.description,
                    type: event.detail.type,
-                    html: event.detail.html
+                    html: sanitizedHtml
                });
            "
            @mouseenter="toastsHovered=true;" @mouseleave="toastsHovered=false" x-init="if (layout == 'expanded') {
@@ -356,9 +359,9 @@
                        }, 2000)
                    }
                });
-
+                
                setTimeout(function() {
-
+                
                    setTimeout(function() {
                        if (position.includes('bottom')) {
                            $el.firstElementChild.classList.remove('opacity-0', 'translate-y-full');
@@ -366,13 +369,13 @@
                            $el.firstElementChild.classList.remove('opacity-0', '-translate-y-full');
                        }
                        $el.firstElementChild.classList.add('opacity-100', 'translate-y-0');
-
+                
                        setTimeout(function() {
                            stackToasts();
                        }, 10);
                    }, 5);
                }, 50);
-
+                
                this.timeout = setTimeout(function() {
                    setTimeout(function() {
                        $el.firstElementChild.classList.remove('opacity-100');
@@ -394,43 +397,43 @@
                        :class="{ 'p-4': !toast.html, 'p-0': toast.html }">
                        <template x-if="!toast.html">
                            <div class="relative w-full">
-                                <div class="flex items-start"
+                                <div class="flex items-center"
                                    :class="{ 'text-green-500': toast.type=='success', 'text-blue-500': toast.type=='info', 'text-orange-400': toast.type=='warning', 'text-red-500': toast.type=='danger', 'text-gray-800': toast.type=='default' }">

-                                    <svg x-show="toast.type=='success'" class="w-[18px] h-[18px] mr-1.5 -ml-1"
+                                    <svg x-show="toast.type=='success'" class="w-[18px] h-[18px] mr-1.5 -ml-1 flex-shrink-0"
                                        viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                            d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM16.7744 9.63269C17.1238 9.20501 17.0604 8.57503 16.6327 8.22559C16.2051 7.87615 15.5751 7.93957 15.2256 8.36725L10.6321 13.9892L8.65936 12.2524C8.24484 11.8874 7.61295 11.9276 7.248 12.3421C6.88304 12.7566 6.92322 13.3885 7.33774 13.7535L9.31046 15.4903C10.1612 16.2393 11.4637 16.1324 12.1808 15.2547L16.7744 9.63269Z"
                                            fill="currentColor"></path>
                                    </svg>
-                                    <svg x-show="toast.type=='info'" class="w-[18px] h-[18px] mr-1.5 -ml-1"
+                                    <svg x-show="toast.type=='info'" class="w-[18px] h-[18px] mr-1.5 -ml-1 flex-shrink-0"
                                        viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                            d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM12 9C12.5523 9 13 8.55228 13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9ZM13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12V16C11 16.5523 11.4477 17 12 17C12.5523 17 13 16.5523 13 16V12Z"
                                            fill="currentColor"></path>
                                    </svg>
-                                    <svg x-show="toast.type=='warning'" class="w-[18px] h-[18px] mr-1.5 -ml-1"
+                                    <svg x-show="toast.type=='warning'" class="w-[18px] h-[18px] mr-1.5 -ml-1 flex-shrink-0"
                                        viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                            d="M9.44829 4.46472C10.5836 2.51208 13.4105 2.51168 14.5464 4.46401L21.5988 16.5855C22.7423 18.5509 21.3145 21 19.05 21L4.94967 21C2.68547 21 1.25762 18.5516 2.4004 16.5862L9.44829 4.46472ZM11.9995 8C12.5518 8 12.9995 8.44772 12.9995 9V13C12.9995 13.5523 12.5518 14 11.9995 14C11.4473 14 10.9995 13.5523 10.9995 13V9C10.9995 8.44772 11.4473 8 11.9995 8ZM12.0009 15.99C11.4486 15.9892 11.0003 16.4363 10.9995 16.9886L10.9995 16.9986C10.9987 17.5509 11.4458 17.9992 11.9981 18C12.5504 18.0008 12.9987 17.5537 12.9995 17.0014L12.9995 16.9914C13.0003 16.4391 12.5532 15.9908 12.0009 15.99Z"
                                            fill="currentColor"></path>
                                    </svg>
-                                    <svg x-show="toast.type=='danger'" class="w-[18px] h-[18px] mr-1.5 -ml-1"
+                                    <svg x-show="toast.type=='danger'" class="w-[18px] h-[18px] mr-1.5 -ml-1 flex-shrink-0"
                                        viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                            d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM11.9996 7C12.5519 7 12.9996 7.44772 12.9996 8V12C12.9996 12.5523 12.5519 13 11.9996 13C11.4474 13 10.9996 12.5523 10.9996 12V8C10.9996 7.44772 11.4474 7 11.9996 7ZM12.001 14.99C11.4488 14.9892 11.0004 15.4363 10.9997 15.9886L10.9996 15.9986C10.9989 16.5509 11.446 16.9992 11.9982 17C12.5505 17.0008 12.9989 16.5537 12.9996 16.0014L12.9996 15.9914C13.0004 15.4391 12.5533 14.9908 12.001 14.99Z"
                                            fill="currentColor"></path>
                                    </svg>
-                                    <p class="text-black leading-2 dark:text-neutral-200" x-html="toast.message">
+                                    <p class="text-black leading-2 dark:text-neutral-200" x-text="toast.message">
                                    </p>
                                </div>
                                <div x-show="toast.description" :class="{ 'pl-5': toast.type!='default' }"
                                    class="mt-1.5 text-xs px-2 opacity-90 whitespace-pre-wrap w-full break-words"
-                                    x-html="toast.description"></div>
+                                    x-html="window.sanitizeHTML(toast.description)"></div>
                            </div>
                        </template>
                        <template x-if="toast.html">
-                            <div x-html="toast.html"></div>
+                            <div x-html="window.sanitizeHTML(toast.html)"></div>
                        </template>
                        <span class="absolute mt-1 text-xs right-[4.4rem] text-success font-bold"
                            x-show="copyNotification"
@@ -0,0 +1,152 @@
+@props(['step' => 0])
+
+{{--
+    Step Mapping (Backend → UI):
+    Backend steps 1-2 (config download, env update) → UI Step 1: Preparing
+    Backend step 3 (pulling images) → UI Step 2: Helper + UI Step 3: Image
+    Backend steps 4-5 (stop/start containers) → UI Step 4: Restart
+    Backend step 6 (complete) → mapped in JS mapStepToUI() in upgrade.blade.php
+
+    The currentStep variable is inherited from parent Alpine component (upgradeModal).
+--}}
+<div class="w-full max-w-md mx-auto" x-data="{ activeStep: {{ $step }} }" x-effect="activeStep = $el.closest('[x-data]')?.__x?.$data?.currentStep ?? {{ $step }}">
+    <div class="flex items-center justify-between">
+        {{-- Step 1: Preparing --}}
+        <div class="flex items-center flex-1">
+            <div class="flex flex-col items-center">
+                <div class="flex items-center justify-center size-8 rounded-full border-2 transition-all duration-300"
+                    :class="{
+                        'bg-success border-success': currentStep > 1,
+                        'bg-warning/20 border-warning': currentStep === 1,
+                        'border-neutral-400 dark:border-coolgray-300': currentStep < 1
+                    }">
+                    <template x-if="currentStep > 1">
+                        <svg class="size-4 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+                        </svg>
+                    </template>
+                    <template x-if="currentStep === 1">
+                        <svg class="size-4 text-warning animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                        </svg>
+                    </template>
+                    <template x-if="currentStep < 1">
+                        <span class="text-xs font-medium text-neutral-500 dark:text-neutral-400">1</span>
+                    </template>
+                </div>
+                <span class="mt-1.5 text-xs font-medium transition-colors duration-300"
+                    :class="{
+                        'text-success': currentStep > 1,
+                        'text-warning': currentStep === 1,
+                        'text-neutral-500 dark:text-neutral-400': currentStep < 1
+                    }">Preparing</span>
+            </div>
+            <div class="flex-1 h-0.5 mx-2 transition-all duration-300"
+                :class="currentStep > 1 ? 'bg-success' : 'bg-neutral-300 dark:bg-coolgray-300'"></div>
+        </div>
+
+        {{-- Step 2: Helper --}}
+        <div class="flex items-center flex-1">
+            <div class="flex flex-col items-center">
+                <div class="flex items-center justify-center size-8 rounded-full border-2 transition-all duration-300"
+                    :class="{
+                        'bg-success border-success': currentStep > 2,
+                        'bg-warning/20 border-warning': currentStep === 2,
+                        'border-neutral-400 dark:border-coolgray-300': currentStep < 2
+                    }">
+                    <template x-if="currentStep > 2">
+                        <svg class="size-4 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+                        </svg>
+                    </template>
+                    <template x-if="currentStep === 2">
+                        <svg class="size-4 text-warning animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                        </svg>
+                    </template>
+                    <template x-if="currentStep < 2">
+                        <span class="text-xs font-medium text-neutral-500 dark:text-neutral-400">2</span>
+                    </template>
+                </div>
+                <span class="mt-1.5 text-xs font-medium transition-colors duration-300"
+                    :class="{
+                        'text-success': currentStep > 2,
+                        'text-warning': currentStep === 2,
+                        'text-neutral-500 dark:text-neutral-400': currentStep < 2
+                    }">Helper</span>
+            </div>
+            <div class="flex-1 h-0.5 mx-2 transition-all duration-300"
+                :class="currentStep > 2 ? 'bg-success' : 'bg-neutral-300 dark:bg-coolgray-300'"></div>
+        </div>
+
+        {{-- Step 3: Image --}}
+        <div class="flex items-center flex-1">
+            <div class="flex flex-col items-center">
+                <div class="flex items-center justify-center size-8 rounded-full border-2 transition-all duration-300"
+                    :class="{
+                        'bg-success border-success': currentStep > 3,
+                        'bg-warning/20 border-warning': currentStep === 3,
+                        'border-neutral-400 dark:border-coolgray-300': currentStep < 3
+                    }">
+                    <template x-if="currentStep > 3">
+                        <svg class="size-4 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+                        </svg>
+                    </template>
+                    <template x-if="currentStep === 3">
+                        <svg class="size-4 text-warning animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                        </svg>
+                    </template>
+                    <template x-if="currentStep < 3">
+                        <span class="text-xs font-medium text-neutral-500 dark:text-neutral-400">3</span>
+                    </template>
+                </div>
+                <span class="mt-1.5 text-xs font-medium transition-colors duration-300"
+                    :class="{
+                        'text-success': currentStep > 3,
+                        'text-warning': currentStep === 3,
+                        'text-neutral-500 dark:text-neutral-400': currentStep < 3
+                    }">Image</span>
+            </div>
+            <div class="flex-1 h-0.5 mx-2 transition-all duration-300"
+                :class="currentStep > 3 ? 'bg-success' : 'bg-neutral-300 dark:bg-coolgray-300'"></div>
+        </div>
+
+        {{-- Step 4: Restart --}}
+        <div class="flex items-center">
+            <div class="flex flex-col items-center">
+                <div class="flex items-center justify-center size-8 rounded-full border-2 transition-all duration-300"
+                    :class="{
+                        'bg-success border-success': currentStep > 4,
+                        'bg-warning/20 border-warning': currentStep === 4,
+                        'border-neutral-400 dark:border-coolgray-300': currentStep < 4
+                    }">
+                    <template x-if="currentStep > 4">
+                        <svg class="size-4 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+                        </svg>
+                    </template>
+                    <template x-if="currentStep === 4">
+                        <svg class="size-4 text-warning animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                        </svg>
+                    </template>
+                    <template x-if="currentStep < 4">
+                        <span class="text-xs font-medium text-neutral-500 dark:text-neutral-400">4</span>
+                    </template>
+                </div>
+                <span class="mt-1.5 text-xs font-medium transition-colors duration-300"
+                    :class="{
+                        'text-success': currentStep > 4,
+                        'text-warning': currentStep === 4,
+                        'text-neutral-500 dark:text-neutral-400': currentStep < 4
+                    }">Restart</span>
+            </div>
+        </div>
+    </div>
+</div>