Add port mappings support

frontend/src/components/layout/served-app-label.tsx

@@ -0,0 +1,27 @@
+import { FaExternalLinkAlt } from "react-icons/fa";
+import { useActivePort } from "#/hooks/query/use-active-port";
+
+export function ServedAppLabel() {
+  const { activePort } = useActivePort();
+
+  return (
+    <div className="flex items-center justify-between w-full">
+      <div className="flex items-center gap-2">App</div>
+      {!activePort && <span className="text-red-500">Offline</span>}
+      {activePort && (
+        <a
+          href="http://localhost:4141"
+          target="_blank"
+          rel="noreferrer"
+          className="flex items-center gap-2"
+        >
+          <span className="text-green-500">Online</span>
+          <div className="flex items-center gap-1">
+            <FaExternalLinkAlt fill="#a3a3a3" />
+            <code className="text-xs">{activePort.split(":").pop()}</code>
+          </div>
+        </a>
+      )}
+    </div>
+  );
+}

frontend/src/entry.client.tsx

@@ -50,10 +50,13 @@ async function prepareApp() {
   }
 }
 
+const QUERY_KEYS_TO_IGNORE = ["authenticated", "ports"];
 const queryClient = new QueryClient({
   queryCache: new QueryCache({
     onError: (error, query) => {
-      if (!query.queryKey.includes("authenticated")) toast.error(error.message);
+      if (!QUERY_KEYS_TO_IGNORE.some((key) => query.queryKey.includes(key))) {
+        toast.error(error.message);
+      }
     },
   }),
   defaultOptions: {

frontend/src/hooks/query/use-active-port.ts

@@ -0,0 +1,46 @@
+import { useQueries, useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import React from "react";
+import { openHands } from "#/api/open-hands-axios";
+import {
+  useWsClient,
+  WsClientProviderStatus,
+} from "#/context/ws-client-provider";
+
+export const useActivePort = () => {
+  const { status } = useWsClient();
+  const [activePort, setActivePort] = React.useState<string | null>(null);
+
+  const { data } = useQuery({
+    queryKey: ["ports"],
+    queryFn: async () => {
+      const response = await openHands.get<{ ports: string[] }>("/api/ports");
+      return response.data;
+    },
+    enabled: status === WsClientProviderStatus.ACTIVE,
+    initialData: { ports: [] },
+  });
+
+  const apps = useQueries({
+    queries: data.ports.map((port) => ({
+      queryKey: ["ports", port],
+      queryFn: async () => axios.get(port),
+      refetchInterval: 3000,
+    })),
+  });
+
+  const success = apps.map((app) => app.isSuccess);
+
+  React.useEffect(() => {
+    const successfulApp = apps.find((app) => app.isSuccess);
+    if (successfulApp) {
+      const index = apps.indexOf(successfulApp);
+      const port = data.ports[index];
+      setActivePort(port);
+    } else {
+      setActivePort(null);
+    }
+  }, [success, data]);
+
+  return { activePort };
+};

frontend/src/routes.ts

@@ -12,6 +12,7 @@ export default [
       index("routes/_oh.app._index/route.tsx"),
       route("browser", "routes/_oh.app.browser.tsx"),
       route("jupyter", "routes/_oh.app.jupyter.tsx"),
+      route("served", "routes/app.tsx"),
     ]),
   ]),
 

frontend/src/routes/_oh.app/route.tsx

@@ -2,6 +2,7 @@ import { useDisclosure } from "@nextui-org/react";
 import React from "react";
 import { Outlet } from "react-router";
 import { useDispatch, useSelector } from "react-redux";
+import { FaServer } from "react-icons/fa";
 import { Controls } from "#/components/features/controls/controls";
 import { RootState } from "#/store";
 import { clearMessages } from "#/state/chat-slice";
@@ -22,6 +23,7 @@ import { useConversationConfig } from "#/hooks/query/use-conversation-config";
 import { Container } from "#/components/layout/container";
 import Security from "#/components/shared/modals/security/security";
 import { CountBadge } from "#/components/layout/count-badge";
+import { ServedAppLabel } from "#/components/layout/served-app-label";
 import { TerminalStatusLabel } from "#/components/features/terminal/terminal-status-label";
 
 function App() {
@@ -84,6 +86,11 @@ function App() {
                 labels={[
                   { label: "Workspace", to: "", icon: <CodeIcon /> },
                   { label: "Jupyter", to: "jupyter", icon: <ListIcon /> },
+                  {
+                    label: <ServedAppLabel />,
+                    to: "served",
+                    icon: <FaServer />,
+                  },
                   {
                     label: (
                       <div className="flex items-center gap-1">

frontend/src/routes/app.tsx

@@ -0,0 +1,21 @@
+import { useActivePort } from "#/hooks/query/use-active-port";
+
+function ServedApp() {
+  const { activePort } = useActivePort();
+
+  if (!activePort) {
+    return (
+      <div className="flex items-center justify-center w-full h-full">
+        <span className="text-4xl text-neutral-400 font-bold">
+          Nothing to see here.
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <iframe title="Served App" src={activePort} className="w-full h-full" />
+  );
+}
+
+export default ServedApp;

openhands/agenthub/codeact_agent/prompts/system_prompt.j2

@@ -3,4 +3,5 @@ You are OpenHands agent, a helpful AI assistant that can interact with a compute
 * If user provides a path, you should NOT assume it's relative to the current working directory. Instead, you should explore the file system to find the file before working on it.
 * When configuring git credentials, use "openhands" as the user.name and "[email protected]" as the user.email by default, unless explicitly instructed otherwise.
 * The assistant MUST NOT include comments in the code unless they are necessary to describe non-obvious behavior.
+{{ additional_instruction }}
 </IMPORTANT>

openhands/core/config/sandbox_config.py

@@ -32,6 +32,10 @@ class SandboxConfig:
         browsergym_eval_env: The BrowserGym environment to use for evaluation.
             Default is None for general purpose browsing. Check evaluation/miniwob and evaluation/webarena for examples.
         platform: The platform on which the image should be built. Default is None.
+        port_mappings: Custom port mappings from container ports to host ports. Default is empty dict.
+            This is a dictionary where keys are container ports and values are host ports.
+            For example, {8080: 8080} maps container port 8080 to host port 8080.
+            Note: Port 4141 is always mapped to host port 4141 by default.
     """
 
     remote_runtime_api_url: str = 'http://localhost:8000'
@@ -56,6 +60,7 @@ class SandboxConfig:
     browsergym_eval_env: str | None = None
     platform: str | None = None
     close_delay: int = 15
+    port_mappings: dict[int, int] = field(default_factory=dict)
 
     def defaults_to_dict(self) -> dict:
         """Serialize fields to a dict for the frontend, including type hints, defaults, and whether it's optional."""

openhands/runtime/base.py

@@ -358,3 +358,7 @@ def vscode_enabled(self) -> bool:
     @property
     def vscode_url(self) -> str | None:
         raise NotImplementedError('This method is not implemented in the base class.')
+
+    @property
+    def port_mapping(self) -> list[str]:
+        raise NotImplementedError('This method is not implemented in the base class.')

openhands/runtime/impl/eventstream/eventstream_runtime.py

@@ -109,6 +109,7 @@ def __init__(
         self.config = config
         self._host_port = 30000  # initial dummy value
         self._container_port = 30001  # initial dummy value
+        self.default_port_mapping = {4141: 4141, 4142: 4142}
         self._vscode_url: str | None = None  # initial dummy value
         self._runtime_initialized: bool = False
         self.api_url = f'{self.config.sandbox.local_runtime_url}:{self._container_port}'
@@ -230,11 +231,38 @@ def _init_container(self):
         use_host_network = self.config.sandbox.use_host_network
         network_mode: str | None = 'host' if use_host_network else None
 
-        port_mapping: dict[str, list[dict[str, str]]] | None = (
-            None
-            if use_host_network
-            else {f'{self._container_port}/tcp': [{'HostPort': str(self._host_port)}]}
-        )
+        use_host_network = self.config.sandbox.use_host_network
+
+        # Initialize port mappings
+        port_mapping: dict[str, list[dict[str, str]]] | None = None
+        if not use_host_network:
+            port_mapping = {
+                f'{self._container_port}/tcp': [{'HostPort': str(self._host_port)}],
+            }
+
+            # Dynamically add a port from ports dictionary
+            for container_port, host_port in self.default_port_mapping.items():
+                port_mapping[f'{container_port}/tcp'] = [{'HostPort': str(host_port)}]
+
+            # Add custom port mappings from config if specified
+            if (
+                hasattr(self.config.sandbox, 'port_mappings')
+                and self.config.sandbox.port_mappings
+            ):
+                for (
+                    container_port,
+                    host_port,
+                ) in self.config.sandbox.port_mappings.items():
+                    port_mapping[f'{container_port}/tcp'] = [
+                        {'HostPort': str(host_port)}
+                    ]
+
+        if self.vscode_enabled:
+            # vscode is on port +1 from container port
+            if isinstance(port_mapping, dict):
+                port_mapping[f'{self._container_port + 1}/tcp'] = [
+                    {'HostPort': str(self._host_port + 1)}
+                ]
 
         if use_host_network:
             self.log(
@@ -250,13 +278,6 @@ def _init_container(self):
         if self.config.debug or DEBUG:
             environment['DEBUG'] = 'true'
 
-        if self.vscode_enabled:
-            # vscode is on port +1 from container port
-            if isinstance(port_mapping, dict):
-                port_mapping[f'{self._container_port + 1}/tcp'] = [
-                    {'HostPort': str(self._host_port + 1)}
-                ]
-
         self.log('debug', f'Workspace Base: {self.config.workspace_base}')
         if (
             self.config.workspace_mount_path is not None
@@ -324,6 +345,7 @@ def _init_container(self):
                     'error',
                     f'Error: Instance {self.container_name} FAILED to start container!\n',
                 )
+                self.log('error', str(e))
         except Exception as e:
             self.log(
                 'error',
@@ -612,3 +634,15 @@ def vscode_url(self) -> str | None:
                 return self._vscode_url
         else:
             return None
+
+    @property
+    def port_mapping(self):
+        ports = []
+
+        for port in self.default_port_mapping.values():
+            ports.append(f'http://localhost:{port}')
+
+        for port in self.config.sandbox.port_mappings.values():
+            ports.append(f'http://localhost:{port}')
+
+        return ports

openhands/runtime/impl/remote/remote_runtime.py

@@ -94,6 +94,7 @@ def __init__(
         )
         self.runtime_id: str | None = None
         self.runtime_url: str | None = None
+        self.open_ports: list[str] = []  # list of open port urls
         self._runtime_initialized: bool = False
         self._vscode_url: str | None = None  # initial dummy value
 
@@ -279,6 +280,8 @@ def _parse_runtime_response(self, response: requests.Response):
         start_response = response.json()
         self.runtime_id = start_response['runtime_id']
         self.runtime_url = start_response['url']
+        self.open_ports = start_response.get('work_ports', [])
+
         if 'session_api_key' in start_response:
             self.session.headers.update(
                 {'X-Session-API-Key': start_response['session_api_key']}
@@ -315,6 +318,10 @@ def vscode_url(self) -> str | None:
         else:
             return None
 
+    @property
+    def port_mappings(self) -> list[str]:
+        return self.open_ports
+
     def _wait_until_alive(self):
         retry_decorator = tenacity.retry(
             stop=tenacity.stop_after_delay(

openhands/server/routes/conversation.py

@@ -52,6 +52,34 @@ async def get_vscode_url(request: Request):
         )
 
 
+@app.get('/ports')
+async def get_ports(request: Request):
+    """Get the ports used by the runtime.
+
+    This endpoint allows getting the ports used by the runtime.
+
+    Args:
+        request (Request): The incoming FastAPI request object.
+
+    Returns:
+        JSONResponse: A JSON response indicating the success of the operation.
+    """
+    try:
+        runtime: Runtime = request.state.conversation.runtime
+        logger.debug(f'Runtime type: {type(runtime)}')
+        logger.debug(f'Runtime ports: {runtime.port_mapping}')
+        return JSONResponse(status_code=200, content={'ports': runtime.port_mapping})
+    except Exception as e:
+        logger.error(f'Error getting runtime ports: {e}', exc_info=True)
+        return JSONResponse(
+            status_code=500,
+            content={
+                'ports': None,
+                'error': f'Error getting runtime ports: {e}',
+            },
+        )
+
+
 @app.get('/events/search')
 async def search_events(
     request: Request,