feat(ui): redesign create page and active environments section#120
Merged
preetsuthar17 merged 7 commits intomainfrom Mar 15, 2026
Merged
feat(ui): redesign create page and active environments section#120preetsuthar17 merged 7 commits intomainfrom
preetsuthar17 merged 7 commits intomainfrom
Conversation
Overhaul the Spritz UI with a cleaner design system: - Switch font to Inter, color scheme to black & white - Restructure create form with 2-column layout and explicit field rows - Add animated collapsible advanced configuration section (CSS grid) - Redesign active environments list with divider-based items - Add loading states for create, delete, and refresh buttons - Add skeleton shimmer loading for environment list - Add focus/hover/active states and transitions on all inputs and buttons - Make delete button destructive with red styling and trash icon - Add scrollbar-gutter to prevent layout shift - Change default route to conversation page, create page at #create - Add dev server script
- Stack form rows vertically on small screens - Join name input and Random button flush on mobile - Stack spritz items vertically with actions below info - Reduce card padding, title size, and shell spacing - Full-width create button on mobile - Wrap action buttons and list header
The default route now renders the conversation page, so the list actions test needs hash set to #create to trigger spritz list rendering.
Remove the item immediately on successful delete, show empty state if list is now empty, and refresh in the background after a short delay.
- Full-screen chat view with no card wrapper - Sidebar: icon nav, compact thread list (title only), grouped New chat + Spritzes buttons - Main header: compact with refresh + open workspace icons - Messages: borderless assistant replies, left-aligned tool/system cards - Composer: ChatGPT-style with auto-grow textarea, fade gradient, send/stop toggle - Markdown rendering: headings, bold, italic, inline code, links, lists - Tooltip system via data-tooltip attribute with bottom position variant - Grid loader component for connection status - Auto-create conversation on page load - Rename "environments" to "Spritzes" throughout - Permission box and event cards redesigned - Fix Open button for same-origin hash navigation
…d test fixes - Collapsible sidebar with toggle button, persists state in localStorage - Mobile: off-screen sidebar with hamburger menu, backdrop overlay - Markdown rendering: headings, bold, italic, inline code, links, lists - Command bar chips insert text into composer on click - Grid loader component for connection status - Tooltips: right-side position, z-index fix, collapsed sidebar support - Permission box and event cards redesigned - Composer: auto-grow textarea, fade gradient, merged send/stop button - Auto-create conversation on page load - Mobile: horizontal scroll command bar, responsive footer - Fix tests for mock DOM compatibility (localStorage, createTextNode, innerHTML)
…ACP fixes - Sidebar: WhatsApp-style agent groups with expand/collapse and per-agent conversations - Sidebar: fetch conversations for all agents in parallel - Preset gallery: card grid shown when no conversation is selected - Custom create modal with full form (image, repo, branch, TTL, namespace) - Agent thought chunks rendered as collapsible "Thinking..." blocks - Silent handling for noisy internal update types (heartbeat, ping, etc.) - Tool call detail bodies capped at 200px with scroll - Removed sidebar tooltips to fix overflow issues - Collapse/expand icon: panel with line, no arrows - Auto-focus composer on conversation connect and after send - Removed auto-create conversation (users create explicitly) - Bottom-end tooltip position for header action buttons
preetsuthar17
force-pushed
the
ui/design-system
branch
from
9daabc5 to
f6ebd9b
Compare
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
1 participant
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.
Overhaul the Spritz UI with a cleaner design system: