Add runtime size configuration feature

frontend/__tests__/components/shared/modals/settings/settings-form.test.tsx

@@ -0,0 +1,85 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { SettingsForm } from "#/components/shared/modals/settings/settings-form";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { I18nextProvider } from "react-i18next";
+import i18n from "#/i18n";
+import { SettingsProvider } from "#/context/settings-context";
+import { DEFAULT_SETTINGS } from "#/services/settings";
+import { describe, it, expect, vi } from "vitest";
+import { MemoryRouter } from "react-router";
+import { Provider } from "react-redux";
+import { configureStore } from "@reduxjs/toolkit";
+import { rootReducer } from "#/store";
+
+vi.mock("#/hooks/query/use-config", () => ({
+  useConfig: () => ({
+    data: {
+      APP_MODE: "saas",
+    },
+  }),
+}));
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+  // This mock makes sure that using the I18nextProvider in the test works
+  I18nextProvider: ({ children }: { children: React.ReactNode }) => children,
+  initReactI18next: {
+    type: "3rdParty",
+    init: () => {},
+  },
+}));
+
+vi.mock("#/i18n", () => ({
+  default: {
+    use: () => ({
+      init: () => {},
+    }),
+  },
+}));
+
+const queryClient = new QueryClient();
+const store = configureStore({
+  reducer: rootReducer,
+});
+
+const renderSettingsForm = () => {
+  return render(
+    <Provider store={store}>
+      <MemoryRouter>
+        <QueryClientProvider client={queryClient}>
+          <I18nextProvider i18n={i18n}>
+            <SettingsProvider>
+              <SettingsForm
+                settings={DEFAULT_SETTINGS}
+                models={[]}
+                agents={[]}
+                securityAnalyzers={[]}
+                onClose={() => {}}
+              />
+            </SettingsProvider>
+          </I18nextProvider>
+        </QueryClientProvider>
+      </MemoryRouter>
+    </Provider>
+  );
+};
+
+describe("SettingsForm", () => {
+  it("should not show runtime size selector by default", () => {
+    renderSettingsForm();
+    expect(screen.queryByText("Runtime Size")).not.toBeInTheDocument();
+  });
+
+  it("should show runtime size selector when advanced options are enabled", async () => {
+    renderSettingsForm();
+    const advancedSwitch = screen.getByRole("switch", {
+      name: "SETTINGS_FORM$ADVANCED_OPTIONS_LABEL",
+    });
+    fireEvent.click(advancedSwitch);
+    console.log("Advanced switch clicked");
+    screen.debug();
+    await screen.findByText("SETTINGS_FORM$RUNTIME_SIZE_LABEL");
+  });
+});

frontend/__tests__/services/settings.test.ts

@@ -0,0 +1,126 @@
+import { describe, expect, it, vi, Mock, afterEach } from "vitest";
+import {
+  DEFAULT_SETTINGS,
+  Settings,
+  getSettings,
+  saveSettings,
+  getLocalStorageSettings,
+} from "../../src/services/settings";
+import { openHands } from "#/api/open-hands-axios";
+
+vi.mock("#/api/open-hands-axios", () => ({
+  openHands: {
+    get: vi.fn(),
+    post: vi.fn(),
+  },
+}));
+
+Storage.prototype.getItem = vi.fn();
+Storage.prototype.setItem = vi.fn();
+
+describe("getSettings", () => {
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it("should get settings from API", async () => {
+    const apiSettings = {
+      llm_model: "llm_value",
+      llm_base_url: "base_url",
+      agent: "agent_value",
+      language: "language_value",
+      confirmation_mode: true,
+      security_analyzer: "invariant",
+    };
+
+    (openHands.get as Mock).mockResolvedValueOnce({ data: apiSettings });
+
+    const settings = await getSettings();
+
+    expect(settings).toEqual({
+      LLM_MODEL: "llm_value",
+      LLM_BASE_URL: "base_url",
+      AGENT: "agent_value",
+      LANGUAGE: "language_value",
+      LLM_API_KEY: "",
+      CONFIRMATION_MODE: true,
+      SECURITY_ANALYZER: "invariant",
+      REMOTE_RUNTIME_RESOURCE_FACTOR: DEFAULT_SETTINGS.REMOTE_RUNTIME_RESOURCE_FACTOR,
+    });
+  });
+
+  it("should fallback to localStorage if API fails", async () => {
+    (openHands.get as Mock).mockResolvedValueOnce({ data: null });
+    (localStorage.getItem as Mock)
+      .mockReturnValueOnce("llm_value")
+      .mockReturnValueOnce("base_url")
+      .mockReturnValueOnce("agent_value")
+      .mockReturnValueOnce("language_value")
+      .mockReturnValueOnce("api_key")
+      .mockReturnValueOnce("true")
+      .mockReturnValueOnce("invariant");
+
+    const settings = await getSettings();
+
+    expect(settings).toEqual({
+      LLM_MODEL: "llm_value",
+      LLM_BASE_URL: "base_url",
+      AGENT: "agent_value",
+      LANGUAGE: "language_value",
+      LLM_API_KEY: "api_key",
+      CONFIRMATION_MODE: true,
+      SECURITY_ANALYZER: "invariant",
+      REMOTE_RUNTIME_RESOURCE_FACTOR: DEFAULT_SETTINGS.REMOTE_RUNTIME_RESOURCE_FACTOR,
+    });
+  });
+});
+
+describe("saveSettings", () => {
+  it("should save settings to API", async () => {
+    const settings: Settings = {
+      LLM_MODEL: "llm_value",
+      LLM_BASE_URL: "base_url",
+      AGENT: "agent_value",
+      LANGUAGE: "language_value",
+      LLM_API_KEY: "some_key",
+      CONFIRMATION_MODE: true,
+      SECURITY_ANALYZER: "invariant",
+      REMOTE_RUNTIME_RESOURCE_FACTOR: 2,
+    };
+
+    (openHands.post as Mock).mockResolvedValueOnce({ data: true });
+
+    const result = await saveSettings(settings);
+
+    expect(result).toBe(true);
+    expect(openHands.post).toHaveBeenCalledWith("/api/settings", {
+      llm_model: "llm_value",
+      llm_base_url: "base_url",
+      agent: "agent_value",
+      language: "language_value",
+      llm_api_key: "some_key",
+      confirmation_mode: true,
+      security_analyzer: "invariant",
+      remote_runtime_resource_factor: 2,
+    });
+  });
+
+  it("should handle API errors", async () => {
+    const settings: Settings = {
+      LLM_MODEL: "llm_value",
+      LLM_BASE_URL: "base_url",
+      AGENT: "agent_value",
+      LANGUAGE: "language_value",
+      LLM_API_KEY: "some_key",
+      CONFIRMATION_MODE: true,
+      SECURITY_ANALYZER: "invariant",
+      REMOTE_RUNTIME_RESOURCE_FACTOR: 2,
+    };
+
+    (openHands.post as Mock).mockRejectedValueOnce(new Error("API Error"));
+
+    const result = await saveSettings(settings);
+
+    expect(result).toBe(false);
+  });
+});

frontend/src/components/shared/inputs/advanced-option-switch.tsx

@@ -20,7 +20,7 @@ export function AdvancedOptionSwitch({
     <Switch
       isDisabled={isDisabled}
       name="use-advanced-options"
-      isSelected={showAdvancedOptions}
+      defaultSelected={showAdvancedOptions}
       onValueChange={setShowAdvancedOptions}
       classNames={{
         thumb: cn(

frontend/src/components/shared/modals/settings/runtime-size-selector.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Select, SelectItem } from "@nextui-org/react";
+import { useConfig } from "#/hooks/query/use-config";
+
+interface RuntimeSizeSelectorProps {
+  isDisabled: boolean;
+  defaultValue?: number;
+}
+
+export function RuntimeSizeSelector({
+  isDisabled,
+  defaultValue,
+}: RuntimeSizeSelectorProps) {
+  const { t } = useTranslation();
+  const { data: config } = useConfig();
+  const isSaasMode = config?.APP_MODE === "saas";
+
+  if (!isSaasMode) {
+    return null;
+  }
+
+  return (
+    <fieldset className="flex flex-col gap-2">
+      <label
+        htmlFor="runtime-size"
+        className="font-[500] text-[#A3A3A3] text-xs"
+      >
+        {t("SETTINGS_FORM$RUNTIME_SIZE_LABEL")}
+      </label>
+      <Select
+        id="runtime-size"
+        name="runtime-size"
+        defaultSelectedKeys={[String(defaultValue || 1)]}
+        isDisabled={isDisabled}
+        aria-label={t("SETTINGS_FORM$RUNTIME_SIZE_LABEL")}
+        classNames={{
+          trigger: "bg-[#27272A] rounded-md text-sm px-3 py-[10px]",
+        }}
+      >
+        <SelectItem key="1" value={1}>
+          {t("1x (2 core, 8G)")}
+        </SelectItem>
+        <SelectItem key="2" value={2}>
+          {t("2x (4 core, 16G)")}
+        </SelectItem>
+      </Select>
+    </fieldset>
+  );
+}

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

@@ -21,6 +21,8 @@ import { SecurityAnalyzerInput } from "../../inputs/security-analyzers-input";
 import { ModalBackdrop } from "../modal-backdrop";
 import { ModelSelector } from "./model-selector";
 
+import { RuntimeSizeSelector } from "./runtime-size-selector";
+
 interface SettingsFormProps {
   disabled?: boolean;
   settings: Settings;
@@ -98,6 +100,8 @@ export function SettingsForm({
     posthog.capture("settings_saved", {
       LLM_MODEL: newSettings.LLM_MODEL,
       LLM_API_KEY: newSettings.LLM_API_KEY ? "SET" : "UNSET",
+      REMOTE_RUNTIME_RESOURCE_FACTOR:
+        newSettings.REMOTE_RUNTIME_RESOURCE_FACTOR,
     });
   };
 
@@ -168,16 +172,19 @@ export function SettingsForm({
             defaultValue={settings.LLM_API_KEY || ""}
           />
 
-          {showAdvancedOptions && (
-            <AgentInput
-              isDisabled={!!disabled}
-              defaultValue={settings.AGENT}
-              agents={agents}
-            />
-          )}
-
           {showAdvancedOptions && (
             <>
+              <AgentInput
+                isDisabled={!!disabled}
+                defaultValue={settings.AGENT}
+                agents={agents}
+              />
+
+              <RuntimeSizeSelector
+                isDisabled={!!disabled}
+                defaultValue={settings.REMOTE_RUNTIME_RESOURCE_FACTOR}
+              />
+
               <SecurityAnalyzerInput
                 isDisabled={!!disabled}
                 defaultValue={settings.SECURITY_ANALYZER}

frontend/src/services/settings.ts

@@ -10,6 +10,7 @@ export type Settings = {
   LLM_API_KEY: string | null;
   CONFIRMATION_MODE: boolean;
   SECURITY_ANALYZER: string;
+  REMOTE_RUNTIME_RESOURCE_FACTOR: number;
 };
 
 export type ApiSettings = {
@@ -20,6 +21,7 @@ export type ApiSettings = {
   llm_api_key: string | null;
   confirmation_mode: boolean;
   security_analyzer: string;
+  remote_runtime_resource_factor: number;
 };
 
 export const DEFAULT_SETTINGS: Settings = {
@@ -30,6 +32,7 @@ export const DEFAULT_SETTINGS: Settings = {
   LLM_API_KEY: null,
   CONFIRMATION_MODE: false,
   SECURITY_ANALYZER: "",
+  REMOTE_RUNTIME_RESOURCE_FACTOR: 1,
 };
 
 export const getCurrentSettingsVersion = () => {
@@ -63,6 +66,8 @@ export const getLocalStorageSettings = (): Settings => {
     LLM_API_KEY: llmApiKey || DEFAULT_SETTINGS.LLM_API_KEY,
     CONFIRMATION_MODE: confirmationMode || DEFAULT_SETTINGS.CONFIRMATION_MODE,
     SECURITY_ANALYZER: securityAnalyzer || DEFAULT_SETTINGS.SECURITY_ANALYZER,
+    REMOTE_RUNTIME_RESOURCE_FACTOR:
+      DEFAULT_SETTINGS.REMOTE_RUNTIME_RESOURCE_FACTOR,
   };
 };
 
@@ -82,6 +87,8 @@ export const saveSettings = async (
       confirmation_mode: settings.CONFIRMATION_MODE || null,
       security_analyzer: settings.SECURITY_ANALYZER || null,
       llm_api_key: settings.LLM_API_KEY || null,
+      remote_runtime_resource_factor:
+        settings.REMOTE_RUNTIME_RESOURCE_FACTOR || null,
     };
 
     const { data } = await openHands.post("/api/settings", apiSettings);
@@ -117,6 +124,8 @@ export const maybeMigrateSettings = async (logout: () => void) => {
 
   if (currentVersion < 5) {
     const localSettings = getLocalStorageSettings();
+    localSettings.REMOTE_RUNTIME_RESOURCE_FACTOR =
+      DEFAULT_SETTINGS.REMOTE_RUNTIME_RESOURCE_FACTOR;
     await saveSettings(localSettings);
   }
 };
@@ -141,6 +150,8 @@ export const getSettings = async (): Promise<Settings> => {
       CONFIRMATION_MODE: apiSettings.confirmation_mode,
       SECURITY_ANALYZER: apiSettings.security_analyzer,
       LLM_API_KEY: "",
+      REMOTE_RUNTIME_RESOURCE_FACTOR:
+        DEFAULT_SETTINGS.REMOTE_RUNTIME_RESOURCE_FACTOR,
     };
   }
   return getLocalStorageSettings();