Enhance Visualizer UI layout #76
Open
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
Move demo logs preview fetching logic from Dashboard component into a reusable custom hook for better separation of concerns.
- Fix CodeBlock horizontal scrolling by constraining CollapsibleContent expansion with width: 0; minWidth: 100% wrapper - Fix LogViewerMainContent cutoff by replacing h-screen with flex-1 to properly account for header/footer height - Ensure ResizablePanelGroup fills available vertical space
- Create reusable StatsRow component for label-value pairs - Replace duplicated stat rows in LogViewer with StatsRow - Follow StatsCard naming convention for consistency
- Hide LogViewerFooter. Currently, its only job is to display navigation hints. - Use kbd elements for better visual styling - Change 'to navigate' → 'prev/next' and 'back' → 'back to files'
Owner
|
Cool yeah I'll test this out when I get the time but it looks nicer :) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Hi! This PR tackles a UX issue I hit while exploring the visualizer.
UX pain point:
The most important content to parse -
Conversationand its correspondingCode Blocks & Sub-LM Calls- gets relatively little screen real estate, while a lot of colors and icons compete for attention.I did:
LogViewerSummarylayout so it’s less visually noisy and draws attention more naturally to the right placesSelectedIterationInfo)Iteration x of ywas duplicated inLogViewerMainContent→ added selected iteration header to consolidateIterationTimelinesectionLogViewerMainContentsectionBefore:
After:
