feat(workflow): handle log trimming pause on user scroll away

- Added `onPauseTrimmingChange` prop to notify parent components when users scroll away.
- Updated log viewer and shells to pause log trimming when users are not at the bottom.
- Enhanced `updateWindowedLines` to skip trimming when pause is active.

Author: hadywalied

src/cli/tui/routes/workflow/components/modals/log-viewer/index.tsx

@@ -65,6 +65,7 @@ export function LogViewer(props: LogViewerProps) {
         isLoadingEarlier={logStream.isLoadingEarlier}
         loadEarlierError={logStream.loadEarlierError}
         onLoadMore={() => logStream.loadEarlierLines()}
+        onPauseTrimmingChange={(paused) => logStream.setPauseTrimming(paused)}
       />
       <LogFooter
         total={logStream.totalLineCount}

src/cli/tui/routes/workflow/components/modals/log-viewer/log-content.tsx

@@ -25,6 +25,7 @@ export interface LogContentProps {
   isLoadingEarlier?: boolean
   loadEarlierError?: string | null
   onLoadMore?: () => number
+  onPauseTrimmingChange?: (paused: boolean) => void
 }
 
 export function LogContent(props: LogContentProps) {
@@ -34,63 +35,74 @@ export function LogContent(props: LogContentProps) {
   const themeCtx = useTheme()
   const [scrollRef, setScrollRef] = createSignal<ScrollBoxRenderable | undefined>()
   const [userScrolledAway, setUserScrolledAway] = createSignal(false)
-  const [prevLineCount, setPrevLineCount] = createSignal(0)
 
   // Reset userScrolledAway when lines reset (indicates agent/log change)
-  createEffect(() => {
-    const currentCount = props.lines.length
-    const prev = prevLineCount()
-    // If lines dropped significantly (more than 50% or to near zero), it's a new log
-    if (prev > 10 && currentCount < prev * 0.5) {
-      debug('[LogContent] Lines reset detected (prev=%d, current=%d), resetting scroll state', prev, currentCount)
-      setUserScrolledAway(false)
-    }
-    setPrevLineCount(currentCount)
-  })
+  // Use on() to explicitly track only lines.length, preventing unintended effect re-runs
+  createEffect(
+    on(
+      () => props.lines.length,
+      (currentCount, prev) => {
+        // If lines dropped significantly (more than 50% or to near zero), it's a new log
+        if (prev !== undefined && prev > 10 && currentCount < prev * 0.5) {
+          debug('[LogContent] Lines reset detected (prev=%d, current=%d), resetting scroll state', prev, currentCount)
+          setUserScrolledAway(false)
+        }
+      }
+    )
+  )
 
   // Handle scroll events: load earlier lines + track if user scrolled away from bottom
-  createEffect(() => {
-    const ref = scrollRef()
-    debug('[LogContent] Effect running, ref exists: %s', !!ref)
-    if (!ref) return
-
-    const handleScrollChange = () => {
-      const scrollTop = ref.scrollTop
-      const scrollHeight = ref.scrollHeight
-      const viewportHeight = ref.height
-      const maxScroll = Math.max(0, scrollHeight - viewportHeight)
-      const isAtBottom = scrollTop >= maxScroll - 3
-
-      debug('[LogContent] scroll: top=%d, max=%d, atBottom=%s, hasMore=%s', scrollTop, maxScroll, isAtBottom, props.hasMoreAbove)
-
-      // Track if user scrolled away from bottom (to disable stickyScroll)
-      if (!isAtBottom && !userScrolledAway()) {
-        debug('[LogContent] User scrolled away from bottom')
-        setUserScrolledAway(true)
-      } else if (isAtBottom && userScrolledAway()) {
-        debug('[LogContent] User returned to bottom')
-        setUserScrolledAway(false)
-      }
+  // Use on() to only track scrollRef changes, not other props
+  createEffect(
+    on(scrollRef, (ref) => {
+      debug('[LogContent] Effect running, ref exists: %s', !!ref)
+      if (!ref) return
+
+      const handleScrollChange = () => {
+        const scrollTop = ref.scrollTop
+        const scrollHeight = ref.scrollHeight
+        const viewportHeight = ref.height
+        const maxScroll = Math.max(0, scrollHeight - viewportHeight)
+        const isAtBottom = scrollTop >= maxScroll - 3
+
+        debug('[LogContent] scroll: top=%d, max=%d, atBottom=%s, hasMore=%s', scrollTop, maxScroll, isAtBottom, props.hasMoreAbove)
+
+        // Track if user scrolled away from bottom (to disable stickyScroll)
+        if (!isAtBottom && !userScrolledAway()) {
+          debug('[LogContent] User scrolled away from bottom')
+          setUserScrolledAway(true)
+        } else if (isAtBottom && userScrolledAway()) {
+          debug('[LogContent] User returned to bottom')
+          setUserScrolledAway(false)
+        }
 
-      // Trigger load when near the top (within 3 lines) - skip if already loading
-      if (scrollTop <= 3 && props.hasMoreAbove && props.onLoadMore && !props.isLoadingEarlier) {
-        debug('[LogContent] Loading earlier lines...')
-        const linesLoaded = props.onLoadMore()
-        debug('[LogContent] Lines loaded: %d', linesLoaded)
-        if (linesLoaded > 0) {
-          ref.scrollTop = linesLoaded  // Maintain view position
+        // Trigger load when near the top (within 3 lines) - skip if already loading
+        if (scrollTop <= 3 && props.hasMoreAbove && props.onLoadMore && !props.isLoadingEarlier) {
+          debug('[LogContent] Loading earlier lines...')
+          const linesLoaded = props.onLoadMore()
+          debug('[LogContent] Lines loaded: %d', linesLoaded)
+          if (linesLoaded > 0) {
+            ref.scrollTop = linesLoaded  // Maintain view position
+          }
         }
       }
-    }
 
-    debug('[LogContent] Setting up scroll listener, verticalScrollBar exists: %s', !!ref.verticalScrollBar)
-    ref.verticalScrollBar?.on("change", handleScrollChange)
-    onCleanup(() => ref.verticalScrollBar?.off("change", handleScrollChange))
-  })
+      debug('[LogContent] Setting up scroll listener, verticalScrollBar exists: %s', !!ref.verticalScrollBar)
+      ref.verticalScrollBar?.on("change", handleScrollChange)
+      onCleanup(() => ref.verticalScrollBar?.off("change", handleScrollChange))
+    })
+  )
 
   // Compute whether stickyScroll should be active (only when running AND user hasn't scrolled away)
   const shouldStickyScroll = () => (props.isRunning ?? true) && !userScrolledAway()
 
+  // Notify parent when user scrolls away (to pause trimming in log stream)
+  createEffect(
+    on(userScrolledAway, (scrolledAway) => {
+      props.onPauseTrimmingChange?.(scrolledAway)
+    })
+  )
+
   return (
     <box flexGrow={1} flexDirection="column" paddingLeft={1} paddingRight={1} paddingTop={1}>
       <Show when={props.isLoading}>

src/cli/tui/routes/workflow/components/output/output-window.tsx

@@ -52,6 +52,7 @@ export interface OutputWindowProps {
   isLoadingEarlier?: boolean
   loadEarlierError?: string | null
   onLoadMore?: () => number
+  onPauseTrimmingChange?: (paused: boolean) => void
 }
 
 /**
@@ -124,6 +125,13 @@ export function OutputWindow(props: OutputWindowProps) {
   // Compute whether stickyScroll should be active
   const shouldStickyScroll = () => !userScrolledAway()
 
+  // Notify parent when user scrolls away (to pause trimming in log stream)
+  createEffect(
+    on(userScrolledAway, (scrolledAway) => {
+      props.onPauseTrimmingChange?.(scrolledAway)
+    })
+  )
+
   // Check if we have enough width to show status inline (based on output section width)
   const isWideLayout = createMemo(() => (props.availableWidth ?? 80) >= MIN_WIDTH_FOR_INLINE_STATUS)
 

src/cli/tui/routes/workflow/components/shells/controller-shell.tsx

@@ -32,6 +32,7 @@ export function ControllerShell(props: ControllerShellProps) {
         isLoadingEarlier={shell.logStream.isLoadingEarlier}
         loadEarlierError={shell.logStream.loadEarlierError}
         onLoadMore={() => shell.logStream.loadEarlierLines()}
+        onPauseTrimmingChange={(paused) => shell.logStream.setPauseTrimming(paused)}
         inputState={shell.state().inputState}
         workflowStatus={shell.state().workflowStatus}
         isPromptBoxFocused={shell.isPromptBoxFocused()}

src/cli/tui/routes/workflow/components/shells/executing-shell.tsx

@@ -65,6 +65,7 @@ export function ExecutingShell(props: ExecutingShellProps) {
             isLoadingEarlier={shell.logStream.isLoadingEarlier}
             loadEarlierError={shell.logStream.loadEarlierError}
             onLoadMore={() => shell.logStream.loadEarlierLines()}
+            onPauseTrimmingChange={(paused) => shell.logStream.setPauseTrimming(paused)}
             inputState={inputStateForOutput()}
             workflowStatus={shell.state().workflowStatus}
             isPromptBoxFocused={shell.isPromptBoxFocused()}

src/cli/tui/routes/workflow/hooks/useLogStream.ts

@@ -55,6 +55,7 @@ export interface LogStreamResult {
   isLoadingEarlier: boolean
   loadEarlierError: string | null
   loadEarlierLines: () => number
+  setPauseTrimming: (pause: boolean) => void
 }
 
 /**
@@ -222,15 +223,17 @@ interface WindowedLinesState {
 
 /**
  * Update windowed lines with new data, trimming from front if needed
+ * @param skipTrim - If true, don't trim lines (used when user has scrolled away)
  */
 function updateWindowedLines(
   current: WindowedLinesState,
   newLines: string[],
   totalLines: number,
   maxWindow: number,
-  wasReset: boolean
+  wasReset: boolean,
+  skipTrim = false
 ): WindowedLinesState {
-  // If file was reset, start fresh
+  // If file was reset, start fresh (always trim on reset)
   if (wasReset) {
     const trimCount = Math.max(0, newLines.length - maxWindow)
     return {
@@ -243,8 +246,8 @@ function updateWindowedLines(
   // Append new lines
   const allLines = [...current.lines, ...newLines]
 
-  // Trim from the front if exceeding window
-  if (allLines.length > maxWindow) {
+  // Trim from the front if exceeding window (unless skipTrim is true)
+  if (!skipTrim && allLines.length > maxWindow) {
     const trimCount = allLines.length - maxWindow
     return {
       lines: allLines.slice(trimCount),
@@ -327,6 +330,7 @@ export function useLogStream(
   const [currentLogPath, setCurrentLogPath] = createSignal<string>("")
   const [isLoadingEarlier, setIsLoadingEarlier] = createSignal(false)
   const [loadEarlierError, setLoadEarlierError] = createSignal<string | null>(null)
+  const [pauseTrimming, setPauseTrimming] = createSignal(false)
 
   /**
    * Load earlier lines when user scrolls to top of windowed view
@@ -522,7 +526,8 @@ export function useLogStream(
               filteredNewLines,
               current.totalLineCount + filteredNewLines.length,
               maxWindow,
-              false
+              false,
+              pauseTrimming() // Skip trimming when user has scrolled away
             )
             setWindowedState(updated)
 
@@ -762,5 +767,6 @@ export function useLogStream(
       return loadEarlierError()
     },
     loadEarlierLines,
+    setPauseTrimming,
   }
 }