From 863fe794a8b6aa82b761dc07e63f30866437df23 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Fri, 5 Dec 2025 09:55:12 +0100
Subject: [PATCH] Add colorized log levels to runtime logs with toggle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add color toggle button (paint brush icon) to runtime logs toolbar
- Color log lines by level: error (red), warning (yellow), debug (purple), info (blue)
- Store color preference in localStorage ('coolify-color-logs')
- Widen Lines input from w-24 to w-32 for better usability
- Remove color features from deployment logs (keeping it cleaner)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../application/deployment/show.blade.php     | 42 +----------------
 .../project/shared/get-logs.blade.php         | 46 +++++++++++++++++--
 2 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/resources/views/livewire/project/application/deployment/show.blade.php b/resources/views/livewire/project/application/deployment/show.blade.php
index 8615e0bf5..e5d1ce8e6 100644
--- a/resources/views/livewire/project/application/deployment/show.blade.php
+++ b/resources/views/livewire/project/application/deployment/show.blade.php
@@ -10,7 +10,6 @@
         alwaysScroll: {{ $isKeepAliveOn ? 'true' : 'false' }},
         intervalId: null,
         showTimestamps: true,
-        colorLogs: localStorage.getItem('coolify-color-logs') === 'true',
         searchQuery: '',
         renderTrigger: 0,
         deploymentId: '{{ $application_deployment_queue->deployment_uuid ?? 'deployment' }}',
@@ -49,30 +48,6 @@
                 this.intervalId = null;
             }
         },
-        toggleColorLogs() {
-            this.colorLogs = !this.colorLogs;
-            localStorage.setItem('coolify-color-logs', this.colorLogs);
-        },
-        getLogLevel(text) {
-            const lowerText = text.toLowerCase();
-            // Error detection (highest priority)
-            if (/\b(error|err|failed|failure|exception|fatal|panic|critical)\b/.test(lowerText)) {
-                return 'error';
-            }
-            // Warning detection
-            if (/\b(warn|warning|wrn|caution)\b/.test(lowerText)) {
-                return 'warning';
-            }
-            // Debug detection
-            if (/\b(debug|dbg|trace|verbose)\b/.test(lowerText)) {
-                return 'debug';
-            }
-            // Info detection
-            if (/\b(info|inf|notice)\b/.test(lowerText)) {
-                return 'info';
-            }
-            return null;
-        },
         matchesSearch(text) {
             if (!this.searchQuery.trim()) return true;
             return text.toLowerCase().includes(this.searchQuery.toLowerCase());
@@ -250,15 +225,6 @@ class="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-
                                         d="M12 12.75c1.148 0 2.278.08 3.383.237 1.037.146 1.866.966 1.866 2.013 0 3.728-2.35 6.75-5.25 6.75S6.75 18.728 6.75 15c0-1.046.83-1.867 1.866-2.013A24.204 24.204 0 0 1 12 12.75Zm0 0c2.883 0 5.647.508 8.207 1.44a23.91 23.91 0 0 1-1.152 6.06M12 12.75c-2.883 0-5.647.508-8.208 1.44.125 2.104.52 4.136 1.153 6.06M12 12.75a2.25 2.25 0 0 0 2.248-2.354M12 12.75a2.25 2.25 0 0 1-2.248-2.354M12 8.25c.995 0 1.971-.08 2.922-.236.403-.066.74-.358.795-.762a3.778 3.778 0 0 0-.399-2.25M12 8.25c-.995 0-1.97-.08-2.922-.236-.402-.066-.74-.358-.795-.762a3.734 3.734 0 0 1 .4-2.253M12 8.25a2.25 2.25 0 0 0-2.248 2.146M12 8.25a2.25 2.25 0 0 1 2.248 2.146M8.683 5a6.032 6.032 0 0 1-1.155-1.002c.07-.63.27-1.222.574-1.747m.581 2.749A3.75 3.75 0 0 1 15.318 5m0 0c.427-.283.815-.62 1.155-.999a4.471 4.471 0 0 0-.575-1.752M4.921 6a24.048 24.048 0 0 0-.392 3.314c1.668.546 3.416.914 5.223 1.082M19.08 6c.205 1.08.337 2.187.392 3.314a23.882 23.882 0 0 1-5.223 1.082" />
                                 </svg>
                             </button>
-                            <button title="Toggle Log Colors" x-on:click="toggleColorLogs"
-                                :class="colorLogs ? '!text-warning' : ''"
-                                class="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
-                                <svg class="w-4 h-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"
-                                    stroke="currentColor" stroke-width="1.5">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M4.098 19.902a3.75 3.75 0 0 0 5.304 0l6.401-6.402M6.75 21A3.75 3.75 0 0 1 3 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 0 0 3.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008Z" />
-                                </svg>
-                            </button>
                             <button title="Follow Logs" :class="alwaysScroll ? '!text-warning' : ''"
                                 x-on:click="toggleScroll"
                                 class="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
@@ -302,13 +268,7 @@ class="text-gray-500 dark:text-gray-400 py-2">
                                     $searchableContent = $line['timestamp'] . ' ' . $lineContent;
                                 @endphp
                                 <div data-log-line data-log-content="{{ htmlspecialchars($searchableContent) }}"
-                                    x-bind:class="{
-                                        'hidden': !matchesSearch($el.dataset.logContent),
-                                        'bg-red-500/10 dark:bg-red-500/15': colorLogs && getLogLevel($el.dataset.logContent) === 'error',
-                                        'bg-yellow-500/10 dark:bg-yellow-500/15': colorLogs && getLogLevel($el.dataset.logContent) === 'warning',
-                                        'bg-purple-500/10 dark:bg-purple-500/15': colorLogs && getLogLevel($el.dataset.logContent) === 'debug',
-                                        'bg-blue-500/10 dark:bg-blue-500/15': colorLogs && getLogLevel($el.dataset.logContent) === 'info',
-                                    }" @class([
+                                    x-bind:class="{ 'hidden': !matchesSearch($el.dataset.logContent) }" @class([
                                         'mt-2' => isset($line['command']) && $line['command'],
                                         'flex gap-2',
                                     ])>
diff --git a/resources/views/livewire/project/shared/get-logs.blade.php b/resources/views/livewire/project/shared/get-logs.blade.php
index 129bf8135..f031690a5 100644
--- a/resources/views/livewire/project/shared/get-logs.blade.php
+++ b/resources/views/livewire/project/shared/get-logs.blade.php
@@ -6,6 +6,7 @@
         fullscreen: false,
         alwaysScroll: false,
         intervalId: null,
+        colorLogs: localStorage.getItem('coolify-color-logs') === 'true',
         searchQuery: '',
         renderTrigger: 0,
         containerName: '{{ $container ?? "logs" }}',
@@ -44,6 +45,30 @@
                 this.intervalId = null;
             }
         },
+        toggleColorLogs() {
+            this.colorLogs = !this.colorLogs;
+            localStorage.setItem('coolify-color-logs', this.colorLogs);
+        },
+        getLogLevel(text) {
+            const lowerText = text.toLowerCase();
+            // Error detection (highest priority)
+            if (/\b(error|err|failed|failure|exception|fatal|panic|critical)\b/.test(lowerText)) {
+                return 'error';
+            }
+            // Warning detection
+            if (/\b(warn|warning|wrn|caution)\b/.test(lowerText)) {
+                return 'warning';
+            }
+            // Debug detection
+            if (/\b(debug|dbg|trace|verbose)\b/.test(lowerText)) {
+                return 'debug';
+            }
+            // Info detection
+            if (/\b(info|inf|notice)\b/.test(lowerText)) {
+                return 'info';
+            }
+            return null;
+        },
         matchesSearch(line) {
             if (!this.searchQuery.trim()) return true;
             return line.toLowerCase().includes(this.searchQuery.toLowerCase());
@@ -174,7 +199,7 @@ class="flex items-center justify-between gap-2 px-4 py-2 border-b dark:border-co
                                 class="absolute left-2 top-1/2 -translate-y-1/2 text-xs text-gray-400 pointer-events-none">Lines:</span>
                             <input type="number" wire:model="numberOfLines" placeholder="100" min="1"
                                 title="Number of Lines" {{ $streamLogs ? 'readonly' : '' }}
-                                class="input input-sm w-24 pl-11 text-center dark:bg-coolgray-300" />
+                                class="input input-sm w-32 pl-11 text-center dark:bg-coolgray-300" />
                         </form>
                         <span x-show="searchQuery.trim()" x-text="getMatchCount() + ' matches'"
                             class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap"></span>
@@ -221,6 +246,15 @@ class="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-
                                     d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                             </svg>
                         </button>
+                        <button title="Toggle Log Colors" x-on:click="toggleColorLogs"
+                            :class="colorLogs ? '!text-warning' : ''"
+                            class="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                            <svg class="w-4 h-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"
+                                stroke="currentColor" stroke-width="1.5">
+                                <path stroke-linecap="round" stroke-linejoin="round"
+                                    d="M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42" />
+                            </svg>
+                        </button>
                         <button wire:click="toggleStreamLogs"
                             title="{{ $streamLogs ? 'Stop Streaming' : 'Stream Logs' }}"
                             class="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 {{ $streamLogs ? '!text-warning' : '' }}">
@@ -303,8 +337,14 @@ class="text-gray-500 dark:text-gray-400 py-2">
 
                                 @endphp
                                 <div data-log-line data-log-content="{{ $line }}"
-                                    x-bind:class="{ 'hidden': !matchesSearch($el.dataset.logContent) }"
-                                    class="flex gap-2 hover:bg-gray-100 dark:hover:bg-coolgray-500">
+                                    x-bind:class="{
+                                        'hidden': !matchesSearch($el.dataset.logContent),
+                                        'bg-red-500/10 dark:bg-red-500/15': colorLogs && getLogLevel($el.dataset.logContent) === 'error',
+                                        'bg-yellow-500/10 dark:bg-yellow-500/15': colorLogs && getLogLevel($el.dataset.logContent) === 'warning',
+                                        'bg-purple-500/10 dark:bg-purple-500/15': colorLogs && getLogLevel($el.dataset.logContent) === 'debug',
+                                        'bg-blue-500/10 dark:bg-blue-500/15': colorLogs && getLogLevel($el.dataset.logContent) === 'info',
+                                    }"
+                                    class="flex gap-2">
                                     @if ($timestamp && $showTimeStamps)
                                         <span class="shrink-0 text-gray-500">{{ $timestamp }}</span>
                                     @endif