Skip to content

feat: migrate CLI to Ink for richer terminal UX #49

@prosdev

Description

@prosdev

Overview

Replace chalk + ora with Ink to provide a modern, React-based CLI experience similar to modern AI coding agent CLIs.

Current State

  • Using chalk for colors and text styling
  • Using ora for simple spinners
  • 10 commands with ~191 instances of chalk/ora usage
  • Limited interactivity and visual feedback

Proposed Enhancement

Migrate to Ink (React for CLIs) to provide:

Benefits

  • Rich layouts - Multi-column displays, boxes, panels for better information architecture
  • Live updates - Real-time progress indicators, streaming search results
  • Interactive components - Select menus, inputs, collapsible trees for exploration
  • Better organization - Component-based architecture using React patterns
  • Stateful UI - Proper state management for complex interactions
  • Professional UX - Polished interface matching modern developer tool expectations

Trade-offs

  • ⚠️ Larger dependency footprint (Ink + React vs lightweight chalk)
  • ⚠️ More complex architecture (component-based vs simple string formatting)
  • ⚠️ Migration effort across 10 commands
  • ⚠️ Potential terminal compatibility concerns (mitigated by Ink's wide support)

Implementation Plan

Phase 1: Prototype (1 command)

  • Install Ink dependencies (ink, react, etc.)
  • Create Ink component structure in packages/cli/src/ui/
  • Migrate dev search command as prototype
    • Live search results rendering
    • Progress indicators
    • Formatted result cards
  • Validate UX and gather feedback

Phase 2: High-Value Commands

Prioritize commands with complex output that benefit most:

  • dev index - Progress bars, file counts, status board
  • dev stats - Tables, charts, formatted metrics
  • dev explore - Interactive tree/list navigation
  • dev gh - Rich issue/PR display with formatting

Phase 3: Remaining Commands

  • dev init - Welcome screen, setup wizard
  • dev update - Diff display, change summary
  • dev clean - Confirmation prompt, progress
  • dev compact - Optimization metrics
  • dev plan - Task breakdown display

Phase 4: Polish & Enhancements

  • Add dev interactive mode for guided exploration
  • Implement keyboard shortcuts
  • Add help overlays
  • Custom themes/color schemes
  • Performance optimization

Success Metrics

  • Commands render cleanly in all major terminals (iTerm2, Terminal.app, Windows Terminal, etc.)
  • No performance degradation vs current chalk/ora implementation
  • Improved user feedback in survey/dogfooding
  • Maintains 100% test coverage

Dependencies

  • ink: ^4.0.0
  • react: ^18.0.0
  • ink-spinner: For loading states
  • ink-select-input: For interactive menus
  • ink-text-input: For user input
  • ink-table: For tabular data

References

Related

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions