UI/UX: Adaptive Homescreen

[sachasayan]

⚠️ This is a twin of another PR, #2951, and is a superset of that work. When reviewing, please take a look at them both.

Context

This PR introduces an Adaptive Homescreen with variable information density. The goal is to provide users with some customizability and just enough information at all times without overloading them, while

If you're familiar with how videogames will sometimes show/hide HUD elements (ammo counts, reticles) based on the players' context, this is the same idea.

Some specific implementation details:

• The task list now has a show/hide option for user preferences of minimal or information dense, which persists across sessions. That option is at the top of the view, and is a hidden user preference (it is not exposed in the settings view, it is just remembered from the homescreen).
• The greeting (documentation call to action) now only appears for new users (when taskHistory = 0, but we could configure this to be higher). Once a user has a task history, it will disappear. Regular users don't need a documentation call-to-action or guidance. :)
• Tips appear situationally based on the current workspace history, your overall task history. A collapsed/condensed version optionally appears based on the other information being displayed. This should eventually be user-configurable through the information density toggle, but this is a first-pass.

As a sub-goal, we also now show version updates front-and-centre — this is better at-a-glance formatting for users to get acquainted with new features and fixes as they are released.

Screenshots:

PSA: Not all conditions are shown here, this is a selection of common states.

Brand new user (show greeting, show expanded tips, no tasks):

Expanded view, all user levels, with a new-ish workspace (show tips, but compressed).

Expanded view, experienced user with large task history in large workspace (no tips or greeting, all tasks):

Minimal view, experienced user with large task history (full minimal experience):

[changeset-bot]

⚠️ No Changeset found

Latest commit: 5506882

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[dlab-anton]

Adaptive homescreen is a great idea! A couple things jumped out when looking at the screenshots:

• The task list toggle maybe causes a layout jump because it sits between the header and the content. Have you considered putting it at bottom of elements as this is the one that show/hides.
• Maybe the show/hide control could live where the tasks appear? Like a 'Show History' placeholder that expands, or just a minimal 'text + chevron' link? Could feel smoother on the eyeballs.
• Also, didn't immediately realize the tips section included release notes - I thought it was a feature highlight. Just mentioning in case that specific discoverability is important, but I think it may not be.
• If the release text is fixed width it would be nice to see on desktop / larger sizes. Although I think if task list (full-width) is underneath the (fixed width) release notes the layout would remain relatively balanced in desktop panel sizes too.
• Regarding the welcome description ("Generate, refactor...") / Consider making it more concise and focused on Roo's unique value proposition or 'why'. Users in VS Code likely have context to install Roo for code, debug, refactor and so on, so this space seems ideal for reinforcing the core brand message / differentiator.
• Ellipses leading to full release notes

Just tossing out ideas - I have a dozen more and would be happy to chat more about UI stuff if it helps!

[sachasayan]

Thanks for the feedback, @dlab-anton:

The task list toggle maybe causes a layout jump because it sits between the header and the content. Have you considered putting it at bottom of elements as this is the one that show/hides.

I was thinking an animation pass to address this later on, but I didn't want to throw it into an already-sizeable PR.

Maybe the show/hide control could live where the tasks appear? Like a 'Show History' placeholder that expands, or just a minimal 'text + chevron' link? Could feel smoother on the eyeballs.

Ideally the goal is to switch that show/hide control into a "compact/expanded" control later on which affects multiple elements. Yes, I do agree there's some tweaking to be done here for affordance.

Also, didn't immediately realize the tips section included release notes - I thought it was a feature highlight. Just mentioning in case that specific discoverability is important, but I think it may not be.

It shouldn't, but did you see that anywhere? I hope I didn't miss something!

Regarding the welcome description ("Generate, refactor...") / Consider making it more concise and focused on Roo's unique value proposition or 'why'. Users in VS Code likely have context to install Roo for code, debug, refactor and so on, so this space seems ideal for reinforcing the core brand message / differentiator.

cc @hannesrudolph