cli: Add message pagination to improve performance with long conversations

Author: brandonkachen

cli/src/chat.tsx

@@ -14,6 +14,7 @@ import { routeUserPrompt, addBashMessageToHistory } from './commands/router'
 import type { CommandResult } from './commands/command-registry'
 import { AnnouncementBanner } from './components/announcement-banner'
 import { ChatInputBar } from './components/chat-input-bar'
+import { LoadPreviousButton } from './components/load-previous-button'
 import { MessageWithAgents } from './components/message-with-agents'
 import { PendingBashMessage } from './components/pending-bash-message'
 import { StatusBar } from './components/status-bar'
@@ -112,6 +113,10 @@ export const Chat = ({
   const [hasOverflow, setHasOverflow] = useState(false)
   const hasOverflowRef = useRef(false)
 
+  // Message pagination - show last N messages with "Load previous" button
+  const MESSAGE_BATCH_SIZE = 15
+  const [visibleMessageCount, setVisibleMessageCount] = useState(MESSAGE_BATCH_SIZE)
+
   const queryClient = useQueryClient()
   const [, startUiTransition] = useTransition()
 
@@ -242,6 +247,13 @@ export const Chat = ({
     activeSubagentsRef.current = activeSubagents
   }, [activeSubagents])
 
+  // Reset visible message count when messages are cleared or conversation changes
+  useEffect(() => {
+    if (messages.length <= MESSAGE_BATCH_SIZE) {
+      setVisibleMessageCount(MESSAGE_BATCH_SIZE)
+    }
+  }, [messages.length])
+
   const isUserCollapsingRef = useRef<boolean>(false)
 
   const handleCollapseToggle = useCallback(
@@ -1235,6 +1247,20 @@ export const Chat = ({
     [messages],
   )
 
+  // Compute visible messages slice (from the end)
+  const visibleTopLevelMessages = useMemo(() => {
+    if (topLevelMessages.length <= visibleMessageCount) {
+      return topLevelMessages
+    }
+    return topLevelMessages.slice(-visibleMessageCount)
+  }, [topLevelMessages, visibleMessageCount])
+
+  const hiddenMessageCount = topLevelMessages.length - visibleTopLevelMessages.length
+
+  const handleLoadPreviousMessages = useCallback(() => {
+    setVisibleMessageCount((prev) => prev + MESSAGE_BATCH_SIZE)
+  }, [])
+
   const modeConfig = getInputModeConfig(inputMode)
   const hasSlashSuggestions =
     slashContext.active &&
@@ -1351,8 +1377,14 @@ export const Chat = ({
         )}
 
         {headerContent}
-        {topLevelMessages.map((message, idx) => {
-          const isLast = idx === topLevelMessages.length - 1
+        {hiddenMessageCount > 0 && (
+          <LoadPreviousButton
+            hiddenCount={hiddenMessageCount}
+            onLoadMore={handleLoadPreviousMessages}
+          />
+        )}
+        {visibleTopLevelMessages.map((message, idx) => {
+          const isLast = idx === visibleTopLevelMessages.length - 1
           return (
             <MessageWithAgents
               key={message.id}

cli/src/components/load-previous-button.tsx

@@ -0,0 +1,48 @@
+import { memo, useState } from 'react'
+
+import { Button } from './button'
+import { useTheme } from '../hooks/use-theme'
+import { BORDER_CHARS } from '../utils/ui-constants'
+
+interface LoadPreviousButtonProps {
+  hiddenCount: number
+  onLoadMore: () => void
+}
+
+export const LoadPreviousButton = memo(
+  ({ hiddenCount, onLoadMore }: LoadPreviousButtonProps) => {
+    const theme = useTheme()
+    const [isHovered, setIsHovered] = useState(false)
+
+    return (
+      <box
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'center',
+          paddingTop: 1,
+          paddingBottom: 1,
+          width: '100%',
+        }}
+      >
+        <Button
+          onClick={onLoadMore}
+          onMouseOver={() => setIsHovered(true)}
+          onMouseOut={() => setIsHovered(false)}
+          border
+          borderStyle="single"
+          borderColor={isHovered ? theme.foreground : theme.border}
+          customBorderChars={BORDER_CHARS}
+          style={{
+            paddingLeft: 2,
+            paddingRight: 2,
+            backgroundColor: 'transparent',
+          }}
+        >
+          <text style={{ fg: isHovered ? theme.foreground : theme.muted }}>
+            ↑ Load previous messages
+          </text>
+        </Button>
+      </box>
+    )
+  },
+)