Compact mode!

Author: jahooma

cli/src/chat.tsx

@@ -38,6 +38,7 @@ import { useChatScrollbox } from './hooks/use-scroll-management'
 import { useSendMessage } from './hooks/use-send-message'
 import { useSuggestionEngine } from './hooks/use-suggestion-engine'
 import { useTerminalDimensions } from './hooks/use-terminal-dimensions'
+import { useTerminalLayout } from './hooks/use-terminal-layout'
 import { useTheme } from './hooks/use-theme'
 import { useTimeout } from './hooks/use-timeout'
 import { useUsageMonitor } from './hooks/use-usage-monitor'
@@ -112,6 +113,8 @@ export const Chat = ({
 
   const { separatorWidth, terminalWidth, terminalHeight } =
     useTerminalDimensions()
+  const { height: heightLayout } = useTerminalLayout()
+  const isCompactHeight = heightLayout.is('xs')
   const messageAvailableWidth = separatorWidth
 
   const theme = useTheme()
@@ -636,6 +639,7 @@ export const Chat = ({
     separatorWidth,
     initialPrompt,
     onSubmitPrompt,
+    isCompactHeight,
   })
 
   const {
@@ -1213,6 +1217,7 @@ export const Chat = ({
           separatorWidth={separatorWidth}
           shouldCenterInputVertically={shouldCenterInputVertically}
           inputBoxTitle={inputBoxTitle}
+          isCompactHeight={isCompactHeight}
           feedbackMode={feedbackMode}
           handleExitFeedback={handleExitFeedback}
           handleSubmit={handleSubmit}

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

@@ -14,6 +14,7 @@ import { BORDER_CHARS } from '../utils/ui-constants'
 import type { useTheme } from '../hooks/use-theme'
 import type { InputValue } from '../state/chat-store'
 import type { AgentMode } from '../utils/constants'
+import { useEvent } from '../hooks/use-event'
 
 type Theme = ReturnType<typeof useTheme>
 
@@ -51,6 +52,7 @@ interface ChatInputBarProps {
   separatorWidth: number
   shouldCenterInputVertically: boolean
   inputBoxTitle: string | undefined
+  isCompactHeight: boolean
 
   // Feedback mode
   feedbackMode: boolean
@@ -83,6 +85,7 @@ export const ChatInputBar = ({
   separatorWidth,
   shouldCenterInputVertically,
   inputBoxTitle,
+  isCompactHeight,
   feedbackMode,
   handleExitFeedback,
   handleSubmit,
@@ -195,6 +198,45 @@ export const ChatInputBar = ({
     inputMode === 'default' ? inputPlaceholder : modeConfig.placeholder
   const borderColor = theme[modeConfig.color]
 
+  // Shared key intercept handler for suggestion menu navigation
+  const handleKeyIntercept = useEvent(
+    (key: {
+      name?: string
+      shift?: boolean
+      ctrl?: boolean
+      meta?: boolean
+      option?: boolean
+    }) => {
+      // Intercept navigation keys when suggestion menu is active
+      // The useChatKeyboard hook will handle menu selection/navigation
+      const hasSuggestions = hasSlashSuggestions || hasMentionSuggestions
+      if (!hasSuggestions) return false
+
+      const isPlainEnter =
+        (key.name === 'return' || key.name === 'enter') &&
+        !key.shift &&
+        !key.ctrl &&
+        !key.meta &&
+        !key.option
+      const isTab = key.name === 'tab' && !key.ctrl && !key.meta && !key.option
+      const isUpDown =
+        (key.name === 'up' || key.name === 'down') &&
+        !key.ctrl &&
+        !key.meta &&
+        !key.option
+
+      // Don't intercept Up/Down when user is navigating history
+      if (isUpDown && lastEditDueToNav) {
+        return false
+      }
+
+      if (isPlainEnter || isTab || isUpDown) {
+        return true
+      }
+      return false
+    },
+  )
+
   if (askUserState) {
     return (
       <box
@@ -233,6 +275,67 @@ export const ChatInputBar = ({
     )
   }
 
+  // Compact mode: no border, minimal chrome, supports menus and multiline
+  if (isCompactHeight) {
+    const compactMaxHeight = Math.floor(terminalHeight / 2)
+    return (
+      <>
+        {hasSlashSuggestions ? (
+          <SuggestionMenu
+            items={slashSuggestionItems}
+            selectedIndex={slashSelectedIndex}
+            maxVisible={5}
+            prefix="/"
+          />
+        ) : null}
+        {hasMentionSuggestions ? (
+          <SuggestionMenu
+            items={[...agentSuggestionItems, ...fileSuggestionItems]}
+            selectedIndex={agentSelectedIndex}
+            maxVisible={5}
+            prefix="@"
+          />
+        ) : null}
+        <box
+          style={{
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            width: '100%',
+            paddingLeft: 1,
+            paddingRight: 1,
+            backgroundColor: theme.surface,
+          }}
+        >
+          {modeConfig.icon && (
+            <box
+              style={{
+                flexShrink: 0,
+                paddingRight: 1,
+              }}
+            >
+              <text style={{ fg: theme[modeConfig.color] }}>
+                {modeConfig.icon}
+              </text>
+            </box>
+          )}
+          <MultilineInput
+            value={inputValue}
+            onChange={handleInputChange}
+            onSubmit={handleSubmit}
+            onKeyIntercept={handleKeyIntercept}
+            placeholder={effectivePlaceholder}
+            focused={inputFocused && !feedbackMode}
+            maxHeight={compactMaxHeight}
+            width={adjustedInputWidth}
+            ref={inputRef}
+            cursorPosition={cursorPosition}
+          />
+        </box>
+        <InputModeBanner />
+      </>
+    )
+  }
+
   return (
     <>
       <box
@@ -301,43 +404,11 @@ export const ChatInputBar = ({
                 value={inputValue}
                 onChange={handleInputChange}
                 onSubmit={handleSubmit}
-                onKeyIntercept={(key) => {
-                  // Intercept navigation keys when suggestion menu is active
-                  // The useChatKeyboard hook will handle menu selection/navigation
-                  const hasSuggestions =
-                    hasSlashSuggestions || hasMentionSuggestions
-                  if (!hasSuggestions) return false
-
-                  const isPlainEnter =
-                    (key.name === 'return' || key.name === 'enter') &&
-                    !key.shift &&
-                    !key.ctrl &&
-                    !key.meta &&
-                    !key.option
-                  const isTab =
-                    key.name === 'tab' && !key.ctrl && !key.meta && !key.option
-                  const isUpDown =
-                    (key.name === 'up' || key.name === 'down') &&
-                    !key.ctrl &&
-                    !key.meta &&
-                    !key.option
-
-                  // Don't intercept Up/Down when user is navigating history
-                  // (lastEditDueToNav is true), let them continue paging through
-                  if (isUpDown && lastEditDueToNav) {
-                    return false
-                  }
-
-                  if (isPlainEnter || isTab || isUpDown) {
-                    return true // Prevent default, let useChatKeyboard handle it
-                  }
-                  return false
-                }}
+                onKeyIntercept={handleKeyIntercept}
                 placeholder={effectivePlaceholder}
                 focused={inputFocused && !feedbackMode}
                 maxHeight={Math.floor(terminalHeight / 2)}
                 width={adjustedInputWidth}
-
                 ref={inputRef}
                 cursorPosition={cursorPosition}
               />

cli/src/components/thinking.tsx

@@ -33,7 +33,7 @@ export const Thinking = memo(
       width,
       PREVIEW_LINE_COUNT,
     )
-    // Pad to exactly PREVIEW_LINE_COUNT lines for consistent height while streaming
+    // Pad to exactly PREVIEW_LINE_COUNT lines for consistent height while streaming.
     const previewLines = [...lines]
     while (previewLines.length < PREVIEW_LINE_COUNT) {
       previewLines.push('')
@@ -88,17 +88,15 @@ export const Thinking = memo(
                   gap: 0,
                 }}
               >
-                {hasMore && (
-                  <text
-                    style={{
-                      wrapMode: 'none',
-                      fg: theme.muted,
-                    }}
-                    attributes={TextAttributes.ITALIC}
-                  >
-                    ...
-                  </text>
-                )}
+                <text
+                  style={{
+                    wrapMode: 'none',
+                    fg: theme.muted,
+                  }}
+                  attributes={TextAttributes.ITALIC}
+                >
+                  {hasMore ? '...' : ' '}
+                </text>
                 <text
                   style={{
                     wrapMode: 'word',

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

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