From 5d390dc528ee7167c5131bbf2eb4795e81e83bdd Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Thu, 5 Jun 2025 13:57:40 +0200
Subject: [PATCH] feat(activity-monitor): implement auto-scrolling
 functionality and dynamic content observation for improved user experience

---
 .../views/livewire/activity-monitor.blade.php | 45 ++++++++++++++++---
 1 file changed, 40 insertions(+), 5 deletions(-)

diff --git a/resources/views/livewire/activity-monitor.blade.php b/resources/views/livewire/activity-monitor.blade.php
index ce012e724..8982d4d9a 100644
--- a/resources/views/livewire/activity-monitor.blade.php
+++ b/resources/views/livewire/activity-monitor.blade.php
@@ -12,11 +12,46 @@
                 @endif
             </div>
         @endif
-        <div @class([
-            'flex flex-col w-full px-4 py-2 overflow-y-auto bg-white border border-solid rounded-sm dark:text-white dark:bg-coolgray-100 scrollbar border-neutral-300 dark:border-coolgray-300',
-            'flex-1 min-h-0' => $fullHeight,
-            'max-h-96' => !$fullHeight,
-        ])>
+        <div x-data="{
+            autoScrollEnabled: true,
+            observer: null,
+            scrollToBottom() {
+                if (this.autoScrollEnabled) {
+                    this.$el.scrollTop = this.$el.scrollHeight;
+                }
+            },
+            isAtBottom() {
+                const threshold = 5; // 5px tolerance
+                return this.$el.scrollTop + this.$el.clientHeight >= this.$el.scrollHeight - threshold;
+            },
+            handleScroll() {
+                // Check if user scrolled to bottom
+                if (this.isAtBottom()) {
+                    this.autoScrollEnabled = true;
+                } else {
+                    this.autoScrollEnabled = false;
+                }
+            }
+        }" x-init="// Initial scroll
+        $nextTick(() => scrollToBottom());
+        
+        // Add scroll event listener
+        $el.addEventListener('scroll', () => handleScroll());
+        
+        // Set up mutation observer to watch for content changes
+        observer = new MutationObserver(() => {
+            $nextTick(() => scrollToBottom());
+        });
+        observer.observe($el, {
+            childList: true,
+            subtree: true,
+            characterData: true
+        });" x-destroy="observer && observer.disconnect()"
+            @class([
+                'flex flex-col w-full px-4 py-2 overflow-y-auto bg-white border border-solid rounded-sm dark:text-white dark:bg-coolgray-100 scrollbar border-neutral-300 dark:border-coolgray-300',
+                'flex-1 min-h-0' => $fullHeight,
+                'max-h-96' => !$fullHeight,
+            ])>
             <pre class="font-mono whitespace-pre-wrap" @if ($isPollingActive) wire:poll.1000ms="polling" @endif>{{ RunRemoteProcess::decodeOutput($activity) }}</pre>
         </div>
     @else