Skip to content

feat(web): polish landing, model picker, and sidebar presentation - #678

Merged
tt-a1i merged 2 commits into
mainfrom
codex/web-landing-ux-polish
Oct 4, 2026
Merged

tt-a1i merged 2 commits into
mainfrom
codex/web-landing-ux-polish

Conversation

@tt-a1i

@tt-a1i tt-a1i commented Oct 4, 2026

Copy link
Copy Markdown
Collaborator

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:

  • Landing: scale the animated wordmark to 0.82, add a bilingual product tagline (landingTagline), center the workspace picker, and give the astryx selector popup an explicit z-index: 60 so it always stacks above the hero.
  • Dormant composer (no workspace): hide the read-only textarea and render a folder icon + "choose a workspace" CTA row instead; subtle tinted background and hover feedback; overlay button semantics unchanged.
  • Model picker: bordered/elevated popup surface, sticky uppercase provider group headings, two-line options (name + monospaced model id), persistent aria-selected highlight with accent check, and a separated, de-emphasized "model settings" footer item.
  • Sidebar: card-style bordered new-session button, small-caps section label, subtler session timestamps, footer divider. All values derive from existing theme variables, so dark/pine/mist/rose themes follow automatically.

Validation

  • bun run check (contracts + check:web + biome format/lint + tsc) — pass
  • bun run test — 1158 tests, 82 files, pass
  • bunx playwright test tests/web/workbench-polish.e2e.ts — 8 pass
  • Manual browser verification against a live workbench: landing in dark and light themes, model picker (thinking view + list view) in both themes, and the no-workspace dormant state via an isolated --no-workspace instance. Theme preference restored afterwards.

Impact

  • User-visible behavior: landing/model-picker/sidebar visuals only; no interaction, command, or lifecycle changes.
  • Model-visible context/tools: none.
  • Runtime/lifecycle: none.
  • Persisted config/data: none (one new i18n key in en + zh).
  • Compatibility/risk: low; CSS selector additions are additive, markup changes are limited to presentation-only nodes (tagline, dormant CTA, option sub-label).

tt-a1i added 2 commits October 4, 2026 19:44
- 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
@tt-a1i
tt-a1i merged commit 311879f into main Oct 4, 2026
18 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant