Tail-follow improvements in source

src/lib/TraceViewer.svelte

@@ -87,6 +87,7 @@
   async function playback() {
     playing = true;
     skipFlag = false;
+    userScrolledUp = false;
     for (let mi = 0; mi < messages.length; mi++) {
       if (skipFlag) break;
       const msg = messages[mi];
@@ -106,6 +107,7 @@
           await typeBlock(block);
         } else {
           await wait(90);
+          await tick();
           followTail();
         }
       }
@@ -130,22 +132,34 @@
     for (let c = step; c < len; c += step) {
       if (skipFlag) break;
       block._typedText = full.slice(0, c);
-      await wait(tickMs);
+      await tick();
       followTail();
+      await wait(tickMs);
     }
     block._typedText = full;
-    block._typing = false;
+    await tick();
     followTail();
+    block._typing = false;
   }
 
-  // Terminal-style tail: while content is streaming, keep the bottom of the
-  // scroll container pinned — but only if the user hasn't scrolled away.
+  // Terminal-style tail: during playback, keep the scroll container pinned
+  // to the bottom so new content scrolls line-by-line into view. If the user
+  // actively scrolls up during playback, stop tailing until playback ends.
+  let userScrolledUp = false;
+  let lastAutoScrollTop = 0;
+
   function followTail() {
-    if (!listEl) return;
-    const distanceFromBottom =
-      listEl.scrollHeight - listEl.scrollTop - listEl.clientHeight;
-    if (distanceFromBottom < 240) {
-      listEl.scrollTop = listEl.scrollHeight;
+    if (!listEl || !playing || userScrolledUp) return;
+    listEl.scrollTop = listEl.scrollHeight;
+    lastAutoScrollTop = listEl.scrollTop;
+  }
+
+  function onListScroll() {
+    if (!listEl || !playing) return;
+    // If the current scroll position differs from what we last wrote by more
+    // than a small threshold, treat it as user-initiated.
+    if (Math.abs(listEl.scrollTop - lastAutoScrollTop) > 40) {
+      userScrolledUp = true;
     }
   }
 
@@ -303,7 +317,11 @@
     </div>
 
     <!-- messages / log -->
-    <div bind:this={listEl} class="flex-1 overflow-y-auto px-5 py-3">
+    <div
+      bind:this={listEl}
+      onscroll={onListScroll}
+      class="flex-1 overflow-y-auto px-5 py-3"
+    >
       {#if loading}
         <div class="flex items-baseline gap-2">
           <span class="w-[1ch] text-center text-[#5f5f5c]"