-
Notifications
You must be signed in to change notification settings - Fork 0
Open
Labels
enhancementNew feature or requestNew feature or request
Description
Overview
Replace chalk + ora with Ink to provide a modern, React-based CLI experience similar to modern AI coding agent CLIs.
Current State
- Using
chalkfor colors and text styling - Using
orafor 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 searchcommand 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 interactivemode 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.0react: ^18.0.0ink-spinner: For loading statesink-select-input: For interactive menusink-text-input: For user inputink-table: For tabular data
References
- Ink documentation: https://github.com/vadimdemedes/ink
- Modern AI coding agent CLIs for UX inspiration
Related
- Builds on PR refactor: integrate @lytics/kero logger and reorganize tests #48 (kero logger integration)
- Complements structured logging with rich visual feedback
Metadata
Metadata
Assignees
Labels
enhancementNew feature or requestNew feature or request