@mdxui/terminal 2.0.0

package/src/__tests__/components/navigation/command-palette.test.ts

@@ -0,0 +1,1095 @@
+/**
+ * @mdxui/terminal Command Palette Component Tests
+ *
+ * TDD RED Phase: Tests for the Command Palette navigation component.
+ * All tests should FAIL initially because the Command Palette renderers don't exist yet.
+ *
+ * The Command Palette component provides quick command access with:
+ * - Search/filter input
+ * - Command list with fuzzy matching
+ * - Keyboard navigation
+ * - Command categories/groups
+ * - Shortcut key display
+ * - Command execution
+ *
+ * This is part of the Universal Terminal UI 6-tier rendering system.
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import type { UINode, RenderTier, RenderContext, ThemeTokens } from '../../../core/types'
+
+// ============================================================================
+// Test Utilities
+// ============================================================================
+
+const RENDER_TIERS: RenderTier[] = ['text', 'markdown', 'ascii', 'unicode', 'ansi', 'interactive']
+
+function createTestTheme(): ThemeTokens {
+  return {
+    primary: '\x1b[34m',
+    secondary: '\x1b[36m',
+    muted: '\x1b[90m',
+    foreground: '\x1b[37m',
+    background: '\x1b[40m',
+    border: '\x1b[90m',
+    success: '\x1b[32m',
+    warning: '\x1b[33m',
+    error: '\x1b[31m',
+    info: '\x1b[34m',
+  }
+}
+
+function createContext(tier: RenderTier): RenderContext {
+  return {
+    tier,
+    width: 80,
+    height: 24,
+    depth: 0,
+    theme: createTestTheme(),
+    interactive: tier === 'interactive',
+  }
+}
+
+// ============================================================================
+// Command Palette Types
+// ============================================================================
+
+interface Command {
+  id: string
+  label: string
+  description?: string
+  shortcut?: string
+  icon?: string
+  category?: string
+  disabled?: boolean
+  keywords?: string[]
+}
+
+interface CommandGroup {
+  id: string
+  label: string
+  commands: Command[]
+}
+
+interface CommandPaletteProps {
+  commands: Command[]
+  groups?: CommandGroup[]
+  searchQuery?: string
+  selectedIndex?: number
+  placeholder?: string
+  maxResults?: number
+  showShortcuts?: boolean
+  onSelect?: (commandId: string) => void
+  onQueryChange?: (query: string) => void
+  onClose?: () => void
+}
+
+function createCommandPaletteNode(props: CommandPaletteProps): UINode {
+  return {
+    type: 'command-palette',
+    props: {
+      searchQuery: props.searchQuery || '',
+      selectedIndex: props.selectedIndex || 0,
+      placeholder: props.placeholder || 'Search commands...',
+      maxResults: props.maxResults || 10,
+      showShortcuts: props.showShortcuts !== false,
+    },
+    children: [
+      {
+        type: 'command-palette-input',
+        props: {
+          value: props.searchQuery || '',
+          placeholder: props.placeholder || 'Search commands...',
+        },
+      },
+      {
+        type: 'command-palette-list',
+        props: {},
+        children: props.groups
+          ? props.groups.map((group) => ({
+              type: 'command-group',
+              props: { id: group.id, label: group.label },
+              children: group.commands.map((cmd, idx) => ({
+                type: 'command-item',
+                props: {
+                  ...cmd,
+                  selected: props.selectedIndex === idx,
+                },
+              })),
+            }))
+          : props.commands.map((cmd, idx) => ({
+              type: 'command-item',
+              props: {
+                ...cmd,
+                selected: props.selectedIndex === idx,
+              },
+            })),
+      },
+    ],
+  }
+}
+
+// ============================================================================
+// Test Suite: Basic Command Palette Rendering
+// ============================================================================
+
+describe('Command Palette Component', () => {
+  describe('basic rendering', () => {
+    it('renders command palette with commands', async () => {
+      const { renderCommandPalette } = await import('../../../renderers/command-palette')
+
+      const node = createCommandPaletteNode({
+        commands: [
+          { id: 'new-file', label: 'New File' },
+          { id: 'open-file', label: 'Open File' },
+          { id: 'save', label: 'Save' },
+        ],
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderCommandPalette(node, ctx)
+
+      expect(result).toContain('New File')
+      expect(result).toContain('Open File')
+      expect(result).toContain('Save')
+    })
+
+    it('renders search input', async () => {
+      const { renderCommandPalette } = await import('../../../renderers/command-palette')
+
+      const node = createCommandPaletteNode({
+        commands: [{ id: 'cmd', label: 'Command' }],
+        placeholder: 'Type to search...',
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderCommandPalette(node, ctx)
+
+      expect(result).toContain('Type to search...')
+    })
+
+    it('renders with search query', async () => {
+      const { renderCommandPalette } = await import('../../../renderers/command-palette')
+
+      const node = createCommandPaletteNode({
+        commands: [{ id: 'cmd', label: 'Command' }],
+        searchQuery: 'fil',
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderCommandPalette(node, ctx)
+
+      expect(result).toContain('fil')
+    })
+
+    it('renders command descriptions', async () => {
+      const { renderCommandPalette } = await import('../../../renderers/command-palette')
+
+      const node = createCommandPaletteNode({
+        commands: [
+          { id: 'new-file', label: 'New File', description: 'Create a new file' },
+          { id: 'open', label: 'Open', description: 'Open an existing file' },
+        ],
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderCommandPalette(node, ctx)
+
+      expect(result).toContain('Create a new file')
+      expect(result).toContain('Open an existing file')
+    })
+
+    it('renders command shortcuts', async () => {
+      const { renderCommandPalette } = await import('../../../renderers/command-palette')
+
+      const node = createCommandPaletteNode({
+        commands: [
+          { id: 'save', label: 'Save', shortcut: 'Ctrl+S' },
+          { id: 'quit', label: 'Quit', shortcut: 'Ctrl+Q' },
+        ],
+        showShortcuts: true,
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderCommandPalette(node, ctx)
+
+      expect(result).toContain('Ctrl+S')
+      expect(result).toContain('Ctrl+Q')
+    })
+
+    it('renders command icons', async () => {
+      const { renderCommandPalette } = await import('../../../renderers/command-palette')
+
+      const node = createCommandPaletteNode({
+        commands: [
+          { id: 'file', label: 'File', icon: '\u2630' },
+          { id: 'settings', label: 'Settings', icon: '\u2699' },
+        ],
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderCommandPalette(node, ctx)
+
+      expect(result).toContain('\u2630')
+      expect(result).toContain('\u2699')
+    })
+
+    it('returns empty for no commands', async () => {
+      const { renderCommandPalette } = await import('../../../renderers/command-palette')
+
+      const node = createCommandPaletteNode({ commands: [] })
+      const ctx = createContext('unicode')
+      const result = renderCommandPalette(node, ctx)
+
+      // Should still show input but no results
+      expect(result).toContain('Search')
+    })
+  })
+
+  // ============================================================================
+  // Search/Filter Tests
+  // ============================================================================
+
+  describe('search and filtering', () => {
+    it('filters commands by query', async () => {
+      const { filterCommands } = await import('../../../renderers/command-palette')
+
+      const commands: Command[] = [
+        { id: 'new-file', label: 'New File' },
+        { id: 'open-file', label: 'Open File' },
+        { id: 'save', label: 'Save' },
+      ]
+
+      const filtered = filterCommands(commands, 'file')
+
+      expect(filtered.length).toBe(2)
+      expect(filtered.map((c) => c.id)).toContain('new-file')
+      expect(filtered.map((c) => c.id)).toContain('open-file')
+    })
+
+    it('matches against label case-insensitively', async () => {
+      const { filterCommands } = await import('../../../renderers/command-palette')
+
+      const commands: Command[] = [
+        { id: 'new-file', label: 'New File' },
+        { id: 'open', label: 'Open' },
+      ]
+
+      const filtered = filterCommands(commands, 'NEW')
+
+      expect(filtered.length).toBe(1)
+      expect(filtered[0].id).toBe('new-file')
+    })
+
+    it('matches against keywords', async () => {
+      const { filterCommands } = await import('../../../renderers/command-palette')
+
+      const commands: Command[] = [
+        { id: 'new-file', label: 'New File', keywords: ['create', 'add'] },
+        { id: 'save', label: 'Save', keywords: ['store', 'write'] },
+      ]
+
+      const filtered = filterCommands(commands, 'create')
+
+      expect(filtered.length).toBe(1)
+      expect(filtered[0].id).toBe('new-file')
+    })
+
+    it('matches against description', async () => {
+      const { filterCommands } = await import('../../../renderers/command-palette')
+
+      const commands: Command[] = [
+        { id: 'export', label: 'Export', description: 'Export data to CSV' },
+        { id: 'import', label: 'Import', description: 'Import data from file' },
+      ]
+
+      const filtered = filterCommands(commands, 'csv')
+
+      expect(filtered.length).toBe(1)
+      expect(filtered[0].id).toBe('export')
+    })
+
+    it('supports fuzzy matching', async () => {
+      const { filterCommands } = await import('../../../renderers/command-palette')
+
+      const commands: Command[] = [
+        { id: 'new-file', label: 'New File' },
+        { id: 'navigate', label: 'Navigate' },
+      ]
+
+      // "nf" should fuzzy match "New File"
+      const filtered = filterCommands(commands, 'nf')
+
+      expect(filtered.map((c) => c.id)).toContain('new-file')
+    })
+
+    it('highlights matched characters in results', async () => {
+      const { renderCommandPalette } = await import('../../../renderers/command-palette')
+
+      const node = createCommandPaletteNode({
+        commands: [{ id: 'new-file', label: 'New File' }],
+        searchQuery: 'file',
+      })
+
+      const ctx = createContext('ansi')
+      const result = renderCommandPalette(node, ctx)
+
+      // Matched portion should be highlighted (different color/bold)
+      // "file" portion should have distinct styling
+      expect(result).toContain('\x1b[')
+    })
+
+    it('respects maxResults limit', async () => {
+      const { filterCommands } = await import('../../../renderers/command-palette')
+
+      const commands: Command[] = Array.from({ length: 20 }, (_, i) => ({
+        id: `cmd-${i}`,
+        label: `Command ${i}`,
+      }))
+
+      const filtered = filterCommands(commands, 'Command', { maxResults: 5 })
+
+      expect(filtered.length).toBe(5)
+    })
+
+    it('shows no results message when nothing matches', async () => {
+      const { renderCommandPalette } = await import('../../../renderers/command-palette')
+
+      const node = createCommandPaletteNode({
+        commands: [
+          { id: 'save', label: 'Save' },
+          { id: 'open', label: 'Open' },
+        ],
+        searchQuery: 'xyz123',
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderCommandPalette(node, ctx)
+
+      expect(result).toMatch(/no results|no commands|nothing found/i)
+    })
+  })
+
+  // ============================================================================
+  // Command Selection Tests
+  // ============================================================================
+
+  describe('command selection', () => {
+    it('highlights selected command', async () => {
+      const { renderCommandPalette } = await import('../../../renderers/command-palette')
+
+      const node = createCommandPaletteNode({
+        commands: [
+          { id: 'cmd1', label: 'Command 1' },
+          { id: 'cmd2', label: 'Command 2' },
+          { id: 'cmd3', label: 'Command 3' },
+        ],
+        selectedIndex: 1,
+      })
+
+      const ctx = createContext('ansi')
+      const result = renderCommandPalette(node, ctx)
+
+      // Selected command should have highlight styling
+      const cmd2Index = result.indexOf('Command 2')
+      const beforeCmd2 = result.slice(Math.max(0, cmd2Index - 25), cmd2Index)
+      expect(beforeCmd2).toMatch(/\x1b\[.*m/)
+    })
+
+    it('text tier shows selection indicator', async () => {
+      const { renderCommandPalette } = await import('../../../renderers/command-palette')
+
+      const node = createCommandPaletteNode({
+        commands: [
+          { id: 'cmd1', label: 'Command 1' },
+          { id: 'cmd2', label: 'Command 2' },
+        ],
+        selectedIndex: 0,
+      })
+
+      const ctx = createContext('text')
+      const result = renderCommandPalette(node, ctx)
+
+      // Text tier should use > or * or [ ] for selection
+      expect(result).toMatch(/[>*\[\]]\s*Command 1/)
+    })
+
+    it('selection uses inverse video in ansi tier', async () => {
+      const { renderCommandPalette } = await import('../../../renderers/command-palette')
+
+      const node = createCommandPaletteNode({
+        commands: [{ id: 'selected', label: 'Selected' }],
+        selectedIndex: 0,
+      })
+
+      const ctx = createContext('ansi')
+      const result = renderCommandPalette(node, ctx)
+
+      // Inverse video code is \x1b[7m
+      expect(result).toContain('\x1b[7m')
+    })
+  })
+
+  // ============================================================================
+  // Command Groups Tests
+  // ============================================================================
+
+  describe('command groups', () => {
+    it('renders grouped commands', async () => {
+      const { renderCommandPalette } = await import('../../../renderers/command-palette')
+
+      const node = createCommandPaletteNode({
+        commands: [],
+        groups: [
+          {
+            id: 'file',
+            label: 'File',
+            commands: [
+              { id: 'new', label: 'New' },
+              { id: 'open', label: 'Open' },
+            ],
+          },
+          {
+            id: 'edit',
+            label: 'Edit',
+            commands: [
+              { id: 'cut', label: 'Cut' },
+              { id: 'copy', label: 'Copy' },
+            ],
+          },
+        ],
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderCommandPalette(node, ctx)
+
+      // Group labels should be shown
+      expect(result).toContain('File')
+      expect(result).toContain('Edit')
+
+      // Commands should be shown
+      expect(result).toContain('New')
+      expect(result).toContain('Open')
+      expect(result).toContain('Cut')
+      expect(result).toContain('Copy')
+    })
+
+    it('groups are rendered with visual separation', async () => {
+      const { renderCommandPalette } = await import('../../../renderers/command-palette')
+
+      const node = createCommandPaletteNode({
+        commands: [],
+        groups: [
+          { id: 'g1', label: 'Group 1', commands: [{ id: 'c1', label: 'Cmd 1' }] },
+          { id: 'g2', label: 'Group 2', commands: [{ id: 'c2', label: 'Cmd 2' }] },
+        ],
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderCommandPalette(node, ctx)
+
+      // Groups should have separators or distinct sections
+      const lines = result.split('\n')
+      const group1Line = lines.findIndex((l) => l.includes('Group 1'))
+      const group2Line = lines.findIndex((l) => l.includes('Group 2'))
+
+      expect(group1Line).toBeGreaterThanOrEqual(0)
+      expect(group2Line).toBeGreaterThan(group1Line)
+    })
+
+    it('filters commands across groups', async () => {
+      const { filterGroupedCommands } = await import('../../../renderers/command-palette')
+
+      const groups: CommandGroup[] = [
+        {
+          id: 'file',
+          label: 'File',
+          commands: [
+            { id: 'new-file', label: 'New File' },
+            { id: 'open', label: 'Open' },
+          ],
+        },
+        {
+          id: 'edit',
+          label: 'Edit',
+          commands: [
+            { id: 'copy', label: 'Copy' },
+            { id: 'paste', label: 'Paste' },
+          ],
+        },
+      ]
+
+      const filtered = filterGroupedCommands(groups, 'new')
+
+      // Should only return groups with matching commands
+      expect(filtered.length).toBe(1)
+      expect(filtered[0].id).toBe('file')
+      expect(filtered[0].commands.length).toBe(1)
+    })
+
+    it('group label styling differs from command styling', async () => {
+      const { renderCommandPalette } = await import('../../../renderers/command-palette')
+
+      const node = createCommandPaletteNode({
+        commands: [],
+        groups: [
+          { id: 'g1', label: 'Group Label', commands: [{ id: 'c1', label: 'Command' }] },
+        ],
+      })
+
+      const ctx = createContext('ansi')
+      const result = renderCommandPalette(node, ctx)
+
+      // Group labels should be muted/different color
+      expect(result).toContain('\x1b[90m') // Muted color
+    })
+  })
+
+  // ============================================================================
+  // Disabled Commands Tests
+  // ============================================================================
+
+  describe('disabled commands', () => {
+    it('renders disabled commands with muted styling', async () => {
+      const { renderCommandPalette } = await import('../../../renderers/command-palette')
+
+      const node = createCommandPaletteNode({
+        commands: [
+          { id: 'enabled', label: 'Enabled' },
+          { id: 'disabled', label: 'Disabled', disabled: true },
+        ],
+      })
+
+      const ctx = createContext('ansi')
+      const result = renderCommandPalette(node, ctx)
+
+      expect(result).toContain('Disabled')
+      expect(result).toContain('\x1b[90m')
+    })
+
+    it('skips disabled commands during navigation', async () => {
+      const { createCommandPaletteState, handleCommandPaletteKey } = await import('../../../renderers/command-palette')
+
+      const state = createCommandPaletteState({
+        commands: [
+          { id: 'cmd1', label: 'Command 1' },
+          { id: 'disabled', label: 'Disabled', disabled: true },
+          { id: 'cmd3', label: 'Command 3' },
+        ],
+        selectedIndex: 0,
+      })
+
+      // Move down should skip disabled
+      const afterDown = handleCommandPaletteKey(state, 'down')
+      expect(afterDown.selectedIndex).toBe(2)
+    })
+
+    it('cannot execute disabled commands', async () => {
+      const { createCommandPaletteState, handleCommandPaletteKey } = await import('../../../renderers/command-palette')
+
+      const onSelect = vi.fn()
+
+      const state = createCommandPaletteState({
+        commands: [{ id: 'disabled', label: 'Disabled', disabled: true }],
+        selectedIndex: 0,
+        onSelect,
+      })
+
+      handleCommandPaletteKey(state, 'enter')
+
+      expect(onSelect).not.toHaveBeenCalled()
+    })
+  })
+
+  // ============================================================================
+  // Tier-Specific Rendering Tests
+  // ============================================================================
+
+  describe('tier-specific rendering', () => {
+    const sampleNode = createCommandPaletteNode({
+      commands: [
+        { id: 'new', label: 'New File', shortcut: 'Ctrl+N', description: 'Create new' },
+        { id: 'open', label: 'Open File', shortcut: 'Ctrl+O', description: 'Open existing' },
+      ],
+      searchQuery: '',
+      selectedIndex: 0,
+    })
+
+    it('text tier renders plain text', async () => {
+      const { renderCommandPalette } = await import('../../../renderers/command-palette')
+
+      const ctx = createContext('text')
+      const result = renderCommandPalette(sampleNode, ctx)
+
+      expect(result).toContain('New File')
+      expect(result).toContain('Open File')
+      expect(result).toContain('Ctrl+N')
+
+      // No ANSI codes
+      expect(result).not.toContain('\x1b[')
+    })
+
+    it('markdown tier uses formatting', async () => {
+      const { renderCommandPalette } = await import('../../../renderers/command-palette')
+
+      const ctx = createContext('markdown')
+      const result = renderCommandPalette(sampleNode, ctx)
+
+      // Shortcuts might be in code blocks
+      expect(result).toMatch(/`Ctrl\+[NO]`/)
+    })
+
+    it('ascii tier uses ASCII borders', async () => {
+      const { renderCommandPalette } = await import('../../../renderers/command-palette')
+
+      const ctx = createContext('ascii')
+      const result = renderCommandPalette(sampleNode, ctx)
+
+      expect(result).toMatch(/[|+\-=]/)
+    })
+
+    it('unicode tier uses box drawing', async () => {
+      const { renderCommandPalette } = await import('../../../renderers/command-palette')
+
+      const ctx = createContext('unicode')
+      const result = renderCommandPalette(sampleNode, ctx)
+
+      expect(result).toMatch(/[\u2500-\u257F]/)
+    })
+
+    it('ansi tier includes colors', async () => {
+      const { renderCommandPalette } = await import('../../../renderers/command-palette')
+
+      const ctx = createContext('ansi')
+      const result = renderCommandPalette(sampleNode, ctx)
+
+      expect(result).toContain('\x1b[')
+    })
+
+    it('interactive tier includes focus and cursor', async () => {
+      const { renderCommandPalette } = await import('../../../renderers/command-palette')
+
+      const ctx = createContext('interactive')
+      const result = renderCommandPalette(sampleNode, ctx)
+
+      // Should have cursor indicator in input
+      expect(result).toMatch(/\x1b\[7m|\x1b\[4m|[|_]/)
+    })
+  })
+
+  // ============================================================================
+  // Keyboard Navigation Tests (INTERACTIVE Tier)
+  // ============================================================================
+
+  describe('keyboard navigation (interactive tier)', () => {
+    it('provides keyboard bindings', async () => {
+      const { getCommandPaletteKeyBindings } = await import('../../../renderers/command-palette')
+
+      const bindings = getCommandPaletteKeyBindings()
+
+      expect(bindings.up).toBe('select-prev')
+      expect(bindings.down).toBe('select-next')
+      expect(bindings.k).toBe('select-prev')
+      expect(bindings.j).toBe('select-next')
+      expect(bindings.enter).toBe('execute')
+      expect(bindings.escape).toBe('close')
+      expect(bindings['ctrl+n']).toBe('select-next')
+      expect(bindings['ctrl+p']).toBe('select-prev')
+    })
+
+    it('up/down or j/k navigates command list', async () => {
+      const { createCommandPaletteState, handleCommandPaletteKey } = await import('../../../renderers/command-palette')
+
+      const state = createCommandPaletteState({
+        commands: [
+          { id: 'cmd1', label: 'Command 1' },
+          { id: 'cmd2', label: 'Command 2' },
+          { id: 'cmd3', label: 'Command 3' },
+        ],
+        selectedIndex: 0,
+      })
+
+      // Move down
+      const afterDown = handleCommandPaletteKey(state, 'down')
+      expect(afterDown.selectedIndex).toBe(1)
+
+      const afterJ = handleCommandPaletteKey(afterDown, 'j')
+      expect(afterJ.selectedIndex).toBe(2)
+
+      // Move up
+      const afterUp = handleCommandPaletteKey(afterJ, 'up')
+      expect(afterUp.selectedIndex).toBe(1)
+
+      const afterK = handleCommandPaletteKey(afterUp, 'k')
+      expect(afterK.selectedIndex).toBe(0)
+    })
+
+    it('enter executes selected command', async () => {
+      const { createCommandPaletteState, handleCommandPaletteKey } = await import('../../../renderers/command-palette')
+
+      const onSelect = vi.fn()
+
+      const state = createCommandPaletteState({
+        commands: [
+          { id: 'cmd1', label: 'Command 1' },
+          { id: 'cmd2', label: 'Command 2' },
+        ],
+        selectedIndex: 1,
+        onSelect,
+      })
+
+      handleCommandPaletteKey(state, 'enter')
+
+      expect(onSelect).toHaveBeenCalledWith('cmd2')
+    })
+
+    it('escape closes palette', async () => {
+      const { createCommandPaletteState, handleCommandPaletteKey } = await import('../../../renderers/command-palette')
+
+      const onClose = vi.fn()
+
+      const state = createCommandPaletteState({
+        commands: [{ id: 'cmd', label: 'Command' }],
+        onClose,
+      })
+
+      handleCommandPaletteKey(state, 'escape')
+
+      expect(onClose).toHaveBeenCalled()
+    })
+
+    it('ctrl+n/ctrl+p for Emacs-style navigation', async () => {
+      const { createCommandPaletteState, handleCommandPaletteKey } = await import('../../../renderers/command-palette')
+
+      const state = createCommandPaletteState({
+        commands: [
+          { id: 'cmd1', label: 'Command 1' },
+          { id: 'cmd2', label: 'Command 2' },
+        ],
+        selectedIndex: 0,
+      })
+
+      // Ctrl+N moves next
+      const afterCtrlN = handleCommandPaletteKey(state, 'ctrl+n')
+      expect(afterCtrlN.selectedIndex).toBe(1)
+
+      // Ctrl+P moves prev
+      const afterCtrlP = handleCommandPaletteKey(afterCtrlN, 'ctrl+p')
+      expect(afterCtrlP.selectedIndex).toBe(0)
+    })
+
+    it('wraps navigation at boundaries', async () => {
+      const { createCommandPaletteState, handleCommandPaletteKey } = await import('../../../renderers/command-palette')
+
+      const state = createCommandPaletteState({
+        commands: [
+          { id: 'cmd1', label: 'Command 1' },
+          { id: 'cmd2', label: 'Command 2' },
+        ],
+        selectedIndex: 1,
+        wrapNavigation: true,
+      })
+
+      // Move down from last wraps to first
+      const afterDown = handleCommandPaletteKey(state, 'down')
+      expect(afterDown.selectedIndex).toBe(0)
+
+      // Move up from first wraps to last
+      const afterUp = handleCommandPaletteKey(afterDown, 'up')
+      expect(afterUp.selectedIndex).toBe(1)
+    })
+
+    it('typing updates search query', async () => {
+      const { createCommandPaletteState, handleCommandPaletteKey } = await import('../../../renderers/command-palette')
+
+      const onQueryChange = vi.fn()
+
+      const state = createCommandPaletteState({
+        commands: [{ id: 'cmd', label: 'Command' }],
+        searchQuery: '',
+        onQueryChange,
+      })
+
+      // Type a character
+      handleCommandPaletteKey(state, 'f')
+
+      expect(onQueryChange).toHaveBeenCalledWith('f')
+    })
+
+    it('backspace removes last character from query', async () => {
+      const { createCommandPaletteState, handleCommandPaletteKey } = await import('../../../renderers/command-palette')
+
+      const onQueryChange = vi.fn()
+
+      const state = createCommandPaletteState({
+        commands: [{ id: 'cmd', label: 'Command' }],
+        searchQuery: 'file',
+        onQueryChange,
+      })
+
+      handleCommandPaletteKey(state, 'backspace')
+
+      expect(onQueryChange).toHaveBeenCalledWith('fil')
+    })
+
+    it('ctrl+u clears search query', async () => {
+      const { createCommandPaletteState, handleCommandPaletteKey } = await import('../../../renderers/command-palette')
+
+      const onQueryChange = vi.fn()
+
+      const state = createCommandPaletteState({
+        commands: [{ id: 'cmd', label: 'Command' }],
+        searchQuery: 'some query',
+        onQueryChange,
+      })
+
+      handleCommandPaletteKey(state, 'ctrl+u')
+
+      expect(onQueryChange).toHaveBeenCalledWith('')
+    })
+
+    it('home moves to first result', async () => {
+      const { createCommandPaletteState, handleCommandPaletteKey } = await import('../../../renderers/command-palette')
+
+      const state = createCommandPaletteState({
+        commands: [
+          { id: 'cmd1', label: 'Command 1' },
+          { id: 'cmd2', label: 'Command 2' },
+          { id: 'cmd3', label: 'Command 3' },
+        ],
+        selectedIndex: 2,
+      })
+
+      const afterHome = handleCommandPaletteKey(state, 'home')
+      expect(afterHome.selectedIndex).toBe(0)
+    })
+
+    it('end moves to last result', async () => {
+      const { createCommandPaletteState, handleCommandPaletteKey } = await import('../../../renderers/command-palette')
+
+      const state = createCommandPaletteState({
+        commands: [
+          { id: 'cmd1', label: 'Command 1' },
+          { id: 'cmd2', label: 'Command 2' },
+          { id: 'cmd3', label: 'Command 3' },
+        ],
+        selectedIndex: 0,
+      })
+
+      const afterEnd = handleCommandPaletteKey(state, 'end')
+      expect(afterEnd.selectedIndex).toBe(2)
+    })
+
+    it('tab cycles through results', async () => {
+      const { createCommandPaletteState, handleCommandPaletteKey } = await import('../../../renderers/command-palette')
+
+      const state = createCommandPaletteState({
+        commands: [
+          { id: 'cmd1', label: 'Command 1' },
+          { id: 'cmd2', label: 'Command 2' },
+        ],
+        selectedIndex: 0,
+      })
+
+      const afterTab = handleCommandPaletteKey(state, 'tab')
+      expect(afterTab.selectedIndex).toBe(1)
+    })
+
+    it('shift+tab cycles backwards', async () => {
+      const { createCommandPaletteState, handleCommandPaletteKey } = await import('../../../renderers/command-palette')
+
+      const state = createCommandPaletteState({
+        commands: [
+          { id: 'cmd1', label: 'Command 1' },
+          { id: 'cmd2', label: 'Command 2' },
+        ],
+        selectedIndex: 1,
+      })
+
+      const afterShiftTab = handleCommandPaletteKey(state, 'shift+tab')
+      expect(afterShiftTab.selectedIndex).toBe(0)
+    })
+  })
+
+  // ============================================================================
+  // Search Input Focus Tests
+  // ============================================================================
+
+  describe('search input', () => {
+    it('shows cursor in search input when focused', async () => {
+      const { renderCommandPalette } = await import('../../../renderers/command-palette')
+
+      const node = createCommandPaletteNode({
+        commands: [{ id: 'cmd', label: 'Command' }],
+        searchQuery: 'test',
+      })
+
+      const ctx = createContext('interactive')
+      const result = renderCommandPalette(node, ctx)
+
+      // Should show cursor indicator (inverse video or cursor char)
+      expect(result).toMatch(/\x1b\[7m|[|_\u2588]/)
+    })
+
+    it('renders placeholder when query is empty', async () => {
+      const { renderCommandPalette } = await import('../../../renderers/command-palette')
+
+      const node = createCommandPaletteNode({
+        commands: [{ id: 'cmd', label: 'Command' }],
+        searchQuery: '',
+        placeholder: 'Type a command...',
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderCommandPalette(node, ctx)
+
+      expect(result).toContain('Type a command...')
+    })
+
+    it('hides placeholder when query has text', async () => {
+      const { renderCommandPalette } = await import('../../../renderers/command-palette')
+
+      const node = createCommandPaletteNode({
+        commands: [{ id: 'cmd', label: 'Command' }],
+        searchQuery: 'fil',
+        placeholder: 'Type a command...',
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderCommandPalette(node, ctx)
+
+      expect(result).not.toContain('Type a command...')
+      expect(result).toContain('fil')
+    })
+  })
+
+  // ============================================================================
+  // Modal Appearance Tests
+  // ============================================================================
+
+  describe('modal appearance', () => {
+    it('renders with border', async () => {
+      const { renderCommandPalette } = await import('../../../renderers/command-palette')
+
+      const node = createCommandPaletteNode({
+        commands: [{ id: 'cmd', label: 'Command' }],
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderCommandPalette(node, ctx)
+
+      // Should have box border characters
+      expect(result).toMatch(/[\u250C\u2510\u2514\u2518\u2500\u2502]/)
+    })
+
+    it('respects context width', async () => {
+      const { renderCommandPalette } = await import('../../../renderers/command-palette')
+
+      const node = createCommandPaletteNode({
+        commands: [{ id: 'cmd', label: 'This is a very long command label' }],
+      })
+
+      const ctx = createContext('unicode')
+      ctx.width = 40
+
+      const result = renderCommandPalette(node, ctx)
+      const lines = result.split('\n')
+
+      for (const line of lines) {
+        const stripped = line.replace(/\x1b\[[\d;]*m/g, '')
+        expect(stripped.length).toBeLessThanOrEqual(40)
+      }
+    })
+
+    it('limits results to maxResults', async () => {
+      const { renderCommandPalette } = await import('../../../renderers/command-palette')
+
+      const commands = Array.from({ length: 20 }, (_, i) => ({
+        id: `cmd-${i}`,
+        label: `Command ${i}`,
+      }))
+
+      const node = createCommandPaletteNode({
+        commands,
+        maxResults: 5,
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderCommandPalette(node, ctx)
+
+      // Should only show 5 commands
+      const commandCount = (result.match(/Command \d+/g) || []).length
+      expect(commandCount).toBeLessThanOrEqual(5)
+    })
+  })
+
+  // ============================================================================
+  // All Tiers Rendering Tests
+  // ============================================================================
+
+  describe('renders across all tiers', () => {
+    const sampleNode = createCommandPaletteNode({
+      commands: [
+        { id: 'new', label: 'New', shortcut: 'Ctrl+N' },
+        { id: 'open', label: 'Open', shortcut: 'Ctrl+O' },
+      ],
+      selectedIndex: 0,
+    })
+
+    RENDER_TIERS.forEach((tier) => {
+      it(`renders on ${tier} tier`, async () => {
+        const { renderCommandPalette } = await import('../../../renderers/command-palette')
+
+        const ctx = createContext(tier)
+        const result = renderCommandPalette(sampleNode, ctx)
+
+        // Should produce output
+        expect(result.length).toBeGreaterThan(0)
+
+        // Should contain command labels
+        expect(result).toContain('New')
+        expect(result).toContain('Open')
+      })
+    })
+  })
+
+  // ============================================================================
+  // Recent Commands Tests
+  // ============================================================================
+
+  describe('recent commands', () => {
+    it('shows recently used commands first', async () => {
+      const { filterCommands } = await import('../../../renderers/command-palette')
+
+      const commands: Command[] = [
+        { id: 'cmd-a', label: 'Alpha' },
+        { id: 'cmd-b', label: 'Beta' },
+        { id: 'cmd-c', label: 'Charlie' },
+      ]
+
+      const recentIds = ['cmd-c', 'cmd-a']
+
+      const filtered = filterCommands(commands, '', { recentIds })
+
+      // Recent commands should be first
+      expect(filtered[0].id).toBe('cmd-c')
+      expect(filtered[1].id).toBe('cmd-a')
+    })
+
+    it('recent commands are boosted in search results', async () => {
+      const { filterCommands } = await import('../../../renderers/command-palette')
+
+      const commands: Command[] = [
+        { id: 'file-new', label: 'New File' },
+        { id: 'file-open', label: 'Open File' },
+        { id: 'edit-file', label: 'Edit File' },
+      ]
+
+      const recentIds = ['edit-file']
+
+      // All match "file", but recent should be boosted
+      const filtered = filterCommands(commands, 'file', { recentIds })
+
+      expect(filtered[0].id).toBe('edit-file')
+    })
+  })
+})