Cli scroll ux improvements #360
Merged
+1,027
−396
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
brandonkachen
force-pushed
the
cli-scroll-ux-improvements
branch
from
226647d to
1f82afa
Compare
Comprehensive improvements to message block spacing and alignment: Layout improvements: - Use parent container gap: 1 for consistent spacing between all blocks - Remove all conditional margin logic from tool groups and text blocks - Remove paddingBottom from tool-call-item titles - Changes AI message metadata alignment from flex-start to flex-end - Reorders credit display to show credits before completion time Code quality: - Add hasTextContent() helper function for cleaner type checking - Change text content to always use .trim() instead of trimTrailingNewlines - Skip rendering empty text blocks to prevent phantom spacing Result: Consistent single-line spacing between all message blocks during both streaming and completed states, with improved visual alignment. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Show 'working...' shimmer text with elapsed time in status indicator - Swap credits and elapsed time order in message completion (credits first) - Document ShimmerText reconciliation issues with <box> in knowledge.md
scroll indicator - Add isUserCollapsingRef to track user-initiated collapse actions - Prevent auto-scroll when user manually collapses agent sections - Add clickable scroll indicator (↓) when not at bottom of chat - Refactor diff-viewer to use single text element for better rendering - Add object validation in agent-branch-item and tool-call-item - Restructure status bar with three-section flexbox layout
- Add isUserCollapsingRef to prevent auto-scroll during user-initiated collapse actions - Refactor timer handling from simple timerStartTime to comprehensive timer object - Make timer prop optional in MessageBlock for better null safety - Pass timer object through component hierarchy for consistent elapsed time tracking - Fix scroll-to-latest button to use function call syntax
Revert from passing full timer object to passing just timerStartTime to message components. This matches the original implementation where only the start time was passed down the component tree, while StatusIndicator keeps the full timer object for elapsed time display. Changes: - MessageRenderer now accepts timerStartTime instead of timer - MessageBlock uses ElapsedTimer component with timerStartTime - StatusIndicator continues to use full timer object for elapsed seconds
Replace prop drilling of isUserCollapsingRef with a callback wrapper pattern. Created setCollapsedAgentsWithFlag wrapper that automatically sets the flag before updating state, eliminating the need to pass the ref through multiple component layers. Changes: - Add setCollapsedAgentsWithFlag and handleCollapseToggle in chat.tsx - Remove isUserCollapsingRef prop from MessageRenderer, MessageBlock, and AgentBranchItem - Update use-message-renderer to use timerStartTime consistently - Fix status indicator tests to use proper ElapsedTimeTracker mock
Extracts elapsed time formatting logic into a reusable utility function that handles seconds, minutes, and hours display. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
…ed seconds display Reverts status-indicator changes to align with main branch implementation while maintaining elapsed seconds display functionality. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
brandonkachen
force-pushed
the
cli-scroll-ux-improvements
branch
from
1f82afa to
d0697bb
Compare
Simplifies collapse handling by using a callback function instead of a ref parameter: - Pass callback function to useChatScrollbox instead of ref - Inline collapse logic into handleCollapseToggle - Use setTimeout to reset flag after state update - Remove separate setCollapsedAgentsWithFlag wrapper - Remove useEffect that was watching collapsedAgents changes This is cleaner and more explicit about when the flag is checked. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Replace dual boolean flags (isWaitingForResponse, isStreaming) with a
single StreamStatus enum ('idle' | 'waiting' | 'streaming') to make
state transitions explicit and prevent invalid states.
Changes:
- Add StreamStatus type in use-message-queue
- Update status indicator to use streamStatus directly
- Remove duplicate useHasStatus hook logic
- Simplify state transitions in use-send-message
- Move queue preview to appear after status text on left side
- Keep elapsed time display on right side throughout interaction
Benefits:
- Impossible to have inconsistent state combinations
- Clearer state machine with explicit transitions
- Single source of truth for status rendering logic
- Easier to extend with new states in future
brandonkachen
force-pushed
the
cli-scroll-ux-improvements
branch
from
c6b48a9 to
e4725e4
Compare
Add paddingLeft and paddingRight to scroll indicator box to create a larger hover/click area without changing the visual size of the arrow. This makes it easier to interact with the minimized indicator.
Split the status bar into two rows: - Row 1: status indicator (left) | scroll indicator (center) | elapsed time (right) - Row 2: queue preview (full width, only shown when messages are queued) This gives the queue preview its own dedicated space and makes it feel more distinct from the status/time indicators. The queue preview now has nearly full terminal width available to display longer message previews. Removed the complex width calculation function since the queue preview now gets the full width (minus padding).
Add justifyContent: center to queue preview box to center it horizontally on its own line for better visual balance.
Replace standard border with custom-drawn border that embeds the queue preview directly in the top border line
brandonkachen
force-pushed
the
cli-scroll-ux-improvements
branch
from
f297a98 to
5dcc740
Compare
…o StatusIndicator - Extract useConnectionStatus hook into separate file with proper cleanup - Add getStatusIndicatorState function with explicit state machine pattern - Simplify StatusIndicator component logic using state-based rendering - Update tests to use new architecture and test state function directly - Add isConnected prop to StatusIndicator component
- Added detailed JSDoc with examples and format rules - Created comprehensive test suite with 16 tests covering: - Seconds, minutes, and hours formatting - Edge cases (boundaries, large numbers, negative numbers) - Real-world scenarios for LLM response times - All tests passing (28/28 across both test files)
- Add StatusIndicator component with tests - Improve connection status tracking in use-connection-status hook - Enhance scroll management in use-scroll-management hook - Update send message hook in use-send-message - Update chat.tsx to integrate new components
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.
No description provided.