feat(web): polish landing, model picker, and sidebar presentation - #678
Merged
Merged
Conversation
- Fix selector popup stacking over the landing hero (explicit z-index) - Scale the landing wordmark down and add a product tagline - Turn the dormant composer into a clear choose-workspace CTA - Richer model picker: sticky provider groups, two-line options with model ids, persistent selected highlight, separated settings footer - Sidebar: card-style new-session button, section label, subtler timestamps, footer divider
…ntrast - Hide the dormant textarea with opacity instead of display:none so it stays in the accessibility tree; overlay the CTA row absolutely - Use --muted instead of --subtle for new small text (axe 4.5:1) - Keep the workspace picker trigger at full text color
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
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.
Problem
The web workbench landing and model picker looked unfinished: the giant landing wordmark was clipped by the model-picker popup when it opened (no explicit z-index on the selector layer), the no-workspace composer was a bare dashed box floating in dead space with no clear call to action, the model list was a flat wall of names with heading-only provider groups and no persistent selected state, and the sidebar lacked visual hierarchy.
Value
First-run and empty-session screens are the product's front door. A composed landing, a legible model picker, and a calmer sidebar make the workbench feel deliberate without changing any behavior.
Approach
Purely presentational, scoped to
web/ui:landingTagline), center the workspace picker, and give the astryx selector popup an explicitz-index: 60so it always stacks above the hero.aria-selectedhighlight with accent check, and a separated, de-emphasized "model settings" footer item.Validation
bun run check(contracts + check:web + biome format/lint + tsc) — passbun run test— 1158 tests, 82 files, passbunx playwright test tests/web/workbench-polish.e2e.ts— 8 pass--no-workspaceinstance. Theme preference restored afterwards.Impact