Hide mode button when narrow width

Author: jahooma

cli/src/chat.tsx

@@ -113,8 +113,9 @@ export const Chat = ({
 
   const { separatorWidth, terminalWidth, terminalHeight } =
     useTerminalDimensions()
-  const { height: heightLayout } = useTerminalLayout()
+  const { height: heightLayout, width: widthLayout } = useTerminalLayout()
   const isCompactHeight = heightLayout.is('xs')
+  const isNarrowWidth = widthLayout.is('xs')
   const messageAvailableWidth = separatorWidth
 
   const theme = useTheme()
@@ -640,6 +641,7 @@ export const Chat = ({
     initialPrompt,
     onSubmitPrompt,
     isCompactHeight,
+    isNarrowWidth,
   })
 
   const {
@@ -1218,6 +1220,7 @@ export const Chat = ({
           shouldCenterInputVertically={shouldCenterInputVertically}
           inputBoxTitle={inputBoxTitle}
           isCompactHeight={isCompactHeight}
+          isNarrowWidth={isNarrowWidth}
           feedbackMode={feedbackMode}
           handleExitFeedback={handleExitFeedback}
           handleSubmit={handleSubmit}

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

@@ -53,6 +53,7 @@ interface ChatInputBarProps {
   shouldCenterInputVertically: boolean
   inputBoxTitle: string | undefined
   isCompactHeight: boolean
+  isNarrowWidth: boolean
 
   // Feedback mode
   feedbackMode: boolean
@@ -86,6 +87,7 @@ export const ChatInputBar = ({
   shouldCenterInputVertically,
   inputBoxTitle,
   isCompactHeight,
+  isNarrowWidth,
   feedbackMode,
   handleExitFeedback,
   handleSubmit,
@@ -413,7 +415,7 @@ export const ChatInputBar = ({
                 cursorPosition={cursorPosition}
               />
             </box>
-            {modeConfig.showAgentModeToggle && (
+            {modeConfig.showAgentModeToggle && !isNarrowWidth && (
               <box
                 style={{
                   flexShrink: 0,

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

@@ -14,6 +14,7 @@ interface UseChatInputOptions {
   initialPrompt: string | null
   onSubmitPrompt: (content: string, mode: AgentMode) => void | Promise<unknown>
   isCompactHeight: boolean
+  isNarrowWidth: boolean
 }
 
 const BUILD_IT_TEXT = 'Build it!'
@@ -26,13 +27,14 @@ export const useChatInput = ({
   initialPrompt,
   onSubmitPrompt,
   isCompactHeight,
+  isNarrowWidth,
 }: UseChatInputOptions) => {
   const hasAutoSubmittedRef = useRef(false)
   const inputMode = useChatStore((state) => state.inputMode)
 
   // Estimate the collapsed toggle width as rendered by AgentModeToggle.
-  // In bash mode or compact height, we don't show the toggle, so no width needed.
-  const estimatedToggleWidth = inputMode !== 'default' || isCompactHeight
+  // In bash mode, compact height, or narrow width, we don't show the toggle, so no width needed.
+  const estimatedToggleWidth = inputMode !== 'default' || isCompactHeight || isNarrowWidth
     ? 0
     : stringWidth(`< ${agentMode}`) + 6 // 2 padding + 2 borders + 2 gap