Pause chat auto-scroll on upward wheel over nested content

.changeset/fix-nested-chat-scroll.md

@@ -0,0 +1,6 @@
+---
+"@kilocode/kilo-ui": patch
+"kilo-code": patch
+---
+
+Pause chat auto-scroll whenever the user scrolls upward over nested tool output.

packages/kilo-ui/src/hooks/auto-scroll.ts

@@ -3,9 +3,3 @@ export const isControl = (target: EventTarget | null) => {
   const editable = target.closest<HTMLElement>("[contenteditable]")
   return !!target.closest("button, input, textarea, select") || !!editable?.isContentEditable
 }
-
-export const isNested = (target: EventTarget | null, root?: HTMLElement) => {
-  if (!(target instanceof Element)) return false
-  const nested = target.closest("[data-scrollable]")
-  return !!root && !!nested && nested !== root
-}

packages/kilo-ui/src/hooks/create-auto-scroll.tsx

@@ -1,13 +1,12 @@
 import { createEffect, on, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
-import { isControl, isNested } from "./auto-scroll"
+import { isControl } from "./auto-scroll"
 
 const DEBOUNCE_MS = 100
-// Grace window after a real user interaction (wheel/pointer/key/touch) during
-// which a ResizeObserver or non-user scroll event must not snap the view back
-// to the bottom. Long enough to cover a single scroll gesture plus the
-// DEBOUNCE_MS window used by handleScroll to flip userScrolled.
+// Grace window after a real pointer/key/touch interaction during which a
+// ResizeObserver or non-user scroll event must not snap the view back to the
+// bottom. Upward wheel intent pauses immediately in its capture handler.
 const USER_INTERACTION_GRACE_MS = 300
 
 export interface AutoScrollOptions {
@@ -44,8 +43,7 @@ export function createAutoScroll(options: AutoScrollOptions) {
   }
 
   const markUser = (e: Event) => {
-    if (!(e instanceof WheelEvent) && isControl(e.target)) return
-    if (e instanceof WheelEvent && isNested(e.target, scroll)) return
+    if (e instanceof WheelEvent || isControl(e.target)) return
     userInitiated = true
     lastInteraction = performance.now()
   }
@@ -96,13 +94,8 @@ export function createAutoScroll(options: AutoScrollOptions) {
 
   const handleWheel = (e: WheelEvent) => {
     if (e.deltaY >= 0) return
-    // If the user is scrolling within a nested scrollable region (tool output,
-    // code block, etc), don't treat it as leaving the "follow bottom" mode.
-    // Those regions opt in via `data-scrollable`.
-    const el = scroll
-    const target = e.target instanceof Element ? e.target : undefined
-    const nested = target?.closest("[data-scrollable]")
-    if (el && nested && nested !== el) return
+    // Upward wheel input anywhere in the transcript expresses the user's
+    // intent to review earlier content, even when a nested region consumes it.
     stop()
   }
 
@@ -237,14 +230,14 @@ export function createAutoScroll(options: AutoScrollOptions) {
       if (!el) return
 
       el.style.overflowAnchor = "auto"
-      el.addEventListener("wheel", handleWheel, { passive: true })
+      el.addEventListener("wheel", handleWheel, { passive: true, capture: true })
       el.addEventListener("wheel", markUser, { passive: true, capture: true })
       el.addEventListener("pointerdown", markUser, { passive: true })
       el.addEventListener("keydown", markUser, { passive: true })
       el.addEventListener("touchstart", markUser, { passive: true })
 
       cleanup = () => {
-        el.removeEventListener("wheel", handleWheel)
+        el.removeEventListener("wheel", handleWheel, { capture: true })
         el.removeEventListener("wheel", markUser, { capture: true })
         el.removeEventListener("pointerdown", markUser)
         el.removeEventListener("keydown", markUser)