feat(cli): prevent auto-scroll during user-initiated collapses and add

brandonkachen · brandonkachen · commit 3f5d8bcba619 · 2025-11-10T10:20:02.000-08:00
scroll indicator

- Add isUserCollapsingRef to track user-initiated collapse actions -
Prevent auto-scroll when user manually collapses agent sections - Add
clickable scroll indicator (↓) when not at bottom of chat - Refactor
diff-viewer to use single text element for better rendering - Add object
validation in agent-branch-item and tool-call-item - Restructure status
bar with three-section flexbox layout
diff --git a/cli/src/chat.tsx b/cli/src/chat.tsx
@@ -40,7 +40,11 @@ import { BORDER_CHARS } from './utils/ui-constants'
 import type { SendMessageTimerEvent } from './hooks/use-send-message'
 import type { ContentBlock } from './types/chat'
 import type { SendMessageFn } from './types/contracts/send-message'
-import type { ScrollBoxRenderable } from '@opentui/core'
+import type { KeyEvent, ScrollBoxRenderable } from '@opentui/core'
+import { TextAttributes } from '@opentui/core'
+
+const MAX_VIRTUALIZED_TOP_LEVEL = 60
+const VIRTUAL_OVERSCAN = 12
 
 const DEFAULT_AGENT_IDS = {
   DEFAULT: 'base2',
@@ -493,7 +497,8 @@ export const Chat = ({
     ) : null
 
   const shouldShowQueuePreview = queuedMessages.length > 0
-  const shouldShowStatusLine = Boolean(hasStatus || shouldShowQueuePreview)
+  const shouldShowStatusLine =
+    hasStatus || shouldShowQueuePreview || !isAtBottom
 
   const statusIndicatorNode = (
     <StatusIndicator
@@ -603,18 +608,45 @@ export const Chat = ({
               width: '100%',
             }}
           >
-            <text style={{ wrapMode: 'none' }}>
-              {hasStatus && statusIndicatorNode}
+            {/* Left section - queue preview */}
+            <box style={{ flexGrow: 1, flexShrink: 1, flexBasis: 0 }}>
               {shouldShowQueuePreview && (
-                <span fg={theme.secondary} bg={theme.inputFocusedBg}>
-                  {' '}
-                  {formatQueuedPreview(
-                    queuedMessages,
-                    Math.max(30, terminalWidth - 25),
-                  )}{' '}
-                </span>
+                <text style={{ wrapMode: 'none' }}>
+                  <span fg={theme.secondary} bg={theme.inputFocusedBg}>
+                    {` ${formatQueuedPreview(
+                      queuedMessages,
+                      Math.max(30, terminalWidth - 25),
+                    )} `}
+                  </span>
+                </text>
               )}
-            </text>
+            </box>
+
+            {/* Center section - scroll indicator (always centered) */}
+            <box style={{ flexShrink: 0 }}>
+              {!isAtBottom && (
+                <text onMouseDown={scrollToLatest}>
+                  <span fg={theme.info} attributes={TextAttributes.BOLD}>
+                    ↓
+                  </span>
+                </text>
+              )}
+            </box>
+
+            {/* Right section - status indicator */}
+            <box
+              style={{
+                flexGrow: 1,
+                flexShrink: 1,
+                flexBasis: 0,
+                flexDirection: 'row',
+                justifyContent: 'flex-end',
+              }}
+            >
+              {hasStatus && (
+                <text style={{ wrapMode: 'none' }}>{statusIndicatorNode}</text>
+              )}
+            </box>
           </box>
         )}
         <box
diff --git a/cli/src/components/agent-branch-item.tsx b/cli/src/components/agent-branch-item.tsx
@@ -18,6 +18,7 @@ interface AgentBranchItemProps {
   statusIndicator?: string
   onToggle?: () => void
   titleSuffix?: string
+  isUserCollapsingRef?: React.MutableRefObject<boolean>
 }
 
 export const AgentBranchItem = ({
@@ -34,6 +35,7 @@ export const AgentBranchItem = ({
   statusIndicator = '●',
   onToggle,
   titleSuffix,
+  isUserCollapsingRef,
 }: AgentBranchItemProps) => {
   const theme = useTheme()
 
@@ -142,6 +144,12 @@ export const AgentBranchItem = ({
       )
     }
 
+    // Check if value is a plain object (not a React element)
+    if (typeof value === 'object' && value !== null && !React.isValidElement(value)) {
+      console.warn('Attempted to render plain object in agent content:', value)
+      return null
+    }
+
     return (
       <box key="expanded-unknown" style={{ flexDirection: 'column', gap: 0 }}>
         {value}
@@ -281,7 +289,13 @@ export const AgentBranchItem = ({
                   alignSelf: 'flex-end',
                   marginTop: 1,
                 }}
-                onMouseDown={onToggle}
+                onMouseDown={() => {
+                  // Set flag to prevent auto-scroll during user-initiated collapse
+                  if (isUserCollapsingRef) {
+                    isUserCollapsingRef.current = true
+                  }
+                  onToggle()
+                }}
               >
                 <text
                   fg={theme.secondary}
diff --git a/cli/src/components/tools/diff-viewer.tsx b/cli/src/components/tools/diff-viewer.tsx
@@ -41,25 +41,21 @@ const lineColor = (line: string): { fg: string; attrs?: number } => {
 export const DiffViewer = ({ diffText }: DiffViewerProps) => {
   const theme = useTheme()
   const lines = diffText.split('\n')
+  const filteredLines = lines.filter((rawLine) => !rawLine.startsWith('@@'))
 
   return (
-    <box
-      style={{ flexDirection: 'column', gap: 0, width: '100%', flexGrow: 1 }}
-    >
-      {lines
-        .filter((rawLine) => !rawLine.startsWith('@@'))
-        .map((rawLine, idx) => {
-          const line = rawLine.length === 0 ? ' ' : rawLine
-          const { fg, attrs } = lineColor(line)
-          const resolvedFg = fg || theme.foreground
-          return (
-            <text key={`diff-line-${idx}`} style={{ wrapMode: 'none' }}>
-              <span fg={resolvedFg} attributes={attrs}>
-                {line}
-              </span>
-            </text>
-          )
-        })}
-    </box>
+    <text style={{ wrapMode: 'none', marginTop: 0, marginBottom: 0 }}>
+      {filteredLines.map((rawLine, idx) => {
+        const line = rawLine.length === 0 ? ' ' : rawLine
+        const { fg, attrs } = lineColor(line)
+        const resolvedFg = fg || theme.foreground
+        return (
+          <span key={`diff-line-${idx}`} fg={resolvedFg} attributes={attrs}>
+            {line}
+            {idx < filteredLines.length - 1 ? '\n' : ''}
+          </span>
+        )
+      })}
+    </text>
   )
 }
diff --git a/cli/src/components/tools/str-replace.tsx b/cli/src/components/tools/str-replace.tsx
@@ -50,8 +50,16 @@ const EditHeader = ({ name, filePath }: EditHeaderProps) => {
   const bulletChar = '• '
 
   return (
-    <box style={{ flexDirection: 'row', alignItems: 'center', width: '100%' }}>
-      <text style={{ wrapMode: 'word' }}>
+    <box
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        width: '100%',
+        marginTop: 0,
+        marginBottom: 0,
+      }}
+    >
+      <text style={{ wrapMode: 'word', marginTop: 0, marginBottom: 0 }}>
         <span fg={theme.foreground}>{bulletChar}</span>
         <span fg={theme.foreground} attributes={TextAttributes.BOLD}>
           {name}
@@ -69,12 +77,34 @@ interface EditBodyProps {
 }
 
 const EditBody = ({ name, filePath, diffText }: EditBodyProps) => {
+  const hasDiff = diffText && diffText.trim().length > 0
+
   return (
-    <box style={{ flexDirection: 'column', gap: 0, width: '100%' }}>
+    <box
+      style={{
+        flexDirection: 'column',
+        gap: 0,
+        width: '100%',
+        marginTop: 0,
+        marginBottom: 0,
+      }}
+    >
       <EditHeader name={name} filePath={filePath} />
-      <box style={{ paddingLeft: 2, width: '100%' }}>
-        <DiffViewer diffText={diffText} />
-      </box>
+      {hasDiff && (
+        <box
+          style={{
+            paddingLeft: 2,
+            paddingRight: 0,
+            paddingTop: 0,
+            paddingBottom: 0,
+            width: '100%',
+            marginTop: 0,
+            marginBottom: 0,
+          }}
+        >
+          <DiffViewer diffText={diffText} />
+        </box>
+      )}
     </box>
   )
 }
diff --git a/cli/src/components/tools/tool-call-item.tsx b/cli/src/components/tools/tool-call-item.tsx
@@ -110,6 +110,12 @@ const renderExpandedContent = (
     )
   }
 
+  // Check if value is a plain object (not a React element)
+  if (typeof value === 'object' && value !== null && !React.isValidElement(value)) {
+    console.warn('Attempted to render plain object in tool content:', value)
+    return null
+  }
+
   return (
     <box
       key="tool-expanded-unknown"
diff --git a/cli/src/hooks/use-message-renderer.tsx b/cli/src/hooks/use-message-renderer.tsx
diff --git a/cli/src/hooks/use-scroll-management.ts b/cli/src/hooks/use-scroll-management.ts

Original file line number	Diff line number	Diff line change
`@@ -110,6 +110,12 @@ const renderExpandedContent = (`
`110`	`110`	`)`
`111`	`111`	`}`
`112`	`112`
	`113`	`+ // Check if value is a plain object (not a React element)`
	`114`	`+ if (typeof value === 'object' && value !== null && !React.isValidElement(value)) {`
	`115`	`+ console.warn('Attempted to render plain object in tool content:', value)`
	`116`	`+ return null`
	`117`	`+ }`
	`118`	`+`
`113`	`119`	`return (`
`114`	`120`	`<box`
`115`	`121`	`key="tool-expanded-unknown"`