src — ui

Module: src-ui Cohesion: 0.80 Members: 0

src — ui

The src/ui module is the heart of the Code Buddy command-line interface, responsible for rendering the interactive chat experience and managing all user interactions within the terminal. It leverages the ink React framework to build a rich, dynamic, and responsive user interface.

Purpose

The primary goals of the src/ui module are:

Core UI Architecture

The UI is built as a single-page application using ink, which allows React components to render to the terminal. The main entry point is App.tsx, which then orchestrates the ChatInterface.tsx and other components. 

graph TD
    A[App.tsx] --> B(ChatInterface.tsx)
    B --> C(ChatHistory.tsx)
    B --> D(ChatInput.tsx)
    B --> E(ConfirmationDialog.tsx)
    B --> F(CommandPalette.tsx)
    B --> G(CommandSuggestions.tsx)
    B --> H(ApiKeyInput.tsx)
    B -- uses --> I(Agent)
    B -- listens to --> J(ConfirmationService)
    B -- uses --> K(useInputHandler)
    C -- renders --> L(MemoizedChatEntry)
    L -- renders --> M(DiffRenderer)
    L -- renders --> N(MarkdownRenderer)
    L -- renders --> O(StructuredContent)
    O -- uses --> P(RenderManager)

App.tsx - The Ink Root Component

src/ui/app.tsx serves as the root component for the Ink application. It initializes the core state and handles global input events.

Key Responsibilities:

ChatInterface.tsx - The Chat Orchestrator

src/ui/components/ChatInterface.tsx is the central component that orchestrates the entire chat experience. It manages the conversation flow, integrates with the agent, and conditionally renders various UI elements.

Key Responsibilities:

Key UI Components

The src/ui/components directory contains a rich set of reusable Ink React components that build the interactive experience.

ChatHistory.tsx

This component is responsible for rendering the entire conversation history. It's designed for performance and clarity, especially with streaming content and structured data.

ChatInput.tsx

Renders the interactive input line where the user types commands.

CommandSuggestions.tsx

Provides real-time autocomplete suggestions as the user types slash commands.

CommandPalette.tsx

A more advanced, fuzzy-searchable command palette, similar to VS Code's command palette.

AccessibleOutput.tsx

A collection of components designed to improve the accessibility and semantic structure of terminal output.

ApiKeyInput.tsx

A dedicated component for securely capturing and saving the user's API key.

CLI Enhancements (cli-enhancements.ts)

This file contains a suite of utility classes that provide various CLI-related features and configurations, often exposed as flags or commands. While these classes define the logic and state for these enhancements, their rendering in the UI is handled by other components (e.g., StatusBar, ChatHistory, CommandPalette).

Clipboard Management (clipboard-manager.ts)

This module provides cross-platform clipboard functionality, including history and content type detection.

Responsive Display (compact-mode.ts)

This module handles dynamic adjustments to the UI layout and content formatting based on the terminal's width.

Integration Points & Dependencies

The src/ui module is highly integrated with other parts of the Code Buddy codebase:

Contributing to the UI

When contributing to the src/ui module:

  1. Understand Ink/React: Familiarity with React hooks, state management, and ink's specific components (Box, Text, useInput, Static) is crucial.
  2. Performance: Be mindful of re-renders, especially in ChatHistory.tsx. Leverage React.memo and useMemo/useCallback where appropriate, and understand how Static works for long-running output.
  3. Accessibility: Always consider how your UI changes will impact screen reader users. Use AccessibleOutput.tsx components where possible and ensure information is not conveyed by color alone. Use announceToScreenReader for important events.
  4. Theming: Use useTheme() to access colors and avatars, ensuring your components adapt to different themes.
  5. Responsiveness: Consider how your components will render in compact and minimal modes. Use getCompactModeManager() for mode-aware formatting.
  6. Modularity: Break down complex UI features into smaller, reusable components within src/ui/components.
  7. Testing: Write unit tests for individual components and integration tests for larger flows to ensure stability and correctness.