Merge branch 'main' into rb/fix-client-loader

.github/workflows/openhands-resolver.yml

@@ -11,5 +11,5 @@ jobs:
     uses: All-Hands-AI/openhands-resolver/.github/workflows/openhands-resolver.yml@main
     if: github.event.label.name == 'fix-me'
     with:
-      max_iterations: 50
+      issue_number: ${{ github.event.issue.number || github.event.pull_request.number }}
     secrets: inherit

Development.md

@@ -100,7 +100,7 @@ poetry run pytest ./tests/unit/test_*.py
 ### 9. Use existing Docker image
 To reduce build time (e.g., if no changes were made to the client-runtime component), you can use an existing Docker container image. Follow these steps:
 1. Set the SANDBOX_RUNTIME_CONTAINER_IMAGE environment variable to the desired Docker image.
-2. Example: export SANDBOX_RUNTIME_CONTAINER_IMAGE=ghcr.io/all-hands-ai/runtime:0.13-nikolaik
+2. Example: export SANDBOX_RUNTIME_CONTAINER_IMAGE=ghcr.io/all-hands-ai/runtime:0.12-nikolaik
 
 ## Develop inside Docker container
 

README.md

@@ -38,16 +38,15 @@ See the [Installation](https://docs.all-hands.dev/modules/usage/installation) gu
 system requirements and more information.
 
 ```bash
-docker pull docker.all-hands.dev/all-hands-ai/runtime:0.13-nikolaik
+docker pull docker.all-hands.dev/all-hands-ai/runtime:0.12-nikolaik
 
 docker run -it --pull=always \
-    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.13-nikolaik \
+    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.12-nikolaik \
     -v /var/run/docker.sock:/var/run/docker.sock \
     -p 3000:3000 \
-    -e LOG_ALL_EVENTS=true \
     --add-host host.docker.internal:host-gateway \
     --name openhands-app \
-    docker.all-hands.dev/all-hands-ai/openhands:0.13
+    docker.all-hands.dev/all-hands-ai/openhands:0.12
 ```
 
 You'll find OpenHands running at [http://localhost:3000](http://localhost:3000)!

compose.yml

@@ -7,7 +7,7 @@ services:
     image: openhands:latest
     container_name: openhands-app-${DATE:-}
     environment:
-      - SANDBOX_RUNTIME_CONTAINER_IMAGE=${SANDBOX_RUNTIME_CONTAINER_IMAGE:-ghcr.io/all-hands-ai/runtime:0.13-nikolaik}
+      - SANDBOX_RUNTIME_CONTAINER_IMAGE=${SANDBOX_RUNTIME_CONTAINER_IMAGE:-ghcr.io/all-hands-ai/runtime:0.12-nikolaik}
       - SANDBOX_USER_ID=${SANDBOX_USER_ID:-1234}
       - WORKSPACE_MOUNT_PATH=${WORKSPACE_BASE:-$PWD/workspace}
     ports:

config.template.toml

@@ -32,8 +32,7 @@ workspace_base = "./workspace"
 # Enable saving and restoring the session when run from CLI
 #enable_cli_session = false
 
-# Path to store trajectories, can be a folder or a file
-# If it's a folder, the session id will be used as the file name
+# Path to store trajectories
 #trajectories_path="./trajectories"
 
 # File store path

containers/dev/compose.yml

@@ -11,7 +11,7 @@ services:
       - BACKEND_HOST=${BACKEND_HOST:-"0.0.0.0"}
       - SANDBOX_API_HOSTNAME=host.docker.internal
       #
-      - SANDBOX_RUNTIME_CONTAINER_IMAGE=${SANDBOX_RUNTIME_CONTAINER_IMAGE:-ghcr.io/all-hands-ai/runtime:0.13-nikolaik}
+      - SANDBOX_RUNTIME_CONTAINER_IMAGE=${SANDBOX_RUNTIME_CONTAINER_IMAGE:-ghcr.io/all-hands-ai/runtime:0.12-nikolaik}
       - SANDBOX_USER_ID=${SANDBOX_USER_ID:-1234}
       - WORKSPACE_MOUNT_PATH=${WORKSPACE_BASE:-$PWD/workspace}
     ports:

docs/modules/usage/how-to/cli-mode.md

@@ -50,7 +50,7 @@ LLM_API_KEY="sk_test_12345"
 ```bash
 docker run -it \
     --pull=always \
-    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.13-nikolaik \
+    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.12-nikolaik \
     -e SANDBOX_USER_ID=$(id -u) \
     -e WORKSPACE_MOUNT_PATH=$WORKSPACE_BASE \
     -e LLM_API_KEY=$LLM_API_KEY \
@@ -59,7 +59,7 @@ docker run -it \
     -v /var/run/docker.sock:/var/run/docker.sock \
     --add-host host.docker.internal:host-gateway \
     --name openhands-app-$(date +%Y%m%d%H%M%S) \
-    docker.all-hands.dev/all-hands-ai/openhands:0.13 \
+    docker.all-hands.dev/all-hands-ai/openhands:0.12 \
     python -m openhands.core.cli
 ```
 

docs/modules/usage/how-to/headless-mode.md

@@ -44,16 +44,15 @@ LLM_API_KEY="sk_test_12345"
 ```bash
 docker run -it \
     --pull=always \
-    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.13-nikolaik \
+    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.12-nikolaik \
     -e SANDBOX_USER_ID=$(id -u) \
     -e WORKSPACE_MOUNT_PATH=$WORKSPACE_BASE \
     -e LLM_API_KEY=$LLM_API_KEY \
     -e LLM_MODEL=$LLM_MODEL \
-    -e LOG_ALL_EVENTS=true \
     -v $WORKSPACE_BASE:/opt/workspace_base \
     -v /var/run/docker.sock:/var/run/docker.sock \
     --add-host host.docker.internal:host-gateway \
     --name openhands-app-$(date +%Y%m%d%H%M%S) \
-    docker.all-hands.dev/all-hands-ai/openhands:0.13 \
+    docker.all-hands.dev/all-hands-ai/openhands:0.12 \
     python -m openhands.core.main -t "write a bash script that prints hi"
 ```

docs/modules/usage/installation.mdx

@@ -11,16 +11,15 @@
 The easiest way to run OpenHands is in Docker.
 
 ```bash
-docker pull docker.all-hands.dev/all-hands-ai/runtime:0.13-nikolaik
+docker pull docker.all-hands.dev/all-hands-ai/runtime:0.12-nikolaik
 
 docker run -it --rm --pull=always \
-    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.13-nikolaik \
+    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.12-nikolaik \
     -v /var/run/docker.sock:/var/run/docker.sock \
     -p 3000:3000 \
-    -e LOG_ALL_EVENTS=true \
     --add-host host.docker.internal:host-gateway \
     --name openhands-app \
-    docker.all-hands.dev/all-hands-ai/openhands:0.13
+    docker.all-hands.dev/all-hands-ai/openhands:0.12
 ```
 
 You can also run OpenHands in a scriptable [headless mode](https://docs.all-hands.dev/modules/usage/how-to/headless-mode), as an [interactive CLI](https://docs.all-hands.dev/modules/usage/how-to/cli-mode), or using the [OpenHands GitHub Action](https://docs.all-hands.dev/modules/usage/how-to/github-action).

docs/modules/usage/llms/llms.md

@@ -4,11 +4,11 @@ OpenHands can connect to any LLM supported by LiteLLM. However, it requires a po
 
 ## Model Recommendations
 
-Based on our evaluations of language models for coding tasks (using the SWE-bench dataset), we can provide some recommendations for model selection. Some analyses can be found in [this blog article comparing LLMs](https://www.all-hands.dev/blog/evaluation-of-llms-as-coding-agents-on-swe-bench-at-30x-speed) and [this blog article with some more recent results](https://www.all-hands.dev/blog/openhands-codeact-21-an-open-state-of-the-art-software-development-agent).
+Based on a recent evaluation of language models for coding tasks (using the SWE-bench dataset), we can provide some recommendations for model selection. The full analysis can be found in [this blog article](https://www.all-hands.dev/blog/evaluation-of-llms-as-coding-agents-on-swe-bench-at-30x-speed).
 
 When choosing a model, consider both the quality of outputs and the associated costs. Here's a summary of the findings:
 
-- Claude 3.5 Sonnet is the best by a fair amount, achieving a 53% resolve rate on SWE-Bench Verified with the default agent in OpenHands.
+- Claude 3.5 Sonnet is the best by a fair amount, achieving a 27% resolve rate with the default agent in OpenHands.
 - GPT-4o lags behind, and o1-mini actually performed somewhat worse than GPT-4o. We went in and analyzed the results a little, and briefly it seemed like o1 was sometimes "overthinking" things, performing extra environment configuration tasks when it could just go ahead and finish the task.
 - Finally, the strongest open models were Llama 3.1 405 B and deepseek-v2.5, and they performed reasonably, even besting some of the closed models.
 

evaluation/EDA/run_infer.py

@@ -35,8 +35,7 @@ def codeact_user_response_eda(state: State) -> str:
 
     # retrieve the latest model message from history
     if state.history:
-        last_agent_message = state.get_last_agent_message()
-        model_guess = last_agent_message.content if last_agent_message else ''
+        model_guess = state.get_last_agent_message()
 
     assert game is not None, 'Game is not initialized.'
     msg = game.generate_user_response(model_guess)
@@ -141,8 +140,7 @@ def process_instance(
     if state is None:
         raise ValueError('State should not be None.')
 
-    last_agent_message = state.get_last_agent_message()
-    final_message = last_agent_message.content if last_agent_message else ''
+    final_message = state.get_last_agent_message()
 
     logger.info(f'Final message: {final_message} | Ground truth: {instance["text"]}')
     test_result = game.reward()

evaluation/gorilla/run_infer.py

@@ -102,8 +102,7 @@ def process_instance(
         raise ValueError('State should not be None.')
 
     # retrieve the last message from the agent
-    last_agent_message = state.get_last_agent_message()
-    model_answer_raw = last_agent_message.content if last_agent_message else ''
+    model_answer_raw = state.get_last_agent_message()
 
     # attempt to parse model_answer
     ast_eval_fn = instance['ast_eval']

evaluation/swe_bench/eval_infer.py

@@ -83,7 +83,6 @@ def get_config(instance: pd.Series) -> AppConfig:
             timeout=1800,
             api_key=os.environ.get('ALLHANDS_API_KEY', None),
             remote_runtime_api_url=os.environ.get('SANDBOX_REMOTE_RUNTIME_API_URL'),
-            remote_runtime_init_timeout=1800,
         ),
         # do not mount workspace
         workspace_base=None,

evaluation/swe_bench/run_infer.py

@@ -146,7 +146,6 @@ def get_config(
             api_key=os.environ.get('ALLHANDS_API_KEY', None),
             remote_runtime_api_url=os.environ.get('SANDBOX_REMOTE_RUNTIME_API_URL'),
             keep_remote_runtime_alive=False,
-            remote_runtime_init_timeout=1800,
         ),
         # do not mount workspace
         workspace_base=None,

evaluation/toolqa/run_infer.py

@@ -127,8 +127,7 @@ def process_instance(instance: Any, metadata: EvalMetadata, reset_logger: bool =
         raise ValueError('State should not be None.')
 
     # retrieve the last message from the agent
-    last_agent_message = state.get_last_agent_message()
-    model_answer_raw = last_agent_message.content if last_agent_message else ''
+    model_answer_raw = state.get_last_agent_message()
 
     # attempt to parse model_answer
     correct = eval_answer(str(model_answer_raw), str(answer))

frontend/__tests__/components/chat/chat-input.test.tsx

@@ -1,5 +1,5 @@
 import userEvent from "@testing-library/user-event";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import { describe, afterEach, vi, it, expect } from "vitest";
 import { ChatInput } from "#/components/chat-input";
 
@@ -158,46 +158,4 @@ describe("ChatInput", () => {
     await user.tab();
     expect(onBlurMock).toHaveBeenCalledOnce();
   });
-
-  it("should handle text paste correctly", () => {
-    const onSubmit = vi.fn();
-    const onChange = vi.fn();
-
-    render(<ChatInput onSubmit={onSubmit} onChange={onChange} />);
-
-    const input = screen.getByTestId("chat-input").querySelector("textarea");
-    expect(input).toBeTruthy();
-
-    // Fire paste event with text data
-    fireEvent.paste(input!, {
-      clipboardData: {
-        getData: (type: string) => type === 'text/plain' ? 'test paste' : '',
-        files: []
-      }
-    });
-  });
-
-  it("should handle image paste correctly", () => {
-    const onSubmit = vi.fn();
-    const onImagePaste = vi.fn();
-
-    render(<ChatInput onSubmit={onSubmit} onImagePaste={onImagePaste} />);
-
-    const input = screen.getByTestId("chat-input").querySelector("textarea");
-    expect(input).toBeTruthy();
-
-    // Create a paste event with an image file
-    const file = new File(["dummy content"], "image.png", { type: "image/png" });
-
-    // Fire paste event with image data
-    fireEvent.paste(input!, {
-      clipboardData: {
-        getData: () => '',
-        files: [file]
-      }
-    });
-
-    // Verify image paste was handled
-    expect(onImagePaste).toHaveBeenCalledWith([file]);
-  });
 });

frontend/__tests__/components/chat/chat-interface.test.tsx

@@ -16,14 +16,14 @@ describe("Empty state", () => {
     send: vi.fn(),
   }));
 
-  const { useWsClient: useWsClientMock } = vi.hoisted(() => ({
-    useWsClient: vi.fn(() => ({ send: sendMock, runtimeActive: true })),
+  const { useSocket: useSocketMock } = vi.hoisted(() => ({
+    useSocket: vi.fn(() => ({ send: sendMock, runtimeActive: true })),
   }));
 
   beforeAll(() => {
     vi.mock("#/context/socket", async (importActual) => ({
-      ...(await importActual<typeof import("#/context/ws-client-provider")>()),
-      useWsClient: useWsClientMock,
+      ...(await importActual<typeof import("#/context/socket")>()),
+      useSocket: useSocketMock,
     }));
   });
 
@@ -77,7 +77,7 @@ describe("Empty state", () => {
     "should load the a user message to the input when selecting",
     async () => {
       // this is to test that the message is in the UI before the socket is called
-      useWsClientMock.mockImplementation(() => ({
+      useSocketMock.mockImplementation(() => ({
         send: sendMock,
         runtimeActive: false, // mock an inactive runtime setup
       }));
@@ -106,7 +106,7 @@ describe("Empty state", () => {
   it.fails(
     "should send the message to the socket only if the runtime is active",
     async () => {
-      useWsClientMock.mockImplementation(() => ({
+      useSocketMock.mockImplementation(() => ({
         send: sendMock,
         runtimeActive: false, // mock an inactive runtime setup
       }));
@@ -123,7 +123,7 @@ describe("Empty state", () => {
       await user.click(displayedSuggestions[0]);
       expect(sendMock).not.toHaveBeenCalled();
 
-      useWsClientMock.mockImplementation(() => ({
+      useSocketMock.mockImplementation(() => ({
         send: sendMock,
         runtimeActive: true, // mock an active runtime setup
       }));

frontend/__tests__/hooks/use-terminal.test.tsx

@@ -2,9 +2,8 @@ import { beforeAll, describe, expect, it, vi } from "vitest";
 import { render } from "@testing-library/react";
 import { afterEach } from "node:test";
 import { useTerminal } from "#/hooks/useTerminal";
+import { SocketProvider } from "#/context/socket";
 import { Command } from "#/state/commandSlice";
-import { WsClientProvider } from "#/context/ws-client-provider";
-import { ReactNode } from "react";
 
 interface TestTerminalComponentProps {
   commands: Command[];
@@ -19,17 +18,6 @@ function TestTerminalComponent({
   return <div ref={ref} />;
 }
 
-interface WrapperProps {
-  children: ReactNode;
-}
-
-
-function Wrapper({children}: WrapperProps) {
-  return (
-    <WsClientProvider enabled={true} token="NO_JWT" ghToken="NO_GITHUB" settings={null}>{children}</WsClientProvider>
-  )
-}
-
 describe("useTerminal", () => {
   const mockTerminal = vi.hoisted(() => ({
     loadAddon: vi.fn(),
@@ -62,7 +50,7 @@ describe("useTerminal", () => {
 
   it("should render", () => {
     render(<TestTerminalComponent commands={[]} secrets={[]} />, {
-      wrapper: Wrapper,
+      wrapper: SocketProvider,
     });
   });
 
@@ -73,7 +61,7 @@ describe("useTerminal", () => {
     ];
 
     render(<TestTerminalComponent commands={commands} secrets={[]} />, {
-      wrapper: Wrapper,
+      wrapper: SocketProvider,
     });
 
     expect(mockTerminal.writeln).toHaveBeenNthCalledWith(1, "echo hello");
@@ -97,7 +85,7 @@ describe("useTerminal", () => {
         secrets={[secret, anotherSecret]}
       />,
       {
-        wrapper: Wrapper,
+        wrapper: SocketProvider,
       },
     );
 

frontend/__tests__/utils/cache.test.ts

@@ -8,6 +8,7 @@ describe("Cache", () => {
   const testTTL = 1000; // 1 second
 
   beforeEach(() => {
+    localStorage.clear();
     vi.useFakeTimers();
   });
 
@@ -15,7 +16,17 @@ describe("Cache", () => {
     vi.useRealTimers();
   });
 
-  it("gets data from memory if not expired", () => {
+  it("sets data in localStorage with expiration", () => {
+    cache.set(testKey, testData, testTTL);
+    const cachedEntry = JSON.parse(
+      localStorage.getItem(`app_cache_${testKey}`) || "",
+    );
+
+    expect(cachedEntry.data).toEqual(testData);
+    expect(cachedEntry.expiration).toBeGreaterThan(Date.now());
+  });
+
+  it("gets data from localStorage if not expired", () => {
     cache.set(testKey, testData, testTTL);
 
     expect(cache.get(testKey)).toEqual(testData);
@@ -28,6 +39,7 @@ describe("Cache", () => {
     vi.advanceTimersByTime(5 * 60 * 1000 + 1);
 
     expect(cache.get(testKey)).toBeNull();
+    expect(localStorage.getItem(`app_cache_${testKey}`)).toBeNull();
   });
 
   it("returns null if cached data is expired", () => {
@@ -35,19 +47,28 @@ describe("Cache", () => {
 
     vi.advanceTimersByTime(testTTL + 1);
     expect(cache.get(testKey)).toBeNull();
+    expect(localStorage.getItem(`app_cache_${testKey}`)).toBeNull();
   });
 
-  it("deletes data from memory", () => {
+  it("deletes data from localStorage", () => {
     cache.set(testKey, testData, testTTL);
     cache.delete(testKey);
-    expect(cache.get(testKey)).toBeNull();
+
+    expect(localStorage.getItem(`app_cache_${testKey}`)).toBeNull();
   });
 
-  it("clears all data with the app prefix from memory", () => {
+  it("clears all data with the app prefix from localStorage", () => {
     cache.set(testKey, testData, testTTL);
     cache.set("anotherKey", { data: "More data" }, testTTL);
     cache.clearAll();
-    expect(cache.get(testKey)).toBeNull();
-    expect(cache.get("anotherKey")).toBeNull();
+
+    expect(localStorage.length).toBe(0);
+  });
+
+  it("does not retrieve non-prefixed data from localStorage when clearing", () => {
+    localStorage.setItem("nonPrefixedKey", "should remain");
+    cache.set(testKey, testData, testTTL);
+    cache.clearAll();
+    expect(localStorage.getItem("nonPrefixedKey")).toBe("should remain");
   });
 });

frontend/__tests__/utils/extractModelAndProvider.test.ts

@@ -59,9 +59,9 @@ describe("extractModelAndProvider", () => {
       separator: "/",
     });
 
-    expect(extractModelAndProvider("claude-3-5-sonnet-20240620")).toEqual({
+    expect(extractModelAndProvider("claude-3-5-sonnet-20241022")).toEqual({
       provider: "anthropic",
-      model: "claude-3-5-sonnet-20240620",
+      model: "claude-3-5-sonnet-20241022",
       separator: "/",
     });
 

frontend/__tests__/utils/organizeModelsAndProviders.test.ts

@@ -15,7 +15,7 @@ test("organizeModelsAndProviders", () => {
     "gpt-4o",
     "together-ai-21.1b-41b",
     "gpt-4o-mini",
-    "anthropic/claude-3-5-sonnet-20241022",
+    "claude-3-5-sonnet-20241022",
     "claude-3-haiku-20240307",
     "claude-2",
     "claude-2.1",

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "openhands-frontend",
-  "version": "0.13.0",
+  "version": "0.12.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "openhands-frontend",
-      "version": "0.13.0",
+      "version": "0.12.3",
       "dependencies": {
         "@monaco-editor/react": "^4.6.0",
         "@nextui-org/react": "^2.4.8",

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openhands-frontend",
-  "version": "0.13.0",
+  "version": "0.12.3",
   "private": true,
   "type": "module",
   "engines": {
@@ -120,4 +120,4 @@
       "public"
     ]
   }
-}
+}

frontend/src/components/AgentControlBar.tsx

@@ -6,7 +6,7 @@ import PlayIcon from "#/assets/play";
 import { generateAgentStateChangeEvent } from "#/services/agentStateService";
 import { RootState } from "#/store";
 import AgentState from "#/types/AgentState";
-import { useWsClient } from "#/context/ws-client-provider";
+import { useSocket } from "#/context/socket";
 
 const IgnoreTaskStateMap: Record<string, AgentState[]> = {
   [AgentState.PAUSED]: [
@@ -72,7 +72,7 @@ function ActionButton({
 }
 
 function AgentControlBar() {
-  const { send } = useWsClient();
+  const { send } = useSocket();
   const { curAgentState } = useSelector((state: RootState) => state.agent);
 
   const handleAction = (action: AgentState) => {

frontend/src/components/attach-image-label.tsx

@@ -1,4 +1,4 @@
-import Clip from "#/icons/clip.svg?react";
+import Clip from "#/assets/clip.svg?react";
 
 export function AttachImageLabel() {
   return (

frontend/src/components/chat-input.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import TextareaAutosize from "react-textarea-autosize";
-import ArrowSendIcon from "#/icons/arrow-send.svg?react";
+import ArrowSendIcon from "#/assets/arrow-send.svg?react";
 import { cn } from "#/utils/utils";
 
 interface ChatInputProps {
@@ -40,18 +40,13 @@ export function ChatInput({
   const [isDraggingOver, setIsDraggingOver] = React.useState(false);
 
   const handlePaste = (event: React.ClipboardEvent<HTMLTextAreaElement>) => {
-    // Only handle paste if we have an image paste handler and there are files
+    event.preventDefault();
     if (onImagePaste && event.clipboardData.files.length > 0) {
       const files = Array.from(event.clipboardData.files).filter((file) =>
         file.type.startsWith("image/"),
       );
-      // Only prevent default if we found image files to handle
-      if (files.length > 0) {
-        event.preventDefault();
-        onImagePaste(files);
-      }
+      if (files.length > 0) onImagePaste(files);
     }
-    // For text paste, let the default behavior handle it
   };
 
   const handleDragOver = (event: React.DragEvent<HTMLTextAreaElement>) => {

frontend/src/components/chat-interface.tsx

@@ -1,6 +1,7 @@
 import { useDispatch, useSelector } from "react-redux";
 import React from "react";
 import posthog from "posthog-js";
+import { useSocket } from "#/context/socket";
 import { convertImageToBase64 } from "#/utils/convert-image-to-base-64";
 import { ChatMessage } from "./chat-message";
 import { FeedbackActions } from "./feedback-actions";
@@ -20,15 +21,14 @@ import { ContinueButton } from "./continue-button";
 import { ScrollToBottomButton } from "./scroll-to-bottom-button";
 import { Suggestions } from "./suggestions";
 import { SUGGESTIONS } from "#/utils/suggestions";
-import BuildIt from "#/icons/build-it.svg?react";
-import { useWsClient } from "#/context/ws-client-provider";
+import BuildIt from "#/assets/build-it.svg?react";
 
 const isErrorMessage = (
   message: Message | ErrorMessage,
 ): message is ErrorMessage => "error" in message;
 
 export function ChatInterface() {
-  const { send } = useWsClient();
+  const { send } = useSocket();
   const dispatch = useDispatch();
   const scrollRef = React.useRef<HTMLDivElement>(null);
   const { scrollDomToBottom, onChatBodyScroll, hitBottom } =

frontend/src/components/chat/ConfirmationButtons.tsx

@@ -5,7 +5,7 @@ import RejectIcon from "#/assets/reject";
 import { I18nKey } from "#/i18n/declaration";
 import AgentState from "#/types/AgentState";
 import { generateAgentStateChangeEvent } from "#/services/agentStateService";
-import { useWsClient } from "#/context/ws-client-provider";
+import { useSocket } from "#/context/socket";
 
 interface ActionTooltipProps {
   type: "confirm" | "reject";
@@ -37,7 +37,7 @@ function ActionTooltip({ type, onClick }: ActionTooltipProps) {
 
 function ConfirmationButtons() {
   const { t } = useTranslation();
-  const { send } = useWsClient();
+  const { send } = useSocket();
 
   const handleStateChange = (state: AgentState) => {
     const event = generateAgentStateChangeEvent(state);

frontend/src/components/event-handler.tsx

@@ -1,188 +0,0 @@
-import React from "react";
-import {
-  useFetcher,
-  useLoaderData,
-  useRouteLoaderData,
-} from "@remix-run/react";
-import { useDispatch, useSelector } from "react-redux";
-import toast from "react-hot-toast";
-
-import posthog from "posthog-js";
-import {
-  useWsClient,
-  WsClientProviderStatus,
-} from "#/context/ws-client-provider";
-import { ErrorObservation } from "#/types/core/observations";
-import { addErrorMessage, addUserMessage } from "#/state/chatSlice";
-import { handleAssistantMessage } from "#/services/actions";
-import {
-  getCloneRepoCommand,
-  getGitHubTokenCommand,
-} from "#/services/terminalService";
-import {
-  clearFiles,
-  clearSelectedRepository,
-  setImportedProjectZip,
-} from "#/state/initial-query-slice";
-import { clientLoader as appClientLoader } from "#/routes/_oh.app";
-import store, { RootState } from "#/store";
-import { createChatMessage } from "#/services/chatService";
-import { clientLoader as rootClientLoader } from "#/routes/_oh";
-import { isGitHubErrorReponse } from "#/api/github";
-import OpenHands from "#/api/open-hands";
-import { base64ToBlob } from "#/utils/base64-to-blob";
-import { setCurrentAgentState } from "#/state/agentSlice";
-import AgentState from "#/types/AgentState";
-import { getSettings } from "#/services/settings";
-
-interface ServerError {
-  error: boolean | string;
-  message: string;
-  [key: string]: unknown;
-}
-
-const isServerError = (data: object): data is ServerError => "error" in data;
-
-const isErrorObservation = (data: object): data is ErrorObservation =>
-  "observation" in data && data.observation === "error";
-
-export function EventHandler({ children }: React.PropsWithChildren) {
-  const { events, status, send } = useWsClient();
-  const statusRef = React.useRef<WsClientProviderStatus | null>(null);
-  const runtimeActive = status === WsClientProviderStatus.ACTIVE;
-  const fetcher = useFetcher();
-  const dispatch = useDispatch();
-  const { files, importedProjectZip } = useSelector(
-    (state: RootState) => state.initalQuery,
-  );
-  const { ghToken, repo } = useLoaderData<typeof appClientLoader>();
-  const initialQueryRef = React.useRef<string | null>(
-    store.getState().initalQuery.initialQuery,
-  );
-
-  const sendInitialQuery = (query: string, base64Files: string[]) => {
-    const timestamp = new Date().toISOString();
-    send(createChatMessage(query, base64Files, timestamp));
-  };
-  const data = useRouteLoaderData<typeof rootClientLoader>("routes/_oh");
-  const userId = React.useMemo(() => {
-    if (data?.user && !isGitHubErrorReponse(data.user)) return data.user.id;
-    return null;
-  }, [data?.user]);
-  const userSettings = getSettings();
-
-  React.useEffect(() => {
-    if (!events.length) {
-      return;
-    }
-    const event = events[events.length - 1];
-    if (event.token) {
-      fetcher.submit({ token: event.token as string }, { method: "post" });
-      return;
-    }
-
-    if (isServerError(event)) {
-      if (event.error_code === 401) {
-        toast.error("Session expired.");
-        fetcher.submit({}, { method: "POST", action: "/end-session" });
-        return;
-      }
-
-      if (typeof event.error === "string") {
-        toast.error(event.error);
-      } else {
-        toast.error(event.message);
-      }
-      return;
-    }
-
-    if (isErrorObservation(event)) {
-      dispatch(
-        addErrorMessage({
-          id: event.extras?.error_id,
-          message: event.message,
-        }),
-      );
-      return;
-    }
-    handleAssistantMessage(event);
-  }, [events.length]);
-
-  React.useEffect(() => {
-    if (statusRef.current === status) {
-      return; // This is a check because of strict mode - if the status did not change, don't do anything
-    }
-    statusRef.current = status;
-    const initialQuery = initialQueryRef.current;
-
-    if (status === WsClientProviderStatus.ACTIVE) {
-      let additionalInfo = "";
-      if (ghToken && repo) {
-        send(getCloneRepoCommand(ghToken, repo));
-        additionalInfo = `Repository ${repo} has been cloned to /workspace. Please check the /workspace for files.`;
-        dispatch(clearSelectedRepository()); // reset selected repository; maybe better to move this to '/'?
-      }
-      // if there's an uploaded project zip, add it to the chat
-      else if (importedProjectZip) {
-        additionalInfo = `Files have been uploaded. Please check the /workspace for files.`;
-      }
-
-      if (initialQuery) {
-        if (additionalInfo) {
-          sendInitialQuery(`${initialQuery}\n\n[${additionalInfo}]`, files);
-        } else {
-          sendInitialQuery(initialQuery, files);
-        }
-        dispatch(clearFiles()); // reset selected files
-        initialQueryRef.current = null;
-      }
-    }
-
-    if (status === WsClientProviderStatus.OPENING && initialQuery) {
-      dispatch(
-        addUserMessage({
-          content: initialQuery,
-          imageUrls: files,
-          timestamp: new Date().toISOString(),
-        }),
-      );
-    }
-
-    if (status === WsClientProviderStatus.STOPPED) {
-      store.dispatch(setCurrentAgentState(AgentState.STOPPED));
-    }
-  }, [status]);
-
-  React.useEffect(() => {
-    if (runtimeActive && userId && ghToken) {
-      // Export if the user valid, this could happen mid-session so it is handled here
-      send(getGitHubTokenCommand(ghToken));
-    }
-  }, [userId, ghToken, runtimeActive]);
-
-  React.useEffect(() => {
-    (async () => {
-      if (runtimeActive && importedProjectZip) {
-        // upload files action
-        try {
-          const blob = base64ToBlob(importedProjectZip);
-          const file = new File([blob], "imported-project.zip", {
-            type: blob.type,
-          });
-          await OpenHands.uploadFiles([file]);
-          dispatch(setImportedProjectZip(null));
-        } catch (error) {
-          toast.error("Failed to upload project files.");
-        }
-      }
-    })();
-  }, [runtimeActive, importedProjectZip]);
-
-  React.useEffect(() => {
-    if (userSettings.LLM_API_KEY) {
-      posthog.capture("user_activated");
-    }
-  }, [userSettings.LLM_API_KEY]);
-
-  return children;
-}

frontend/src/components/image-preview.tsx

@@ -1,4 +1,4 @@
-import CloseIcon from "#/icons/close.svg?react";
+import CloseIcon from "#/assets/close.svg?react";
 import { cn } from "#/utils/utils";
 
 interface ImagePreviewProps {

frontend/src/components/modals/AccountSettingsModal.tsx

@@ -1,4 +1,4 @@
-import { useFetcher, useRouteLoaderData } from "@remix-run/react";
+import { useFetcher } from "@remix-run/react";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { BaseModalTitle } from "./confirmation-modals/BaseModal";
@@ -6,7 +6,6 @@ import ModalBody from "./ModalBody";
 import ModalButton from "../buttons/ModalButton";
 import FormFieldset from "../form/FormFieldset";
 import { CustomInput } from "../form/custom-input";
-import { clientLoader } from "#/routes/_oh";
 import { clientAction as settingsClientAction } from "#/routes/settings";
 import { clientAction as loginClientAction } from "#/routes/login";
 import { AvailableLanguages } from "#/i18n";
@@ -25,8 +24,8 @@ function AccountSettingsModal({
   gitHubError,
   analyticsConsent,
 }: AccountSettingsModalProps) {
+  const ghToken = localStorage.getItem("ghToken");
   const { t } = useTranslation();
-  const data = useRouteLoaderData<typeof clientLoader>("routes/_oh");
   const settingsFetcher = useFetcher<typeof settingsClientAction>({
     key: "settings",
   });
@@ -36,7 +35,7 @@ function AccountSettingsModal({
     event.preventDefault();
     const formData = new FormData(event.currentTarget);
     const language = formData.get("language")?.toString();
-    const ghToken = formData.get("ghToken")?.toString();
+    const newGHToken = formData.get("ghToken")?.toString();
     const analytics = formData.get("analytics")?.toString() === "on";
 
     const accountForm = new FormData();
@@ -49,7 +48,7 @@ function AccountSettingsModal({
       )?.value;
       accountForm.append("language", languageKey ?? "en");
     }
-    if (ghToken) loginForm.append("ghToken", ghToken);
+    if (newGHToken) loginForm.append("ghToken", newGHToken);
     accountForm.append("analytics", analytics.toString());
 
     settingsFetcher.submit(accountForm, {
@@ -85,14 +84,14 @@ function AccountSettingsModal({
             name="ghToken"
             label="GitHub Token"
             type="password"
-            defaultValue={data?.ghToken ?? ""}
+            defaultValue={ghToken ?? ""}
           />
           {gitHubError && (
             <p className="text-danger text-xs">
               {t(I18nKey.ACCOUNT_SETTINGS_MODAL$GITHUB_TOKEN_INVALID)}
             </p>
           )}
-          {data?.ghToken && !gitHubError && (
+          {ghToken && !gitHubError && (
             <ModalButton
               variant="text-like"
               text={t(I18nKey.ACCOUNT_SETTINGS_MODAL$DISCONNECT)}

frontend/src/components/modals/LoadingProject.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import LoadingSpinnerOuter from "#/icons/loading-outer.svg?react";
+import LoadingSpinnerOuter from "#/assets/loading-outer.svg?react";
 import { cn } from "#/utils/utils";
 import ModalBody from "./ModalBody";
 import { I18nKey } from "#/i18n/declaration";

frontend/src/components/modals/connect-to-github-modal.tsx

@@ -1,4 +1,4 @@
-import { useFetcher, useRouteLoaderData } from "@remix-run/react";
+import { useFetcher } from "@remix-run/react";
 import { useTranslation } from "react-i18next";
 import ModalBody from "./ModalBody";
 import { CustomInput } from "../form/custom-input";
@@ -7,7 +7,6 @@ import {
   BaseModalDescription,
   BaseModalTitle,
 } from "./confirmation-modals/BaseModal";
-import { clientLoader } from "#/routes/_oh";
 import { clientAction } from "#/routes/login";
 import { I18nKey } from "#/i18n/declaration";
 
@@ -16,7 +15,7 @@ interface ConnectToGitHubModalProps {
 }
 
 export function ConnectToGitHubModal({ onClose }: ConnectToGitHubModalProps) {
-  const data = useRouteLoaderData<typeof clientLoader>("routes/_oh");
+  const ghToken = localStorage.getItem("ghToken");
   const fetcher = useFetcher<typeof clientAction>({ key: "login" });
   const { t } = useTranslation();
 
@@ -51,7 +50,7 @@ export function ConnectToGitHubModal({ onClose }: ConnectToGitHubModalProps) {
           name="ghToken"
           required
           type="password"
-          defaultValue={data?.ghToken ?? ""}
+          defaultValue={ghToken ?? ""}
         />
 
         <div className="flex flex-col gap-2 w-full">

frontend/src/components/project-menu/ProjectMenuCard.tsx

@@ -2,17 +2,16 @@ import React from "react";
 import { useDispatch } from "react-redux";
 import toast from "react-hot-toast";
 import posthog from "posthog-js";
-import EllipsisH from "#/icons/ellipsis-h.svg?react";
+import EllipsisH from "#/assets/ellipsis-h.svg?react";
 import { ModalBackdrop } from "../modals/modal-backdrop";
 import { ConnectToGitHubModal } from "../modals/connect-to-github-modal";
 import { addUserMessage } from "#/state/chatSlice";
+import { useSocket } from "#/context/socket";
 import { createChatMessage } from "#/services/chatService";
 import { ProjectMenuCardContextMenu } from "./project.menu-card-context-menu";
 import { ProjectMenuDetailsPlaceholder } from "./project-menu-details-placeholder";
 import { ProjectMenuDetails } from "./project-menu-details";
 import { downloadWorkspace } from "#/utils/download-workspace";
-import { LoadingSpinner } from "../modals/LoadingProject";
-import { useWsClient } from "#/context/ws-client-provider";
 
 interface ProjectMenuCardProps {
   isConnectedToGitHub: boolean;
@@ -27,13 +26,12 @@ export function ProjectMenuCard({
   isConnectedToGitHub,
   githubData,
 }: ProjectMenuCardProps) {
-  const { send } = useWsClient();
+  const { send } = useSocket();
   const dispatch = useDispatch();
 
   const [contextMenuIsOpen, setContextMenuIsOpen] = React.useState(false);
   const [connectToGitHubModalOpen, setConnectToGitHubModalOpen] =
     React.useState(false);
-  const [working, setWorking] = React.useState(false);
 
   const toggleMenuVisibility = () => {
     setContextMenuIsOpen((prev) => !prev);
@@ -43,7 +41,10 @@ export function ProjectMenuCard({
     posthog.capture("push_to_github_button_clicked");
     const rawEvent = {
       content: `
-Please push the changes to GitHub and open a pull request.
+Let's push the code to GitHub.
+If we're currently on the openhands-workspace branch, please create a new branch with a descriptive name.
+Commit any changes and push them to the remote repository.
+Finally, open up a pull request using the GitHub API and the token in the GITHUB_TOKEN environment variable, then show me the URL of the pull request.
 `,
       imageUrls: [],
       timestamp: new Date().toISOString(),
@@ -62,11 +63,7 @@ Please push the changes to GitHub and open a pull request.
   const handleDownloadWorkspace = () => {
     posthog.capture("download_workspace_button_clicked");
     try {
-      setWorking(true);
-      downloadWorkspace().then(
-        () => setWorking(false),
-        () => setWorking(false),
-      );
+      downloadWorkspace();
     } catch (error) {
       toast.error("Failed to download workspace");
     }
@@ -74,7 +71,7 @@ Please push the changes to GitHub and open a pull request.
 
   return (
     <div className="px-4 py-[10px] w-[337px] rounded-xl border border-[#525252] flex justify-between items-center relative">
-      {!working && contextMenuIsOpen && (
+      {contextMenuIsOpen && (
         <ProjectMenuCardContextMenu
           isConnectedToGitHub={isConnectedToGitHub}
           onConnectToGitHub={() => setConnectToGitHubModalOpen(true)}
@@ -101,11 +98,7 @@ Please push the changes to GitHub and open a pull request.
         onClick={toggleMenuVisibility}
         aria-label="Open project menu"
       >
-        {working ? (
-          <LoadingSpinner size="small" />
-        ) : (
-          <EllipsisH width={36} height={36} />
-        )}
+        <EllipsisH width={36} height={36} />
       </button>
       {connectToGitHubModalOpen && (
         <ModalBackdrop onClose={() => setConnectToGitHubModalOpen(false)}>

frontend/src/components/project-menu/project-menu-details-placeholder.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from "react-i18next";
 import { cn } from "#/utils/utils";
-import CloudConnection from "#/icons/cloud-connection.svg?react";
+import CloudConnection from "#/assets/cloud-connection.svg?react";
 import { I18nKey } from "#/i18n/declaration";
 
 interface ProjectMenuDetailsPlaceholderProps {

frontend/src/components/project-menu/project-menu-details.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import ExternalLinkIcon from "#/icons/external-link.svg?react";
+import ExternalLinkIcon from "#/assets/external-link.svg?react";
 import { formatTimeDelta } from "#/utils/format-time-delta";
 import { I18nKey } from "#/i18n/declaration";
 

frontend/src/components/project-menu/project.menu-card-context-menu.tsx

@@ -1,8 +1,6 @@
-import { useTranslation } from "react-i18next";
 import { useClickOutsideElement } from "#/hooks/useClickOutsideElement";
 import { ContextMenu } from "../context-menu/context-menu";
 import { ContextMenuListItem } from "../context-menu/context-menu-list-item";
-import { I18nKey } from "#/i18n/declaration";
 
 interface ProjectMenuCardContextMenuProps {
   isConnectedToGitHub: boolean;
@@ -20,7 +18,7 @@ export function ProjectMenuCardContextMenu({
   onClose,
 }: ProjectMenuCardContextMenuProps) {
   const menuRef = useClickOutsideElement<HTMLUListElement>(onClose);
-  const { t } = useTranslation();
+
   return (
     <ContextMenu
       ref={menuRef}
@@ -28,16 +26,16 @@ export function ProjectMenuCardContextMenu({
     >
       {!isConnectedToGitHub && (
         <ContextMenuListItem onClick={onConnectToGitHub}>
-          {t(I18nKey.PROJECT_MENU_CARD_CONTEXT_MENU$CONNECT_TO_GITHUB_LABEL)}
+          Connect to GitHub
         </ContextMenuListItem>
       )}
       {isConnectedToGitHub && (
         <ContextMenuListItem onClick={onPushToGitHub}>
-          {t(I18nKey.PROJECT_MENU_CARD_CONTEXT_MENU$PUSH_TO_GITHUB_LABEL)}
+          Push to GitHub
         </ContextMenuListItem>
       )}
       <ContextMenuListItem onClick={onDownloadWorkspace}>
-        {t(I18nKey.PROJECT_MENU_CARD_CONTEXT_MENU$DOWNLOAD_AS_ZIP_LABEL)}
+        Download as .zip
       </ContextMenuListItem>
     </ContextMenu>
   );

frontend/src/components/scroll-to-bottom-button.tsx

@@ -1,4 +1,4 @@
-import ArrowSendIcon from "#/icons/arrow-send.svg?react";
+import ArrowSendIcon from "#/assets/arrow-send.svg?react";
 
 interface ScrollToBottomButtonProps {
   onClick: () => void;

frontend/src/components/suggestion-bubble.tsx

@@ -1,5 +1,5 @@
-import Lightbulb from "#/icons/lightbulb.svg?react";
-import Refresh from "#/icons/refresh.svg?react";
+import Lightbulb from "#/assets/lightbulb.svg?react";
+import Refresh from "#/assets/refresh.svg?react";
 
 interface SuggestionBubbleProps {
   suggestion: string;

frontend/src/components/upload-image-input.tsx

@@ -1,4 +1,4 @@
-import Clip from "#/icons/clip.svg?react";
+import Clip from "#/assets/clip.svg?react";
 
 interface UploadImageInputProps {
   onUpload: (files: File[]) => void;

frontend/src/components/user-avatar.tsx

@@ -1,5 +1,5 @@
 import { LoadingSpinner } from "./modals/LoadingProject";
-import DefaultUserAvatar from "#/icons/default-user.svg?react";
+import DefaultUserAvatar from "#/assets/default-user.svg?react";
 import { cn } from "#/utils/utils";
 
 interface UserAvatarProps {

frontend/src/context/socket.tsx

@@ -0,0 +1,146 @@
+import React from "react";
+import { Data } from "ws";
+import posthog from "posthog-js";
+import EventLogger from "#/utils/event-logger";
+
+interface WebSocketClientOptions {
+  token: string | null;
+  onOpen?: (event: Event) => void;
+  onMessage?: (event: MessageEvent<Data>) => void;
+  onError?: (event: Event) => void;
+  onClose?: (event: Event) => void;
+}
+
+interface WebSocketContextType {
+  send: (data: string | ArrayBufferLike | Blob | ArrayBufferView) => void;
+  start: (options?: WebSocketClientOptions) => void;
+  stop: () => void;
+  setRuntimeIsInitialized: () => void;
+  runtimeActive: boolean;
+  isConnected: boolean;
+  events: Record<string, unknown>[];
+}
+
+const SocketContext = React.createContext<WebSocketContextType | undefined>(
+  undefined,
+);
+
+interface SocketProviderProps {
+  children: React.ReactNode;
+}
+
+function SocketProvider({ children }: SocketProviderProps) {
+  const wsRef = React.useRef<WebSocket | null>(null);
+  const [isConnected, setIsConnected] = React.useState(false);
+  const [runtimeActive, setRuntimeActive] = React.useState(false);
+  const [events, setEvents] = React.useState<Record<string, unknown>[]>([]);
+
+  const setRuntimeIsInitialized = () => {
+    setRuntimeActive(true);
+  };
+
+  const start = React.useCallback((options?: WebSocketClientOptions): void => {
+    if (wsRef.current) {
+      EventLogger.warning(
+        "WebSocket connection is already established, but a new one is starting anyways.",
+      );
+    }
+
+    const baseUrl =
+      import.meta.env.VITE_BACKEND_BASE_URL || window?.location.host;
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const sessionToken = options?.token || "NO_JWT"; // not allowed to be empty or duplicated
+    const ghToken = localStorage.getItem("ghToken") || "NO_GITHUB";
+
+    const ws = new WebSocket(`${protocol}//${baseUrl}/ws`, [
+      "openhands",
+      sessionToken,
+      ghToken,
+    ]);
+
+    ws.addEventListener("open", (event) => {
+      posthog.capture("socket_opened");
+      setIsConnected(true);
+      options?.onOpen?.(event);
+    });
+
+    ws.addEventListener("message", (event) => {
+      EventLogger.message(event);
+
+      setEvents((prevEvents) => [...prevEvents, JSON.parse(event.data)]);
+      options?.onMessage?.(event);
+    });
+
+    ws.addEventListener("error", (event) => {
+      posthog.capture("socket_error");
+      EventLogger.event(event, "SOCKET ERROR");
+      options?.onError?.(event);
+    });
+
+    ws.addEventListener("close", (event) => {
+      posthog.capture("socket_closed");
+      EventLogger.event(event, "SOCKET CLOSE");
+
+      setIsConnected(false);
+      setRuntimeActive(false);
+      wsRef.current = null;
+      options?.onClose?.(event);
+    });
+
+    wsRef.current = ws;
+  }, []);
+
+  const stop = React.useCallback((): void => {
+    if (wsRef.current) {
+      wsRef.current.close();
+      wsRef.current = null;
+    }
+  }, []);
+
+  const send = React.useCallback(
+    (data: string | ArrayBufferLike | Blob | ArrayBufferView) => {
+      if (!wsRef.current) {
+        EventLogger.error("WebSocket is not connected.");
+        return;
+      }
+      setEvents((prevEvents) => [...prevEvents, JSON.parse(data.toString())]);
+      wsRef.current.send(data);
+    },
+    [],
+  );
+
+  const value = React.useMemo(
+    () => ({
+      send,
+      start,
+      stop,
+      setRuntimeIsInitialized,
+      runtimeActive,
+      isConnected,
+      events,
+    }),
+    [
+      send,
+      start,
+      stop,
+      setRuntimeIsInitialized,
+      runtimeActive,
+      isConnected,
+      events,
+    ],
+  );
+
+  return (
+    <SocketContext.Provider value={value}>{children}</SocketContext.Provider>
+  );
+}
+
+function useSocket() {
+  const context = React.useContext(SocketContext);
+  if (context === undefined) {
+    throw new Error("useSocket must be used within a SocketProvider");
+  }
+  return context;
+}
+
+export { SocketProvider, useSocket };

frontend/src/context/ws-client-provider.tsx

@@ -1,175 +0,0 @@
-import posthog from "posthog-js";
-import React from "react";
-import { Settings } from "#/services/settings";
-import ActionType from "#/types/ActionType";
-import EventLogger from "#/utils/event-logger";
-import AgentState from "#/types/AgentState";
-
-export enum WsClientProviderStatus {
-  STOPPED,
-  OPENING,
-  ACTIVE,
-  ERROR,
-}
-
-interface UseWsClient {
-  status: WsClientProviderStatus;
-  events: Record<string, unknown>[];
-  send: (event: Record<string, unknown>) => void;
-}
-
-const WsClientContext = React.createContext<UseWsClient>({
-  status: WsClientProviderStatus.STOPPED,
-  events: [],
-  send: () => {
-    throw new Error("not connected");
-  },
-});
-
-interface WsClientProviderProps {
-  enabled: boolean;
-  token: string | null;
-  ghToken: string | null;
-  settings: Settings | null;
-}
-
-export function WsClientProvider({
-  enabled,
-  token,
-  ghToken,
-  settings,
-  children,
-}: React.PropsWithChildren<WsClientProviderProps>) {
-  const wsRef = React.useRef<WebSocket | null>(null);
-  const tokenRef = React.useRef<string | null>(token);
-  const ghTokenRef = React.useRef<string | null>(ghToken);
-  const closeRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
-  const [status, setStatus] = React.useState(WsClientProviderStatus.STOPPED);
-  const [events, setEvents] = React.useState<Record<string, unknown>[]>([]);
-
-  function send(event: Record<string, unknown>) {
-    if (!wsRef.current) {
-      EventLogger.error("WebSocket is not connected.");
-      return;
-    }
-    wsRef.current.send(JSON.stringify(event));
-  }
-
-  function handleOpen() {
-    setStatus(WsClientProviderStatus.OPENING);
-    const initEvent = {
-      action: ActionType.INIT,
-      args: settings,
-    };
-    send(initEvent);
-  }
-
-  function handleMessage(messageEvent: MessageEvent) {
-    const event = JSON.parse(messageEvent.data);
-    setEvents((prevEvents) => [...prevEvents, event]);
-    if (event.extras?.agent_state === AgentState.INIT) {
-      setStatus(WsClientProviderStatus.ACTIVE);
-    }
-    if (
-      status !== WsClientProviderStatus.ACTIVE &&
-      event?.observation === "error"
-    ) {
-      setStatus(WsClientProviderStatus.ERROR);
-    }
-  }
-
-  function handleClose() {
-    setStatus(WsClientProviderStatus.STOPPED);
-    setEvents([]);
-    wsRef.current = null;
-  }
-
-  function handleError(event: Event) {
-    posthog.capture("socket_error");
-    EventLogger.event(event, "SOCKET ERROR");
-    setStatus(WsClientProviderStatus.ERROR);
-  }
-
-  // Connect websocket
-  React.useEffect(() => {
-    let ws = wsRef.current;
-
-    // If disabled close any existing websockets...
-    if (!enabled) {
-      if (ws) {
-        ws.close();
-      }
-      wsRef.current = null;
-      return () => {};
-    }
-
-    // If there is no websocket or the tokens have changed or the current websocket is closed,
-    // create a new one
-    if (
-      !ws ||
-      (tokenRef.current && token !== tokenRef.current) ||
-      ghToken !== ghTokenRef.current ||
-      ws.readyState === WebSocket.CLOSED ||
-      ws.readyState === WebSocket.CLOSING
-    ) {
-      ws?.close();
-      const baseUrl =
-        import.meta.env.VITE_BACKEND_BASE_URL || window?.location.host;
-      const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-      ws = new WebSocket(`${protocol}//${baseUrl}/ws`, [
-        "openhands",
-        token || "NO_JWT",
-        ghToken || "NO_GITHUB",
-      ]);
-    }
-    ws.addEventListener("open", handleOpen);
-    ws.addEventListener("message", handleMessage);
-    ws.addEventListener("error", handleError);
-    ws.addEventListener("close", handleClose);
-    wsRef.current = ws;
-    tokenRef.current = token;
-    ghTokenRef.current = ghToken;
-
-    return () => {
-      ws.removeEventListener("open", handleOpen);
-      ws.removeEventListener("message", handleMessage);
-      ws.removeEventListener("error", handleError);
-      ws.removeEventListener("close", handleClose);
-    };
-  }, [enabled, token, ghToken]);
-
-  // Strict mode mounts and unmounts each component twice, so we have to wait in the destructor
-  // before actually closing the socket and cancel the operation if the component gets remounted.
-  React.useEffect(() => {
-    const timeout = closeRef.current;
-    if (timeout != null) {
-      clearTimeout(timeout);
-    }
-
-    return () => {
-      closeRef.current = setTimeout(() => {
-        wsRef.current?.close();
-      }, 100);
-    };
-  }, []);
-
-  const value = React.useMemo<UseWsClient>(
-    () => ({
-      status,
-      events,
-      send,
-    }),
-    [status, events],
-  );
-
-  return (
-    <WsClientContext.Provider value={value}>
-      {children}
-    </WsClientContext.Provider>
-  );
-}
-
-export function useWsClient() {
-  const context = React.useContext(WsClientContext);
-  return context;
-}

frontend/src/entry.client.tsx

@@ -10,6 +10,7 @@ import React, { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
 import { Provider } from "react-redux";
 import posthog from "posthog-js";
+import { SocketProvider } from "./context/socket";
 import "./i18n";
 import store from "./store";
 
@@ -42,10 +43,12 @@ prepareApp().then(() =>
     hydrateRoot(
       document,
       <StrictMode>
-        <Provider store={store}>
-          <RemixBrowser />
-          <PosthogInit />
-        </Provider>
+        <SocketProvider>
+          <Provider store={store}>
+            <RemixBrowser />
+            <PosthogInit />
+          </Provider>
+        </SocketProvider>
       </StrictMode>,
     );
   }),

frontend/src/hooks/useTerminal.ts

@@ -4,7 +4,7 @@ import React from "react";
 import { Command } from "#/state/commandSlice";
 import { getTerminalCommand } from "#/services/terminalService";
 import { parseTerminalOutput } from "#/utils/parseTerminalOutput";
-import { useWsClient } from "#/context/ws-client-provider";
+import { useSocket } from "#/context/socket";
 
 /*
   NOTE: Tests for this hook are indirectly covered by the tests for the XTermTerminal component.
@@ -15,7 +15,7 @@ export const useTerminal = (
   commands: Command[] = [],
   secrets: string[] = [],
 ) => {
-  const { send } = useWsClient();
+  const { send } = useSocket();
   const terminal = React.useRef<Terminal | null>(null);
   const fitAddon = React.useRef<FitAddon | null>(null);
   const ref = React.useRef<HTMLDivElement>(null);

frontend/src/i18n/translation.json

@@ -535,8 +535,7 @@
     "pt": "Socket não inicializado",
     "ko-KR": "소켓이 초기화되지 않았습니다",
     "ar": "لم يتم تهيئة Socket",
-    "tr": "Soket başlatılmadı",
-    "no": "Socket ikke initialisert"
+    "tr": "Soket başlatılmadı"
   },
   "EXPLORER$UPLOAD_ERROR_MESSAGE": {
     "en": "Error uploading file",
@@ -549,8 +548,7 @@
     "pt": "Erro ao fazer upload do arquivo",
     "ko-KR": "파일 업로드 중 오류 발생",
     "ar": "خطأ في تحميل الملف",
-    "tr": "Dosya yüklenirken hata oluştu",
-    "no": "Feil ved opplasting av fil"
+    "tr": "Dosya yüklenirken hata oluştu"
   },
   "EXPLORER$LABEL_DROP_FILES": {
     "en": "Drop files here",
@@ -559,7 +557,6 @@
     "zh-TW": "將檔案拖曳至此",
     "es": "Suelta los archivos aquí",
     "fr": "Déposez les fichiers ici",
-    "no": "Slipp filer her",
     "it": "Trascina i file qui",
     "pt": "Solte os arquivos aqui",
     "ko-KR": "파일을 여기에 놓으세요",
@@ -577,8 +574,7 @@
     "pt": "Espaço de trabalho",
     "ko-KR": "작업 공간",
     "ar": "مساحة العمل",
-    "tr": "Çalışma alanı",
-    "no": "Arbeidsområde"
+    "tr": "Çalışma alanı"
   },
   "EXPLORER$EMPTY_WORKSPACE_MESSAGE": {
     "en": "No files in workspace",
@@ -591,8 +587,7 @@
     "pt": "Nenhum arquivo no espaço de trabalho",
     "ko-KR": "작업 공간에 파일이 없습니다",
     "ar": "لا توجد ملفات في مساحة العمل",
-    "tr": "Çalışma alanında dosya yok",
-    "no": "Ingen filer i arbeidsområdet"
+    "tr": "Çalışma alanında dosya yok"
   },
   "EXPLORER$LOADING_WORKSPACE_MESSAGE": {
     "en": "Loading workspace...",
@@ -605,8 +600,7 @@
     "pt": "Carregando espaço de trabalho...",
     "ko-KR": "작업 공간 로딩 중...",
     "ar": "جارٍ تحميل مساحة العمل...",
-    "tr": "Çalışma alanı yükleniyor...",
-    "no": "Laster arbeidsområde..."
+    "tr": "Çalışma alanı yükleniyor..."
   },
   "EXPLORER$REFRESH_ERROR_MESSAGE": {
     "en": "Error refreshing workspace",
@@ -619,8 +613,7 @@
     "pt": "Erro ao atualizar o espaço de trabalho",
     "ko-KR": "작업 공간 새로 고침 오류",
     "ar": "خطأ في تحديث مساحة العمل",
-    "tr": "Çalışma alanı yenilenirken hata oluştu",
-    "no": "Feil ved oppdatering av arbeidsområde"
+    "tr": "Çalışma alanı yenilenirken hata oluştu"
   },
   "EXPLORER$UPLOAD_SUCCESS_MESSAGE": {
     "en": "Successfully uploaded {{count}} file(s)",
@@ -633,8 +626,7 @@
     "pt": "{{count}} arquivo(s) carregado(s) com sucesso",
     "ko-KR": "{{count}}개의 파일을 성공적으로 업로드했습니다",
     "ar": "تم تحميل {{count}} ملف (ملفات) بنجاح",
-    "tr": "{{count}} dosya başarıyla yüklendi",
-    "no": "Lastet opp {{count}} fil(er) vellykket"
+    "tr": "{{count}} dosya başarıyla yüklendi"
   },
   "EXPLORER$NO_FILES_UPLOADED_MESSAGE": {
     "en": "No files were uploaded",
@@ -647,8 +639,7 @@
     "pt": "Nenhum arquivo foi carregado",
     "ko-KR": "업로드된 파일이 없습니다",
     "ar": "لم يتم تحميل أي ملفات",
-    "tr": "Hiçbir dosya yüklenmedi",
-    "no": "Ingen filer ble lastet opp"
+    "tr": "Hiçbir dosya yüklenmedi"
   },
   "EXPLORER$UPLOAD_PARTIAL_SUCCESS_MESSAGE": {
     "en": "{{count}} file(s) were skipped during upload",
@@ -661,8 +652,7 @@
     "pt": "{{count}} arquivo(s) foram ignorados durante o upload",
     "ko-KR": "업로드 중 {{count}}개의 파일이 건너뛰어졌습니다",
     "ar": "تم تخطي {{count}} ملف (ملفات) أثناء التحميل",
-    "tr": "Yükleme sırasında {{count}} dosya atlandı",
-    "no": "{{count}} fil(er) ble hoppet over under opplasting"
+    "tr": "Yükleme sırasında {{count}} dosya atlandı"
   },
   "EXPLORER$UPLOAD_UNEXPECTED_RESPONSE_MESSAGE": {
     "en": "Unexpected response structure from server",
@@ -675,8 +665,7 @@
     "pt": "Estrutura de resposta inesperada do servidor",
     "ko-KR": "서버로부터 예상치 못한 응답 구조",
     "ar": "بنية استجابة غير متوقعة من الخادم",
-    "tr": "Sunucudan beklenmeyen yanıt yapısı",
-    "no": "Uventet responsstruktur fra serveren"
+    "tr": "Sunucudan beklenmeyen yanıt yapısı"
   },
   "LOAD_SESSION$MODAL_TITLE": {
     "en": "Return to existing session?",
@@ -810,325 +799,95 @@
   },
   "FEEDBACK$EMAIL_PLACEHOLDER": {
     "en": "Enter your email address",
-    "es": "Ingresa tu correo electrónico",
-    "zh-CN": "输入您的电子邮件地址",
-    "zh-TW": "輸入您的電子郵件地址",
-    "ko-KR": "이메일 주소를 입력하세요",
-    "no": "Skriv inn din e-postadresse",
-    "ar": "أدخل عنوان بريدك الإلكتروني",
-    "de": "Geben Sie Ihre E-Mail-Adresse ein",
-    "fr": "Entrez votre adresse e-mail",
-    "it": "Inserisci il tuo indirizzo email",
-    "pt": "Digite seu endereço de e-mail",
-    "tr": "E-posta adresinizi girin"
+    "es": "Ingresa tu correo electrónico"
   },
   "FEEDBACK$PASSWORD_COPIED_MESSAGE": {
     "en": "Password copied to clipboard.",
-    "es": "Contraseña copiada al portapapeles.",
-    "zh-CN": "密码已复制到剪贴板。",
-    "zh-TW": "密碼已複製到剪貼板。",
-    "ko-KR": "비밀번호가 클립보드에 복사되었습니다.",
-    "no": "Passord kopiert til utklippstavlen.",
-    "ar": "تم نسخ كلمة المرور إلى الحافظة.",
-    "de": "Passwort in die Zwischenablage kopiert.",
-    "fr": "Mot de passe copié dans le presse-papiers.",
-    "it": "Password copiata negli appunti.",
-    "pt": "Senha copiada para a área de transferência.",
-    "tr": "Parola panoya kopyalandı."
+    "es": "Contraseña copiada al portapapeles."
   },
   "FEEDBACK$GO_TO_FEEDBACK": {
     "en": "Go to shared feedback",
-    "es": "Ir a feedback compartido",
-    "zh-CN": "转到共享反馈",
-    "zh-TW": "前往共享反饋",
-    "ko-KR": "공유된 피드백으로 이동",
-    "no": "Gå til delt tilbakemelding",
-    "ar": "الذهاب إلى التعليقات المشتركة",
-    "de": "Zum geteilten Feedback gehen",
-    "fr": "Aller aux commentaires partagés",
-    "it": "Vai al feedback condiviso",
-    "pt": "Ir para feedback compartilhado",
-    "tr": "Paylaşılan geri bildirimlere git"
+    "es": "Ir a feedback compartido"
   },
   "FEEDBACK$PASSWORD": {
     "en": "Password:",
-    "es": "Contraseña:",
-    "zh-CN": "密码：",
-    "zh-TW": "密碼：",
-    "ko-KR": "비밀번호:",
-    "no": "Passord:",
-    "ar": "كلمة المرور:",
-    "de": "Passwort:",
-    "fr": "Mot de passe :",
-    "it": "Password:",
-    "pt": "Senha:",
-    "tr": "Parola:"
+    "es": "Contraseña:"
   },
   "FEEDBACK$INVALID_EMAIL_FORMAT": {
     "en": "Invalid email format",
-    "es": "Formato de correo inválido",
-    "zh-CN": "无效的电子邮件格式",
-    "zh-TW": "無效的電子郵件格式",
-    "ko-KR": "잘못된 이메일 형식",
-    "no": "Ugyldig e-postformat",
-    "ar": "تنسيق البريد الإلكتروني غير صالح",
-    "de": "Ungültiges E-Mail-Format",
-    "fr": "Format d'e-mail invalide",
-    "it": "Formato email non valido",
-    "pt": "Formato de e-mail inválido",
-    "tr": "Geçersiz e-posta biçimi"
+    "es": "Formato de correo inválido"
   },
   "FEEDBACK$FAILED_TO_SHARE": {
     "en": "Failed to share, please contact the developers:",
-    "es": "Error al compartir, por favor contacta con los desarrolladores:",
-    "zh-CN": "分享失败，请联系开发人员：",
-    "zh-TW": "分享失敗，請聯繫開發人員：",
-    "ko-KR": "공유 실패, 개발자에게 문의하세요:",
-    "no": "Deling mislyktes, vennligst kontakt utviklerne:",
-    "ar": "فشل المشاركة، يرجى الاتصال بالمطورين:",
-    "de": "Teilen fehlgeschlagen, bitte kontaktieren Sie die Entwickler:",
-    "fr": "Échec du partage, veuillez contacter les développeurs :",
-    "it": "Condivisione fallita, contattare gli sviluppatori:",
-    "pt": "Falha ao compartilhar, entre em contato com os desenvolvedores:",
-    "tr": "Paylaşım başarısız, lütfen geliştiricilerle iletişime geçin:"
+    "es": "Error al compartir, por favor contacta con los desarrolladores:"
   },
   "FEEDBACK$COPY_LABEL": {
     "en": "Copy",
-    "es": "Copiar",
-    "zh-CN": "复制",
-    "zh-TW": "複製",
-    "ko-KR": "복사",
-    "no": "Kopier",
-    "ar": "نسخ",
-    "de": "Kopieren",
-    "fr": "Copier",
-    "it": "Copia",
-    "pt": "Copiar",
-    "tr": "Kopyala"
+    "es": "Copiar"
   },
   "FEEDBACK$SHARING_SETTINGS_LABEL": {
     "en": "Sharing settings",
-    "es": "Configuración de compartir",
-    "zh-CN": "共享设置",
-    "zh-TW": "共享設定",
-    "ko-KR": "공유 설정",
-    "no": "Delingsinnstillinger",
-    "ar": "إعدادات المشاركة",
-    "de": "Freigabeeinstellungen",
-    "fr": "Paramètres de partage",
-    "it": "Impostazioni di condivisione",
-    "pt": "Configurações de compartilhamento",
-    "tr": "Paylaşım ayarları"
+    "es": "Configuración de compartir"
   },
   "SECURITY$UNKNOWN_ANALYZER_LABEL":{
     "en": "Unknown security analyzer chosen",
-    "es": "Analizador de seguridad desconocido",
-    "zh-CN": "选择了未知的安全分析器",
-    "zh-TW": "選擇了未知的安全分析器",
-    "ko-KR": "알 수 없는 보안 분석기가 선택되었습니다",
-    "no": "Ukjent sikkerhetsanalysator valgt",
-    "ar": "تم اختيار محلل أمان غير معروف",
-    "de": "Unbekannter Sicherheitsanalysator ausgewählt",
-    "fr": "Analyseur de sécurité inconnu choisi",
-    "it": "Analizzatore di sicurezza sconosciuto selezionato",
-    "pt": "Analisador de segurança desconhecido escolhido",
-    "tr": "Bilinmeyen güvenlik analizörü seçildi"
+    "es": "Analizador de seguridad desconocido"
   },
   "INVARIANT$UPDATE_POLICY_LABEL": {
     "en": "Update Policy",
-    "es": "Actualizar política",
-    "zh-CN": "更新策略",
-    "zh-TW": "更新策略",
-    "ko-KR": "정책 업데이트",
-    "no": "Oppdater policy",
-    "ar": "تحديث السياسة",
-    "de": "Richtlinie aktualisieren",
-    "fr": "Mettre à jour la politique",
-    "it": "Aggiorna policy",
-    "pt": "Atualizar política",
-    "tr": "İlkeyi güncelle"
+    "es": "Actualizar política"
   },
   "INVARIANT$UPDATE_SETTINGS_LABEL": {
     "en": "Update Settings",
-    "es": "Actualizar configuración",
-    "zh-CN": "更新设置",
-    "zh-TW": "更新設定",
-    "ko-KR": "설정 업데이트",
-    "no": "Oppdater innstillinger",
-    "ar": "تحديث الإعدادات",
-    "de": "Einstellungen aktualisieren",
-    "fr": "Mettre à jour les paramètres",
-    "it": "Aggiorna impostazioni",
-    "pt": "Atualizar configurações",
-    "tr": "Ayarları güncelle"
+    "es": "Actualizar configuración"
   },
   "INVARIANT$SETTINGS_LABEL": {
     "en": "Settings",
-    "es": "Configuración",
-    "zh-CN": "设置",
-    "zh-TW": "設定",
-    "ko-KR": "설정",
-    "no": "Innstillinger",
-    "ar": "الإعدادات",
-    "de": "Einstellungen",
-    "fr": "Paramètres",
-    "it": "Impostazioni",
-    "pt": "Configurações",
-    "tr": "Ayarlar"
+    "es": "Configuración"
   },
   "INVARIANT$ASK_CONFIRMATION_RISK_SEVERITY_LABEL": {
     "en": "Ask for user confirmation on risk severity:",
-    "es": "Preguntar por confirmación del usuario sobre severidad del riesgo:",
-    "zh-CN": "询问用户确认风险等级：",
-    "zh-TW": "詢問用戶確認風險等級：",
-    "ko-KR": "위험 심각도에 대한 사용자 확인 요청:",
-    "no": "Be om brukerbekreftelse på risikoalvorlighet:",
-    "ar": "اطلب تأكيد المستخدم على مستوى الخطورة:",
-    "de": "Nach Benutzerbestätigung für Risikoschweregrad fragen:",
-    "fr": "Demander la confirmation de l'utilisateur sur la gravité du risque :",
-    "it": "Chiedi conferma all'utente sulla gravità del rischio:",
-    "pt": "Solicitar confirmação do usuário sobre a gravidade do risco:",
-    "tr": "Risk şiddeti için kullanıcı onayı iste:"
+    "es": "Preguntar por confirmación del usuario sobre severidad del riesgo:"
   },
   "INVARIANT$DONT_ASK_FOR_CONFIRMATION_LABEL": {
     "en": "Don't ask for confirmation",
-    "es": "No solicitar confirmación",
-    "zh-CN": "不要请求确认",
-    "zh-TW": "不要請求確認",
-    "ko-KR": "확인 요청하지 않음",
-    "no": "Ikke spør om bekreftelse",
-    "ar": "لا تطلب التأكيد",
-    "de": "Nicht nach Bestätigung fragen",
-    "fr": "Ne pas demander de confirmation",
-    "it": "Non chiedere conferma",
-    "pt": "Não solicitar confirmação",
-    "tr": "Onay isteme"
+    "es": "No solicitar confirmación"
   },
   "INVARIANT$INVARIANT_ANALYZER_LABEL": {
     "en": "Invariant Analyzer",
-    "es": "Analizador de invariantes",
-    "zh-CN": "不变量分析器",
-    "zh-TW": "不變量分析器",
-    "ko-KR": "불변성 분석기",
-    "no": "Invariant-analysator",
-    "ar": "محلل الثوابت",
-    "de": "Invarianten-Analysator",
-    "fr": "Analyseur d'invariants",
-    "it": "Analizzatore di invarianti",
-    "pt": "Analisador de invariantes",
-    "tr": "Değişmez Analizörü"
+    "es": "Analizador de invariantes"
   },
   "INVARIANT$INVARIANT_ANALYZER_MESSAGE": {
     "en": "Invariant Analyzer continuously monitors your OpenHands agent for security issues.",
-    "es": "Analizador de invariantes continuamente monitorea tu agente de OpenHands por problemas de seguridad.",
-    "zh-CN": "不变量分析器持续监控您的 OpenHands 代理的安全问题。",
-    "zh-TW": "不變量分析器持續監控您的 OpenHands 代理的安全問題。",
-    "ko-KR": "불변성 분석기는 OpenHands 에이전트의 보안 문제를 지속적으로 모니터링합니다.",
-    "no": "Invariant-analysatoren overvåker kontinuerlig OpenHands-agenten din for sikkerhetsproblemer.",
-    "ar": "يراقب محلل الثوابت وكيل OpenHands الخاص بك باستمرار للتحقق من المشاكل الأمنية.",
-    "de": "Der Invarianten-Analysator überwacht kontinuierlich Ihren OpenHands-Agenten auf Sicherheitsprobleme.",
-    "fr": "L'analyseur d'invariants surveille en permanence votre agent OpenHands pour détecter les problèmes de sécurité.",
-    "it": "L'analizzatore di invarianti monitora continuamente il tuo agente OpenHands per problemi di sicurezza.",
-    "pt": "O analisador de invariantes monitora continuamente seu agente OpenHands em busca de problemas de segurança.",
-    "tr": "Değişmez Analizörü, OpenHands ajanınızı güvenlik sorunları için sürekli olarak izler."
+    "es": "Analizador de invariantes continuamente monitorea tu agente de OpenHands por problemas de seguridad."
   },
   "INVARIANT$CLICK_TO_LEARN_MORE_LABEL": {
     "en": "Click to learn more",
-    "es": "Clic para aprender más",
-    "zh-CN": "点击了解更多",
-    "zh-TW": "點擊了解更多",
-    "ko-KR": "자세히 알아보기",
-    "no": "Klikk for å lære mer",
-    "ar": "انقر لمعرفة المزيد",
-    "de": "Klicken Sie, um mehr zu erfahren",
-    "fr": "Cliquez pour en savoir plus",
-    "it": "Clicca per saperne di più",
-    "pt": "Clique para saber mais",
-    "tr": "Daha fazla bilgi için tıklayın"
+    "es": "Clic para aprender más"
   },
   "INVARIANT$POLICY_LABEL": {
     "en": "Policy",
-    "es": "Política",
-    "zh-CN": "策略",
-    "zh-TW": "策略",
-    "ko-KR": "정책",
-    "no": "Policy",
-    "ar": "السياسة",
-    "de": "Richtlinie",
-    "fr": "Politique",
-    "it": "Policy",
-    "pt": "Política",
-    "tr": "İlke"
+    "es": "Política"
   },
   "INVARIANT$LOG_LABEL": {
     "en": "Logs",
-    "es": "Logs",
-    "zh-CN": "日志",
-    "zh-TW": "日誌",
-    "ko-KR": "로그",
-    "no": "Logger",
-    "ar": "السجلات",
-    "de": "Protokolle",
-    "fr": "Journaux",
-    "it": "Log",
-    "pt": "Logs",
-    "tr": "Günlükler"
+    "es": "Logs"
   },
   "INVARIANT$EXPORT_TRACE_LABEL": {
     "en": "Export Trace",
-    "es": "Exportar traza",
-    "zh-CN": "导出跟踪",
-    "zh-TW": "匯出追蹤",
-    "ko-KR": "추적 내보내기",
-    "no": "Eksporter sporing",
-    "ar": "تصدير التتبع",
-    "de": "Ablaufverfolgung exportieren",
-    "fr": "Exporter la trace",
-    "it": "Esporta traccia",
-    "pt": "Exportar rastreamento",
-    "tr": "İzlemeyi dışa aktar"
+    "es": "Exportar traza"
   },
   "INVARIANT$TRACE_EXPORTED_MESSAGE": {
     "en": "Trace exported",
-    "es": "Traza exportada",
-    "zh-CN": "跟踪已导出",
-    "zh-TW": "追蹤已匯出",
-    "ko-KR": "추적 내보내기 완료",
-    "no": "Sporing eksportert",
-    "ar": "تم تصدير التتبع",
-    "de": "Ablaufverfolgung exportiert",
-    "fr": "Trace exportée",
-    "it": "Traccia esportata",
-    "pt": "Rastreamento exportado",
-    "tr": "İzleme dışa aktarıldı"
+    "es": "Traza exportada"
   },
   "INVARIANT$POLICY_UPDATED_MESSAGE": {
     "en": "Policy updated",
-    "es": "Política actualizada",
-    "zh-CN": "策略已更新",
-    "zh-TW": "策略已更新",
-    "ko-KR": "정책이 업데이트되었습니다",
-    "no": "Policy oppdatert",
-    "ar": "تم تحديث السياسة",
-    "de": "Richtlinie aktualisiert",
-    "fr": "Politique mise à jour",
-    "it": "Policy aggiornata",
-    "pt": "Política atualizada",
-    "tr": "İlke güncellendi"
+    "es": "Política actualizada"
   },
   "INVARIANT$SETTINGS_UPDATED_MESSAGE": {
     "en": "Settings updated",
-    "es": "Configuración actualizada",
-    "zh-CN": "设置已更新",
-    "zh-TW": "設定已更新",
-    "ko-KR": "설정이 업데이트되었습니다",
-    "no": "Innstillinger oppdatert",
-    "ar": "تم تحديث الإعدادات",
-    "de": "Einstellungen aktualisiert",
-    "fr": "Paramètres mis à jour",
-    "it": "Impostazioni aggiornate",
-    "pt": "Configurações atualizadas",
-    "tr": "Ayarlar güncellendi"
+    "es": "Configuración actualizada"
   },
   "CHAT_INTERFACE$INITIALIZING_AGENT_LOADING_MESSAGE": {
     "en": "Starting up!",
@@ -1517,8 +1276,7 @@
     "pt": "Conversa de chat",
     "es": "Conversación de chat",
     "ar": "محادثة تلقيم",
-    "fr": "Conversation de chat",
-    "tr": "Sohbet Konuşması"
+    "fr": "Conversation de chat"
   },
   "CHAT_INTERFACE$UNKNOWN_SENDER": {
     "en": "Unknown",
@@ -1773,12 +1531,10 @@
     "tr": "Özel"
   },
   "ERROR_MESSAGE$SHOW_DETAILS": {
-    "en": "Show details",
-    "es": "Mostrar detalles"
+    "en": "Show details"
   },
   "ERROR_MESSAGE$HIDE_DETAILS": {
-    "en": "Hide details",
-    "es": "Ocultar detalles"
+    "en": "Hide details"
   },
   "STATUS$STARTING_RUNTIME": {
     "en": "Starting Runtime...",
@@ -1860,7 +1616,7 @@
   },
   "ACCOUNT_SETTINGS_MODAL$CLOSE":{
     "en": "Close",
-    "es": "Cerrar"
+    "es": ""
   },
   "ACCOUNT_SETTINGS_MODAL$GITHUB_TOKEN_INVALID":{
     "en": "GitHub token is invalid. Please try again.",
@@ -1979,8 +1735,7 @@
     "es":"atrás"
   },
   "STATUS$ERROR_LLM_AUTHENTICATION": {
-    "en": "Error authenticating with the LLM provider. Please check your API key",
-    "es": "Error autenticando con el proveedor de LLM. Por favor revisa tu API key"
+    "en": "Error authenticating with the LLM provider. Please check your API key"
   },
   "STATUS$ERROR_RUNTIME_DISCONNECTED": {
     "en": "There was an error while connecting to the runtime. Please refresh the page."
@@ -1990,17 +1745,5 @@
   },
   "AGENT_ERROR$ACTION_TIMEOUT": {
     "en": "Action timed out."
-  },
-  "PROJECT_MENU_CARD_CONTEXT_MENU$CONNECT_TO_GITHUB_LABEL": {
-    "en": "Connect to GitHub",
-    "es": "Conectar a GitHub"
-  },
-  "PROJECT_MENU_CARD_CONTEXT_MENU$PUSH_TO_GITHUB_LABEL": {
-    "en": "Push to GitHub",
-    "es": "Subir a GitHub"
-  },
-  "PROJECT_MENU_CARD_CONTEXT_MENU$DOWNLOAD_AS_ZIP_LABEL": {
-    "en": "Download as .zip",
-    "es": "Descargar como .zip"
   }
 }

frontend/src/routes/_oh._index/hero-heading.tsx

@@ -1,4 +1,4 @@
-import BuildIt from "#/icons/build-it.svg?react";
+import BuildIt from "#/assets/build-it.svg?react";
 
 export function HeroHeading() {
   return (

frontend/src/routes/_oh.app._index/code-editor-component.tsx

@@ -29,10 +29,6 @@ function CodeEditorCompoonent({
     if (selectedPath && value) modifyFileContent(selectedPath, value);
   };
 
-  const isBase64Image = (content: string) => content.startsWith("data:image/");
-  const isPDF = (content: string) => content.startsWith("data:application/pdf");
-  const isVideo = (content: string) => content.startsWith("data:video/");
-
   React.useEffect(() => {
     const handleSave = async (event: KeyboardEvent) => {
       if (selectedPath && event.metaKey && event.key === "s") {
@@ -66,40 +62,16 @@ function CodeEditorCompoonent({
     );
   }
 
-  const fileContent = modifiedFiles[selectedPath] || files[selectedPath];
-
-  if (isBase64Image(fileContent)) {
-    return (
-      <section className="flex flex-col relative items-center overflow-auto h-[90%]">
-        <img src={fileContent} alt={selectedPath} className="object-contain" />
-      </section>
-    );
-  }
-
-  if (isPDF(fileContent)) {
-    return (
-      <iframe
-        src={fileContent}
-        title={selectedPath}
-        width="100%"
-        height="100%"
-      />
-    );
-  }
-
-  if (isVideo(fileContent)) {
-    return (
-      <video controls src={fileContent} width="100%" height="100%">
-        <track kind="captions" label="English captions" />
-      </video>
-    );
-  }
   return (
     <Editor
       data-testid="code-editor"
       path={selectedPath ?? undefined}
       defaultValue=""
-      value={selectedPath ? fileContent : undefined}
+      value={
+        selectedPath
+          ? modifiedFiles[selectedPath] || files[selectedPath]
+          : undefined
+      }
       onMount={onMount}
       onChange={handleEditorChange}
       options={{ readOnly: isReadOnly }}

frontend/src/routes/_oh.app.tsx

@@ -2,29 +2,72 @@ import { useDisclosure } from "@nextui-org/react";
 import React from "react";
 import {
   Outlet,
+  useFetcher,
   useLoaderData,
   json,
   ClientActionFunctionArgs,
+  useRouteLoaderData,
 } from "@remix-run/react";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
+import WebSocket from "ws";
+import toast from "react-hot-toast";
 import { getSettings } from "#/services/settings";
 import Security from "../components/modals/security/Security";
 import { Controls } from "#/components/controls";
-import store from "#/store";
+import store, { RootState } from "#/store";
 import { Container } from "#/components/container";
-import { clearMessages } from "#/state/chatSlice";
+import ActionType from "#/types/ActionType";
+import { handleAssistantMessage } from "#/services/actions";
+import {
+  addErrorMessage,
+  addUserMessage,
+  clearMessages,
+} from "#/state/chatSlice";
+import { useSocket } from "#/context/socket";
+import {
+  getGitHubTokenCommand,
+  getCloneRepoCommand,
+} from "#/services/terminalService";
 import { clearTerminal } from "#/state/commandSlice";
 import { useEffectOnce } from "#/utils/use-effect-once";
-import CodeIcon from "#/icons/code.svg?react";
-import GlobeIcon from "#/icons/globe.svg?react";
-import ListIcon from "#/icons/list-type-number.svg?react";
-import { clearInitialQuery } from "#/state/initial-query-slice";
+import CodeIcon from "#/assets/code.svg?react";
+import GlobeIcon from "#/assets/globe.svg?react";
+import ListIcon from "#/assets/list-type-number.svg?react";
+import { createChatMessage } from "#/services/chatService";
+import {
+  clearFiles,
+  clearInitialQuery,
+  clearSelectedRepository,
+  setImportedProjectZip,
+} from "#/state/initial-query-slice";
 import { isGitHubErrorReponse, retrieveLatestGitHubCommit } from "#/api/github";
+import OpenHands from "#/api/open-hands";
+import AgentState from "#/types/AgentState";
+import { base64ToBlob } from "#/utils/base64-to-blob";
+import { clientLoader as rootClientLoader } from "#/routes/_oh";
 import { clearJupyter } from "#/state/jupyterSlice";
 import { FilesProvider } from "#/context/files";
+import { ErrorObservation } from "#/types/core/observations";
 import { ChatInterface } from "#/components/chat-interface";
-import { WsClientProvider } from "#/context/ws-client-provider";
-import { EventHandler } from "#/components/event-handler";
+import { cn } from "#/utils/utils";
+
+interface ServerError {
+  error: boolean | string;
+  message: string;
+  [key: string]: unknown;
+}
+
+const isServerError = (data: object): data is ServerError => "error" in data;
+
+const isErrorObservation = (data: object): data is ErrorObservation =>
+  "observation" in data && data.observation === "error";
+
+const isAgentStateChange = (
+  data: object,
+): data is { extras: { agent_state: AgentState } } =>
+  "extras" in data &&
+  data.extras instanceof Object &&
+  "agent_state" in data.extras;
 
 export const clientLoader = async () => {
   const ghToken = localStorage.getItem("ghToken");
@@ -74,26 +117,174 @@ export const clientAction = async ({ request }: ClientActionFunctionArgs) => {
 
 function App() {
   const dispatch = useDispatch();
-  const { settings, token, ghToken, lastCommit } =
+  const { files, importedProjectZip } = useSelector(
+    (state: RootState) => state.initalQuery,
+  );
+  const { start, send, setRuntimeIsInitialized, runtimeActive } = useSocket();
+  const { settings, token, ghToken, repo, q, lastCommit } =
     useLoaderData<typeof clientLoader>();
+  const fetcher = useFetcher();
+  const data = useRouteLoaderData<typeof rootClientLoader>("routes/_oh");
 
   const secrets = React.useMemo(
     () => [ghToken, token].filter((secret) => secret !== null),
     [ghToken, token],
   );
 
+  // To avoid re-rendering the component when the user object changes, we memoize the user ID.
+  // We use this to ensure the github token is valid before exporting it to the terminal.
+  const userId = React.useMemo(() => {
+    if (data?.user && !isGitHubErrorReponse(data.user)) return data.user.id;
+    return null;
+  }, [data?.user]);
+
   const Terminal = React.useMemo(
     () => React.lazy(() => import("../components/terminal/Terminal")),
     [],
   );
 
+  const addIntialQueryToChat = (
+    query: string,
+    base64Files: string[],
+    timestamp = new Date().toISOString(),
+  ) => {
+    dispatch(
+      addUserMessage({
+        content: query,
+        imageUrls: base64Files,
+        timestamp,
+      }),
+    );
+  };
+
+  const sendInitialQuery = (query: string, base64Files: string[]) => {
+    const timestamp = new Date().toISOString();
+    send(createChatMessage(query, base64Files, timestamp));
+  };
+
+  const handleOpen = React.useCallback(() => {
+    const initEvent = {
+      action: ActionType.INIT,
+      args: settings,
+    };
+    send(JSON.stringify(initEvent));
+
+    // display query in UI, but don't send it to the server
+    if (q) addIntialQueryToChat(q, files);
+  }, [settings]);
+
+  const handleMessage = React.useCallback(
+    (message: MessageEvent<WebSocket.Data>) => {
+      // set token received from the server
+      const parsed = JSON.parse(message.data.toString());
+      if ("token" in parsed) {
+        fetcher.submit({ token: parsed.token }, { method: "post" });
+        return;
+      }
+
+      if (isServerError(parsed)) {
+        if (parsed.error_code === 401) {
+          toast.error("Session expired.");
+          fetcher.submit({}, { method: "POST", action: "/end-session" });
+          return;
+        }
+
+        if (typeof parsed.error === "string") {
+          toast.error(parsed.error);
+        } else {
+          toast.error(parsed.message);
+        }
+
+        return;
+      }
+      if (isErrorObservation(parsed)) {
+        dispatch(
+          addErrorMessage({
+            id: parsed.extras?.error_id,
+            message: parsed.message,
+          }),
+        );
+        return;
+      }
+
+      handleAssistantMessage(message.data.toString());
+
+      // handle first time connection
+      if (
+        isAgentStateChange(parsed) &&
+        parsed.extras.agent_state === AgentState.INIT
+      ) {
+        setRuntimeIsInitialized();
+
+        // handle new session
+        if (!token) {
+          let additionalInfo = "";
+          if (ghToken && repo) {
+            send(getCloneRepoCommand(ghToken, repo));
+            additionalInfo = `Repository ${repo} has been cloned to /workspace. Please check the /workspace for files.`;
+            dispatch(clearSelectedRepository()); // reset selected repository; maybe better to move this to '/'?
+          }
+          // if there's an uploaded project zip, add it to the chat
+          else if (importedProjectZip) {
+            additionalInfo = `Files have been uploaded. Please check the /workspace for files.`;
+          }
+
+          if (q) {
+            if (additionalInfo) {
+              sendInitialQuery(`${q}\n\n[${additionalInfo}]`, files);
+            } else {
+              sendInitialQuery(q, files);
+            }
+            dispatch(clearFiles()); // reset selected files
+          }
+        }
+      }
+    },
+    [token, ghToken, repo, q, files],
+  );
+
+  const startSocketConnection = React.useCallback(() => {
+    start({
+      token,
+      onOpen: handleOpen,
+      onMessage: handleMessage,
+    });
+  }, [token, handleOpen, handleMessage]);
+
   useEffectOnce(() => {
+    // clear and restart the socket connection
     dispatch(clearMessages());
     dispatch(clearTerminal());
     dispatch(clearJupyter());
     dispatch(clearInitialQuery()); // Clear initial query when navigating to /app
+    startSocketConnection();
   });
 
+  React.useEffect(() => {
+    if (runtimeActive && userId && ghToken) {
+      // Export if the user valid, this could happen mid-session so it is handled here
+      send(getGitHubTokenCommand(ghToken));
+    }
+  }, [userId, ghToken, runtimeActive]);
+
+  React.useEffect(() => {
+    (async () => {
+      if (runtimeActive && importedProjectZip) {
+        // upload files action
+        try {
+          const blob = base64ToBlob(importedProjectZip);
+          const file = new File([blob], "imported-project.zip", {
+            type: blob.type,
+          });
+          await OpenHands.uploadFiles([file]);
+          dispatch(setImportedProjectZip(null));
+        } catch (error) {
+          toast.error("Failed to upload project files.");
+        }
+      }
+    })();
+  }, [runtimeActive, importedProjectZip]);
+
   const {
     isOpen: securityModalIsOpen,
     onOpen: onSecurityModalOpen,
@@ -101,62 +292,62 @@ function App() {
   } = useDisclosure();
 
   return (
-    <WsClientProvider
-      enabled
-      token={token}
-      ghToken={ghToken}
-      settings={settings}
-    >
-      <EventHandler>
-        <div className="flex flex-col h-full gap-3">
-          <div className="flex h-full overflow-auto gap-3">
-            <Container className="w-[390px] max-h-full relative">
-              <ChatInterface />
-            </Container>
-
-            <div className="flex flex-col grow gap-3">
-              <Container
-                className="h-2/3"
-                labels={[
-                  { label: "Workspace", to: "", icon: <CodeIcon /> },
-                  { label: "Jupyter", to: "jupyter", icon: <ListIcon /> },
-                  {
-                    label: "Browser",
-                    to: "browser",
-                    icon: <GlobeIcon />,
-                    isBeta: true,
-                  },
-                ]}
-              >
-                <FilesProvider>
-                  <Outlet />
-                </FilesProvider>
-              </Container>
-              {/* Terminal uses some API that is not compatible in a server-environment. For this reason, we lazy load it to ensure
-               * that it loads only in the client-side. */}
-              <Container className="h-1/3 overflow-scroll" label="Terminal">
-                <React.Suspense fallback={<div className="h-full" />}>
-                  <Terminal secrets={secrets} />
-                </React.Suspense>
-              </Container>
-            </div>
-          </div>
-
-          <div className="h-[60px]">
-            <Controls
-              setSecurityOpen={onSecurityModalOpen}
-              showSecurityLock={!!settings.SECURITY_ANALYZER}
-              lastCommitData={lastCommit}
-            />
-          </div>
-          <Security
-            isOpen={securityModalIsOpen}
-            onOpenChange={onSecurityModalOpenChange}
-            securityAnalyzer={settings.SECURITY_ANALYZER}
+    <div className="flex flex-col h-full gap-3">
+      <div className="flex h-full overflow-auto gap-3">
+        <Container className="w-[390px] max-h-full relative">
+          <div
+            className={cn(
+              "w-2 h-2 rounded-full border",
+              "absolute left-3 top-3",
+              runtimeActive
+                ? "bg-green-800 border-green-500"
+                : "bg-red-800 border-red-500",
+            )}
           />
+          <ChatInterface />
+        </Container>
+
+        <div className="flex flex-col grow gap-3">
+          <Container
+            className="h-2/3"
+            labels={[
+              { label: "Workspace", to: "", icon: <CodeIcon /> },
+              { label: "Jupyter", to: "jupyter", icon: <ListIcon /> },
+              {
+                label: "Browser",
+                to: "browser",
+                icon: <GlobeIcon />,
+                isBeta: true,
+              },
+            ]}
+          >
+            <FilesProvider>
+              <Outlet />
+            </FilesProvider>
+          </Container>
+          {/* Terminal uses some API that is not compatible in a server-environment. For this reason, we lazy load it to ensure
+           * that it loads only in the client-side. */}
+          <Container className="h-1/3 overflow-scroll" label="Terminal">
+            <React.Suspense fallback={<div className="h-full" />}>
+              <Terminal secrets={secrets} />
+            </React.Suspense>
+          </Container>
         </div>
-      </EventHandler>
-    </WsClientProvider>
+      </div>
+
+      <div className="h-[60px]">
+        <Controls
+          setSecurityOpen={onSecurityModalOpen}
+          showSecurityLock={!!settings.SECURITY_ANALYZER}
+          lastCommitData={lastCommit}
+        />
+      </div>
+      <Security
+        isOpen={securityModalIsOpen}
+        onOpenChange={onSecurityModalOpenChange}
+        securityAnalyzer={settings.SECURITY_ANALYZER}
+      />
+    </div>
   );
 }
 

frontend/src/routes/_oh.tsx

@@ -21,11 +21,12 @@ import { DangerModal } from "#/components/modals/confirmation-modals/danger-moda
 import { LoadingSpinner } from "#/components/modals/LoadingProject";
 import { ModalBackdrop } from "#/components/modals/modal-backdrop";
 import { UserActions } from "#/components/user-actions";
+import { useSocket } from "#/context/socket";
 import i18n from "#/i18n";
 import { getSettings, settingsAreUpToDate } from "#/services/settings";
 import AllHandsLogo from "#/assets/branding/all-hands-logo.svg?react";
-import NewProjectIcon from "#/icons/new-project.svg?react";
-import DocsIcon from "#/icons/docs.svg?react";
+import NewProjectIcon from "#/assets/new-project.svg?react";
+import DocsIcon from "#/assets/docs.svg?react";
 import { userIsAuthenticated } from "#/utils/user-is-authenticated";
 import { generateGitHubAuthUrl } from "#/utils/generate-github-auth-url";
 import { WaitlistModal } from "#/components/waitlist-modal";
@@ -134,6 +135,7 @@ type SettingsFormData = {
 };
 
 export default function MainApp() {
+  const { stop, isConnected } = useSocket();
   const navigation = useNavigation();
   const location = useLocation();
   const {
@@ -200,6 +202,14 @@ export default function MainApp() {
     }
   }, [user]);
 
+  React.useEffect(() => {
+    if (location.pathname === "/") {
+      // If the user is on the home page, we should stop the socket connection.
+      // This is relevant when the user redirects here for whatever reason.
+      if (isConnected) stop();
+    }
+  }, [location.pathname]);
+
   const handleUserLogout = () => {
     logoutFetcher.submit(
       {},
@@ -303,9 +313,11 @@ export default function MainApp() {
             <p className="text-xs text-[#A3A3A3]">
               To continue, connect an OpenAI, Anthropic, or other LLM account
             </p>
-            <p className="text-xs text-danger">
-              Changing settings during an active session will end the session
-            </p>
+            {isConnected && (
+              <p className="text-xs text-danger">
+                Changing settings during an active session will end the session
+              </p>
+            )}
             <SettingsForm
               settings={settings}
               models={settingsFormData.models}

frontend/src/services/actions.ts

@@ -12,11 +12,8 @@ import {
 import { setCurStatusMessage } from "#/state/statusSlice";
 import store from "#/store";
 import ActionType from "#/types/ActionType";
-import {
-  ActionMessage,
-  ObservationMessage,
-  StatusMessage,
-} from "#/types/Message";
+import { ActionMessage, StatusMessage } from "#/types/Message";
+import { SocketMessage } from "#/types/ResponseType";
 import { handleObservationMessage } from "./observations";
 
 const messageActions = {
@@ -141,14 +138,22 @@ export function handleStatusMessage(message: StatusMessage) {
   }
 }
 
-export function handleAssistantMessage(message: Record<string, unknown>) {
-  if (message.action) {
-    handleActionMessage(message as unknown as ActionMessage);
-  } else if (message.observation) {
-    handleObservationMessage(message as unknown as ObservationMessage);
-  } else if (message.status_update) {
-    handleStatusMessage(message as unknown as StatusMessage);
+export function handleAssistantMessage(data: string | SocketMessage) {
+  let socketMessage: SocketMessage;
+
+  if (typeof data === "string") {
+    socketMessage = JSON.parse(data) as SocketMessage;
   } else {
-    console.error("Unknown message type", message);
+    socketMessage = data;
+  }
+
+  if ("action" in socketMessage) {
+    handleActionMessage(socketMessage);
+  } else if ("observation" in socketMessage) {
+    handleObservationMessage(socketMessage);
+  } else if ("status_update" in socketMessage) {
+    handleStatusMessage(socketMessage);
+  } else {
+    console.error("Unknown message type", socketMessage);
   }
 }

frontend/src/services/agentStateService.ts

@@ -1,7 +1,8 @@
 import ActionType from "#/types/ActionType";
 import AgentState from "#/types/AgentState";
 
-export const generateAgentStateChangeEvent = (state: AgentState) => ({
-  action: ActionType.CHANGE_AGENT_STATE,
-  args: { agent_state: state },
-});
+export const generateAgentStateChangeEvent = (state: AgentState) =>
+  JSON.stringify({
+    action: ActionType.CHANGE_AGENT_STATE,
+    args: { agent_state: state },
+  });

frontend/src/services/api.ts

@@ -63,16 +63,6 @@ export async function request(
   } catch (e) {
     onFail(`Error fetching ${url}`);
   }
-  if (response?.status === 401 && !url.startsWith("/api/authenticate")) {
-    await request(
-      "/api/authenticate",
-      {
-        method: "POST",
-      },
-      true,
-    );
-    return request(url, options, disableToast, returnResponse, maxRetries - 1);
-  }
   if (response?.status && response?.status >= 400) {
     onFail(
       `${response.status} error while fetching ${url}: ${response?.statusText}`,

frontend/src/services/chatService.ts

@@ -9,5 +9,5 @@ export function createChatMessage(
     action: ActionType.MESSAGE,
     args: { content: message, images_urls, timestamp },
   };
-  return event;
+  return JSON.stringify(event);
 }

frontend/src/services/terminalService.ts

@@ -2,7 +2,7 @@ import ActionType from "#/types/ActionType";
 
 export function getTerminalCommand(command: string, hidden: boolean = false) {
   const event = { action: ActionType.RUN, args: { command, hidden } };
-  return event;
+  return JSON.stringify(event);
 }
 
 export function getGitHubTokenCommand(gitHubToken: string) {

frontend/src/utils/cache.ts

@@ -5,17 +5,26 @@ type CacheEntry<T> = {
 };
 
 class Cache {
+  private prefix = "app_cache_";
+
   private defaultTTL = 5 * 60 * 1000; // 5 minutes
 
-  private cacheMemory: Record<string, string> = {};
+  /**
+   * Generate a unique key with prefix for local storage
+   * @param key The key to be stored in local storage
+   * @returns The unique key with prefix
+   */
+  private getKey(key: CacheKey): string {
+    return `${this.prefix}${key}`;
+  }
 
   /**
-   * Retrieve the cached data from memory
-   * @param key The key to be retrieved from memory
-   * @returns The data stored in memory
+   * Retrieve the cached data from local storage
+   * @param key The key to be retrieved from local storage
+   * @returns The data stored in local storage
    */
   public get<T>(key: CacheKey): T | null {
-    const cachedEntry = this.cacheMemory[key];
+    const cachedEntry = localStorage.getItem(this.getKey(key));
     if (cachedEntry) {
       const { data, expiration } = JSON.parse(cachedEntry) as CacheEntry<T>;
       if (Date.now() < expiration) return data;
@@ -26,34 +35,34 @@ class Cache {
   }
 
   /**
-   * Store the data in memory with expiration
-   * @param key The key to be stored in memory
-   * @param data The data to be stored in memory
+   * Store the data in local storage with expiration
+   * @param key The key to be stored in local storage
+   * @param data The data to be stored in local storage
    * @param ttl The time to live for the data in milliseconds
    * @returns void
    */
   public set<T>(key: CacheKey, data: T, ttl = this.defaultTTL): void {
     const expiration = Date.now() + ttl;
     const entry: CacheEntry<T> = { data, expiration };
-    this.cacheMemory[key] = JSON.stringify(entry);
+    localStorage.setItem(this.getKey(key), JSON.stringify(entry));
   }
 
   /**
-   * Remove the data from memory
-   * @param key The key to be removed from memory
+   * Remove the data from local storage
+   * @param key The key to be removed from local storage
    * @returns void
    */
   public delete(key: CacheKey): void {
-    delete this.cacheMemory[key];
+    localStorage.removeItem(this.getKey(key));
   }
 
   /**
-   * Clear all data
+   * Clear all data with the app prefix from local storage
    * @returns void
    */
   public clearAll(): void {
-    Object.keys(this.cacheMemory).forEach((key) => {
-      delete this.cacheMemory[key];
+    Object.keys(localStorage).forEach((key) => {
+      if (key.startsWith(this.prefix)) localStorage.removeItem(key);
     });
   }
 }

frontend/src/utils/organizeModelsAndProviders.ts

@@ -26,7 +26,6 @@ import { extractModelAndProvider } from "./extractModelAndProvider";
  */
 export const organizeModelsAndProviders = (models: string[]) => {
   const object: Record<string, { separator: string; models: string[] }> = {};
-
   models.forEach((model) => {
     const {
       separator,
@@ -46,6 +45,5 @@ export const organizeModelsAndProviders = (models: string[]) => {
     }
     object[key].models.push(modelId);
   });
-
   return object;
 };

frontend/src/utils/verified-models.ts

@@ -1,6 +1,10 @@
 // Here are the list of verified models and providers that we know work well with OpenHands.
 export const VERIFIED_PROVIDERS = ["openai", "azure", "anthropic"];
-export const VERIFIED_MODELS = ["gpt-4o", "claude-3-5-sonnet-20241022"];
+export const VERIFIED_MODELS = [
+  "gpt-4o",
+  "claude-3-5-sonnet-20240620",
+  "claude-3-5-sonnet-20241022",
+];
 
 // LiteLLM does not return OpenAI models with the provider, so we list them here to set them ourselves for consistency
 // (e.g., they return `gpt-4o` instead of `openai/gpt-4o`)
@@ -19,9 +23,11 @@ export const VERIFIED_OPENAI_MODELS = [
 export const VERIFIED_ANTHROPIC_MODELS = [
   "claude-2",
   "claude-2.1",
-  "claude-3-5-sonnet-20240620",
   "claude-3-5-sonnet-20241022",
+  "claude-3-5-sonnet-20240620",
   "claude-3-haiku-20240307",
   "claude-3-opus-20240229",
   "claude-3-sonnet-20240229",
+  "claude-instant-1",
+  "claude-instant-1.2",
 ];

frontend/test-utils.tsx

@@ -6,7 +6,7 @@ import { configureStore } from "@reduxjs/toolkit";
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { RenderOptions, render } from "@testing-library/react";
 import { AppStore, RootState, rootReducer } from "./src/store";
-import { WsClientProvider } from "#/context/ws-client-provider";
+import { SocketProvider } from "#/context/socket";
 
 const setupStore = (preloadedState?: Partial<RootState>): AppStore =>
   configureStore({
@@ -35,7 +35,7 @@ export function renderWithProviders(
   function Wrapper({ children }: PropsWithChildren<object>): JSX.Element {
     return (
       <Provider store={store}>
-        <WsClientProvider enabled={true} token={null} ghToken={null} settings={null}>{children}</WsClientProvider>
+        <SocketProvider>{children}</SocketProvider>
       </Provider>
     );
   }

openhands/agenthub/codeact_agent/codeact_agent.py

@@ -39,6 +39,7 @@ from openhands.runtime.plugins import (
     JupyterRequirement,
     PluginRequirement,
 )
+from openhands.utils.microagent import MicroAgent
 from openhands.utils.prompt import PromptManager
 
 
@@ -85,6 +86,16 @@ class CodeActAgent(Agent):
         super().__init__(llm, config)
         self.reset()
 
+        self.micro_agent = (
+            MicroAgent(
+                os.path.join(
+                    os.path.dirname(__file__), 'micro', f'{config.micro_agent_name}.md'
+                )
+            )
+            if config.micro_agent_name
+            else None
+        )
+
         self.function_calling_active = self.config.function_calling
         if self.function_calling_active and not self.llm.is_function_calling_active():
             logger.warning(
@@ -94,6 +105,7 @@ class CodeActAgent(Agent):
             self.function_calling_active = False
 
         if self.function_calling_active:
+            # Function calling mode
             self.tools = codeact_function_calling.get_tools(
                 codeact_enable_browsing=self.config.codeact_enable_browsing,
                 codeact_enable_jupyter=self.config.codeact_enable_jupyter,
@@ -102,17 +114,18 @@ class CodeActAgent(Agent):
             logger.debug(
                 f'TOOLS loaded for CodeActAgent: {json.dumps(self.tools, indent=2)}'
             )
-            self.prompt_manager = PromptManager(
-                microagent_dir=os.path.join(os.path.dirname(__file__), 'micro'),
-                prompt_dir=os.path.join(os.path.dirname(__file__), 'prompts', 'tools'),
-            )
+            self.system_prompt = codeact_function_calling.SYSTEM_PROMPT
+            self.initial_user_message = None
         else:
+            # Non-function-calling mode
             self.action_parser = CodeActResponseParser()
             self.prompt_manager = PromptManager(
-                microagent_dir=os.path.join(os.path.dirname(__file__), 'micro'),
-                prompt_dir=os.path.join(os.path.dirname(__file__), 'prompts', 'default'),
+                prompt_dir=os.path.join(os.path.dirname(__file__)),
                 agent_skills_docs=AgentSkillsRequirement.documentation,
+                micro_agent=self.micro_agent,
             )
+            self.system_prompt = self.prompt_manager.system_message
+            self.initial_user_message = self.prompt_manager.initial_user_message
 
         self.pending_actions: deque[Action] = deque()
 
@@ -324,8 +337,8 @@ class CodeActAgent(Agent):
             return self.pending_actions.popleft()
 
         # if we're done, go back
-        latest_user_message = state.get_last_user_message()
-        if latest_user_message and latest_user_message.content.strip() == '/exit':
+        last_user_message = state.get_last_user_message()
+        if last_user_message and last_user_message.strip() == '/exit':
             return AgentFinishAction()
 
         # prepare what we want to send to the LLM
@@ -390,19 +403,17 @@ class CodeActAgent(Agent):
                 role='system',
                 content=[
                     TextContent(
-                        text=self.prompt_manager.get_system_message(),
-                        cache_prompt=self.llm.is_caching_prompt_active(),
+                        text=self.system_prompt,
+                        cache_prompt=self.llm.is_caching_prompt_active(),  # Cache system prompt
                     )
                 ],
             )
         ]
-        example_message = self.prompt_manager.get_example_user_message()
-        if example_message:
+        if self.initial_user_message:
             messages.append(
                 Message(
                     role='user',
-                    content=[TextContent(text=example_message)],
-                    cache_prompt=self.llm.is_caching_prompt_active(),
+                    content=[TextContent(text=self.initial_user_message)],
                 )
             )
 
@@ -451,9 +462,8 @@ class CodeActAgent(Agent):
                 pending_tool_call_action_messages.pop(response_id)
 
             for message in messages_to_add:
+                # add regular message
                 if message:
-                    if message.role == 'user':
-                        self.prompt_manager.enhance_message(message)
                     # handle error if the message is the SAME role as the previous message
                     # litellm.exceptions.BadRequestError: litellm.BadRequestError: OpenAIException - Error code: 400 - {'detail': 'Only supports u/a/u/a/u...'}
                     # there shouldn't be two consecutive messages from the same role
@@ -483,6 +493,23 @@ class CodeActAgent(Agent):
                         break
 
         if not self.function_calling_active:
-            self.prompt_manager.add_turns_left_reminder(messages, state)
+            # The latest user message is important:
+            # we want to remind the agent of the environment constraints
+            latest_user_message = next(
+                islice(
+                    (
+                        m
+                        for m in reversed(messages)
+                        if m.role == 'user'
+                        and any(isinstance(c, TextContent) for c in m.content)
+                    ),
+                    1,
+                ),
+                None,
+            )
+            # do not add this for function calling
+            if latest_user_message:
+                reminder_text = f'\n\nENVIRONMENT REMINDER: You have {state.max_iterations - state.iteration} turns left to complete the task. When finished reply with <finish></finish>.'
+                latest_user_message.content.append(TextContent(text=reminder_text))
 
         return messages

openhands/agenthub/codeact_agent/function_calling.py

@@ -25,6 +25,13 @@ from openhands.events.action import (
 )
 from openhands.events.tool import ToolCallMetadata
 
+SYSTEM_PROMPT = """You are OpenHands agent, a helpful AI assistant that can interact with a computer to solve tasks.
+<IMPORTANT>
+* 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 "openhands@all-hands.dev" as the user.email by default, unless explicitly instructed otherwise.
+</IMPORTANT>
+"""
+
 _BASH_DESCRIPTION = """Execute a bash command in the terminal.
 * Long running commands: For commands that may run indefinitely, it should be run in the background and the output should be redirected to a file, e.g. command = `python3 app.py > server.log 2>&1 &`.
 * Interactive: If a bash command returns exit code `-1`, this means the process is not yet finished. The assistant must then send a second call to terminal with an empty `command` (which will retrieve any additional logs), or it can send additional text (set `command` to the text) to STDIN of the running process, or it can send command=`ctrl+c` to interrupt the process.

openhands/agenthub/codeact_agent/micro/flarglebargle.md

@@ -1,9 +0,0 @@
----
-name: flarglebargle
-agent: CodeActAgent
-triggers:
-- flarglebargle
----
-
-IMPORTANT! The user has said the magic word "flarglebargle". You must
-only respond with a message telling them how smart they are

openhands/agenthub/codeact_agent/micro/github.md

@@ -1,31 +1,69 @@
 ---
 name: github
 agent: CodeActAgent
-triggers:
-- github
-- git
+require_env_var:
+    SANDBOX_ENV_GITHUB_TOKEN: "Create a GitHub Personal Access Token (https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens) and set it as SANDBOX_GITHUB_TOKEN in your environment variables."
 ---
 
-You have access to an environment variable, `GITHUB_TOKEN`, which allows you to interact with
-the GitHub API.
+# How to Interact with Github
 
-You can use `curl` with the `GITHUB_TOKEN` to interact with GitHub's API.
-ALWAYS use the GitHub API for operations instead of a web browser.
+## Environment Variable Available
 
-Here are some instructions for pushing, but ONLY do this if the user asks you to:
-* NEVER push directly to the `main` or `master` branch
-* Git config (username and email) is pre-set. Do not modify.
-* You may already be on a branch called `openhands-workspace`. Create a new branch with a better name before pushing.
-* Use the GitHub API to create a pull request, if you haven't already
-* Use the main branch as the base branch, unless the user requests otherwise
-* After opening or updating a pull request, send the user a short message with a link to the pull request.
-* Do all of the above in as few steps as possible. E.g. you could open a PR with one step by running the following bash commands:
-```bash
-git checkout -b create-widget
-git add .
-git commit -m "Create widget"
-git push origin create-widget
-curl -X POST "https://api.github.com/repos/CodeActOrg/openhands/pulls" \
-    -H "Authorization: Bearer $GITHUB_TOKEN" \
-    -d '{"title":"Create widget","head":"create-widget","base":"openhands-workspace"}'
+- `GITHUB_TOKEN`: A read-only token for Github.
+
+## Using GitHub's RESTful API
+
+Use `curl` with the `GITHUB_TOKEN` to interact with GitHub's API. Here are some common operations:
+
+Here's a template for API calls:
+
+```sh
+curl -H "Authorization: token $GITHUB_TOKEN" \
+    "https://api.github.com/{endpoint}"
 ```
+
+First replace `{endpoint}` with the specific API path. Common operations:
+
+1. View an issue or pull request:
+   - Issues: `/repos/{owner}/{repo}/issues/{issue_number}`
+   - Pull requests: `/repos/{owner}/{repo}/pulls/{pull_request_number}`
+
+2. List repository issues or pull requests:
+   - Issues: `/repos/{owner}/{repo}/issues`
+   - Pull requests: `/repos/{owner}/{repo}/pulls`
+
+3. Search issues or pull requests:
+   - `/search/issues?q=repo:{owner}/{repo}+is:{type}+{search_term}+state:{state}`
+   - Replace `{type}` with `issue` or `pr`
+
+4. List repository branches:
+   `/repos/{owner}/{repo}/branches`
+
+5. Get commit details:
+   `/repos/{owner}/{repo}/commits/{commit_sha}`
+
+6. Get repository details:
+   `/repos/{owner}/{repo}`
+
+7. Get user information:
+   `/user`
+
+8. Search repositories:
+   `/search/repositories?q={query}`
+
+9. Get rate limit status:
+   `/rate_limit`
+
+Replace `{owner}`, `{repo}`, `{commit_sha}`, `{issue_number}`, `{pull_request_number}`,
+`{search_term}`, `{state}`, and `{query}` with appropriate values.
+
+## Important Notes
+
+1. Always use the GitHub API for operations instead of a web browser.
+2. The `GITHUB_TOKEN` is read-only. Avoid operations that require write access.
+3. Git config (username and email) is pre-set. Do not modify.
+4. Edit and test code locally. Never push directly to remote.
+5. Verify correct branch before committing.
+6. Commit changes frequently.
+7. If the issue or task is ambiguous or lacks sufficient detail, always request clarification from the user before proceeding.
+8. You should avoid using command line tools like `sed` for file editing.

openhands/agenthub/codeact_agent/prompts/tools/system_prompt.j2

@@ -1,7 +0,0 @@
-You are OpenHands agent, a helpful AI assistant that can interact with a computer to solve tasks.
-<IMPORTANT>
-* 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 "openhands@all-hands.dev" 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.
-</IMPORTANT>
-

openhands/agenthub/codeact_agent/system_prompt.j2

@@ -163,9 +163,6 @@ IMPORTANT: Execute code using <execute_ipython>, <execute_bash>, or <execute_bro
 The assistant should utilize full file paths and the `pwd` command to prevent path-related errors.
 The assistant MUST NOT apologize to the user or thank the user after running commands or editing files. It should only address the user in response to an explicit message from the user, or to ask for more information.
 The assistant MUST NOT push any changes to GitHub unless explicitly requested to do so.
-The assistant MUST NOT include comments in the code unless they are necessary to describe non-obvious behavior, or
-to describe precisely how to apply proposed edits. Comments about applying edits should always have blank lines above
-and below.
 
 {% endset %}
 {# Combine all parts without newlines between them #}

openhands/agenthub/codeact_agent/user_prompt.j2

@@ -215,5 +215,12 @@ The server is running on port 5000 with PID 126. You can access the list of numb
 {% endset %}
 Here is an example of how you can interact with the environment for task solving:
 {{ DEFAULT_EXAMPLE }}
+{% if micro_agent %}
+--- BEGIN OF GUIDELINE ---
+The following information may assist you in completing your task:
+
+{{ micro_agent }}
+--- END OF GUIDELINE ---
+{% endif %}
 
 NOW, LET'S START!

openhands/agenthub/codeact_swe_agent/codeact_swe_agent.py

@@ -155,7 +155,7 @@ class CodeActSWEAgent(Agent):
         """
         # if we're done, go back
         last_user_message = state.get_last_user_message()
-        if last_user_message and last_user_message.content.strip() == '/exit':
+        if last_user_message and last_user_message.strip() == '/exit':
             return AgentFinishAction()
 
         # prepare what we want to send to the LLM

openhands/controller/agent_controller.py

@@ -1,6 +1,5 @@
 import asyncio
 import copy
-import os
 import traceback
 from typing import Callable, ClassVar, Type
 
@@ -260,11 +259,7 @@ class AgentController:
             observation_to_print.content = truncate_content(
                 observation_to_print.content, self.agent.llm.config.max_message_chars
             )
-        # Use info level if LOG_ALL_EVENTS is set
-        log_level = 'info' if os.getenv('LOG_ALL_EVENTS') in ('true', '1') else 'debug'
-        self.log(
-            log_level, str(observation_to_print), extra={'msg_type': 'OBSERVATION'}
-        )
+        self.log('debug', str(observation_to_print), extra={'msg_type': 'OBSERVATION'})
 
         if observation.llm_metrics is not None:
             self.agent.llm.metrics.merge(observation.llm_metrics)
@@ -287,12 +282,8 @@ class AgentController:
             action (MessageAction): The message action to handle.
         """
         if action.source == EventSource.USER:
-            # Use info level if LOG_ALL_EVENTS is set
-            log_level = (
-                'info' if os.getenv('LOG_ALL_EVENTS') in ('true', '1') else 'debug'
-            )
             self.log(
-                log_level,
+                'debug',
                 str(action),
                 extra={'msg_type': 'ACTION', 'event_source': EventSource.USER},
             )
@@ -506,9 +497,7 @@ class AgentController:
 
         await self.update_state_after_step()
 
-        # Use info level if LOG_ALL_EVENTS is set
-        log_level = 'info' if os.getenv('LOG_ALL_EVENTS') in ('true', '1') else 'debug'
-        self.log(log_level, str(action), extra={'msg_type': 'ACTION'})
+        self.log('debug', str(action), extra={'msg_type': 'ACTION'})
 
     async def _delegate_step(self):
         """Executes a single step of the delegate agent."""
@@ -674,7 +663,7 @@ class AgentController:
         # sanity check
         if start_id > end_id + 1:
             self.log(
-                'warning',
+                'debug',
                 f'start_id {start_id} is greater than end_id + 1 ({end_id + 1}). History will be empty.',
             )
             self.state.history = []
@@ -705,7 +694,7 @@ class AgentController:
                 # Match with most recent unmatched delegate action
                 if not delegate_action_ids:
                     self.log(
-                        'warning',
+                        'error',
                         f'Found AgentDelegateObservation without matching action at id={event.id}',
                     )
                     continue

openhands/controller/state/state.py

@@ -156,14 +156,14 @@ class State:
 
         return last_user_message, last_user_message_image_urls
 
-    def get_last_agent_message(self) -> MessageAction | None:
+    def get_last_agent_message(self) -> str | None:
         for event in reversed(self.history):
             if isinstance(event, MessageAction) and event.source == EventSource.AGENT:
-                return event
+                return event.content
         return None
 
-    def get_last_user_message(self) -> MessageAction | None:
+    def get_last_user_message(self) -> str | None:
         for event in reversed(self.history):
             if isinstance(event, MessageAction) and event.source == EventSource.USER:
-                return event
+                return event.content
         return None

openhands/core/config/app_config.py

@@ -69,7 +69,6 @@ class AppConfig:
     file_uploads_max_file_size_mb: int = 0
     file_uploads_restrict_file_types: bool = False
     file_uploads_allowed_extensions: list[str] = field(default_factory=lambda: ['.*'])
-    runloop_api_key: str | None = None
 
     defaults_dict: ClassVar[dict] = {}
 
@@ -140,7 +139,6 @@ class AppConfig:
                 'jwt_secret',
                 'modal_api_token_id',
                 'modal_api_token_secret',
-                'runloop_api_key',
             ]:
                 attr_value = '******' if attr_value else None
 

openhands/core/config/sandbox_config.py

@@ -14,8 +14,7 @@ class SandboxConfig:
         base_container_image: The base container image from which to build the runtime image.
         runtime_container_image: The runtime container image to use.
         user_id: The user ID for the sandbox.
-        timeout: The timeout for the default sandbox action execution.
-        remote_runtime_init_timeout: The timeout for the remote runtime to start.
+        timeout: The timeout for the sandbox.
         enable_auto_lint: Whether to enable auto-lint.
         use_host_network: Whether to use the host network.
         initialize_plugins: Whether to initialize plugins.
@@ -42,7 +41,6 @@ class SandboxConfig:
     runtime_container_image: str | None = None
     user_id: int = os.getuid() if hasattr(os, 'getuid') else 1000
     timeout: int = 120
-    remote_runtime_init_timeout: int = 180
     enable_auto_lint: bool = (
         False  # once enabled, OpenHands would lint files after editing
     )

openhands/core/logger.py

@@ -177,7 +177,7 @@ class SensitiveDataFilter(logging.Filter):
         return True
 
 
-def get_console_handler(log_level: int = logging.INFO, extra_info: str | None = None):
+def get_console_handler(log_level=logging.INFO, extra_info: str | None = None):
     """Returns a console handler for logging."""
     console_handler = logging.StreamHandler()
     console_handler.setLevel(log_level)
@@ -188,7 +188,7 @@ def get_console_handler(log_level: int = logging.INFO, extra_info: str | None =
     return console_handler
 
 
-def get_file_handler(log_dir: str, log_level: int = logging.INFO):
+def get_file_handler(log_dir, log_level=logging.INFO):
     """Returns a file handler for logging."""
     os.makedirs(log_dir, exist_ok=True)
     timestamp = datetime.now().strftime('%Y-%m-%d')

openhands/core/main.py

@@ -123,7 +123,6 @@ async def run_controller(
 
     if runtime is None:
         runtime = create_runtime(config, sid=sid)
-        await runtime.connect()
 
     event_stream = runtime.event_stream
 
@@ -189,6 +188,8 @@ async def run_controller(
 
     event_stream.subscribe(EventStreamSubscriber.MAIN, on_event, sid)
 
+    await runtime.connect()
+
     end_states = [
         AgentState.FINISHED,
         AgentState.REJECTED,
@@ -212,11 +213,7 @@ async def run_controller(
 
     # save trajectories if applicable
     if config.trajectories_path is not None:
-        # if trajectories_path is a folder, use session id as file name
-        if os.path.isdir(config.trajectories_path):
-            file_path = os.path.join(config.trajectories_path, sid + '.json')
-        else:
-            file_path = config.trajectories_path
+        file_path = os.path.join(config.trajectories_path, sid + '.json')
         os.makedirs(os.path.dirname(file_path), exist_ok=True)
         histories = [event_to_trajectory(event) for event in state.history]
         with open(file_path, 'w') as f:

openhands/runtime/__init__.py

@@ -23,10 +23,6 @@ def get_runtime_cls(name: str):
         from openhands.runtime.impl.modal.modal_runtime import ModalRuntime
 
         return ModalRuntime
-    elif name == 'runloop':
-        from openhands.runtime.impl.runloop.runloop_runtime import RunloopRuntime
-
-        return RunloopRuntime
     else:
         raise ValueError(f'Runtime {name} not supported')
 

openhands/runtime/action_execution_server.py

@@ -7,9 +7,7 @@ NOTE: this will be executed inside the docker sandbox.
 
 import argparse
 import asyncio
-import base64
 import io
-import mimetypes
 import os
 import shutil
 import tempfile
@@ -219,33 +217,6 @@ class ActionExecutor:
         working_dir = self.bash_session.workdir
         filepath = self._resolve_path(action.path, working_dir)
         try:
-            if filepath.lower().endswith(('.png', '.jpg', '.jpeg', '.bmp', '.gif')):
-                with open(filepath, 'rb') as file:
-                    image_data = file.read()
-                    encoded_image = base64.b64encode(image_data).decode('utf-8')
-                    mime_type, _ = mimetypes.guess_type(filepath)
-                    if mime_type is None:
-                        mime_type = 'image/png'  # default to PNG if mime type cannot be determined
-                    encoded_image = f'data:{mime_type};base64,{encoded_image}'
-
-                return FileReadObservation(path=filepath, content=encoded_image)
-            elif filepath.lower().endswith('.pdf'):
-                with open(filepath, 'rb') as file:
-                    pdf_data = file.read()
-                    encoded_pdf = base64.b64encode(pdf_data).decode('utf-8')
-                    encoded_pdf = f'data:application/pdf;base64,{encoded_pdf}'
-                return FileReadObservation(path=filepath, content=encoded_pdf)
-            elif filepath.lower().endswith(('.mp4', '.webm', '.ogg')):
-                with open(filepath, 'rb') as file:
-                    video_data = file.read()
-                    encoded_video = base64.b64encode(video_data).decode('utf-8')
-                    mime_type, _ = mimetypes.guess_type(filepath)
-                    if mime_type is None:
-                        mime_type = 'video/mp4'  # default to MP4 if MIME type cannot be determined
-                    encoded_video = f'data:{mime_type};base64,{encoded_video}'
-
-                return FileReadObservation(path=filepath, content=encoded_video)
-
             with open(filepath, 'r', encoding='utf-8') as file:
                 lines = read_lines(file.readlines(), action.start, action.end)
         except FileNotFoundError:

openhands/runtime/base.py

@@ -3,7 +3,6 @@ import copy
 import json
 import os
 from abc import abstractmethod
-from pathlib import Path
 from typing import Callable
 
 from requests.exceptions import ConnectionError
@@ -275,6 +274,6 @@ class Runtime(FileEditRuntimeMixin):
         raise NotImplementedError('This method is not implemented in the base class.')
 
     @abstractmethod
-    def copy_from(self, path: str) -> Path:
-        """Zip all files in the sandbox and return a path in the local filesystem."""
+    def copy_from(self, path: str) -> bytes:
+        """Zip all files in the sandbox and return as a stream of bytes."""
         raise NotImplementedError('This method is not implemented in the base class.')

openhands/runtime/impl/eventstream/eventstream_runtime.py

@@ -1,5 +1,4 @@
 import os
-from pathlib import Path
 import tempfile
 import threading
 from functools import lru_cache
@@ -605,7 +604,7 @@ class EventStreamRuntime(Runtime):
         except requests.Timeout:
             raise TimeoutError('List files operation timed out')
 
-    def copy_from(self, path: str) -> Path:
+    def copy_from(self, path: str) -> bytes:
         """Zip all files in the sandbox and return as a stream of bytes."""
         self._refresh_logs()
         try:
@@ -618,11 +617,8 @@ class EventStreamRuntime(Runtime):
                 stream=True,
                 timeout=30,
             )
-            temp_file = tempfile.NamedTemporaryFile(delete=False)
-            for chunk in response.iter_content(chunk_size=8192):
-                if chunk:  # filter out keep-alive new chunks
-                    temp_file.write(chunk)
-            return Path(temp_file.name)
+            data = response.content
+            return data
         except requests.Timeout:
             raise TimeoutError('Copy operation timed out')
 

openhands/runtime/impl/remote/remote_runtime.py

@@ -1,7 +1,6 @@
 import os
 import tempfile
 import threading
-from pathlib import Path
 from typing import Callable, Optional
 from zipfile import ZipFile
 
@@ -137,7 +136,7 @@ class RemoteRuntime(Runtime):
         try:
             response = self._send_request(
                 'GET',
-                f'{self.config.sandbox.remote_runtime_api_url}/sessions/{self.sid}',
+                f'{self.config.sandbox.remote_runtime_api_url}/runtime/{self.sid}',
                 timeout=5,
             )
         except requests.HTTPError as e:
@@ -227,7 +226,7 @@ class RemoteRuntime(Runtime):
             'command': command,
             'working_dir': '/openhands/code/',
             'environment': {'DEBUG': 'true'} if self.config.debug else {},
-            'session_id': self.sid,
+            'runtime_id': self.sid,
         }
 
         # Start the sandbox using the /start endpoint
@@ -260,23 +259,17 @@ class RemoteRuntime(Runtime):
                 {'X-Session-API-Key': start_response['session_api_key']}
             )
 
+    @tenacity.retry(
+        stop=tenacity.stop_after_delay(180) | stop_if_should_exit(),
+        reraise=True,
+        retry=tenacity.retry_if_exception_type(RuntimeNotReadyError),
+        wait=tenacity.wait_fixed(2),
+    )
     def _wait_until_alive(self):
-        retry_decorator = tenacity.retry(
-            stop=tenacity.stop_after_delay(
-                self.config.sandbox.remote_runtime_init_timeout
-            )
-            | stop_if_should_exit(),
-            reraise=True,
-            retry=tenacity.retry_if_exception_type(RuntimeNotReadyError),
-            wait=tenacity.wait_fixed(2),
-        )
-        return retry_decorator(self._wait_until_alive_impl)()
-
-    def _wait_until_alive_impl(self):
         self.log('debug', f'Waiting for runtime to be alive at url: {self.runtime_url}')
         runtime_info_response = self._send_request(
             'GET',
-            f'{self.config.sandbox.remote_runtime_api_url}/sessions/{self.sid}',
+            f'{self.config.sandbox.remote_runtime_api_url}/runtime/{self.runtime_id}',
         )
         runtime_data = runtime_info_response.json()
         assert 'runtime_id' in runtime_data
@@ -474,18 +467,13 @@ class RemoteRuntime(Runtime):
         assert isinstance(response_json, list)
         return response_json
 
-    def copy_from(self, path: str) -> Path:
+    def copy_from(self, path: str) -> bytes:
         """Zip all files in the sandbox and return as a stream of bytes."""
         params = {'path': path}
         response = self._send_request(
             'GET',
             f'{self.runtime_url}/download_files',
             params=params,
-            stream=True,
             timeout=30,
         )
-        temp_file = tempfile.NamedTemporaryFile(delete=False)
-        for chunk in response.iter_content(chunk_size=8192):
-            if chunk:  # filter out keep-alive new chunks
-                temp_file.write(chunk)
-        return Path(temp_file.name)
+        return response.content

openhands/runtime/impl/runloop/README.md

@@ -1,31 +0,0 @@
-# Runloop Runtime
-Runloop provides a fast, secure and scalable AI sandbox (Devbox).
- Check out the [runloop docs](https://docs.runloop.ai/overview/what-is-runloop)
-for more detail
-
-## Access
-Runloop is currently available in a closed beta. For early access, or
-just to say hello, sign up at https://www.runloop.ai/hello
-
-## Set up
-With your runloop API,
-```bash
-export RUNLOOP_API_KEY=<your-api-key>
-```
-
-Configure the runtime
-```bash
-export RUNTIME="runloop"
-```
-
-## Interact with your devbox
-Runloop provides additional tools to interact with your Devbox based
-runtime environment. See the [docs](https://docs.runloop.ai/tools) for an up
-to date list of tools.
-
-### Dashboard
-View logs, ssh into, or view your Devbox status from the [dashboard](https://platform.runloop.ai)
-
-### CLI
-Use the Runloop CLI to view logs, execute commands, and more.
-See the setup instructions [here](https://docs.runloop.ai/tools/cli)