From 9d45caa8df2501d1d5428fa5f009f364d81a9b21 Mon Sep 17 00:00:00 2001
From: Hibryda <hibryda@protonmail.com>
Date: Mon, 23 Mar 2026 22:07:16 +0100
Subject: [PATCH] fix(electrobun): replace $effect scroll with MutationObserver
 in onMount
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The $effect reading messages.length + requestAnimationFrame was a secondary
cause of effect_update_depth_exceeded. MutationObserver is non-reactive —
observes DOM changes directly without Svelte dependency tracking.
---
 ui-electrobun/src/mainview/AgentPane.svelte | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/ui-electrobun/src/mainview/AgentPane.svelte b/ui-electrobun/src/mainview/AgentPane.svelte
index e8ff935..aaeba99 100644
--- a/ui-electrobun/src/mainview/AgentPane.svelte
+++ b/ui-electrobun/src/mainview/AgentPane.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
   import ChatInput from "./ChatInput.svelte";
   import type { AgentMessage, AgentStatus } from "./agent-store.svelte.ts";
   import { t } from "./i18n.svelte.ts";
@@ -37,12 +38,14 @@
   let agentPaneEl: HTMLDivElement;
   let isDragging = $state(false);
 
-  $effect(() => {
-    void messages.length;
-    // Use requestAnimationFrame instead of tick() to avoid effect re-entry cycle
-    requestAnimationFrame(() => {
+  // Auto-scroll on message change — done via onMount observer, NOT $effect
+  // ($effect + messages.length + DOM mutation = infinite loop in Svelte 5)
+  onMount(() => {
+    const observer = new MutationObserver(() => {
       if (scrollEl) scrollEl.scrollTop = scrollEl.scrollHeight;
     });
+    if (scrollEl) observer.observe(scrollEl, { childList: true, subtree: true });
+    return () => observer.disconnect();
   });
 
   function handleSend() {