UI polish: Neo theme, form system, sidebar, and conversation list#733
Conversation
Introduce a neutral-based palette variant that overrides brand tokens at runtime, stop inlining primary colors on AgentServerUIRoot, and tie loaders to --oh-color-primary. Co-authored-by: Cursor <cursoragent@cursor.com>
Extract shared form-control class helpers and apply them across buttons, inputs, dropdowns, and settings fields; fix loading text contrast and backend retry button styling. Co-authored-by: Cursor <cursoragent@cursor.com>
Align description copy with toggle labels using shared pl-14 offset across agent, verification, and schema boolean fields. Co-authored-by: Cursor <cursoragent@cursor.com>
Share an animated white-active toggle between settings and automations, align sidebar sub-nav rows to 36px, and match git settings helper copy to section subtitles. Co-authored-by: Cursor <cursoragent@cursor.com>
Standardize Typography H1–H3, modal titles, and route section headers on medium weight instead of semibold or bold. Co-authored-by: Cursor <cursoragent@cursor.com>
Route server and backend status dots through --oh-status-success so the conversation header and backend dropdown match the left nav. Co-authored-by: Cursor <cursoragent@cursor.com>
Use --oh-radius on all react-hot-toast surfaces and wire shared TOAST_OPTIONS into the root Toaster. Co-authored-by: Cursor <cursoragent@cursor.com>
Replace filled chevrons on dropdown triggers with a shared HeroUI-style caret, remove backend selector focus glow, and show CircleX on error toasts. Co-authored-by: Cursor <cursoragent@cursor.com>
Snap sidebar, settings, extensions, and dropdown hover colors instantly by excluding color from form-control transitions and using transition-none on nav rows. Co-authored-by: Cursor <cursoragent@cursor.com>
Extract shared list row/table classes for secrets and LLM profiles, use h-10 rows, and move the add-secret action to the top-right header. Co-authored-by: Cursor <cursoragent@cursor.com>
Use h-12 list rows with subtler hover, align the LLM profile actions menu with shared context-menu styling, and unify error banner/toast icons on --oh-status-error. Co-authored-by: Cursor <cursoragent@cursor.com>
Remove stacked link padding so folder rows and conversation cards use the same 2px vertical gap as grouped list sections. Co-authored-by: Cursor <cursoragent@cursor.com>
Show five conversations per workspace/repo folder with a grey More/Less toggle, keeping the active thread visible when it falls outside preview. Co-authored-by: Cursor <cursoragent@cursor.com>
Align card footer text with titles, drop the workspace folder icon, place branch beside repo name, match open launcher styling to secondary buttons, and darken grouped folder More/Less link color. Co-authored-by: Cursor <cursoragent@cursor.com>
Use a full-width 36px-tall hit target for collapsed rail icons instead of a fixed 40×40 square so nav rows match expanded row height. Co-authored-by: Cursor <cursoragent@cursor.com>
Keep a single mounted logo in the header and briefly suppress the collapsed hover expand overlay so collapse does not flash the logo away. Co-authored-by: Cursor <cursoragent@cursor.com>
Hide the settings section title while adding or editing a profile, show a labeled Back control, and place the Add/Edit title below it using standard page heading styles. Co-authored-by: Cursor <cursoragent@cursor.com>
Hide the list page title while adding or editing a secret, and show a Back control with Add/Edit a Secret headings using standard page styles. Co-authored-by: Cursor <cursoragent@cursor.com>
Align buttons and button-like controls with the updated theme by defaulting shared form/BrandButton styles to font-normal and removing medium/semibold overrides from individual call sites. Co-authored-by: Cursor <cursoragent@cursor.com>
Top-align the error icon and use text-sm muted copy so toast notifications match the inline error message above the chat input. Co-authored-by: Cursor <cursoragent@cursor.com>
Render the icon inside ErrorToastContent so it lines up with the message, center on single-line toasts, and top-align when the text wraps. Co-authored-by: Cursor <cursoragent@cursor.com>
Use a 28px hit target and 14px chevron so the collapse control matches the conversations filter icon button. Co-authored-by: Cursor <cursoragent@cursor.com>
Hide the no-conversations message until the first fetch completes, align the server status dropdown with other context menus, and remove the sidebar logo hover tooltip. Co-authored-by: Cursor <cursoragent@cursor.com>
|
@FraterCCCLXIII is attempting to deploy a commit to the openhands Team on Vercel. A member of the Team first needs to authorize it. |
all-hands-bot
left a comment
all-hands-bot
left a comment
There was a problem hiding this comment.
🟢 Good taste - Well-executed UI consistency pass with solid architectural patterns.
[IMPROVEMENTS]
The code is clean and well-organized. The new utility files (form-control-classes.ts, settings-list-classes.ts) establish a strong foundation for design consistency. The OpenHands-Neo theme is properly additive and doesn't break existing themes.
Key strengths:
- Shared utility constants prevent magic numbers and ensure consistency
- Proper test coverage for new functionality (color-themes, form-control-classes, conversation-panel-list-helpers)
- No breaking API changes - component refactoring maintains interface compatibility
- Smart preview limiting logic with active conversation handling
- ResizeObserver usage in ErrorToastContent is appropriate for dynamic alignment
[MINOR OBSERVATION]
For future large visual PRs, consider including a few key screenshots in the Evidence section to complement the test plan. While the systematic changes here are verifiable through code review, visual confirmation of the most prominent changes (theme toggle, form controls, conversation list) would help reviewers quickly validate the design intent.
[RISK ASSESSMENT]
- [Overall PR]
⚠️ Risk Assessment: 🟢 LOW
This is a well-contained design system update. Changes are primarily cosmetic (font weights, spacing, colors) with proper abstraction through shared utilities. The new OpenHands-Neo theme is additive, the ToggleSwitch component refactoring preserves API compatibility, and form control height standardization is internal to the app (not a published component library). Test coverage is solid for the new functionality.
VERDICT:
✅ Worth merging: Establishes strong design system foundations with consistent patterns.
KEY INSIGHT:
The shift from component-specific styling to shared utility classes (formControlFieldClassName, formControlButtonClassName) is the right architectural move - it prevents drift and makes future design updates significantly easier.
Was this automated review useful? React with 👍 or 👎 to this review to help us measure review quality.
Workflow run: https://github.com/OpenHands/agent-canvas/actions/runs/26298825138
hieptl
added
the
update-snapshots
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
3 participants
Summary
Design-consistency pass across agent-canvas: introduces the OpenHands-Neo theme, standardizes form controls and button typography, and polishes the sidebar, conversation list, settings flows, error toasts, and runtime status menu. 23 commits, ~185 files touched.
Changes grouped by area
Theme & design tokens
color-themes.ts,tailwind.css, style-scope tokens)Form controls & shared utilities
form-control-classes.ts: 36px height,rounded-lg, consistent padding for inputs, dropdowns, and buttonssettings-list-classes.ts: shared raised-list styling for settings pagescombobox-caret.tsx: unified dropdown caret component used across comboboxestoggle-switch.tsx: consistent switch sizing and interactionrounded-lg)Typography & buttons
font-mediumfor page and modal headings (Typography, card titles)font-normal) across the app —BrandButton,formControlButtonClassName, launcher buttons, modals, and ~30 other call sitesSettings pages
Typography.H2, hide redundant parent section headerSidebar & navigation chrome
sidebar-layout.ts)h-7 w-7, 14px chevron)Conversation list & cards
isFetched); usetext-xscopyErrors & toasts
text-sm, muted foreground)ErrorToastContentwithResizeObserverso the warning icon stays centered on one line and top-aligned when the message wrapsdisplayErrorToast()withicon: null(custom inline icon)Context menus & runtime controls
Divider inset="menu",ContextMenuListItemfor actionspl-0 pr-2 py-1) so the dot aligns with action labelsTest plan
npm run typecheck && npm run buildMade with Cursor