From 40b1b1319ff10a2ff0cc50b983a0700a7d1ca57a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 18 Dec 2025 06:14:42 +0000
Subject: [PATCH 1/3] Improve logging view performance to prevent browser
 freezing

- Use CSS content-visibility: auto for lazy rendering of off-screen log lines
- Replace setInterval auto-scroll with requestAnimationFrame for smoother scrolling
- Cache HTML entity decoding to avoid repeated DOMParser calls (up to 5000 entries)
- Cache match count calculations to prevent repeated DOM queries
- Debounce search input (300ms) in deployment logs view
- Debounce Livewire render updates (100ms) to batch rapid changes
- Add log-line utility class with content-visibility optimization
- Add log-highlight utility class for search result highlighting

These changes address browser freezing when viewing deployment logs with
3500+ lines (GitHub issue #7668). The content-visibility CSS property lets
the browser skip rendering of off-screen content, significantly reducing
initial render time and memory usage.

Fixes #7668
---
 resources/css/utilities.css                   |  11 ++
 .../application/deployment/show.blade.php     | 106 +++++++++++-------
 .../project/shared/get-logs.blade.php         |  97 +++++++++++-----
 3 files changed, 147 insertions(+), 67 deletions(-)

diff --git a/resources/css/utilities.css b/resources/css/utilities.css
index abb177835..4f8230487 100644
--- a/resources/css/utilities.css
+++ b/resources/css/utilities.css
@@ -292,3 +292,14 @@ @utility dz-button {
 @utility xterm {
     @apply p-2;
 }
+
+/* Log line optimization - uses content-visibility for lazy rendering of off-screen log lines */
+@utility log-line {
+    content-visibility: auto;
+    contain-intrinsic-size: auto 1.5em;
+}
+
+/* Search highlight styling for logs */
+@utility log-highlight {
+    @apply bg-warning/40 dark:bg-warning/30 rounded-sm px-0.5;
+}
diff --git a/resources/views/livewire/project/application/deployment/show.blade.php b/resources/views/livewire/project/application/deployment/show.blade.php
index 5f37786f5..8b50e523b 100644
--- a/resources/views/livewire/project/application/deployment/show.blade.php
+++ b/resources/views/livewire/project/application/deployment/show.blade.php
@@ -8,26 +8,44 @@
         <div x-data="{
         fullscreen: @entangle('fullscreen'),
         alwaysScroll: {{ $isKeepAliveOn ? 'true' : 'false' }},
-        intervalId: null,
+        rafId: null,
         showTimestamps: true,
         searchQuery: '',
         renderTrigger: 0,
         deploymentId: '{{ $application_deployment_queue->deployment_uuid ?? 'deployment' }}',
+        // Cache for decoded HTML to avoid repeated DOMParser calls
+        decodeCache: new Map(),
+        // Cache for match count to avoid repeated DOM queries
+        matchCountCache: null,
+        lastSearchQuery: '',
         makeFullscreen() {
             this.fullscreen = !this.fullscreen;
         },
+        scrollToBottom() {
+            const logsContainer = document.getElementById('logsContainer');
+            if (logsContainer) {
+                logsContainer.scrollTop = logsContainer.scrollHeight;
+            }
+        },
+        scheduleScroll() {
+            if (!this.alwaysScroll) return;
+            this.rafId = requestAnimationFrame(() => {
+                this.scrollToBottom();
+                // Schedule next scroll after a reasonable delay (250ms instead of 100ms)
+                if (this.alwaysScroll) {
+                    setTimeout(() => this.scheduleScroll(), 250);
+                }
+            });
+        },
         toggleScroll() {
             this.alwaysScroll = !this.alwaysScroll;
             if (this.alwaysScroll) {
-                this.intervalId = setInterval(() => {
-                    const logsContainer = document.getElementById('logsContainer');
-                    if (logsContainer) {
-                        logsContainer.scrollTop = logsContainer.scrollHeight;
-                    }
-                }, 100);
+                this.scheduleScroll();
             } else {
-                clearInterval(this.intervalId);
-                this.intervalId = null;
+                if (this.rafId) {
+                    cancelAnimationFrame(this.rafId);
+                    this.rafId = null;
+                }
             }
         },
         matchesSearch(text) {
@@ -41,17 +59,19 @@
             }
             const logsContainer = document.getElementById('logs');
             if (!logsContainer) return false;
-
-            // Check if selection is within the logs container
             const range = selection.getRangeAt(0);
             return logsContainer.contains(range.commonAncestorContainer);
         },
         decodeHtml(text) {
-            // Decode HTML entities, handling double-encoding with max iteration limit to prevent DoS
+            // Return cached result if available
+            if (this.decodeCache.has(text)) {
+                return this.decodeCache.get(text);
+            }
+            // Decode HTML entities with max iteration limit
             let decoded = text;
             let prev = '';
             let iterations = 0;
-            const maxIterations = 3; // Prevent DoS from deeply nested HTML entities
+            const maxIterations = 3;
 
             while (decoded !== prev && iterations < maxIterations) {
                 prev = decoded;
@@ -59,11 +79,17 @@
                 decoded = doc.documentElement.textContent;
                 iterations++;
             }
+            // Cache the result (limit cache size to prevent memory bloat)
+            if (this.decodeCache.size > 5000) {
+                // Clear oldest entries when cache gets too large
+                const firstKey = this.decodeCache.keys().next().value;
+                this.decodeCache.delete(firstKey);
+            }
+            this.decodeCache.set(text, decoded);
             return decoded;
         },
         renderHighlightedLog(el, text) {
-            // Skip re-render if user has text selected in logs (preserves copy ability)
-            // But always render if the element is empty (initial render)
+            // Skip re-render if user has text selected in logs
             if (el.textContent && this.hasActiveLogSelection()) {
                 return;
             }
@@ -82,11 +108,9 @@
 
             let index = lowerText.indexOf(query, lastIndex);
             while (index !== -1) {
-                // Add text before match
                 if (index > lastIndex) {
                     el.appendChild(document.createTextNode(decoded.substring(lastIndex, index)));
                 }
-                // Add highlighted match
                 const mark = document.createElement('span');
                 mark.className = 'log-highlight';
                 mark.textContent = decoded.substring(index, index + this.searchQuery.length);
@@ -96,22 +120,28 @@
                 index = lowerText.indexOf(query, lastIndex);
             }
 
-            // Add remaining text
             if (lastIndex < decoded.length) {
                 el.appendChild(document.createTextNode(decoded.substring(lastIndex)));
             }
         },
         getMatchCount() {
             if (!this.searchQuery.trim()) return 0;
+            // Return cached count if search query hasn't changed
+            if (this.lastSearchQuery === this.searchQuery && this.matchCountCache !== null) {
+                return this.matchCountCache;
+            }
             const logs = document.getElementById('logs');
             if (!logs) return 0;
             const lines = logs.querySelectorAll('[data-log-line]');
             let count = 0;
+            const query = this.searchQuery.toLowerCase();
             lines.forEach(line => {
-                if (line.dataset.logContent && line.dataset.logContent.toLowerCase().includes(this.searchQuery.toLowerCase())) {
+                if (line.dataset.logContent && line.dataset.logContent.toLowerCase().includes(query)) {
                     count++;
                 }
             });
+            this.matchCountCache = count;
+            this.lastSearchQuery = this.searchQuery;
             return count;
         },
         downloadLogs() {
@@ -135,15 +165,11 @@
             URL.revokeObjectURL(url);
         },
         stopScroll() {
-            // Scroll to the end one final time before disabling
-            const logsContainer = document.getElementById('logsContainer');
-            if (logsContainer) {
-                logsContainer.scrollTop = logsContainer.scrollHeight;
-            }
+            this.scrollToBottom();
             this.alwaysScroll = false;
-            if (this.intervalId) {
-                clearInterval(this.intervalId);
-                this.intervalId = null;
+            if (this.rafId) {
+                cancelAnimationFrame(this.rafId);
+                this.rafId = null;
             }
         },
         init() {
@@ -153,30 +179,32 @@
                     skip();
                 }
             });
-            // Re-render logs after Livewire updates
+            // Re-render logs after Livewire updates (debounced)
+            let renderTimeout = null;
+            const debouncedRender = () => {
+                clearTimeout(renderTimeout);
+                renderTimeout = setTimeout(() => {
+                    this.matchCountCache = null; // Invalidate match cache on new content
+                    this.renderTrigger++;
+                }, 100);
+            };
             document.addEventListener('livewire:navigated', () => {
-                this.$nextTick(() => { this.renderTrigger++; });
+                this.$nextTick(debouncedRender);
             });
             Livewire.hook('commit', ({ succeed }) => {
                 succeed(() => {
-                    this.$nextTick(() => { this.renderTrigger++; });
+                    this.$nextTick(debouncedRender);
                 });
             });
             // Stop auto-scroll when deployment finishes
             Livewire.on('deploymentFinished', () => {
-                // Wait for DOM to update with final logs before scrolling to end
                 setTimeout(() => {
                     this.stopScroll();
                 }, 500);
             });
             // Start auto-scroll if deployment is in progress
             if (this.alwaysScroll) {
-                this.intervalId = setInterval(() => {
-                    const logsContainer = document.getElementById('logsContainer');
-                    if (logsContainer) {
-                        logsContainer.scrollTop = logsContainer.scrollHeight;
-                    }
-                }, 100);
+                this.scheduleScroll();
             }
         }
     }">
@@ -212,7 +240,7 @@ class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap"></span>
                                     <path stroke-linecap="round" stroke-linejoin="round"
                                         d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
                                 </svg>
-                                <input type="text" x-model="searchQuery" placeholder="Find in logs"
+                                <input type="text" x-model.debounce.300ms="searchQuery" placeholder="Find in logs"
                                     class="input input-sm w-48 pl-8 pr-8 dark:bg-coolgray-200" />
                                 <button x-show="searchQuery" x-on:click="searchQuery = ''" type="button"
                                     class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
@@ -293,7 +321,7 @@ class="text-gray-500 dark:text-gray-400 py-2">
                                 <div data-log-line data-log-content="{{ htmlspecialchars($searchableContent) }}"
                                     x-effect="renderTrigger; searchQuery; $el.classList.toggle('hidden', !matchesSearch($el.dataset.logContent))" @class([
                                         'mt-2' => isset($line['command']) && $line['command'],
-                                        'flex gap-2',
+                                        'flex gap-2 log-line',
                                     ])>
                                     <span x-show="showTimestamps"
                                         class="shrink-0 text-gray-500">{{ $line['timestamp'] }}</span>
diff --git a/resources/views/livewire/project/shared/get-logs.blade.php b/resources/views/livewire/project/shared/get-logs.blade.php
index e6d21293d..4d99941d0 100644
--- a/resources/views/livewire/project/shared/get-logs.blade.php
+++ b/resources/views/livewire/project/shared/get-logs.blade.php
@@ -5,17 +5,25 @@
         logsLoaded: false,
         fullscreen: false,
         alwaysScroll: false,
-        intervalId: null,
+        rafId: null,
         scrollDebounce: null,
         colorLogs: localStorage.getItem('coolify-color-logs') === 'true',
         searchQuery: '',
         renderTrigger: 0,
         containerName: '{{ $container ?? "logs" }}',
+        // Cache for decoded HTML to avoid repeated DOMParser calls
+        decodeCache: new Map(),
+        // Cache for match count to avoid repeated DOM queries
+        matchCountCache: null,
+        lastSearchQuery: '',
         makeFullscreen() {
             this.fullscreen = !this.fullscreen;
             if (this.fullscreen === false) {
                 this.alwaysScroll = false;
-                clearInterval(this.intervalId);
+                if (this.rafId) {
+                    cancelAnimationFrame(this.rafId);
+                    this.rafId = null;
+                }
             }
         },
         handleKeyDown(event) {
@@ -24,20 +32,33 @@
             }
         },
         isScrolling: false,
+        scrollToBottom() {
+            const logsContainer = document.getElementById('logsContainer');
+            if (logsContainer) {
+                this.isScrolling = true;
+                logsContainer.scrollTop = logsContainer.scrollHeight;
+                setTimeout(() => { this.isScrolling = false; }, 50);
+            }
+        },
+        scheduleScroll() {
+            if (!this.alwaysScroll) return;
+            this.rafId = requestAnimationFrame(() => {
+                this.scrollToBottom();
+                // Schedule next scroll after a reasonable delay (250ms instead of 100ms)
+                if (this.alwaysScroll) {
+                    setTimeout(() => this.scheduleScroll(), 250);
+                }
+            });
+        },
         toggleScroll() {
             this.alwaysScroll = !this.alwaysScroll;
             if (this.alwaysScroll) {
-                this.intervalId = setInterval(() => {
-                    const logsContainer = document.getElementById('logsContainer');
-                    if (logsContainer) {
-                        this.isScrolling = true;
-                        logsContainer.scrollTop = logsContainer.scrollHeight;
-                        setTimeout(() => { this.isScrolling = false; }, 50);
-                    }
-                }, 100);
+                this.scheduleScroll();
             } else {
-                clearInterval(this.intervalId);
-                this.intervalId = null;
+                if (this.rafId) {
+                    cancelAnimationFrame(this.rafId);
+                    this.rafId = null;
+                }
             }
         },
         handleScroll(event) {
@@ -45,7 +66,6 @@
             if (!this.alwaysScroll || this.isScrolling) return;
 
             // Debounce scroll handling to avoid false positives from DOM mutations
-            // when Livewire re-renders and adds new log lines
             clearTimeout(this.scrollDebounce);
             this.scrollDebounce = setTimeout(() => {
                 const el = event.target;
@@ -53,8 +73,10 @@
                 // Use larger threshold (100px) to avoid accidental disables
                 if (distanceFromBottom > 100) {
                     this.alwaysScroll = false;
-                    clearInterval(this.intervalId);
-                    this.intervalId = null;
+                    if (this.rafId) {
+                        cancelAnimationFrame(this.rafId);
+                        this.rafId = null;
+                    }
                 }
             }, 150);
         },
@@ -93,17 +115,19 @@
             }
             const logsContainer = document.getElementById('logs');
             if (!logsContainer) return false;
-
-            // Check if selection is within the logs container
             const range = selection.getRangeAt(0);
             return logsContainer.contains(range.commonAncestorContainer);
         },
         decodeHtml(text) {
-            // Decode HTML entities, handling double-encoding with max iteration limit to prevent DoS
+            // Return cached result if available
+            if (this.decodeCache.has(text)) {
+                return this.decodeCache.get(text);
+            }
+            // Decode HTML entities with max iteration limit
             let decoded = text;
             let prev = '';
             let iterations = 0;
-            const maxIterations = 3; // Prevent DoS from deeply nested HTML entities
+            const maxIterations = 3;
 
             while (decoded !== prev && iterations < maxIterations) {
                 prev = decoded;
@@ -111,11 +135,16 @@
                 decoded = doc.documentElement.textContent;
                 iterations++;
             }
+            // Cache the result (limit cache size to prevent memory bloat)
+            if (this.decodeCache.size > 5000) {
+                const firstKey = this.decodeCache.keys().next().value;
+                this.decodeCache.delete(firstKey);
+            }
+            this.decodeCache.set(text, decoded);
             return decoded;
         },
         renderHighlightedLog(el, text) {
-            // Skip re-render if user has text selected in logs (preserves copy ability)
-            // But always render if the element is empty (initial render)
+            // Skip re-render if user has text selected in logs
             if (el.textContent && this.hasActiveLogSelection()) {
                 return;
             }
@@ -134,11 +163,9 @@
 
             let index = lowerText.indexOf(query, lastIndex);
             while (index !== -1) {
-                // Add text before match
                 if (index > lastIndex) {
                     el.appendChild(document.createTextNode(decoded.substring(lastIndex, index)));
                 }
-                // Add highlighted match
                 const mark = document.createElement('span');
                 mark.className = 'log-highlight';
                 mark.textContent = decoded.substring(index, index + this.searchQuery.length);
@@ -148,22 +175,28 @@
                 index = lowerText.indexOf(query, lastIndex);
             }
 
-            // Add remaining text
             if (lastIndex < decoded.length) {
                 el.appendChild(document.createTextNode(decoded.substring(lastIndex)));
             }
         },
         getMatchCount() {
             if (!this.searchQuery.trim()) return 0;
+            // Return cached count if search query hasn't changed
+            if (this.lastSearchQuery === this.searchQuery && this.matchCountCache !== null) {
+                return this.matchCountCache;
+            }
             const logs = document.getElementById('logs');
             if (!logs) return 0;
             const lines = logs.querySelectorAll('[data-log-line]');
             let count = 0;
+            const query = this.searchQuery.toLowerCase();
             lines.forEach(line => {
-                if (line.textContent.toLowerCase().includes(this.searchQuery.toLowerCase())) {
+                if (line.textContent.toLowerCase().includes(query)) {
                     count++;
                 }
             });
+            this.matchCountCache = count;
+            this.lastSearchQuery = this.searchQuery;
             return count;
         },
         downloadLogs() {
@@ -197,10 +230,18 @@
                     skip();
                 }
             });
-            // Re-render logs after Livewire updates
+            // Re-render logs after Livewire updates (debounced)
+            let renderTimeout = null;
+            const debouncedRender = () => {
+                clearTimeout(renderTimeout);
+                renderTimeout = setTimeout(() => {
+                    this.matchCountCache = null; // Invalidate match cache on new content
+                    this.renderTrigger++;
+                }, 100);
+            };
             Livewire.hook('commit', ({ succeed }) => {
                 succeed(() => {
-                    this.$nextTick(() => { this.renderTrigger++; });
+                    this.$nextTick(debouncedRender);
                 });
             });
         }
@@ -393,7 +434,7 @@ class="text-gray-500 dark:text-gray-400 py-2">
                                         '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">
+                                    class="flex gap-2 log-line">
                                     @if ($timestamp && $showTimeStamps)
                                         <span class="shrink-0 text-gray-500">{{ $timestamp }}</span>
                                     @endif

From 20e47835281632183b35397ae9cc813e8ea32f5f Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Thu, 18 Dec 2025 08:30:30 +0100
Subject: [PATCH 2/3] Fix inconsistent match counting in log search
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Use dataset.logContent instead of textContent for counting search
matches in getMatchCount(). This aligns the counting logic with
matchesSearch() which uses the same data attribute for filtering
visibility, ensuring the displayed match count accurately reflects
the number of visible/hidden lines.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 resources/views/livewire/project/shared/get-logs.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/livewire/project/shared/get-logs.blade.php b/resources/views/livewire/project/shared/get-logs.blade.php
index 4d99941d0..aba0513c5 100644
--- a/resources/views/livewire/project/shared/get-logs.blade.php
+++ b/resources/views/livewire/project/shared/get-logs.blade.php
@@ -191,7 +191,7 @@
             let count = 0;
             const query = this.searchQuery.toLowerCase();
             lines.forEach(line => {
-                if (line.textContent.toLowerCase().includes(query)) {
+                if (line.dataset.logContent && line.dataset.logContent.toLowerCase().includes(query)) {
                     count++;
                 }
             });

From acd7106f93c4a34f175ff136ea8f80ca1502b353 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Thu, 18 Dec 2025 08:46:39 +0100
Subject: [PATCH 3/3] Refactor log view to eliminate flickering during refresh
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Use atomic update pattern in backend: collect logs into temp variable
  before replacing outputs (prevents empty state flash)
- Remove per-line x-effect directives that caused 4000+ reactive
  evaluations on every update
- Replace inline Alpine.js class bindings with CSS utility classes
- Use single $watch and morph.updated hook instead of renderTrigger
- Remove HTML entity decode cache (no longer needed)
- Fix search highlight padding that caused text shifting

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/Livewire/Project/Shared/GetLogs.php       |  21 +-
 resources/css/utilities.css                   |  19 +-
 .../project/shared/get-logs.blade.php         | 207 +++++++-----------
 3 files changed, 104 insertions(+), 143 deletions(-)

diff --git a/app/Livewire/Project/Shared/GetLogs.php b/app/Livewire/Project/Shared/GetLogs.php
index f57563330..29940e214 100644
--- a/app/Livewire/Project/Shared/GetLogs.php
+++ b/app/Livewire/Project/Shared/GetLogs.php
@@ -67,11 +67,6 @@ public function mount()
         }
     }
 
-    public function doSomethingWithThisChunkOfOutput($output)
-    {
-        $this->outputs .= removeAnsiColors($output);
-    }
-
     public function instantSave()
     {
         if (! is_null($this->resource)) {
@@ -162,20 +157,24 @@ public function getLogs($refresh = false)
                     $sshCommand = SshMultiplexingHelper::generateSshCommand($this->server, $command);
                 }
             }
-            if ($refresh) {
-                $this->outputs = '';
-            }
-            Process::run($sshCommand, function (string $type, string $output) {
-                $this->doSomethingWithThisChunkOfOutput($output);
+            // Collect new logs into temporary variable first to prevent flickering
+            // (avoids clearing output before new data is ready)
+            $newOutputs = '';
+            Process::run($sshCommand, function (string $type, string $output) use (&$newOutputs) {
+                $newOutputs .= removeAnsiColors($output);
             });
+
             if ($this->showTimeStamps) {
-                $this->outputs = str($this->outputs)->split('/\n/')->sort(function ($a, $b) {
+                $newOutputs = str($newOutputs)->split('/\n/')->sort(function ($a, $b) {
                     $a = explode(' ', $a);
                     $b = explode(' ', $b);
 
                     return $a[0] <=> $b[0];
                 })->join("\n");
             }
+
+            // Only update outputs after new data is ready (atomic update prevents flicker)
+            $this->outputs = $newOutputs;
         }
     }
 
diff --git a/resources/css/utilities.css b/resources/css/utilities.css
index 4f8230487..7978b2d19 100644
--- a/resources/css/utilities.css
+++ b/resources/css/utilities.css
@@ -301,5 +301,22 @@ @utility log-line {
 
 /* Search highlight styling for logs */
 @utility log-highlight {
-    @apply bg-warning/40 dark:bg-warning/30 rounded-sm px-0.5;
+    @apply bg-warning/40 dark:bg-warning/30;
+}
+
+/* Log level color classes */
+@utility log-error {
+    @apply bg-red-500/10 dark:bg-red-500/15;
+}
+
+@utility log-warning {
+    @apply bg-yellow-500/10 dark:bg-yellow-500/15;
+}
+
+@utility log-debug {
+    @apply bg-purple-500/10 dark:bg-purple-500/15;
+}
+
+@utility log-info {
+    @apply bg-blue-500/10 dark:bg-blue-500/15;
 }
diff --git a/resources/views/livewire/project/shared/get-logs.blade.php b/resources/views/livewire/project/shared/get-logs.blade.php
index aba0513c5..797193a25 100644
--- a/resources/views/livewire/project/shared/get-logs.blade.php
+++ b/resources/views/livewire/project/shared/get-logs.blade.php
@@ -9,13 +9,8 @@
         scrollDebounce: null,
         colorLogs: localStorage.getItem('coolify-color-logs') === 'true',
         searchQuery: '',
-        renderTrigger: 0,
+        matchCount: 0,
         containerName: '{{ $container ?? "logs" }}',
-        // Cache for decoded HTML to avoid repeated DOMParser calls
-        decodeCache: new Map(),
-        // Cache for match count to avoid repeated DOM queries
-        matchCountCache: null,
-        lastSearchQuery: '',
         makeFullscreen() {
             this.fullscreen = !this.fullscreen;
             if (this.fullscreen === false) {
@@ -44,7 +39,6 @@
             if (!this.alwaysScroll) return;
             this.rafId = requestAnimationFrame(() => {
                 this.scrollToBottom();
-                // Schedule next scroll after a reasonable delay (250ms instead of 100ms)
                 if (this.alwaysScroll) {
                     setTimeout(() => this.scheduleScroll(), 250);
                 }
@@ -62,15 +56,11 @@
             }
         },
         handleScroll(event) {
-            // Skip if follow logs is disabled or this is a programmatic scroll
             if (!this.alwaysScroll || this.isScrolling) return;
-
-            // Debounce scroll handling to avoid false positives from DOM mutations
             clearTimeout(this.scrollDebounce);
             this.scrollDebounce = setTimeout(() => {
                 const el = event.target;
                 const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
-                // Use larger threshold (100px) to avoid accidental disables
                 if (distanceFromBottom > 100) {
                     this.alwaysScroll = false;
                     if (this.rafId) {
@@ -83,30 +73,26 @@
         toggleColorLogs() {
             this.colorLogs = !this.colorLogs;
             localStorage.setItem('coolify-color-logs', this.colorLogs);
+            this.applyColorLogs();
         },
-        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());
+        applyColorLogs() {
+            const logs = document.getElementById('logs');
+            if (!logs) return;
+            const lines = logs.querySelectorAll('[data-log-line]');
+            lines.forEach(line => {
+                const content = (line.dataset.logContent || '').toLowerCase();
+                line.classList.remove('log-error', 'log-warning', 'log-debug', 'log-info');
+                if (!this.colorLogs) return;
+                if (/\b(error|err|failed|failure|exception|fatal|panic|critical)\b/.test(content)) {
+                    line.classList.add('log-error');
+                } else if (/\b(warn|warning|wrn|caution)\b/.test(content)) {
+                    line.classList.add('log-warning');
+                } else if (/\b(debug|dbg|trace|verbose)\b/.test(content)) {
+                    line.classList.add('log-debug');
+                } else if (/\b(info|inf|notice)\b/.test(content)) {
+                    line.classList.add('log-info');
+                }
+            });
         },
         hasActiveLogSelection() {
             const selection = window.getSelection();
@@ -118,87 +104,59 @@
             const range = selection.getRangeAt(0);
             return logsContainer.contains(range.commonAncestorContainer);
         },
-        decodeHtml(text) {
-            // Return cached result if available
-            if (this.decodeCache.has(text)) {
-                return this.decodeCache.get(text);
-            }
-            // Decode HTML entities with max iteration limit
-            let decoded = text;
-            let prev = '';
-            let iterations = 0;
-            const maxIterations = 3;
+        applySearch() {
+            const logs = document.getElementById('logs');
+            if (!logs) return;
+            const lines = logs.querySelectorAll('[data-log-line]');
+            const query = this.searchQuery.trim().toLowerCase();
+            let count = 0;
 
-            while (decoded !== prev && iterations < maxIterations) {
-                prev = decoded;
-                const doc = new DOMParser().parseFromString(decoded, 'text/html');
-                decoded = doc.documentElement.textContent;
-                iterations++;
-            }
-            // Cache the result (limit cache size to prevent memory bloat)
-            if (this.decodeCache.size > 5000) {
-                const firstKey = this.decodeCache.keys().next().value;
-                this.decodeCache.delete(firstKey);
-            }
-            this.decodeCache.set(text, decoded);
-            return decoded;
+            lines.forEach(line => {
+                const content = (line.dataset.logContent || '').toLowerCase();
+                const textSpan = line.querySelector('[data-line-text]');
+                const matches = !query || content.includes(query);
+
+                line.classList.toggle('hidden', !matches);
+                if (matches && query) count++;
+
+                // Update highlighting
+                if (textSpan) {
+                    const originalText = textSpan.dataset.lineText || '';
+                    if (!query) {
+                        textSpan.textContent = originalText;
+                    } else if (matches) {
+                        this.highlightText(textSpan, originalText, query);
+                    }
+                }
+            });
+
+            this.matchCount = query ? count : 0;
         },
-        renderHighlightedLog(el, text) {
-            // Skip re-render if user has text selected in logs
-            if (el.textContent && this.hasActiveLogSelection()) {
-                return;
-            }
+        highlightText(el, text, query) {
+            // Skip if user has selection
+            if (this.hasActiveLogSelection()) return;
 
-            const decoded = this.decodeHtml(text);
             el.textContent = '';
-
-            if (!this.searchQuery.trim()) {
-                el.textContent = decoded;
-                return;
-            }
-
-            const query = this.searchQuery.toLowerCase();
-            const lowerText = decoded.toLowerCase();
+            const lowerText = text.toLowerCase();
             let lastIndex = 0;
-
             let index = lowerText.indexOf(query, lastIndex);
+
             while (index !== -1) {
                 if (index > lastIndex) {
-                    el.appendChild(document.createTextNode(decoded.substring(lastIndex, index)));
+                    el.appendChild(document.createTextNode(text.substring(lastIndex, index)));
                 }
                 const mark = document.createElement('span');
                 mark.className = 'log-highlight';
-                mark.textContent = decoded.substring(index, index + this.searchQuery.length);
+                mark.textContent = text.substring(index, index + query.length);
                 el.appendChild(mark);
-
-                lastIndex = index + this.searchQuery.length;
+                lastIndex = index + query.length;
                 index = lowerText.indexOf(query, lastIndex);
             }
 
-            if (lastIndex < decoded.length) {
-                el.appendChild(document.createTextNode(decoded.substring(lastIndex)));
+            if (lastIndex < text.length) {
+                el.appendChild(document.createTextNode(text.substring(lastIndex)));
             }
         },
-        getMatchCount() {
-            if (!this.searchQuery.trim()) return 0;
-            // Return cached count if search query hasn't changed
-            if (this.lastSearchQuery === this.searchQuery && this.matchCountCache !== null) {
-                return this.matchCountCache;
-            }
-            const logs = document.getElementById('logs');
-            if (!logs) return 0;
-            const lines = logs.querySelectorAll('[data-log-line]');
-            let count = 0;
-            const query = this.searchQuery.toLowerCase();
-            lines.forEach(line => {
-                if (line.dataset.logContent && line.dataset.logContent.toLowerCase().includes(query)) {
-                    count++;
-                }
-            });
-            this.matchCountCache = count;
-            this.lastSearchQuery = this.searchQuery;
-            return count;
-        },
         downloadLogs() {
             const logs = document.getElementById('logs');
             if (!logs) return;
@@ -224,25 +182,23 @@
                 this.$wire.getLogs(true);
                 this.logsLoaded = true;
             }
-            // Prevent Livewire from morphing logs container when text is selected
-            Livewire.hook('morph.updating', ({ el, component, toEl, skip }) => {
-                if (el.id === 'logs' && this.hasActiveLogSelection()) {
-                    skip();
-                }
+
+            // Watch search query changes
+            this.$watch('searchQuery', () => {
+                this.applySearch();
             });
-            // Re-render logs after Livewire updates (debounced)
-            let renderTimeout = null;
-            const debouncedRender = () => {
-                clearTimeout(renderTimeout);
-                renderTimeout = setTimeout(() => {
-                    this.matchCountCache = null; // Invalidate match cache on new content
-                    this.renderTrigger++;
-                }, 100);
-            };
-            Livewire.hook('commit', ({ succeed }) => {
-                succeed(() => {
-                    this.$nextTick(debouncedRender);
-                });
+
+            // Apply colors after Livewire updates
+            Livewire.hook('morph.updated', ({ el }) => {
+                if (el.id === 'logs') {
+                    this.$nextTick(() => {
+                        this.applyColorLogs();
+                        this.applySearch();
+                        if (this.alwaysScroll) {
+                            this.scrollToBottom();
+                        }
+                    });
+                }
             });
         }
     }" @keydown.window="handleKeyDown($event)">
@@ -283,7 +239,7 @@ class="absolute left-2 top-1/2 -translate-y-1/2 text-xs text-gray-400 pointer-ev
                                 title="Number of Lines" {{ $streamLogs ? 'readonly' : '' }}
                                 class="input input-sm w-32 pl-11 text-center dark:bg-coolgray-300" />
                         </form>
-                        <span x-show="searchQuery.trim()" x-text="getMatchCount() + ' matches'"
+                        <span x-show="searchQuery.trim()" x-text="matchCount + ' matches'"
                             class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap"></span>
                     </div>
                     <div class="flex items-center gap-2">
@@ -400,7 +356,7 @@ class="flex overflow-y-auto overflow-x-hidden flex-col px-4 py-2 w-full min-w-0
                                     Showing last {{ number_format($maxDisplayLines) }} of {{ number_format($totalLines) }} lines
                                 </div>
                             @endif
-                            <div x-show="searchQuery.trim() && getMatchCount() === 0"
+                            <div x-show="searchQuery.trim() && matchCount === 0"
                                 class="text-gray-500 dark:text-gray-400 py-2">
                                 No matches found.
                             </div>
@@ -424,23 +380,12 @@ class="text-gray-500 dark:text-gray-400 py-2">
                                         // Format: 2025-Dec-04 09:44:58.198879
                                         $timestamp = "{$year}-{$monthName}-{$day} {$time}.{$microseconds}";
                                     }
-
                                 @endphp
-                                <div data-log-line data-log-content="{{ $line }}"
-                                    x-effect="renderTrigger; searchQuery; $el.classList.toggle('hidden', !matchesSearch($el.dataset.logContent))"
-                                    x-bind:class="{
-                                        '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 log-line">
+                                <div data-log-line data-log-content="{{ $line }}" class="flex gap-2 log-line">
                                     @if ($timestamp && $showTimeStamps)
                                         <span class="shrink-0 text-gray-500">{{ $timestamp }}</span>
                                     @endif
-                                    <span data-line-text="{{ $logContent }}"
-                                        x-effect="renderTrigger; searchQuery; renderHighlightedLog($el, $el.dataset.lineText)"
-                                        class="whitespace-pre-wrap break-all"></span>
+                                    <span data-line-text="{{ $logContent }}" class="whitespace-pre-wrap break-all">{{ $logContent }}</span>
                                 </div>
                             @endforeach
                         </div>