feat(inquirerer): add Claude Code-style terminal UI with welcome box #51
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add ViewportRenderer class with ansi-diff for minimal flicker rendering - Add AICodeUI class for claude-code style terminal interface - Implement two-channel output model (committed scrollback + live viewport) - Add line editor with cursor movement and character input - Add streaming text support for AI-style responses - Add demo-ai-code.ts showcasing the new interface - Add pnpm dev:ai-code script This implements the terminal UI spec for building interactive coding tools with scrollback preservation and diff-based updates.
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
- Remove ansi-diff usage in favor of simple cursor positioning - Fix viewport to reserve space on first render - Move cursor back to viewport start before each redraw - Clear and redraw each line for reliable updates - Remove commitMessage calls that were causing duplicate output The viewport now uses a simple approach: 1. On first render, reserve space by printing empty lines 2. On subsequent renders, move cursor up and redraw in-place 3. Each line is cleared before writing new content
devin-ai-integration
bot
changed the title
…support - Add comprehensive KEY_CODES for readline-style editing (Ctrl+A/E, Alt+B/F, Ctrl+W/K/U, Home/End) - Implement prompt history navigation (UP/DOWN arrows) - Support multiline input (Shift+Enter for newline, Enter to submit) - Move message scrolling to PageUp/PageDown - Add extensible keybinding system with addBinding/removeBinding methods - Update LineEditorState to support multiple lines - Add kill ring for Ctrl+K/U operations - Show history position in status bar
devin-ai-integration
bot
changed the title
- Replace block cursor character with inverse video on current char - This fixes the jittery cursor that shifted text due to width differences - Add CTRL_J as fallback for newline insertion since Shift+Enter doesn't work in most terminals without special configuration - Update help text to show Ctrl+J instead of Shift+Enter
…rsation markers - Add welcome box with rounded corners and two-column layout - Add conversation markers: > for user, ⏺ for assistant - Add animated spinner for streaming indicator - Use full-width separators - Add ↵ send hint in input area - Fix UP/DOWN arrows to navigate multiline input with preferredCol tracking - Add string-width dependency for proper display width calculations
devin-ai-integration
bot
changed the title
Skip messages with isStreaming=true in the main message loop since they are already rendered separately in the streaming section.
- Remove trailing newline after render to prevent scroll when at bottom row - Add truncateToWidth() to prevent soft-wrap which desyncs cursor position - Lines are now truncated to terminal width before rendering
On first render, cursor is at bottom after printing newlines, so move up viewportHeight. On subsequent renders, cursor is on last viewport row (no trailing newline), so move up viewportHeight-1. This prevents the 'filling screen upward' bug where each render landed one row higher.
When input has too many lines, limit visible lines to prevent overflow. Shows scroll indicators when there are hidden lines above/below. Keeps cursor line visible by centering the view around it.
- Use fixed max of 5 visible input lines for stable layout - Layout calculation and rendering now use the same max height - Show 'ln X/Y' indicator when multiline instead of scroll indicators - Keeps cursor visible with context when scrolling through input - Removes extra indicator rows that were stealing layout space
- Remove 5-line limit on input area - Input area grows as user adds newlines, conversation area shrinks - Simpler approach matching Claude Code's behavior
- Input area can grow up to (viewportHeight - chrome - 1) lines - Conversation area dynamically shrinks as input grows - Input lines are windowed when they exceed available space - Shows 'ln X/Y' indicator when input is scrolling - Keeps cursor line visible with context when scrolling - Total rendered lines never exceed viewport height
- Add bottom-anchored clamping to guarantee exactly viewportHeight lines - Fix renderConversation to reserve space for scroll indicator - Clamp availableContentLines to prevent negative values - This ensures the UI never goes below the terminal
- Move aicode.ts and viewport.ts from src/ui/ to dev/ai/ - These files are now demo-only and not bundled with the package - Update imports in demo-ai-code.ts - Remove exports from src/ui/index.ts - Keypress additions remain in src/ as they're useful for other components
string-width is only used by the AI code demo in dev/ai/, which is not bundled with the published package. Moving it to devDependencies ensures consumers don't install it unnecessarily.
These dependencies were not imported anywhere in src/ or dev/ and were adding unnecessary install footprint for consumers.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
feat(inquirerer): add Claude Code-style terminal UI with welcome box
Summary
This PR implements a Claude Code-style terminal UI based on the terminal UI spec Dan provided. The implementation adds:
dev/ai/viewport.ts): A renderer that reserves a fixed region at the bottom of the terminal and updates it in-place using cursor positioning to avoid flickerdev/ai/aicode.ts): A complete chat interface with streaming text display, line editor for input, status bar, and in-app scrollingdev/demo-ai-code.ts): Interactive demo showcasing the new components with simulated AI responsesNote: The AI code files are intentionally placed in
dev/ai/rather thansrc/ui/so they are not bundled with the published package. This is demo/experimental code. The keypress.ts additions (new KEY_CODES for readline-style editing) remain insrc/as they are purely additive and useful for other components.Key features:
>prefix for user messages,⏺bullet for assistant responses↵ sendwhen input has contentaddBinding()/removeBinding()methods for customizationUpdates since last revision
dev/ai/folder: aicode.ts and viewport.ts are now indev/ai/instead ofsrc/ui/so they won't be bundled with the published package. The keypress.ts additions (purely additive KEY_CODES) remain insrc/.viewportHeightlines every frame, preventing content from rendering below the terminal viewport.string-widthto devDependencies: Sincestring-widthis only used by the AI code demo indev/ai/, it's now a devDependency rather than a production dependency.ansi-diffandjs-yamlfrom dependencies - they were not imported anywhere in the codebase and were adding unnecessary install footprint for consumers.Review & Testing Checklist for Human
This is a yellow risk PR - the code compiles and existing tests pass, but the new functionality has no automated tests and requires manual verification in a real terminal.
cd packages/inquirerer && pnpm dev:ai-codeand verify the demo launches correctly with the welcome boxNotes
dev/ai/and excluded from the npm package build - this is intentionalstring-widthis now a devDependency since it's only used by the demo codeansi-diffandjs-yamlwere removed entirely (not imported anywhere)Link to Devin run: https://app.devin.ai/sessions/df242c2990d74fc6aa58e95e8e050d86
Requested by: Dan Lynch (@pyramation)