[feat] pause queue and cleaner status bar (#364)

Author: brandonkachen

cli/src/chat.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/__tests__/multiline-input.test.tsx

@@ -1,7 +1,7 @@
 import { describe, test, expect } from 'bun:test'
 
-import { getStatusIndicatorState } from '../status-indicator'
-import type { StatusIndicatorStateArgs } from '../status-indicator'
+import { getStatusIndicatorState } from '../../utils/status-indicator-state'
+import type { StatusIndicatorStateArgs } from '../../utils/status-indicator-state'
 
 describe('StatusIndicator state logic', () => {
   describe('getStatusIndicatorState', () => {