feat: embed queue preview in input box top border

Replace standard border with custom-drawn border that embeds the queue
preview directly in the top border line

Author: brandonkachen

cli/src/chat.tsx

@@ -39,6 +39,7 @@ import { loadLocalAgents } from './utils/local-agent-registry'
 import { buildMessageTree } from './utils/message-tree-utils'
 import { createMarkdownPalette } from './utils/theme-system'
 import { BORDER_CHARS } from './utils/ui-constants'
+import { computeInputLayoutMetrics } from './utils/text-layout'
 
 import type { SendMessageTimerEvent } from './hooks/use-send-message'
 import type { ContentBlock } from './types/chat'
@@ -535,6 +536,36 @@ export const Chat = ({
     ) : null
 
   const shouldShowQueuePreview = queuedMessages.length > 0
+  const queuePreviewTitle = useMemo(() => {
+    if (!shouldShowQueuePreview) return undefined
+    const previewWidth = Math.max(30, separatorWidth - 20)
+    return formatQueuedPreview(queuedMessages, previewWidth)
+  }, [queuedMessages, separatorWidth, shouldShowQueuePreview])
+  const hasSlashSuggestions = slashContext.active && slashSuggestionItems.length > 0
+  const hasMentionSuggestions =
+    !slashContext.active && mentionContext.active && agentSuggestionItems.length > 0
+  const hasSuggestionMenu = hasSlashSuggestions || hasMentionSuggestions
+  const showAgentStatusLine = showAgentDisplayName && loadedAgentsData
+
+  const inputLayoutMetrics = useMemo(() => {
+    const text = inputValue ?? ''
+    const layoutContent = text.length > 0 ? text : ' '
+    const safeCursor = Math.max(0, Math.min(cursorPosition, layoutContent.length))
+    const cursorProbe =
+      safeCursor >= layoutContent.length
+        ? layoutContent
+        : layoutContent.slice(0, safeCursor)
+    const cols = Math.max(1, inputWidth - 4)
+    return computeInputLayoutMetrics({
+      layoutContent,
+      cursorProbe,
+      cols,
+      maxHeight: 5,
+    })
+  }, [inputValue, cursorPosition, inputWidth])
+  const isMultilineInput = inputLayoutMetrics.heightLines > 1
+  const shouldCenterInputVertically =
+    !hasSuggestionMenu && !showAgentStatusLine && !isMultilineInput
   const shouldShowStatusLine =
     streamStatus !== 'idle' ||
     shouldShowQueuePreview ||
@@ -711,46 +742,38 @@ export const Chat = ({
               </box>
             </box>
 
-            {/* Queue preview line - separate row */}
-            {shouldShowQueuePreview && (
-              <box
-                style={{
-                  flexDirection: 'row',
-                  width: '100%',
-                  justifyContent: 'center',
-                }}
-              >
-                <text style={{ wrapMode: 'none' }}>
-                  <span fg={theme.secondary} bg={theme.inputFocusedBg}>
-                    {` ${formatQueuedPreview(
-                      queuedMessages,
-                      Math.max(30, terminalWidth - 10),
-                    )} `}
-                  </span>
-                </text>
-              </box>
-            )}
           </box>
         )}
+
+        {/* Wrap the input row in a single OpenTUI border so the toggle stays inside the flex layout.
+            The queue preview is injected via the border title rather than custom text nodes, which
+            keeps the border coupled to the content height while preserving the inline preview look. */}
         <box
+          title={queuePreviewTitle ? ` ${queuePreviewTitle} ` : undefined}
+          titleAlignment="center"
           style={{
             width: '100%',
             borderStyle: 'single',
             borderColor: theme.secondary,
+            focusedBorderColor: theme.foreground,
             customBorderChars: BORDER_CHARS,
+            paddingLeft: 1,
+            paddingRight: 1,
+            paddingTop: 0,
+            paddingBottom: 0,
+            flexDirection: 'column',
+            gap: hasSuggestionMenu ? 1 : 0,
           }}
         >
-          {slashContext.active && slashSuggestionItems.length > 0 ? (
+          {hasSlashSuggestions ? (
             <SuggestionMenu
               items={slashSuggestionItems}
               selectedIndex={slashSelectedIndex}
               maxVisible={10}
               prefix="/"
             />
           ) : null}
-          {!slashContext.active &&
-          mentionContext.active &&
-          agentSuggestionItems.length > 0 ? (
+          {hasMentionSuggestions ? (
             <SuggestionMenu
               items={agentSuggestionItems}
               selectedIndex={agentSelectedIndex}
@@ -760,55 +783,65 @@ export const Chat = ({
           ) : null}
           <box
             style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              width: '100%',
+              flexDirection: 'column',
+              justifyContent: shouldCenterInputVertically
+                ? 'center'
+                : 'flex-start',
+              minHeight: shouldCenterInputVertically ? 3 : undefined,
+              gap: showAgentStatusLine ? 1 : 0,
             }}
           >
-            <box style={{ flexGrow: 1, minWidth: 0 }}>
-              <MultilineInput
-                value={inputValue}
-                onChange={setInputValue}
-                onSubmit={handleSubmit}
-                placeholder="Enter a coding task or / for commands"
-                focused={inputFocused}
-                maxHeight={5}
-                width={inputWidth}
-                onKeyIntercept={handleSuggestionMenuKey}
-                textAttributes={theme.messageTextAttributes}
-                ref={inputRef}
-                cursorPosition={cursorPosition}
-              />
-            </box>
             <box
               style={{
-                flexShrink: 0,
-                paddingLeft: 2,
+                flexDirection: 'row',
+                alignItems: shouldCenterInputVertically ? 'center' : 'flex-start',
+                width: '100%',
               }}
             >
-              <AgentModeToggle
-                mode={agentMode}
-                onToggle={toggleAgentMode}
-                onSelectMode={setAgentMode}
-              />
+              <box style={{ flexGrow: 1, minWidth: 0 }}>
+                <MultilineInput
+                  value={inputValue}
+                  onChange={setInputValue}
+                  onSubmit={handleSubmit}
+                  placeholder="Enter a coding task or / for commands"
+                  focused={inputFocused}
+                  maxHeight={5}
+                  width={inputWidth}
+                  onKeyIntercept={handleSuggestionMenuKey}
+                  textAttributes={theme.messageTextAttributes}
+                  ref={inputRef}
+                  cursorPosition={cursorPosition}
+                />
+              </box>
+              <box
+                style={{
+                  flexShrink: 0,
+                  paddingLeft: 2,
+                }}
+              >
+                <AgentModeToggle
+                  mode={agentMode}
+                  onToggle={toggleAgentMode}
+                  onSelectMode={setAgentMode}
+                />
+              </box>
             </box>
+            {/* Agent status line - right-aligned under toggle */}
+            {showAgentStatusLine && (
+              <box
+                style={{
+                  flexDirection: 'row',
+                  justifyContent: 'flex-end',
+                  paddingTop: 0,
+                }}
+              >
+                <text>
+                  <span fg={theme.muted}>Agent: {agentDisplayName}</span>
+                </text>
+              </box>
+            )}
           </box>
         </box>
-        {/* Agent status line - right-aligned under toggle */}
-        {showAgentDisplayName && loadedAgentsData && (
-          <box
-            style={{
-              flexDirection: 'row',
-              justifyContent: 'flex-end',
-              paddingRight: 1,
-              paddingTop: 0,
-            }}
-          >
-            <text>
-              <span fg={theme.muted}>Agent: {agentDisplayName}</span>
-            </text>
-          </box>
-        )}
       </box>
 
       {/* Login Modal Overlay - show when not authenticated and done checking */}

cli/src/components/agent-mode-toggle.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useRef, useState } from 'react'
-import stringWidth from 'string-width'
 
 import { SegmentedControl } from './segmented-control'
 import { useTheme } from '../hooks/use-theme'
+import { BORDER_CHARS } from '../utils/ui-constants'
 
 import type { Segment } from './segmented-control'
 import type { AgentMode } from '../utils/constants'
@@ -165,26 +165,14 @@ export const AgentModeToggle = ({
   const [isCollapsedHovered, setIsCollapsedHovered] = useState(false)
   const hoverToggle = useHoverToggle()
 
-  const handleCollapsedClick = () => {
-    hoverToggle.clearAllTimers()
-    if (hoverToggle.isOpen) {
-      hoverToggle.closeNow(true)
-    } else {
-      hoverToggle.openNow()
-    }
-  }
-
   const handleMouseOver = () => {
-    if (!hoverToggle.isOpen) setIsCollapsedHovered(true)
-    // Cancel any pending close and schedule open with delay
     hoverToggle.clearCloseTimer()
     hoverToggle.scheduleOpen()
   }
 
   const handleMouseOut = () => {
-    setIsCollapsedHovered(false)
-    // Schedule close using the hook's configured delay
     hoverToggle.scheduleClose()
+    setIsCollapsedHovered(false)
   }
 
   const handleSegmentClick = (id: string) => {
@@ -204,45 +192,39 @@ export const AgentModeToggle = ({
     hoverToggle.closeNow(true)
   }
 
-  const renderCollapsedState = () => {
-    const label = MODE_LABELS[mode]
-    const arrow = '< '
-    const contentText = ` ${arrow}${label} `
-    const contentWidth = stringWidth(contentText)
-    const horizontal = '─'.repeat(contentWidth)
-
-    const borderColor = isCollapsedHovered ? theme.foreground : theme.border
-
+  if (!hoverToggle.isOpen) {
     return (
       <box
         style={{
-          flexDirection: 'column',
-          gap: 0,
-          backgroundColor: 'transparent',
+          flexDirection: 'row',
+          alignItems: 'center',
+          paddingLeft: 1,
+          paddingRight: 1,
+          borderStyle: 'single',
+          borderColor: isCollapsedHovered ? theme.foreground : theme.border,
+          customBorderChars: BORDER_CHARS,
+        }}
+        onMouseDown={() => {
+          hoverToggle.clearAllTimers()
+          hoverToggle.openNow()
+        }}
+        onMouseOver={() => {
+          setIsCollapsedHovered(true)
+          handleMouseOver()
         }}
-        onMouseDown={handleCollapsedClick}
-        onMouseOver={handleMouseOver}
         onMouseOut={handleMouseOut}
       >
-        <text fg={borderColor}>{`╭${horizontal}╮`}</text>
-        <text fg={theme.foreground}>
-          <span fg={borderColor}>│</span>
+        <text wrapMode="none">
           {isCollapsedHovered ? (
-            <b>{` ${arrow}${label} `}</b>
+            <b>{`< ${MODE_LABELS[mode]}`}</b>
           ) : (
-            ` ${arrow}${label} `
+            `< ${MODE_LABELS[mode]}`
           )}
-          <span fg={borderColor}>│</span>
         </text>
-        <text fg={borderColor}>{`╰${horizontal}╯`}</text>
       </box>
     )
   }
 
-  if (!hoverToggle.isOpen) {
-    return renderCollapsedState()
-  }
-
   // Expanded state: delegate rendering to SegmentedControl
   const segments: Segment[] = buildExpandedSegments(mode)
 

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

@@ -28,16 +28,23 @@ export const useChatInput = ({
 }: UseChatInputOptions) => {
   const hasAutoSubmittedRef = useRef(false)
 
-  // Estimate the actual collapsed toggle width as rendered by AgentModeToggle
-  // Collapsed content is: " < " + LABEL + " " inside a bordered box.
-  // Full width = contentWidth + 2 (vertical borders). We also include the
-  // inter-element gap (the right container has paddingLeft: 2).
+  // Estimate the collapsed toggle width as rendered by AgentModeToggle.
+  // Collapsed content is "< LABEL" with 1 column of padding on each side and
+  // a vertical border on each edge. Include the inter-element gap (the right
+  // container has paddingLeft: 2).
   const MODE_LABELS = { DEFAULT: 'DEFAULT', MAX: 'MAX', PLAN: 'PLAN' } as const
-  const collapsedContentWidth = stringWidth(` < ${MODE_LABELS[agentMode]} `)
-  const collapsedBoxWidth = collapsedContentWidth + 2 // account for │ │
+  const collapsedLabelWidth = stringWidth(`< ${MODE_LABELS[agentMode]}`)
+  const horizontalPadding = 2 // one column padding on each side
+  const collapsedBoxWidth = collapsedLabelWidth + horizontalPadding + 2 // include │ │
   const gapWidth = 2 // paddingLeft on the toggle container
   const estimatedToggleWidth = collapsedBoxWidth + gapWidth
-  const inputWidth = Math.max(1, separatorWidth - estimatedToggleWidth)
+
+  // The content box that wraps the input row has paddingLeft/paddingRight = 1
+  // (see cli/src/chat.tsx). Subtract those columns so our MultilineInput width
+  // matches the true drawable area between the borders.
+  const contentPadding = 2 // 1 left + 1 right padding
+  const availableContentWidth = Math.max(1, separatorWidth - contentPadding)
+  const inputWidth = Math.max(1, availableContentWidth - estimatedToggleWidth)
 
   const handleBuildFast = useCallback(() => {
     setAgentMode('DEFAULT')