Fix freebuff model tab navigation

Author: jahooma

cli/src/components/freebuff-model-selector.tsx

@@ -19,7 +19,10 @@ import { useFreebuffModelStore } from '../state/freebuff-model-store'
 import { useFreebuffSessionStore } from '../state/freebuff-session-store'
 import { useTerminalDimensions } from '../hooks/use-terminal-dimensions'
 import { useTheme } from '../hooks/use-theme'
-import { nextFreebuffModelId } from '../utils/freebuff-model-navigation'
+import {
+  freebuffModelNavigationDirectionForKey,
+  nextFreebuffModelId,
+} from '../utils/freebuff-model-navigation'
 
 import type { FreebuffModelOption } from '@codebuff/common/constants/freebuff-models'
 import type { KeyEvent } from '@opentui/core'
@@ -213,27 +216,27 @@ export const FreebuffModelSelector: React.FC = () => {
       (key: KeyEvent) => {
         if (pending) return
         const name = key.name ?? ''
-        const isForward =
-          name === 'right' || name === 'down' || (name === 'tab' && !key.shift)
-        const isBackward =
-          name === 'left' || name === 'up' || (name === 'tab' && key.shift)
+        const direction = freebuffModelNavigationDirectionForKey(key)
         const isCommit =
           name === 'return' || name === 'enter' || name === 'space'
-        if (!isForward && !isBackward && !isCommit) return
+        if (!direction && !isCommit) return
         if (isCommit) {
           if (isJoinable(focusedId) && focusedId !== committedModelId) {
             key.preventDefault?.()
+            key.stopPropagation?.()
             pick(focusedId)
           }
           return
         }
+        if (!direction) return
         const targetId = nextFreebuffModelId({
           modelIds: FREEBUFF_MODEL_SELECTOR_MODELS.map((model) => model.id),
           focusedId,
-          direction: isForward ? 'forward' : 'backward',
+          direction,
         })
         if (targetId) {
           key.preventDefault?.()
+          key.stopPropagation?.()
           setFocusedId(targetId)
         }
       },

cli/src/utils/__tests__/freebuff-model-navigation.test.ts

@@ -1,6 +1,9 @@
 import { describe, expect, test } from 'bun:test'
 
-import { nextFreebuffModelId } from '../freebuff-model-navigation'
+import {
+  freebuffModelNavigationDirectionForKey,
+  nextFreebuffModelId,
+} from '../freebuff-model-navigation'
 
 describe('nextFreebuffModelId', () => {
   test('moves to the next model when moving forward', () => {
@@ -49,3 +52,51 @@ describe('nextFreebuffModelId', () => {
     ).toBeNull()
   })
 })
+
+describe('freebuffModelNavigationDirectionForKey', () => {
+  test('maps arrow keys to model navigation directions', () => {
+    expect(freebuffModelNavigationDirectionForKey({ name: 'down' })).toBe(
+      'forward',
+    )
+    expect(freebuffModelNavigationDirectionForKey({ name: 'right' })).toBe(
+      'forward',
+    )
+    expect(freebuffModelNavigationDirectionForKey({ name: 'up' })).toBe(
+      'backward',
+    )
+    expect(freebuffModelNavigationDirectionForKey({ name: 'left' })).toBe(
+      'backward',
+    )
+  })
+
+  test('maps tab and shift-tab to model navigation directions', () => {
+    expect(freebuffModelNavigationDirectionForKey({ name: 'tab' })).toBe(
+      'forward',
+    )
+    expect(
+      freebuffModelNavigationDirectionForKey({ name: 'tab', shift: true }),
+    ).toBe('backward')
+  })
+
+  test('maps terminal tab sequences to model navigation directions', () => {
+    expect(freebuffModelNavigationDirectionForKey({ sequence: '\t' })).toBe(
+      'forward',
+    )
+    expect(
+      freebuffModelNavigationDirectionForKey({ sequence: '\x1b[9u' }),
+    ).toBe('forward')
+    expect(
+      freebuffModelNavigationDirectionForKey({ sequence: '\x1b[Z' }),
+    ).toBe('backward')
+    expect(
+      freebuffModelNavigationDirectionForKey({ sequence: '\x1b[9;2u' }),
+    ).toBe('backward')
+    expect(
+      freebuffModelNavigationDirectionForKey({ sequence: '\x1b[27;2;9~' }),
+    ).toBe('backward')
+  })
+
+  test('ignores non-navigation keys', () => {
+    expect(freebuffModelNavigationDirectionForKey({ name: 'enter' })).toBeNull()
+  })
+})

cli/src/utils/freebuff-model-navigation.ts

@@ -1,7 +1,9 @@
+export type FreebuffModelNavigationDirection = 'forward' | 'backward'
+
 export function nextFreebuffModelId(params: {
   modelIds: readonly string[]
   focusedId: string
-  direction: 'forward' | 'backward'
+  direction: FreebuffModelNavigationDirection
 }): string | null {
   const { modelIds, focusedId, direction } = params
   if (modelIds.length === 0) return null
@@ -12,3 +14,29 @@ export function nextFreebuffModelId(params: {
   const step = direction === 'forward' ? 1 : -1
   return modelIds[(currentIdx + step + modelIds.length) % modelIds.length]
 }
+
+export function freebuffModelNavigationDirectionForKey(key: {
+  name?: string
+  shift?: boolean
+  sequence?: string
+  raw?: string
+}): FreebuffModelNavigationDirection | null {
+  const name = (key.name ?? '').toLowerCase()
+  const sequence = key.sequence ?? key.raw ?? ''
+
+  if (name === 'right' || name === 'down') return 'forward'
+  if (name === 'left' || name === 'up') return 'backward'
+
+  const isShiftTab =
+    (name === 'tab' && Boolean(key.shift)) ||
+    sequence === '\x1b[Z' ||
+    sequence === '\x1b[9;2u' ||
+    sequence === '\x1b[27;2;9~'
+  if (isShiftTab) return 'backward'
+
+  if (name === 'tab' || sequence === '\t' || sequence === '\x1b[9u') {
+    return 'forward'
+  }
+
+  return null
+}