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() {