feat(activity-monitor): implement auto-scrolling functionality and dynamic content observation for improved user experience

resources/views/livewire/activity-monitor.blade.php

@@ -12,7 +12,42 @@
                 @endif
             </div>
         @endif
-        <div @class([
+        <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,