Add port mappings support

[amanape]

This PR adds support for port mappings

Backend

• Conditionally extend instructions given Runtime instance
• Add support for custom port mappings from config
• Add port_mappings field to SandboxConfig

Users can add custom port mappings in their config like this:

config = AppConfig(
    sandbox=SandboxConfig(
        port_mappings={
            8080: 8080,  # map container port 8080 to host port 8080
            5000: 5001,  # map container port 5000 to host port 5001
        }
    )
)

Frontend

• Create a new tab to display forwarded content
• Query localhost:4141 in intervals to conditionally render online/offline text (refetch interval is set to 3000ms)

Example (Vite + React frontend)

1. Start new chat
2. [In Terminal] yes | npm create vite my-react-app -- --template react (this creates a Vite + React app in my-react-app)
3. Wait to complete
4. [In Terminal] cd my-react-app && npm install
5. Wait to complete (may take a few seconds)
6. Edit vite.config.js to

   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react'
   
   // https://vite.dev/config/
   export default defineConfig({
     plugins: [react()],
     server: {
       host: "0.0.0.0", // Important to expose port outside the container
       port: 4141, // Target port
     },
   })

7. Run npm run dev or ask OpenHands to run the server
8. You should be able to see the same page as in the screenshot above

---

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:ae92c8f-nikolaik   --name openhands-app-ae92c8f   docker.all-hands.dev/all-hands-ai/openhands:ae92c8f

[amanape]

I have extended the remote and base runtime classes to include port mapping as well as extend the conversation route that the FE now depends on to retrieve the potentially available ports. Might be missing something though, would love some insight @xingyaoww @rbren

[amanape]

Nice! LGTM

[carnalim]

This is great! Looking for this feature!

[li-boxuan]

Seems this would return two identical ports?

[rbren]

huh...it doesn't, but now that you say it I don't know why....

[rbren]

It's grabbing random ports, so there's a 1-in-10k chance of a collision. Will fix

[rbren]

Excited to say this appears to be working in all environments!