feat(frontend): UI overhaul

[amanape]

What is the problem that this fixes or functionality that this introduces? Does it fix any open issues? Extends and improves the UI based on Paul's new and approved designs.

---

CHANGELOG

• Setup React Router
• Created a new Home screen
• Main app is in /app
• Rework settings modal

---

Resolves #3447, #3755, #3584, #3683, #3736

[tobitege]

This is exciting!! 😍

[mamoodi]

Just want to make sure you are aware of this PR which changes some things in the Settings: https://github.com/All-Hands-AI/OpenHands/pull/3751

[rbren]

@amanape might be helpful to attach a few screenshots so folks can see what we're up to!

[tobitege]

Huge kudos on this massive work, thank you!

Some small nits thus far:

• opened OH with this build for first time showed my LLM config in Advanced mode, but openening the Settings with the left-hand cog-wheel opened in "standard" mode
• the resizing grips will be re-added later? i.e. between chat column and workspace, between terminal and tabs
• all icons in the left sidebar should have tooltips
• more of a "long time" quirk: the "send message" icon looks like an "upload" image to me, is there something closer to resembling an ENTER key?
• the "file-input" opens a dialog with a graphics filter that includes like a dozen formats (Firefox); which I'm not sure if we could/should limit that to the most common image formats?
• the assistant's chat replies do not get any border (anymore)?
• ~~the top-left OpenHands icon click asks for "Exit" confirmation, which seems specific to SaaS installation?~~ nvm, found out now what it means 😄
• Start screen says "Attach a file" -> "Attach an image"?
• Upon new project, I'd wish there'd be a checkbox "[X] With new container" or similar so I could uncheck it and it would keep reusing an already running container
• The " + " button in sidebar is (yet) a little misleading, because there's nothing "added", it's a "new" project and the old one is gone then
• Isn't "awaiting user input" normally in blue?

Independent of this PR: I forgot to start Docker Desktop before sending a chat message and the backend runs into unrecoverable error (have to reload page at least and of course start docker):

10:56:01 - openhands:ERROR: runtime.py:203 - Launch docker client failed. Please make sure you have installed docker and started docker desktop/daemon.
10:56:01 - openhands:ERROR: agent_session.py:196 - Runtime initialization failed: Error while fetching server API version: ('Connection aborted.', FileNotFoundError(2, 'No such file or directory'))
10:56:01 - openhands:ERROR: agent_session.py:84 - Error starting session: Error while fetching server API version: ('Connection aborted.', FileNotFoundError(2, 'No such file or directory'))

[amanape]

@tobitege Thanks a lot for taking the time to provide a thorough review! This is all great feedback that I'll be adding to the backlog and pick them off one-by-one. To answer your questions:

the resizing grips will be re-added later?

Yes

more of a "long time" quirk: the "send message" icon looks like an "upload" image to me, is there something closer to resembling an ENTER key?

You make a good point. I'll discuss this with Paul

the assistant's chat replies do not get any border (anymore)?

No. They are new designs but we're still exploring alternatives here (or maybe go back to what it was).

Start screen says "Attach a file" -> "Attach an image"?

Woops!

Isn't "awaiting user input" normally in blue?

Thanks for pointing this out

For the most part, these issues are non blocking and can be addressed in follow-up PRs (this one has already grown larger than it should have). Just a heads up that this may merge without all of these points resolved yet.

[rbren]

Thanks for the feedback @tobitege!

I agree with Stephan that some of these can be pushed into follow-up issues, especially the "long running" stuff :)

The only one that sounds like a blocker to me is the settings modal bug--that seems worrisome

[tobitege]

Yes, it's mostly cosmetics I observed, no blockers to me. 😃