fix: prevent raw tab characters from rendering in terminal input

Tab characters were being rendered as control characters (^I or similar) in
the terminal instead of being converted to spaces for display. This caused
visual artifacts like "\t▍" instead of showing just the cursor symbol.

Changes:
- Convert tabs to 4 spaces for rendering (displayValueForRendering)
- Calculate cursor position accounting for tab expansion (renderCursorPosition)
- Prevent highlighting tab characters (add tab check to shouldHighlight)
- Add comprehensive tests for tab rendering behavior

The actual stored value still uses \t characters, only the display is affected.

Author: brandonkachen

cli/src/components/__tests__/multiline-input.test.tsx

@@ -0,0 +1,163 @@
+import { describe, test, expect } from 'bun:test'
+
+/**
+ * Tests for tab character cursor rendering in MultilineInput component.
+ * 
+ * The shouldHighlight logic determines whether to show a highlighted character
+ * or the cursor symbol (▍) at the cursor position.
+ * 
+ * Additionally, tabs are expanded to spaces (TAB_WIDTH=4) for proper rendering,
+ * so the cursor appears at the correct visual position.
+ */
+
+describe('MultilineInput - tab character handling', () => {
+  const TAB_WIDTH = 4
+
+  /**
+   * Helper function that mimics the shouldHighlight logic from MultilineInput.
+   * This tests the core fix: tabs should NOT be highlighted (like newlines).
+   */
+  function shouldHighlightChar(
+    showCursor: boolean,
+    isPlaceholder: boolean,
+    cursorPosition: number,
+    displayValue: string,
+  ): boolean {
+    return (
+      showCursor &&
+      !isPlaceholder &&
+      cursorPosition < displayValue.length &&
+      displayValue[cursorPosition] !== '\n' &&
+      displayValue[cursorPosition] !== '\t' // This is the fix being tested
+    )
+  }
+
+  /**
+   * Calculate cursor position in expanded string (tabs -> spaces)
+   */
+  function calculateRenderCursorPosition(
+    cursorPosition: number,
+    displayValue: string,
+  ): number {
+    let renderPos = 0
+    for (let i = 0; i < cursorPosition && i < displayValue.length; i++) {
+      renderPos += displayValue[i] === '\t' ? TAB_WIDTH : 1
+    }
+    return renderPos
+  }
+
+  test('does NOT highlight when cursor is on a tab character', () => {
+    const value = 'hello\tworld'
+    const cursorPosition = 5 // Position of the tab
+    
+    const shouldHighlight = shouldHighlightChar(true, false, cursorPosition, value)
+    
+    // Tab characters should not be highlighted (should show cursor symbol instead)
+    expect(shouldHighlight).toBe(false)
+  })
+
+  test('does NOT highlight when cursor is on a newline character', () => {
+    const value = 'line1\nline2'
+    const cursorPosition = 5 // Position of the newline
+    
+    const shouldHighlight = shouldHighlightChar(true, false, cursorPosition, value)
+    
+    // Newlines should not be highlighted (existing behavior)
+    expect(shouldHighlight).toBe(false)
+  })
+
+  test('DOES highlight when cursor is on a regular character', () => {
+    const value = 'hello'
+    const cursorPosition = 1 // Position of 'e'
+    
+    const shouldHighlight = shouldHighlightChar(true, false, cursorPosition, value)
+    
+    // Regular characters should be highlighted
+    expect(shouldHighlight).toBe(true)
+  })
+
+  test('does NOT highlight when not focused (showCursor=false)', () => {
+    const value = 'hello\tworld'
+    const cursorPosition = 5
+    
+    const shouldHighlight = shouldHighlightChar(false, false, cursorPosition, value)
+    
+    expect(shouldHighlight).toBe(false)
+  })
+
+  test('does NOT highlight when showing placeholder', () => {
+    const value = ''
+    const cursorPosition = 0
+    
+    const shouldHighlight = shouldHighlightChar(true, true, cursorPosition, value)
+    
+    expect(shouldHighlight).toBe(false)
+  })
+
+  test('does NOT highlight when cursor is at end of string', () => {
+    const value = 'hello'
+    const cursorPosition = 5 // Beyond last character
+    
+    const shouldHighlight = shouldHighlightChar(true, false, cursorPosition, value)
+    
+    expect(shouldHighlight).toBe(false)
+  })
+
+  test('handles multiple tabs - does NOT highlight tab at position 2', () => {
+    const value = '\t\t\tindented'
+    const cursorPosition = 2 // Third tab
+    
+    const shouldHighlight = shouldHighlightChar(true, false, cursorPosition, value)
+    
+    expect(shouldHighlight).toBe(false)
+  })
+
+  test('handles tab at end of string', () => {
+    const value = 'text\t'
+    const cursorPosition = 4 // Position of trailing tab
+    
+    const shouldHighlight = shouldHighlightChar(true, false, cursorPosition, value)
+    
+    expect(shouldHighlight).toBe(false)
+  })
+
+  test('handles space character - DOES highlight (spaces are visible)', () => {
+    const value = 'hello world'
+    const cursorPosition = 5 // Position of space
+    
+    const shouldHighlight = shouldHighlightChar(true, false, cursorPosition, value)
+    
+    // Spaces should be highlighted (they are visible characters)
+    expect(shouldHighlight).toBe(true)
+  })
+
+  test('expands single tab to 4 spaces for rendering', () => {
+    const value = 'hello\tworld'
+    const cursorPosition = 6 // After the tab
+    
+    const renderPos = calculateRenderCursorPosition(cursorPosition, value)
+    
+    // Position 6 in original = position 9 in rendered (5 chars + 4-space tab)
+    expect(renderPos).toBe(9)
+  })
+
+  test('expands multiple tabs correctly', () => {
+    const value = '\t\t\ttest'
+    const cursorPosition = 3 // After 3 tabs
+    
+    const renderPos = calculateRenderCursorPosition(cursorPosition, value)
+    
+    // 3 tabs = 12 spaces
+    expect(renderPos).toBe(12)
+  })
+
+  test('mixed content with tabs calculates correct render position', () => {
+    const value = 'a\tb\tc'
+    const cursorPosition = 3 // After 'a', tab, 'b'
+    
+    const renderPos = calculateRenderCursorPosition(cursorPosition, value)
+    
+    // 'a' (1) + tab (4) + 'b' (1) = 6
+    expect(renderPos).toBe(6)
+  })
+})

cli/src/components/multiline-input.tsx

@@ -76,7 +76,7 @@ function findNextWordBoundary(text: string, cursor: number): number {
 }
 
 const CURSOR_CHAR = '▍'
-const CONTROL_CHAR_REGEX = /[\u0000-\u001f\u007f]/
+const CONTROL_CHAR_REGEX = /[\u0000-\u0008\u000b-\u000c\u000e-\u001f\u007f]/
 
 type KeyWithPreventDefault =
   | {
@@ -266,14 +266,27 @@ export const MultilineInput = forwardRef<
   const isPlaceholder = value.length === 0 && placeholder.length > 0
   const displayValue = isPlaceholder ? placeholder : value
   const showCursor = focused
-  const beforeCursor = showCursor ? displayValue.slice(0, cursorPosition) : ''
-  const afterCursor = showCursor ? displayValue.slice(cursorPosition) : ''
+  
+  // Replace tabs with spaces for proper rendering
+  // Terminal tab stops are typically 8 columns, but 4 is more readable
+  const TAB_WIDTH = 4
+  const displayValueForRendering = displayValue.replace(/\t/g, ' '.repeat(TAB_WIDTH))
+  
+  // Calculate cursor position in the expanded string (accounting for tabs)
+  let renderCursorPosition = 0
+  for (let i = 0; i < cursorPosition && i < displayValue.length; i++) {
+    renderCursorPosition += displayValue[i] === '\t' ? TAB_WIDTH : 1
+  }
+  
+  const beforeCursor = showCursor ? displayValueForRendering.slice(0, renderCursorPosition) : ''
+  const afterCursor = showCursor ? displayValueForRendering.slice(renderCursorPosition) : ''
   const activeChar = afterCursor.charAt(0) || ' '
   const shouldHighlight =
     showCursor &&
     !isPlaceholder &&
     cursorPosition < displayValue.length &&
-    displayValue[cursorPosition] !== '\n'
+    displayValue[cursorPosition] !== '\n' &&
+    displayValue[cursorPosition] !== '\t'
 
   // Handle all keyboard input with advanced shortcuts
   useKeyboard(
@@ -739,15 +752,15 @@ export const MultilineInput = forwardRef<
 
   const layoutContent = showCursor
     ? shouldHighlight
-      ? displayValue
-      : `${displayValue.slice(0, cursorPosition)}${CURSOR_CHAR}${afterCursor}`
-    : displayValue
+      ? displayValueForRendering
+      : `${beforeCursor}${CURSOR_CHAR}${afterCursor}`
+    : displayValueForRendering
 
   const cursorProbe = showCursor
     ? shouldHighlight
-      ? displayValue.slice(0, cursorPosition + 1)
-      : `${displayValue.slice(0, cursorPosition)}${CURSOR_CHAR}`
-    : displayValue.slice(0, cursorPosition)
+      ? displayValueForRendering.slice(0, renderCursorPosition + 1)
+      : `${beforeCursor}${CURSOR_CHAR}`
+    : displayValueForRendering.slice(0, renderCursorPosition)
 
   const layoutMetrics = useMemo(
     () =>
@@ -834,7 +847,7 @@ export const MultilineInput = forwardRef<
           </>
         ) : (
           <>
-            {displayValue}
+            {displayValueForRendering}
             {shouldRenderBottomGutter ? '\n' : ''}
           </>
         )}