Fix issue #5797: [Feature Request]: Set RemoteRuntime size in frontend

frontend/src/components/shared/inputs/runtime-size-input.tsx

@@ -0,0 +1,39 @@
+import { useTranslation } from "react-i18next";
+import { I18nKey } from "#/i18n/declaration";
+import { useAppMode } from "#/hooks/use-app-mode";
+import { AppMode } from "#/types/app-mode";
+
+interface RuntimeSizeInputProps {
+  isDisabled?: boolean;
+  defaultValue?: string;
+}
+
+export function RuntimeSizeInput({
+  isDisabled,
+  defaultValue = "1x",
+}: RuntimeSizeInputProps) {
+  const { t } = useTranslation();
+  const { appMode } = useAppMode();
+
+  if (appMode !== AppMode.SAAS) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      <label className="text-sm font-medium" htmlFor="runtime-size">
+        {t(I18nKey.SETTINGS_FORM$RUNTIME_SIZE_LABEL)}
+      </label>
+      <select
+        id="runtime-size"
+        name="runtime-size"
+        defaultValue={defaultValue}
+        disabled={isDisabled}
+        className="w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
+      >
+        <option value="1x">1x (2 cores, 8GB RAM)</option>
+        <option value="2x">2x (4 cores, 16GB RAM)</option>
+      </select>
+    </div>
+  );
+}

frontend/src/components/shared/modals/settings/settings-form.tsx

@@ -21,6 +21,7 @@ import { APIKeyInput } from "../../inputs/api-key-input";
 import { BaseUrlInput } from "../../inputs/base-url-input";
 import { ConfirmationModeSwitch } from "../../inputs/confirmation-mode-switch";
 import { CustomModelInput } from "../../inputs/custom-model-input";
+import { RuntimeSizeInput } from "../../inputs/runtime-size-input";
 import { SecurityAnalyzerInput } from "../../inputs/security-analyzers-input";
 import { ModalBackdrop } from "../modal-backdrop";
 import { ModelSelector } from "./model-selector";
@@ -219,6 +220,11 @@ export function SettingsForm({
                 isDisabled={!!disabled}
                 defaultSelected={settings.CONFIRMATION_MODE}
               />
+
+              <RuntimeSizeInput
+                isDisabled={!!disabled}
+                defaultValue={settings.RUNTIME_SIZE}
+              />
             </>
           )}
         </div>

frontend/src/hooks/use-app-mode.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+import { AppMode } from "#/types/app-mode";
+
+export function useAppMode() {
+  const [appMode, setAppMode] = useState<AppMode>(AppMode.OSS);
+
+  useEffect(() => {
+    fetch("/api/config")
+      .then((response) => response.json())
+      .then((data) => {
+        setAppMode(data.APP_MODE);
+      })
+      .catch((error) => {
+        console.error("Error fetching app mode:", error);
+      });
+  }, []);
+
+  return { appMode };
+}

frontend/src/i18n/translation.json

@@ -1904,6 +1904,20 @@
     "en": "(Optional)",
     "es": "(Opcional)"
   },
+  "SETTINGS_FORM$RUNTIME_SIZE_LABEL": {
+    "en": "Runtime Size",
+    "zh-CN": "运行时大小",
+    "de": "Laufzeitgröße",
+    "ko-KR": "런타임 크기",
+    "no": "Kjøretidsstørrelse",
+    "zh-TW": "執行環境大小",
+    "it": "Dimensione Runtime",
+    "pt": "Tamanho do Runtime",
+    "es": "Tamaño del Runtime",
+    "ar": "حجم وقت التشغيل",
+    "fr": "Taille du Runtime",
+    "tr": "Çalışma Zamanı Boyutu"
+  },
   "SETTINGS_FORM$ADVANCED_OPTIONS_LABEL": {
     "en": "Advanced Options",
     "es": "Opciones avanzadas"

frontend/src/services/settings.ts

@@ -8,6 +8,7 @@ export type Settings = {
   LLM_API_KEY: string;
   CONFIRMATION_MODE: boolean;
   SECURITY_ANALYZER: string;
+  RUNTIME_SIZE: string;
 };
 
 export const DEFAULT_SETTINGS: Settings = {
@@ -18,6 +19,7 @@ export const DEFAULT_SETTINGS: Settings = {
   LLM_API_KEY: "",
   CONFIRMATION_MODE: false,
   SECURITY_ANALYZER: "",
+  RUNTIME_SIZE: "1x",
 };
 
 const validKeys = Object.keys(DEFAULT_SETTINGS) as (keyof Settings)[];
@@ -76,6 +78,7 @@ export const getSettings = (): Settings => {
   const apiKey = localStorage.getItem("LLM_API_KEY");
   const confirmationMode = localStorage.getItem("CONFIRMATION_MODE") === "true";
   const securityAnalyzer = localStorage.getItem("SECURITY_ANALYZER");
+  const runtimeSize = localStorage.getItem("RUNTIME_SIZE");
 
   return {
     LLM_MODEL: model || DEFAULT_SETTINGS.LLM_MODEL,
@@ -85,6 +88,7 @@ export const getSettings = (): Settings => {
     LLM_API_KEY: apiKey || DEFAULT_SETTINGS.LLM_API_KEY,
     CONFIRMATION_MODE: confirmationMode || DEFAULT_SETTINGS.CONFIRMATION_MODE,
     SECURITY_ANALYZER: securityAnalyzer || DEFAULT_SETTINGS.SECURITY_ANALYZER,
+    RUNTIME_SIZE: runtimeSize || DEFAULT_SETTINGS.RUNTIME_SIZE,
   };
 };
 

frontend/src/types/app-mode.ts

@@ -0,0 +1,4 @@
+export enum AppMode {
+  OSS = "OSS",
+  SAAS = "SAAS",
+}

openhands/core/config/sandbox_config.py

@@ -60,6 +60,11 @@ class SandboxConfig:
     close_delay: int = 15
     remote_runtime_resource_factor: int = 1
 
+    def update_from_settings(self, settings: 'Settings'):
+        """Update sandbox config from settings."""
+        if settings.runtime_size == '2x':
+            self.remote_runtime_resource_factor = 2
+
     def defaults_to_dict(self) -> dict:
         """Serialize fields to a dict for the frontend, including type hints, defaults, and whether it's optional."""
         dict = {}

openhands/server/settings.py

@@ -15,3 +15,4 @@ class Settings:
     llm_model: str | None = None
     llm_api_key: str | None = None
     llm_base_url: str | None = None
+    runtime_size: str | None = None