Enhanced onboarding page visual design #4156

spencrmartin · 2025-08-18T14:19:25Z

Added card-based layout for provider selection
Created OpenRouter and Ollama brand icon components
Implemented shimmer effect for recommended option
Added blue 'Recommended' badge for OpenRouter card
Updated layout to be wider and left-aligned
Improved visual hierarchy with consistent spacing
Added descriptive text for each provider option

zanesq · 2025-08-18T14:32:28Z

Can you run the e2e tests and fix the issue from the changes? npm run test-e2e

I noticed a couple issues with the layout:

The green active dot is misaligned.
It doesn't handle small screens well can you make it a bit more responsive/shrink to fit at the minimum window height?

spencrmartin · 2025-08-18T14:35:05Z

I

Yesir! Correct in thinking the greendot is the isrunning check of Ollama?

spencrmartin · 2025-08-18T16:38:25Z

Changed icon status dot to badge elements @zanesq

zanesq

I think there might be a few bugs after selecting a provider, I don't see them on main:

After selecting ollama or openrouter it goes to chat but I can't seem to click any of the navigation items anymore. I think it might not think there is a provider set in the route provider guard like it used to.
If I select other providers and choose databricks it no longer goes to chat it just stays on the provider selection screen.

I wonder if we can tighten up the vertical space a bit more? This is at the default window height of 800px. Maybe we can remove the empty space under the icons for ollama and open router?

- Added card-based layout for provider selection - Created OpenRouter and Ollama brand icon components - Implemented shimmer effect for recommended option - Added blue 'Recommended' badge for OpenRouter card - Updated layout to be wider and left-aligned - Improved visual hierarchy with consistent spacing - Added descriptive text for each provider option

- Updated shimmer animation to go back and forth smoothly - Increased duration from 2s to 6s for more subtle effect - Reduced opacity values (max 0.15, mid 0.05) for subtlety - Changed gradient from via-white/20 to via-white/8 for lighter effect - Added ease-in-out timing for smoother transitions - Removed abrupt reset by creating continuous back-and-forth motion

- Moved OpenRouter and Ollama icons to be left-aligned above heading text - Removed inline flex layout that put icons next to text - Added mb-3 spacing between icons and headings for clean separation - Maintained responsive sizing (w-5 h-5 sm:w-6 sm:h-6) from previous work - Consistent structure across both provider cards - Icons now properly positioned as visual branding elements above content

- Fixed missing closing div tag that caused ESBuild transform error - Properly structured both OpenRouter and Ollama cards with clean JSX - Icons positioned above headings with mb-3 spacing - Maintained responsive design and shimmer effects - Consistent card layout and styling across both provider options

- Removed orphaned keyframe rules (25%, 50%, 75%, 100%) that were missing their parent @Keyframes declaration - Fixed 'Missing opening {' error in Tailwind CSS compilation - Balanced CSS braces (111 opening, 111 closing) - Maintained clean shimmer animation implementation

- Replaced WelcomeGooseLogo with BackButton for both onboarding and settings modes - Applied consistent header pattern matching other pages (ScheduleDetailView, SessionHistoryView) - Updated layout structure: BackButton → h1 title → description → border-b - Changed heading from text-2xl to text-4xl font-light for consistency - Added proper background and text color classes (bg-background-default text-text-default) - Used border-border-default instead of custom styling - Improved responsive text sizing and spacing - Removed conditional back button logic - now always shows back button

- Increased top padding from pt-6 to pt-12 to account for 32px titlebar-drag-region - Added pt-2 to back button container for better vertical spacing - Added no-drag class to back button container to ensure it remains clickable - Prevents macOS window controls (red/yellow/green buttons) from overlapping back button - Maintains consistent spacing with other pages while accounting for titlebar

…er providers' - Changed onboarding mode header to be more concise and consistent - Maintains 'Provider Configuration Settings' for non-onboarding mode - Aligns with the simplified, user-friendly language used elsewhere in onboarding

- Changed ProviderGrid justifyContent from 'start' to 'center' - Provider cards now center in available space instead of left-aligning - Eliminates large gap on the right side of the grid - Header text remains left-aligned for better readability - Improves visual balance of the provider selection page

- Added Ollama icon above heading with mb-3 spacing (matches onboarding cards) - Changed header from text-center to text-left alignment - Removed text-center from status messages and notifications - Imported Ollama icon component for consistent branding - Maintains left-aligned layout consistency throughout onboarding flow - Status messages now left-aligned for better readability

- Changed OpenRouter and Ollama icon spacing from mb-3 (12px) to mb-12 (48px) - Creates more generous visual breathing room between brand icons and headings - Improves visual hierarchy and makes the cards feel less cramped - Maintains consistent spacing across both provider cards

- Replaced large success box with compact green pill badge - Changed text from 'Ollama is running on your system' to 'Ollama is detected and running' - Uses same styling as the 'Detected' badge on main onboarding page (bg-green-600, rounded-full) - Maintains visual consistency between onboarding flow and setup page - Creates cleaner, more compact status indicator

- Added mb-16 (64px) margin-bottom to detected pill container - Creates generous breathing room between status indicator and action buttons - Improves visual hierarchy and reduces cramped feeling - Provides clear separation between status and next steps

- Replaced large warning box with compact orange pill badge - Changed from bg-background-warning box to bg-orange-600 rounded-full pill - Added mb-16 (64px) spacing between pill and Install button for consistency - Maintains pill badge pattern established for detected state - Only applies to secondary Ollama setup page, not main onboarding page

- Changed button text to be more concise and direct - 'Cancel' is clearer and more standard for secondary actions - Reduces cognitive load and makes the action more obvious - Maintains same styling and functionality

zanesq

LGTM, still think we should could save some vertical space however up to you

spencrmartin · 2025-08-19T23:52:51Z

Added vertical scroll here @zanesq lemme know if that works and I'll pull it in

#4206

zanesq · 2025-08-20T01:00:32Z

LGTM thanks!

michaelneale · 2025-08-20T01:15:26Z

yep I like this. BTW - there will be another top level "one click" setup with a router soon, so any thoughts on how that would work with this @spencrmartin ? could be above "other providers" but still at that level (below recommended, peer with ollama?)

michaelneale · 2025-08-20T01:17:38Z

@zanesq did the changes fix the problem with it not properly setting up the provider?

michaelneale · 2025-08-20T01:34:43Z

ui/desktop/src/components/ProviderGuard.tsx

          setShowFirstTimeSetup(false);
          setHasProvider(true);
+
+          // Navigate to chat after successful setup


I think will need to check this running packaged, I had a hell of a time with things like this vs just run-ui

Tested with the package also and it's working. I think its not so much a concern anymore with the new ui routing system.

spencrmartin · 2025-08-20T18:27:35Z

@zanesq is this rdy

Co-authored-by: Zane Staggs <[email protected]> Signed-off-by: Jack Wright <[email protected]>

* main: docs: add figma tutorial (#4231) Add Nix flake for reproducible builds (#4213) Enhanced onboarding page visual design (#4156) feat: adds mtls to all providers (#2794) (#2799) Don't show a confirm dialog for quitting (#4225) Fix: Missing smart_approve in CLI /mode help text and error message (#4132) Clean up langfuse docs and scripts (#4220) feat: add remark-breaks plugin to preserve single newlines in markdown (#4217) feat(mcp/developer): accept -1 for insert_line number (#4112) Remove dead code and old settings migration (#4180) removed tests from lint-staged (#4203) docs: openrouter and ollama easy desktop setup (#4195) Custom providers update (#4099) docs: goose_terminal env var (#4205) Desktop alerts when suspicious unicode characters found in Recipe (#4080) chore: remove the google drive built-in extension (#4187) Move out app init (#4185)

* main: Add PKCE support for Tetrate Agent Router Service (#4165) Read AGENTS.md by default (#4232) docs: configure provider and model (#4235) docs: add figma tutorial (#4231) Add Nix flake for reproducible builds (#4213) Enhanced onboarding page visual design (#4156) feat: adds mtls to all providers (#2794) (#2799)

* 'main' of github.com:block/goose: chore: upgrade rmcp to 0.6.0 (#4243) doc: uvx not npx (#4240) Add PKCE support for Tetrate Agent Router Service (#4165) Read AGENTS.md by default (#4232) docs: configure provider and model (#4235) docs: add figma tutorial (#4231) Add Nix flake for reproducible builds (#4213) Enhanced onboarding page visual design (#4156) feat: adds mtls to all providers (#2794) (#2799) Don't show a confirm dialog for quitting (#4225) Fix: Missing smart_approve in CLI /mode help text and error message (#4132)

* main: (108 commits) Remove unused game (#4226) fix issue where app redirects to home after initialization but user has already started a chat (#4260) Feat: Let providers configure a fast model for summarization (#4228) docs: update tool selection strategy (#4258) feat: upgrade `@mcp-ui/client` package and improve UI message handling (#4164) stop replacing chat window when changing working directory (#4200) Only fetch session tokens when chat state is idle to avoid resetting during streaming (#4104) bump timeouts for e2e tests (#4251) docs: custom context files improvements (#4096) chore: upgrade rmcp to 0.6.0 (#4243) doc: uvx not npx (#4240) Add PKCE support for Tetrate Agent Router Service (#4165) Read AGENTS.md by default (#4232) docs: configure provider and model (#4235) docs: add figma tutorial (#4231) Add Nix flake for reproducible builds (#4213) Enhanced onboarding page visual design (#4156) feat: adds mtls to all providers (#2794) (#2799) Don't show a confirm dialog for quitting (#4225) Fix: Missing smart_approve in CLI /mode help text and error message (#4132) ...

spencrmartin requested review from DOsinga, michaelneale and zanesq and removed request for michaelneale August 18, 2025 14:20

spencrmartin marked this pull request as ready for review August 18, 2025 14:24

spencrmartin marked this pull request as draft August 18, 2025 16:56

spencrmartin marked this pull request as ready for review August 18, 2025 17:32

zanesq reviewed Aug 19, 2025

View reviewed changes

spencrmartin and others added 18 commits August 19, 2025 15:16

Pr 4156 (#4162)

1e451e9

Fix navigation bugs after provider selection (#4204)

603672d

fix tests

ab9eb87

zanesq force-pushed the feature/onboarding-visual-improvements branch from 838333d to ab9eb87 Compare August 19, 2025 22:18

revert accidental changes

ae24f9e

zanesq approved these changes Aug 19, 2025

View reviewed changes

michaelneale assigned michaelneale and zanesq Aug 20, 2025

michaelneale reviewed Aug 20, 2025

View reviewed changes

Add scrollable layout to onboarding page (#4206)

f334328

michaelneale removed their assignment Aug 20, 2025

spencrmartin merged commit 134ae8b into main Aug 20, 2025
11 checks passed

spencrmartin deleted the feature/onboarding-visual-improvements branch August 20, 2025 20:29

ayax79 pushed a commit to ayax79/goose that referenced this pull request Aug 21, 2025

Enhanced onboarding page visual design (block#4156)

ce9ec20

Co-authored-by: Zane Staggs <[email protected]> Signed-off-by: Jack Wright <[email protected]>

alexhancock mentioned this pull request Aug 22, 2025

release/1.6.0 #4280

Merged

Enhanced onboarding page visual design #4156

Enhanced onboarding page visual design #4156

Uh oh!

Conversation

spencrmartin commented Aug 18, 2025

Uh oh!

zanesq commented Aug 18, 2025

Uh oh!

spencrmartin commented Aug 18, 2025

Uh oh!

spencrmartin commented Aug 18, 2025

Uh oh!

zanesq left a comment

Choose a reason for hiding this comment

Uh oh!

zanesq left a comment

Choose a reason for hiding this comment

Uh oh!

spencrmartin commented Aug 19, 2025

Uh oh!

zanesq commented Aug 20, 2025

Uh oh!

michaelneale commented Aug 20, 2025

Uh oh!

michaelneale commented Aug 20, 2025

Uh oh!

michaelneale Aug 20, 2025

Choose a reason for hiding this comment

Uh oh!

zanesq Aug 20, 2025

Choose a reason for hiding this comment

Uh oh!

spencrmartin commented Aug 20, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants