feat(cli): add Ctrl+T shortcut to toggle collapse/expand all

- Add toggle-all (Ctrl+T) keyboard shortcut that collapses all if any are expanded, otherwise expands all
- Add setAllBlocksCollapsedState and hasAnyExpandedBlocks helpers for toggling collapsible blocks
- Update help banner with new shortcut and improved layout using columnGap
- Add comprehensive unit tests for keyboard actions and collapse helpers

Author: brandonkachen

cli/src/chat.tsx

@@ -176,6 +176,7 @@ export const Chat = ({
     handleCollapseToggle,
     isUserCollapsing,
     handleLoadPreviousMessages,
+    handleToggleAll,
   } = useChatMessages({ messages, setMessages })
 
   // Use extracted UI hook for scroll, terminal dimensions, and theme
@@ -1040,6 +1041,7 @@ export const Chat = ({
       },
       onScrollUp: scrollUp,
       onScrollDown: scrollDown,
+      onToggleAll: handleToggleAll,
       onOpenBuyCredits: () => {
         // If credits have been restored, just return to default mode
         if (areCreditsRestored()) {
@@ -1081,6 +1083,7 @@ export const Chat = ({
       clearQueue,
       scrollUp,
       scrollDown,
+      handleToggleAll,
     ],
   )
 

cli/src/components/chat-input-bar.tsx

@@ -121,6 +121,7 @@ export const ChatInputBar = ({
   const handleKeyIntercept = useEvent(
     (key: {
       name?: string
+      sequence?: string
       shift?: boolean
       ctrl?: boolean
       meta?: boolean

cli/src/components/help-banner.tsx

@@ -51,17 +51,18 @@ export const HelpBanner = () => {
         {/* Shortcuts Section */}
         <box style={{ flexDirection: 'column', gap: 0 }}>
           <SectionHeader>Shortcuts</SectionHeader>
-          <box style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 2, paddingLeft: 2 }}>
+          <box style={{ flexDirection: 'row', flexWrap: 'wrap', columnGap: 2, paddingLeft: 2 }}>
             <Shortcut keys="Ctrl+C / Esc" action="stop" />
             <Shortcut keys="Ctrl+J / Opt+Enter" action="newline" />
             <Shortcut keys="↑↓" action="history" />
+            <Shortcut keys="Ctrl+T" action="collapse/expand agents" />
           </box>
         </box>
 
         {/* Features Section */}
         <box style={{ flexDirection: 'column', gap: 0 }}>
           <SectionHeader>Features</SectionHeader>
-          <box style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 2, paddingLeft: 2 }}>
+          <box style={{ flexDirection: 'row', flexWrap: 'wrap', columnGap: 2, paddingLeft: 2 }}>
             <Shortcut keys="/" action="commands" />
             <Shortcut keys="@files" action="mention" />
             <Shortcut keys="@agents" action="use agent" />
@@ -73,7 +74,7 @@ export const HelpBanner = () => {
         <box style={{ flexDirection: 'column', gap: 0 }}>
           <SectionHeader>Credits</SectionHeader>
           <box style={{ flexDirection: 'column', paddingLeft: 2 }}>
-            <box style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 1 }}>
+            <box style={{ flexDirection: 'row', flexWrap: 'wrap', columnGap: 1 }}>
               <text style={{ fg: theme.foreground }}>1 credit = 1 cent</text>
               <text style={{ fg: theme.muted }}>·</text>
               <text style={{ fg: theme.foreground }}>/buy-credits</text>

cli/src/hooks/use-chat-keyboard.ts

@@ -79,6 +79,9 @@ export type ChatKeyboardHandlers = {
   onScrollUp: () => void
   onScrollDown: () => void
 
+  // Toggle all handler
+  onToggleAll: () => void
+
   // Out of credits handler
   onOpenBuyCredits: () => void
 }
@@ -239,6 +242,9 @@ function dispatchAction(
     case 'scroll-down':
       handlers.onScrollDown()
       return true
+    case 'toggle-all':
+      handlers.onToggleAll()
+      return true
     case 'open-buy-credits':
       handlers.onOpenBuyCredits()
       return true

cli/src/hooks/use-chat-messages.ts

@@ -6,6 +6,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { buildMessageTree } from '../utils/message-tree-utils'
+import { setAllBlocksCollapsedState, hasAnyExpandedBlocks } from '../utils/collapse-helpers'
 
 import type { ChatMessage, ContentBlock } from '../types/chat'
 
@@ -42,6 +43,8 @@ export interface UseChatMessagesReturn {
   isUserCollapsing: () => boolean
   /** Handler to load more previous messages */
   handleLoadPreviousMessages: () => void
+  /** Handler to toggle all collapsed/expanded state in all AI responses */
+  handleToggleAll: () => void
 }
 
 /**
@@ -181,7 +184,9 @@ export function useChatMessages({
         })
       })
 
-      // Reset flag after state update completes
+      // Reset flag after state update completes.
+      // Uses setTimeout(0) to defer until after React's batched state updates
+      // have been applied, ensuring the flag stays true during the render cycle.
       setTimeout(() => {
         isUserCollapsingRef.current = false
       }, 0)
@@ -196,6 +201,27 @@ export function useChatMessages({
     setVisibleMessageCount((prev) => prev + MESSAGE_BATCH_SIZE)
   }, [])
 
+  /**
+   * Toggles all collapsible blocks in all AI responses.
+   * If any block is expanded, collapses all. Otherwise expands all.
+   */
+  const handleToggleAll = useCallback(() => {
+    isUserCollapsingRef.current = true
+
+    setMessages((prevMessages) => {
+      // Determine target state: if any expanded, collapse all; otherwise expand all
+      const shouldCollapse = hasAnyExpandedBlocks(prevMessages)
+      return setAllBlocksCollapsedState(prevMessages, shouldCollapse)
+    })
+
+    // Reset flag after state update completes.
+    // Uses setTimeout(0) to defer until after React's batched state updates
+    // have been applied, ensuring the flag stays true during the render cycle.
+    setTimeout(() => {
+      isUserCollapsingRef.current = false
+    }, 0)
+  }, [setMessages])
+
   // Build message tree from flat messages array
   const { tree: messageTree, topLevelMessages } = useMemo(
     () => buildMessageTree(messages),
@@ -221,5 +247,6 @@ export function useChatMessages({
     handleCollapseToggle,
     isUserCollapsing,
     handleLoadPreviousMessages,
+    handleToggleAll,
   }
 }