Redesign welcome page based on new design

[rbren]

This PR implements the redesigned welcome page according to the provided design. The changes include:

• Created new components for the welcome page
• Updated the layout and styling to match the design
• Added tests for the new components
• Left the suggested tasks section empty as requested

---

To run this PR locally, use the following command:

docker run -it --rm   -p 3000:3000   -v /var/run/docker.sock:/var/run/docker.sock   --add-host host.docker.internal:host-gateway   -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:76c2034-nikolaik   --name openhands-app-76c2034   docker.all-hands.dev/all-hands-ai/openhands:76c2034

[rbren]

I made the following adjustments to better match the design:

• Left-aligned the header and text content
• Removed the extra border around the Select a Repo dropdown
• Made the page take up the full width of the container

These changes make the UI match the provided design more closely.

[rbren]

@OpenHands please hook up the "Suggested tasks" UI to the existing endpoint for getting suggested tasks from github. You MUST use the exisiting API endpoint in the openhands server

[openhands-ai]

I'm on it! @rbren can track my progress at all-hands.dev

[rbren]

@OpenHands please hook up the "Suggested tasks" UI to the existing endpoint for getting suggested tasks from github. You MUST use the exisiting API endpoint in the openhands server

[openhands-ai]

I'm on it! @rbren can track my progress at all-hands.dev

[openhands-ai]

I've successfully hooked up the "Suggested tasks" UI to the existing GitHub API endpoint for getting suggested tasks. Here's a summary of the changes made:

1. Added API Client Function:

   • Created a new function retrieveGitHubSuggestedTasks() in frontend/src/api/github.ts that calls the existing /api/github/suggested-tasks endpoint
   • Defined a TypeScript interface SuggestedTask to match the backend model

2. Implemented the Suggested Tasks Component:

   • Enhanced the SuggestedTasks component in frontend/src/components/features/welcome/suggested-tasks.tsx to:
     • Fetch tasks from the GitHub API when a user is authenticated
     • Display loading states, error states, and empty states
     • Show a list of tasks with appropriate icons and descriptions based on task type
     • Make tasks clickable to open them in GitHub

3. Updated Tests:

   • Modified the test file to properly mock the GitHub user hook
   • Ensured all tests pass

4. Fixed Linting Issues:

   • Addressed all linting warnings and errors
   • Removed console.error statement

5. Verified Build:

   • Successfully built the frontend to ensure there were no build errors

The implementation now allows users to see their GitHub tasks (PRs and issues) directly in the OpenHands UI, making it easier for them to pick up where they left off. The UI shows different types of tasks with appropriate icons and descriptions, and clicking on a task will open it in GitHub.

All changes have been committed and pushed to the PR branch.

[openhands-ai]

I've successfully hooked up the "Suggested tasks" UI to the existing endpoint for getting suggested tasks from GitHub as requested in PR #7581.

Here's what I did:

1. Added a TaskType enum and SuggestedTask interface in the frontend API file to match the backend model
2. Created a new function retrieveGitHubSuggestedTasks() in the GitHub API file to call the existing endpoint
3. Created a React hook useGitHubSuggestedTasks() to fetch the data using React Query
4. Updated the SuggestedTasks component to:
   • Use the new hook to fetch data
   • Show a loading state while fetching
   • Display an error message if the fetch fails
   • Show a message if no tasks are found
   • Display the tasks with their titles, repository names, and task types
   • Handle the case when the user is not authenticated

The PR has been created and is available at: #7585

This implementation connects the UI to the existing backend endpoint as requested, providing users with a seamless way to view their suggested GitHub tasks directly in the OpenHands interface.

[rbren]

@OpenHands use-github-user doesn't seem to be returning the user, even though I'm in SAAS mode and am logged in. please add some logs to debug.

[openhands-ai]

I'm on it! @rbren can track my progress at all-hands.dev

[openhands-ai]

I've added detailed logging to help debug the issue with the use-github-user hook not returning the user in SAAS mode. Here's a summary of the changes made:

Changes Made

1. Frontend Logging:

   • Added comprehensive logging to the useGitHubUser hook to track initialization, state changes, and API calls
   • Enhanced the OpenHands.getGitHubUser method with detailed logging for API requests and responses
   • Added logging to the AuthProvider component to track GitHub token state changes

2. Backend Logging:

   • Added detailed logging to the /api/github/user endpoint to track request handling
   • Enhanced the ProviderHandler.get_user method with logging to track which providers are being tried
   • Added logging to the GitHubService.get_user method to track GitHub API interactions
   • Improved the GitHubTokenMiddleware with logging to verify if provider tokens are being properly set on requests

Purpose of the Changes

These logging enhancements will help identify where the authentication flow is breaking down in SAAS mode. The logs will show:

1. Whether the frontend correctly detects that a GitHub token is set
2. If API requests to /api/github/user are being made
3. If the backend middleware is correctly setting provider tokens on the request
4. If the GitHub service is receiving valid tokens
5. Where any errors or failures are occurring in the process

With these logs in place, when users interact with the application in SAAS mode, developers will be able to trace the entire authentication flow and pinpoint exactly where the GitHub user information is failing to be retrieved.

All changes have been committed and pushed to the PR branch openhands-workspace-xa8jjk6f.