@mdxui/terminal 2.0.0

package/src/__tests__/components/navigation/sidebar.test.ts

@@ -0,0 +1,1018 @@
+/**
+ * @mdxui/terminal Sidebar Navigation Component Tests
+ *
+ * TDD RED Phase: Tests for the Sidebar navigation component.
+ * All tests should FAIL initially because the Sidebar renderers don't exist yet.
+ *
+ * The Sidebar component provides hierarchical navigation with:
+ * - Sections (grouped items)
+ * - Items (clickable navigation entries)
+ * - Collapse/expand state
+ * - Active state indication
+ * - Keyboard navigation (INTERACTIVE tier)
+ *
+ * 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',
+  }
+}
+
+// ============================================================================
+// Sidebar Node Types
+// ============================================================================
+
+interface SidebarItem {
+  id: string
+  label: string
+  icon?: string
+  path?: string
+  badge?: string | number
+  disabled?: boolean
+}
+
+interface SidebarSection {
+  id: string
+  title: string
+  collapsible?: boolean
+  collapsed?: boolean
+  items: SidebarItem[]
+}
+
+interface SidebarProps {
+  sections: SidebarSection[]
+  activeId?: string
+  collapsedIds?: string[]
+  onNavigate?: (id: string, path?: string) => void
+  onToggleCollapse?: (sectionId: string) => void
+  width?: number
+}
+
+function createSidebarNode(props: SidebarProps): UINode {
+  return {
+    type: 'sidebar',
+    props,
+    children: props.sections.map((section) => ({
+      type: 'sidebar-section',
+      props: {
+        id: section.id,
+        title: section.title,
+        collapsible: section.collapsible,
+        collapsed: section.collapsed,
+      },
+      children: section.items.map((item) => ({
+        type: 'sidebar-item',
+        props: {
+          id: item.id,
+          label: item.label,
+          icon: item.icon,
+          path: item.path,
+          badge: item.badge,
+          disabled: item.disabled,
+          active: props.activeId === item.id,
+        },
+      })),
+    })),
+  }
+}
+
+// ============================================================================
+// Test Suite: Basic Sidebar Rendering
+// ============================================================================
+
+describe('Sidebar Component', () => {
+  describe('basic rendering', () => {
+    it('renders sidebar with sections and items', async () => {
+      const { renderSidebar } = await import('../../../renderers/sidebar')
+
+      const node = createSidebarNode({
+        sections: [
+          {
+            id: 'main',
+            title: 'Main Menu',
+            items: [
+              { id: 'dashboard', label: 'Dashboard', icon: '\u2302' },
+              { id: 'settings', label: 'Settings', icon: '\u2699' },
+            ],
+          },
+        ],
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderSidebar(node, ctx)
+
+      expect(result).toContain('Main Menu')
+      expect(result).toContain('Dashboard')
+      expect(result).toContain('Settings')
+    })
+
+    it('renders multiple sections', async () => {
+      const { renderSidebar } = await import('../../../renderers/sidebar')
+
+      const node = createSidebarNode({
+        sections: [
+          {
+            id: 'main',
+            title: 'Main',
+            items: [{ id: 'home', label: 'Home' }],
+          },
+          {
+            id: 'admin',
+            title: 'Administration',
+            items: [{ id: 'users', label: 'Users' }],
+          },
+        ],
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderSidebar(node, ctx)
+
+      expect(result).toContain('Main')
+      expect(result).toContain('Administration')
+      expect(result).toContain('Home')
+      expect(result).toContain('Users')
+    })
+
+    it('renders sidebar with icons', async () => {
+      const { renderSidebar } = await import('../../../renderers/sidebar')
+
+      const node = createSidebarNode({
+        sections: [
+          {
+            id: 'nav',
+            title: 'Navigation',
+            items: [
+              { id: 'home', label: 'Home', icon: '\u2302' },
+              { id: 'search', label: 'Search', icon: '\u2315' },
+            ],
+          },
+        ],
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderSidebar(node, ctx)
+
+      expect(result).toContain('\u2302')
+      expect(result).toContain('\u2315')
+    })
+
+    it('renders sidebar with badges', async () => {
+      const { renderSidebar } = await import('../../../renderers/sidebar')
+
+      const node = createSidebarNode({
+        sections: [
+          {
+            id: 'main',
+            title: 'Main',
+            items: [
+              { id: 'inbox', label: 'Inbox', badge: 5 },
+              { id: 'drafts', label: 'Drafts', badge: 'NEW' },
+            ],
+          },
+        ],
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderSidebar(node, ctx)
+
+      expect(result).toContain('5')
+      expect(result).toContain('NEW')
+    })
+
+    it('returns empty string for empty sections', async () => {
+      const { renderSidebar } = await import('../../../renderers/sidebar')
+
+      const node = createSidebarNode({ sections: [] })
+      const ctx = createContext('unicode')
+      const result = renderSidebar(node, ctx)
+
+      expect(result).toBe('')
+    })
+  })
+
+  // ============================================================================
+  // Active State Tests
+  // ============================================================================
+
+  describe('active state', () => {
+    it('highlights active item', async () => {
+      const { renderSidebar } = await import('../../../renderers/sidebar')
+
+      const node = createSidebarNode({
+        sections: [
+          {
+            id: 'main',
+            title: 'Main',
+            items: [
+              { id: 'home', label: 'Home' },
+              { id: 'about', label: 'About' },
+            ],
+          },
+        ],
+        activeId: 'about',
+      })
+
+      const ctx = createContext('ansi')
+      const result = renderSidebar(node, ctx)
+
+      // Active item should have special styling (ANSI codes)
+      expect(result).toContain('\x1b[')
+      expect(result).toContain('About')
+
+      // Active item should have different styling than inactive
+      // Could be bold, inverted, or colored
+      const aboutIndex = result.indexOf('About')
+      const homeIndex = result.indexOf('Home')
+
+      // The section of string around About should have more ANSI codes
+      const aboutSection = result.slice(Math.max(0, aboutIndex - 20), aboutIndex + 10)
+      expect(aboutSection).toMatch(/\x1b\[.*m/)
+    })
+
+    it('shows active indicator prefix in text tier', async () => {
+      const { renderSidebar } = await import('../../../renderers/sidebar')
+
+      const node = createSidebarNode({
+        sections: [
+          {
+            id: 'main',
+            title: 'Main',
+            items: [
+              { id: 'home', label: 'Home' },
+              { id: 'about', label: 'About' },
+            ],
+          },
+        ],
+        activeId: 'about',
+      })
+
+      const ctx = createContext('text')
+      const result = renderSidebar(node, ctx)
+
+      // Active item should have a visual indicator like > or *
+      expect(result).toMatch(/[>*\u25B6\u2192]\s*About/)
+    })
+
+    it('shows active indicator with unicode arrow', async () => {
+      const { renderSidebar } = await import('../../../renderers/sidebar')
+
+      const node = createSidebarNode({
+        sections: [
+          {
+            id: 'main',
+            title: 'Main',
+            items: [{ id: 'active-item', label: 'Active Item' }],
+          },
+        ],
+        activeId: 'active-item',
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderSidebar(node, ctx)
+
+      // Unicode tier should use proper arrow characters
+      expect(result).toMatch(/[\u25B6\u2192\u25CF\u25BA]\s*Active Item/)
+    })
+
+    it('only one item can be active at a time', async () => {
+      const { renderSidebar } = await import('../../../renderers/sidebar')
+
+      const node = createSidebarNode({
+        sections: [
+          {
+            id: 'main',
+            title: 'Main',
+            items: [
+              { id: 'a', label: 'Item A' },
+              { id: 'b', label: 'Item B' },
+              { id: 'c', label: 'Item C' },
+            ],
+          },
+        ],
+        activeId: 'b',
+      })
+
+      const ctx = createContext('text')
+      const result = renderSidebar(node, ctx)
+
+      // Count active indicators (should be exactly 1)
+      const lines = result.split('\n')
+      const activeLines = lines.filter((line) => line.match(/[>*\u25B6\u2192]\s*Item/))
+      expect(activeLines.length).toBe(1)
+      expect(activeLines[0]).toContain('Item B')
+    })
+  })
+
+  // ============================================================================
+  // Collapse/Expand State Tests
+  // ============================================================================
+
+  describe('collapse/expand state', () => {
+    it('shows collapse indicator for collapsible sections', async () => {
+      const { renderSidebar } = await import('../../../renderers/sidebar')
+
+      const node = createSidebarNode({
+        sections: [
+          {
+            id: 'collapsible',
+            title: 'Collapsible Section',
+            collapsible: true,
+            collapsed: false,
+            items: [{ id: 'item', label: 'Item' }],
+          },
+        ],
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderSidebar(node, ctx)
+
+      // Should show expanded indicator (down arrow or minus)
+      expect(result).toMatch(/[\u25BC\u25BD\u25BE\u2212\u2796-]\s*Collapsible Section/)
+    })
+
+    it('shows expand indicator for collapsed sections', async () => {
+      const { renderSidebar } = await import('../../../renderers/sidebar')
+
+      const node = createSidebarNode({
+        sections: [
+          {
+            id: 'collapsed',
+            title: 'Collapsed Section',
+            collapsible: true,
+            collapsed: true,
+            items: [{ id: 'hidden', label: 'Hidden Item' }],
+          },
+        ],
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderSidebar(node, ctx)
+
+      // Should show collapsed indicator (right arrow or plus)
+      expect(result).toMatch(/[\u25B6\u25B7\u25B8\u002B\u2795+]\s*Collapsed Section/)
+    })
+
+    it('hides items in collapsed sections', async () => {
+      const { renderSidebar } = await import('../../../renderers/sidebar')
+
+      const node = createSidebarNode({
+        sections: [
+          {
+            id: 'collapsed',
+            title: 'Collapsed Section',
+            collapsible: true,
+            collapsed: true,
+            items: [
+              { id: 'hidden1', label: 'Hidden Item 1' },
+              { id: 'hidden2', label: 'Hidden Item 2' },
+            ],
+          },
+        ],
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderSidebar(node, ctx)
+
+      // Section title should be visible
+      expect(result).toContain('Collapsed Section')
+
+      // Items should be hidden
+      expect(result).not.toContain('Hidden Item 1')
+      expect(result).not.toContain('Hidden Item 2')
+    })
+
+    it('shows items in expanded sections', async () => {
+      const { renderSidebar } = await import('../../../renderers/sidebar')
+
+      const node = createSidebarNode({
+        sections: [
+          {
+            id: 'expanded',
+            title: 'Expanded Section',
+            collapsible: true,
+            collapsed: false,
+            items: [
+              { id: 'visible1', label: 'Visible Item 1' },
+              { id: 'visible2', label: 'Visible Item 2' },
+            ],
+          },
+        ],
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderSidebar(node, ctx)
+
+      // All items should be visible
+      expect(result).toContain('Expanded Section')
+      expect(result).toContain('Visible Item 1')
+      expect(result).toContain('Visible Item 2')
+    })
+
+    it('non-collapsible sections have no indicator', async () => {
+      const { renderSidebar } = await import('../../../renderers/sidebar')
+
+      const node = createSidebarNode({
+        sections: [
+          {
+            id: 'fixed',
+            title: 'Fixed Section',
+            collapsible: false,
+            items: [{ id: 'item', label: 'Item' }],
+          },
+        ],
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderSidebar(node, ctx)
+
+      // Should not have collapse/expand indicators before title
+      expect(result).not.toMatch(/[\u25BC\u25B6\u25BD\u25B7\u2212\u002B+-]\s*Fixed Section/)
+      expect(result).toContain('Fixed Section')
+    })
+
+    it('ASCII tier uses simple +/- for collapse indicators', async () => {
+      const { renderSidebar } = await import('../../../renderers/sidebar')
+
+      const node = createSidebarNode({
+        sections: [
+          {
+            id: 'collapsed',
+            title: 'Collapsed',
+            collapsible: true,
+            collapsed: true,
+            items: [{ id: 'item', label: 'Item' }],
+          },
+          {
+            id: 'expanded',
+            title: 'Expanded',
+            collapsible: true,
+            collapsed: false,
+            items: [{ id: 'item2', label: 'Item 2' }],
+          },
+        ],
+      })
+
+      const ctx = createContext('ascii')
+      const result = renderSidebar(node, ctx)
+
+      // ASCII uses + for collapsed, - for expanded
+      expect(result).toMatch(/[+]\s*Collapsed/)
+      expect(result).toMatch(/[-]\s*Expanded/)
+    })
+  })
+
+  // ============================================================================
+  // Disabled State Tests
+  // ============================================================================
+
+  describe('disabled items', () => {
+    it('renders disabled items with muted styling', async () => {
+      const { renderSidebar } = await import('../../../renderers/sidebar')
+
+      const node = createSidebarNode({
+        sections: [
+          {
+            id: 'main',
+            title: 'Main',
+            items: [
+              { id: 'enabled', label: 'Enabled' },
+              { id: 'disabled', label: 'Disabled', disabled: true },
+            ],
+          },
+        ],
+      })
+
+      const ctx = createContext('ansi')
+      const result = renderSidebar(node, ctx)
+
+      // Disabled should be present but with muted styling
+      expect(result).toContain('Disabled')
+      // Should use muted color code (90m for bright black/gray)
+      expect(result).toContain('\x1b[90m')
+    })
+
+    it('text tier shows disabled with parentheses or strikethrough notation', async () => {
+      const { renderSidebar } = await import('../../../renderers/sidebar')
+
+      const node = createSidebarNode({
+        sections: [
+          {
+            id: 'main',
+            title: 'Main',
+            items: [{ id: 'disabled', label: 'Disabled Item', disabled: true }],
+          },
+        ],
+      })
+
+      const ctx = createContext('text')
+      const result = renderSidebar(node, ctx)
+
+      // Text tier should indicate disabled status somehow
+      // Common approaches: (disabled), [disabled], or ~Disabled Item~
+      expect(result).toMatch(/\(disabled\)|\[disabled\]|~Disabled Item~|Disabled Item\s*\*disabled\*/)
+    })
+  })
+
+  // ============================================================================
+  // Width and Layout Tests
+  // ============================================================================
+
+  describe('width and layout', () => {
+    it('respects specified width', async () => {
+      const { renderSidebar } = await import('../../../renderers/sidebar')
+
+      const node = createSidebarNode({
+        sections: [
+          {
+            id: 'main',
+            title: 'Main',
+            items: [{ id: 'item', label: 'Item with a very long label that should be truncated' }],
+          },
+        ],
+        width: 20,
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderSidebar(node, ctx)
+
+      // Each line should not exceed width
+      const lines = result.split('\n')
+      for (const line of lines) {
+        // Account for ANSI codes in measurement
+        const stripped = line.replace(/\x1b\[[\d;]*m/g, '')
+        expect(stripped.length).toBeLessThanOrEqual(20)
+      }
+    })
+
+    it('truncates long labels with ellipsis', async () => {
+      const { renderSidebar } = await import('../../../renderers/sidebar')
+
+      const node = createSidebarNode({
+        sections: [
+          {
+            id: 'main',
+            title: 'Main',
+            items: [{ id: 'item', label: 'Very Long Item Label That Exceeds Width' }],
+          },
+        ],
+        width: 15,
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderSidebar(node, ctx)
+
+      // Should contain ellipsis character
+      expect(result).toMatch(/\u2026|\.\.\./)
+    })
+
+    it('indents items under sections', async () => {
+      const { renderSidebar } = await import('../../../renderers/sidebar')
+
+      const node = createSidebarNode({
+        sections: [
+          {
+            id: 'main',
+            title: 'Main Section',
+            items: [{ id: 'item', label: 'Child Item' }],
+          },
+        ],
+      })
+
+      const ctx = createContext('text')
+      const result = renderSidebar(node, ctx)
+
+      const lines = result.split('\n')
+      const sectionLine = lines.find((l) => l.includes('Main Section'))
+      const itemLine = lines.find((l) => l.includes('Child Item'))
+
+      if (sectionLine && itemLine) {
+        // Item should be indented relative to section
+        const sectionIndent = sectionLine.search(/\S/)
+        const itemIndent = itemLine.search(/\S/)
+        expect(itemIndent).toBeGreaterThan(sectionIndent)
+      }
+    })
+  })
+
+  // ============================================================================
+  // Tier-Specific Rendering Tests
+  // ============================================================================
+
+  describe('tier-specific rendering', () => {
+    const sampleNode = createSidebarNode({
+      sections: [
+        {
+          id: 'main',
+          title: 'Navigation',
+          collapsible: true,
+          collapsed: false,
+          items: [
+            { id: 'home', label: 'Home', icon: '\u2302' },
+            { id: 'settings', label: 'Settings', icon: '\u2699' },
+          ],
+        },
+      ],
+      activeId: 'home',
+    })
+
+    it('text tier renders plain text without special characters', async () => {
+      const { renderSidebar } = await import('../../../renderers/sidebar')
+
+      const ctx = createContext('text')
+      const result = renderSidebar(sampleNode, ctx)
+
+      expect(result).toContain('Navigation')
+      expect(result).toContain('Home')
+      expect(result).toContain('Settings')
+
+      // Should not contain ANSI codes
+      expect(result).not.toContain('\x1b[')
+    })
+
+    it('markdown tier uses markdown formatting', async () => {
+      const { renderSidebar } = await import('../../../renderers/sidebar')
+
+      const ctx = createContext('markdown')
+      const result = renderSidebar(sampleNode, ctx)
+
+      // Should use markdown formatting
+      // Headings, bold, or list markers
+      expect(result).toMatch(/[#*-]|\*\*|\[/)
+    })
+
+    it('ascii tier uses ASCII box characters', async () => {
+      const { renderSidebar } = await import('../../../renderers/sidebar')
+
+      const ctx = createContext('ascii')
+      const result = renderSidebar(sampleNode, ctx)
+
+      // May use ASCII art borders or simple dashes/pipes
+      expect(result).toMatch(/[|+\-=]/)
+    })
+
+    it('unicode tier uses box drawing characters', async () => {
+      const { renderSidebar } = await import('../../../renderers/sidebar')
+
+      const ctx = createContext('unicode')
+      const result = renderSidebar(sampleNode, ctx)
+
+      // Unicode box drawing characters for borders/separators
+      expect(result).toMatch(/[\u2500-\u257F\u25A0-\u25FF]/)
+    })
+
+    it('ansi tier includes color codes', async () => {
+      const { renderSidebar } = await import('../../../renderers/sidebar')
+
+      const ctx = createContext('ansi')
+      const result = renderSidebar(sampleNode, ctx)
+
+      // Should contain ANSI escape sequences
+      expect(result).toContain('\x1b[')
+      expect(result).toContain('m')
+    })
+
+    it('interactive tier includes focus indicators', async () => {
+      const { renderSidebar } = await import('../../../renderers/sidebar')
+
+      const ctx = createContext('interactive')
+      const result = renderSidebar(sampleNode, ctx)
+
+      // Interactive tier should have cursor/focus indicators
+      expect(result).toContain('\x1b[')
+      // May include inverse video for focused item
+      expect(result).toMatch(/\x1b\[7m|\x1b\[4m/)
+    })
+  })
+
+  // ============================================================================
+  // Keyboard Navigation Tests (INTERACTIVE Tier)
+  // ============================================================================
+
+  describe('keyboard navigation (interactive tier)', () => {
+    it('provides keyboard bindings for navigation', async () => {
+      const { getSidebarKeyBindings } = await import('../../../renderers/sidebar')
+
+      const bindings = getSidebarKeyBindings()
+
+      expect(bindings.j).toBe('move-down')
+      expect(bindings.k).toBe('move-up')
+      expect(bindings.enter).toBe('select')
+      expect(bindings.space).toBe('toggle-collapse')
+      expect(bindings.h).toBe('collapse')
+      expect(bindings.l).toBe('expand')
+    })
+
+    it('j/k moves focus between items', async () => {
+      const { createSidebarState, handleSidebarKey } = await import('../../../renderers/sidebar')
+
+      const state = createSidebarState({
+        sections: [
+          {
+            id: 'main',
+            title: 'Main',
+            items: [
+              { id: 'item1', label: 'Item 1' },
+              { id: 'item2', label: 'Item 2' },
+              { id: 'item3', label: 'Item 3' },
+            ],
+          },
+        ],
+        focusedId: 'item1',
+      })
+
+      // Move down with j
+      const afterJ = handleSidebarKey(state, 'j')
+      expect(afterJ.focusedId).toBe('item2')
+
+      // Move down again
+      const afterJ2 = handleSidebarKey(afterJ, 'j')
+      expect(afterJ2.focusedId).toBe('item3')
+
+      // Move up with k
+      const afterK = handleSidebarKey(afterJ2, 'k')
+      expect(afterK.focusedId).toBe('item2')
+    })
+
+    it('enter selects the focused item', async () => {
+      const { createSidebarState, handleSidebarKey } = await import('../../../renderers/sidebar')
+
+      const onNavigate = vi.fn()
+
+      const state = createSidebarState({
+        sections: [
+          {
+            id: 'main',
+            title: 'Main',
+            items: [
+              { id: 'item1', label: 'Item 1', path: '/item1' },
+              { id: 'item2', label: 'Item 2', path: '/item2' },
+            ],
+          },
+        ],
+        focusedId: 'item2',
+        onNavigate,
+      })
+
+      handleSidebarKey(state, 'enter')
+
+      expect(onNavigate).toHaveBeenCalledWith('item2', '/item2')
+    })
+
+    it('space toggles collapse on section', async () => {
+      const { createSidebarState, handleSidebarKey } = await import('../../../renderers/sidebar')
+
+      const onToggleCollapse = vi.fn()
+
+      const state = createSidebarState({
+        sections: [
+          {
+            id: 'collapsible',
+            title: 'Collapsible',
+            collapsible: true,
+            collapsed: false,
+            items: [{ id: 'item', label: 'Item' }],
+          },
+        ],
+        focusedId: 'collapsible', // Focused on section header
+        onToggleCollapse,
+      })
+
+      handleSidebarKey(state, 'space')
+
+      expect(onToggleCollapse).toHaveBeenCalledWith('collapsible')
+    })
+
+    it('h collapses a section', async () => {
+      const { createSidebarState, handleSidebarKey } = await import('../../../renderers/sidebar')
+
+      const onToggleCollapse = vi.fn()
+
+      const state = createSidebarState({
+        sections: [
+          {
+            id: 'section',
+            title: 'Section',
+            collapsible: true,
+            collapsed: false,
+            items: [{ id: 'item', label: 'Item' }],
+          },
+        ],
+        focusedId: 'item', // Focused on item in section
+        onToggleCollapse,
+      })
+
+      // h should collapse parent section
+      handleSidebarKey(state, 'h')
+
+      expect(onToggleCollapse).toHaveBeenCalledWith('section')
+    })
+
+    it('l expands a collapsed section', async () => {
+      const { createSidebarState, handleSidebarKey } = await import('../../../renderers/sidebar')
+
+      const onToggleCollapse = vi.fn()
+
+      const state = createSidebarState({
+        sections: [
+          {
+            id: 'section',
+            title: 'Section',
+            collapsible: true,
+            collapsed: true,
+            items: [{ id: 'item', label: 'Item' }],
+          },
+        ],
+        focusedId: 'section', // Focused on collapsed section
+        onToggleCollapse,
+      })
+
+      // l should expand section
+      handleSidebarKey(state, 'l')
+
+      expect(onToggleCollapse).toHaveBeenCalledWith('section')
+    })
+
+    it('skips disabled items during navigation', async () => {
+      const { createSidebarState, handleSidebarKey } = await import('../../../renderers/sidebar')
+
+      const state = createSidebarState({
+        sections: [
+          {
+            id: 'main',
+            title: 'Main',
+            items: [
+              { id: 'item1', label: 'Item 1' },
+              { id: 'item2', label: 'Item 2', disabled: true },
+              { id: 'item3', label: 'Item 3' },
+            ],
+          },
+        ],
+        focusedId: 'item1',
+      })
+
+      // Move down should skip disabled item2
+      const afterJ = handleSidebarKey(state, 'j')
+      expect(afterJ.focusedId).toBe('item3')
+    })
+
+    it('wraps focus at boundaries when wrap enabled', async () => {
+      const { createSidebarState, handleSidebarKey } = await import('../../../renderers/sidebar')
+
+      const state = createSidebarState({
+        sections: [
+          {
+            id: 'main',
+            title: 'Main',
+            items: [
+              { id: 'item1', label: 'Item 1' },
+              { id: 'item2', label: 'Item 2' },
+            ],
+          },
+        ],
+        focusedId: 'item2',
+        wrapNavigation: true,
+      })
+
+      // Move down from last should wrap to first
+      const afterJ = handleSidebarKey(state, 'j')
+      expect(afterJ.focusedId).toBe('item1')
+    })
+
+    it('stops at boundaries when wrap disabled', async () => {
+      const { createSidebarState, handleSidebarKey } = await import('../../../renderers/sidebar')
+
+      const state = createSidebarState({
+        sections: [
+          {
+            id: 'main',
+            title: 'Main',
+            items: [
+              { id: 'item1', label: 'Item 1' },
+              { id: 'item2', label: 'Item 2' },
+            ],
+          },
+        ],
+        focusedId: 'item2',
+        wrapNavigation: false,
+      })
+
+      // Move down from last should stay at last
+      const afterJ = handleSidebarKey(state, 'j')
+      expect(afterJ.focusedId).toBe('item2')
+    })
+
+    it('g+g moves to first item', async () => {
+      const { createSidebarState, handleSidebarKey } = await import('../../../renderers/sidebar')
+
+      const state = createSidebarState({
+        sections: [
+          {
+            id: 'main',
+            title: 'Main',
+            items: [
+              { id: 'item1', label: 'Item 1' },
+              { id: 'item2', label: 'Item 2' },
+              { id: 'item3', label: 'Item 3' },
+            ],
+          },
+        ],
+        focusedId: 'item3',
+      })
+
+      // gg sequence (vim-style go to top)
+      const afterG = handleSidebarKey(state, 'g')
+      const afterGG = handleSidebarKey(afterG, 'g')
+      expect(afterGG.focusedId).toBe('item1')
+    })
+
+    it('G moves to last item', async () => {
+      const { createSidebarState, handleSidebarKey } = await import('../../../renderers/sidebar')
+
+      const state = createSidebarState({
+        sections: [
+          {
+            id: 'main',
+            title: 'Main',
+            items: [
+              { id: 'item1', label: 'Item 1' },
+              { id: 'item2', label: 'Item 2' },
+              { id: 'item3', label: 'Item 3' },
+            ],
+          },
+        ],
+        focusedId: 'item1',
+      })
+
+      // G (shift+g) moves to last
+      const afterG = handleSidebarKey(state, 'G')
+      expect(afterG.focusedId).toBe('item3')
+    })
+  })
+
+  // ============================================================================
+  // All Tiers Rendering Tests
+  // ============================================================================
+
+  describe('renders across all tiers', () => {
+    const sampleNode = createSidebarNode({
+      sections: [
+        {
+          id: 'nav',
+          title: 'Navigation',
+          items: [
+            { id: 'home', label: 'Home' },
+            { id: 'about', label: 'About' },
+          ],
+        },
+      ],
+      activeId: 'home',
+    })
+
+    RENDER_TIERS.forEach((tier) => {
+      it(`renders on ${tier} tier`, async () => {
+        const { renderSidebar } = await import('../../../renderers/sidebar')
+
+        const ctx = createContext(tier)
+        const result = renderSidebar(sampleNode, ctx)
+
+        // Should produce some output
+        expect(result.length).toBeGreaterThan(0)
+
+        // Should contain content
+        expect(result).toContain('Navigation')
+        expect(result).toContain('Home')
+        expect(result).toContain('About')
+      })
+    })
+  })
+})