Fix issue #4884: (chore) add missing FE translations

Co-authored-by: openhands <openhands@all-hands.dev>

.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:
-      issue_number: ${{ github.event.issue.number }}
+      max_iterations: 50
     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.9-nikolaik
+2. Example: export SANDBOX_RUNTIME_CONTAINER_IMAGE=ghcr.io/all-hands-ai/runtime:0.13-nikolaik
 
 ## Develop inside Docker container
 

README.md

@@ -38,15 +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.12-nikolaik
+docker pull docker.all-hands.dev/all-hands-ai/runtime:0.13-nikolaik
 
 docker run -it --pull=always \
-    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.12-nikolaik \
+    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.13-nikolaik \
     -v /var/run/docker.sock:/var/run/docker.sock \
     -p 3000:3000 \
     --add-host host.docker.internal:host-gateway \
     --name openhands-app \
-    docker.all-hands.dev/all-hands-ai/openhands:0.12
+    docker.all-hands.dev/all-hands-ai/openhands:0.13
 ```
 
 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.9-nikolaik}
+      - SANDBOX_RUNTIME_CONTAINER_IMAGE=${SANDBOX_RUNTIME_CONTAINER_IMAGE:-ghcr.io/all-hands-ai/runtime:0.13-nikolaik}
       - SANDBOX_USER_ID=${SANDBOX_USER_ID:-1234}
       - WORKSPACE_MOUNT_PATH=${WORKSPACE_BASE:-$PWD/workspace}
     ports:

config.template.toml

@@ -32,7 +32,8 @@ workspace_base = "./workspace"
 # Enable saving and restoring the session when run from CLI
 #enable_cli_session = false
 
-# Path to store trajectories
+# 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
 #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.9-nikolaik}
+      - SANDBOX_RUNTIME_CONTAINER_IMAGE=${SANDBOX_RUNTIME_CONTAINER_IMAGE:-ghcr.io/all-hands-ai/runtime:0.13-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.12-nikolaik \
+    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.13-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.12 \
+    docker.all-hands.dev/all-hands-ai/openhands:0.13 \
     python -m openhands.core.cli
 ```
 

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

@@ -58,4 +58,3 @@ The main interface consists of several key components:
 3. Use one of the recommended models, as described in the [LLMs section](usage/llms/llms.md).
 
 Remember, the GUI mode of OpenHands is designed to make your interaction with the AI assistant as smooth and intuitive as possible. Don't hesitate to explore its features to maximize your productivity.
-

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

@@ -44,7 +44,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.12-nikolaik \
+    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.13-nikolaik \
     -e SANDBOX_USER_ID=$(id -u) \
     -e WORKSPACE_MOUNT_PATH=$WORKSPACE_BASE \
     -e LLM_API_KEY=$LLM_API_KEY \
@@ -53,6 +53,6 @@ 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.12 \
+    docker.all-hands.dev/all-hands-ai/openhands:0.13 \
     python -m openhands.core.main -t "write a bash script that prints hi"
 ```

docs/modules/usage/installation.mdx

@@ -11,15 +11,15 @@
 The easiest way to run OpenHands is in Docker.
 
 ```bash
-docker pull docker.all-hands.dev/all-hands-ai/runtime:0.12-nikolaik
+docker pull docker.all-hands.dev/all-hands-ai/runtime:0.13-nikolaik
 
 docker run -it --rm --pull=always \
-    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.12-nikolaik \
+    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.13-nikolaik \
     -v /var/run/docker.sock:/var/run/docker.sock \
     -p 3000:3000 \
     --add-host host.docker.internal:host-gateway \
     --name openhands-app \
-    docker.all-hands.dev/all-hands-ai/openhands:0.12
+    docker.all-hands.dev/all-hands-ai/openhands:0.13
 ```
 
 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 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).
+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).
 
 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 27% resolve rate with the default agent in OpenHands.
+- 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.
 - 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.
 

docs/package.json

@@ -15,10 +15,10 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "^3.5.2",
-    "@docusaurus/plugin-content-pages": "^3.5.2",
-    "@docusaurus/preset-classic": "^3.5.2",
-    "@docusaurus/theme-mermaid": "^3.5.2",
+    "@docusaurus/core": "^3.6.0",
+    "@docusaurus/plugin-content-pages": "^3.6.0",
+    "@docusaurus/preset-classic": "^3.6.0",
+    "@docusaurus/theme-mermaid": "^3.6.0",
     "@mdx-js/react": "^3.1.0",
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.4.0",
@@ -29,7 +29,7 @@
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^3.5.1",
-    "@docusaurus/tsconfig": "^3.5.2",
+    "@docusaurus/tsconfig": "^3.6.0",
     "@docusaurus/types": "^3.5.1",
     "typescript": "~5.6.3"
   },

evaluation/EDA/run_infer.py

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

evaluation/gorilla/run_infer.py

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

evaluation/swe_bench/eval_infer.py

@@ -83,6 +83,7 @@ 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

@@ -81,7 +81,7 @@ def get_instruction(instance: pd.Series, metadata: EvalMetadata):
             '</pr_description>\n\n'
             'Can you help me implement the necessary changes to the repository so that the requirements specified in the <pr_description> are met?\n'
             "I've already taken care of all changes to any of the test files described in the <pr_description>. This means you DON'T have to modify the testing logic or any of the tests in any way!\n"
-            'Your task is to make the minimal changes to non-tests files in the /repo directory to ensure the <pr_description> is satisfied.\n'
+            'Your task is to make the minimal changes to non-tests files in the /workspace directory to ensure the <pr_description> is satisfied.\n'
             'Follow these steps to resolve the issue:\n'
             '1. As a first step, it might be a good idea to explore the repo to familiarize yourself with its structure.\n'
             '2. Create a script to reproduce the error and execute it with `python <filename.py>` using the BashTool, to confirm the error\n'
@@ -146,6 +146,7 @@ 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,7 +127,8 @@ def process_instance(instance: Any, metadata: EvalMetadata, reset_logger: bool =
         raise ValueError('State should not be None.')
 
     # retrieve the last message from the agent
-    model_answer_raw = state.get_last_agent_message()
+    last_agent_message = state.get_last_agent_message()
+    model_answer_raw = last_agent_message.content if last_agent_message else ''
 
     # 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 { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { describe, afterEach, vi, it, expect } from "vitest";
 import { ChatInput } from "#/components/chat-input";
 
@@ -158,4 +158,46 @@ 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

@@ -1,19 +1,156 @@
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { render, screen, within } from "@testing-library/react";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { act, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { renderWithProviders } from "test-utils";
 import { ChatInterface } from "#/components/chat-interface";
-import { SocketProvider } from "#/context/socket";
+import { addUserMessage } from "#/state/chatSlice";
+import { SUGGESTIONS } from "#/utils/suggestions";
+import * as ChatSlice from "#/state/chatSlice";
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const renderChatInterface = (messages: (Message | ErrorMessage)[]) =>
-  render(<ChatInterface />, { wrapper: SocketProvider });
+  renderWithProviders(<ChatInterface />);
+
+describe("Empty state", () => {
+  const { send: sendMock } = vi.hoisted(() => ({
+    send: vi.fn(),
+  }));
+
+  const { useSocket: useSocketMock } = vi.hoisted(() => ({
+    useSocket: vi.fn(() => ({ send: sendMock, runtimeActive: true })),
+  }));
+
+  beforeAll(() => {
+    vi.mock("#/context/socket", async (importActual) => ({
+      ...(await importActual<typeof import("#/context/socket")>()),
+      useSocket: useSocketMock,
+    }));
+  });
 
-describe.skip("ChatInterface", () => {
   afterEach(() => {
     vi.clearAllMocks();
   });
 
-  it.todo("should render suggestions if empty");
+  it("should render suggestions if empty", () => {
+    const { store } = renderWithProviders(<ChatInterface />, {
+      preloadedState: {
+        chat: { messages: [] },
+      },
+    });
+
+    expect(screen.getByTestId("suggestions")).toBeInTheDocument();
+
+    act(() => {
+      store.dispatch(
+        addUserMessage({
+          content: "Hello",
+          imageUrls: [],
+          timestamp: new Date().toISOString(),
+        }),
+      );
+    });
+
+    expect(screen.queryByTestId("suggestions")).not.toBeInTheDocument();
+  });
+
+  it("should render the default suggestions", () => {
+    renderWithProviders(<ChatInterface />, {
+      preloadedState: {
+        chat: { messages: [] },
+      },
+    });
+
+    const suggestions = screen.getByTestId("suggestions");
+    const repoSuggestions = Object.keys(SUGGESTIONS.repo);
+
+    // check that there are at most 4 suggestions displayed
+    const displayedSuggestions = within(suggestions).getAllByRole("button");
+    expect(displayedSuggestions.length).toBeLessThanOrEqual(4);
+
+    // Check that each displayed suggestion is one of the repo suggestions
+    displayedSuggestions.forEach((suggestion) => {
+      expect(repoSuggestions).toContain(suggestion.textContent);
+    });
+  });
+
+  it.fails(
+    "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
+      useSocketMock.mockImplementation(() => ({
+        send: sendMock,
+        runtimeActive: false, // mock an inactive runtime setup
+      }));
+      const addUserMessageSpy = vi.spyOn(ChatSlice, "addUserMessage");
+      const user = userEvent.setup();
+      const { store } = renderWithProviders(<ChatInterface />, {
+        preloadedState: {
+          chat: { messages: [] },
+        },
+      });
+
+      const suggestions = screen.getByTestId("suggestions");
+      const displayedSuggestions = within(suggestions).getAllByRole("button");
+      const input = screen.getByTestId("chat-input");
+
+      await user.click(displayedSuggestions[0]);
+
+      // user message loaded to input
+      expect(addUserMessageSpy).not.toHaveBeenCalled();
+      expect(screen.queryByTestId("suggestions")).toBeInTheDocument();
+      expect(store.getState().chat.messages).toHaveLength(0);
+      expect(input).toHaveValue(displayedSuggestions[0].textContent);
+    },
+  );
+
+  it.fails(
+    "should send the message to the socket only if the runtime is active",
+    async () => {
+      useSocketMock.mockImplementation(() => ({
+        send: sendMock,
+        runtimeActive: false, // mock an inactive runtime setup
+      }));
+      const user = userEvent.setup();
+      const { rerender } = renderWithProviders(<ChatInterface />, {
+        preloadedState: {
+          chat: { messages: [] },
+        },
+      });
+
+      const suggestions = screen.getByTestId("suggestions");
+      const displayedSuggestions = within(suggestions).getAllByRole("button");
+
+      await user.click(displayedSuggestions[0]);
+      expect(sendMock).not.toHaveBeenCalled();
+
+      useSocketMock.mockImplementation(() => ({
+        send: sendMock,
+        runtimeActive: true, // mock an active runtime setup
+      }));
+      rerender(<ChatInterface />);
+
+      await waitFor(() =>
+        expect(sendMock).toHaveBeenCalledWith(expect.any(String)),
+      );
+    },
+  );
+});
+
+describe.skip("ChatInterface", () => {
+  beforeAll(() => {
+    // mock useScrollToBottom hook
+    vi.mock("#/hooks/useScrollToBottom", () => ({
+      useScrollToBottom: vi.fn(() => ({
+        scrollDomToBottom: vi.fn(),
+        onChatBodyScroll: vi.fn(),
+        hitBottom: vi.fn(),
+      })),
+    }));
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
 
   it("should render messages", () => {
     const messages: Message[] = [

frontend/__tests__/components/interactive-chat-box.test.tsx

@@ -25,6 +25,21 @@ describe("InteractiveChatBox", () => {
     within(chatBox).getByTestId("upload-image-input");
   });
 
+  it.fails("should set custom values", () => {
+    render(
+      <InteractiveChatBox
+        onSubmit={onSubmitMock}
+        onStop={onStopMock}
+        value="Hello, world!"
+      />,
+    );
+
+    const chatBox = screen.getByTestId("interactive-chat-box");
+    const chatInput = within(chatBox).getByTestId("chat-input");
+
+    expect(chatInput).toHaveValue("Hello, world!");
+  });
+
   it("should display the image previews when images are uploaded", async () => {
     const user = userEvent.setup();
     render(<InteractiveChatBox onSubmit={onSubmitMock} onStop={onStopMock} />);

frontend/__tests__/components/suggestion-item.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { SuggestionItem } from "#/components/suggestion-item";
+
+describe("SuggestionItem", () => {
+  const suggestionItem = { label: "suggestion1", value: "a long text value" };
+  const onClick = vi.fn();
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should render a suggestion", () => {
+    render(<SuggestionItem suggestion={suggestionItem} onClick={onClick} />);
+
+    expect(screen.getByTestId("suggestion")).toBeInTheDocument();
+    expect(screen.getByText(/suggestion1/i)).toBeInTheDocument();
+  });
+
+  it("should call onClick when clicking a suggestion", async () => {
+    const user = userEvent.setup();
+    render(<SuggestionItem suggestion={suggestionItem} onClick={onClick} />);
+
+    const suggestion = screen.getByTestId("suggestion");
+    await user.click(suggestion);
+
+    expect(onClick).toHaveBeenCalledWith("a long text value");
+  });
+});

frontend/__tests__/components/suggestions.test.tsx

@@ -0,0 +1,60 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Suggestions } from "#/components/suggestions";
+
+describe("Suggestions", () => {
+  const firstSuggestion = {
+    label: "first-suggestion",
+    value: "value-of-first-suggestion",
+  };
+  const secondSuggestion = {
+    label: "second-suggestion",
+    value: "value-of-second-suggestion",
+  };
+  const suggestions = [firstSuggestion, secondSuggestion];
+
+  const onSuggestionClickMock = vi.fn();
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should render suggestions", () => {
+    render(
+      <Suggestions
+        suggestions={suggestions}
+        onSuggestionClick={onSuggestionClickMock}
+      />,
+    );
+
+    expect(screen.getByTestId("suggestions")).toBeInTheDocument();
+    const suggestionElements = screen.getAllByTestId("suggestion");
+
+    expect(suggestionElements).toHaveLength(2);
+    expect(suggestionElements[0]).toHaveTextContent("first-suggestion");
+    expect(suggestionElements[1]).toHaveTextContent("second-suggestion");
+  });
+
+  it("should call onSuggestionClick when clicking a suggestion", async () => {
+    const user = userEvent.setup();
+    render(
+      <Suggestions
+        suggestions={suggestions}
+        onSuggestionClick={onSuggestionClickMock}
+      />,
+    );
+
+    const suggestionElements = screen.getAllByTestId("suggestion");
+
+    await user.click(suggestionElements[0]);
+    expect(onSuggestionClickMock).toHaveBeenCalledWith(
+      "value-of-first-suggestion",
+    );
+
+    await user.click(suggestionElements[1]);
+    expect(onSuggestionClickMock).toHaveBeenCalledWith(
+      "value-of-second-suggestion",
+    );
+  });
+});

frontend/__tests__/initial-query.test.tsx

@@ -0,0 +1,17 @@
+import { describe, it, expect } from "vitest";
+import store from "../src/store";
+import { setInitialQuery, clearInitialQuery } from "../src/state/initial-query-slice";
+
+describe("Initial Query Behavior", () => {
+  it("should clear initial query when clearInitialQuery is dispatched", () => {
+    // Set up initial query in the store
+    store.dispatch(setInitialQuery("test query"));
+    expect(store.getState().initalQuery.initialQuery).toBe("test query");
+
+    // Clear the initial query
+    store.dispatch(clearInitialQuery());
+
+    // Verify initial query is cleared
+    expect(store.getState().initalQuery.initialQuery).toBeNull();
+  });
+});

frontend/__tests__/routes/_oh.app.test.tsx

@@ -0,0 +1,5 @@
+import { describe, it } from "vitest";
+
+describe("App", () => {
+  it.todo("should render");
+});

frontend/__tests__/utils/cache.test.ts

@@ -0,0 +1,53 @@
+import { afterEach } from "node:test";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { cache } from "#/utils/cache";
+
+describe("Cache", () => {
+  const testKey = "key";
+  const testData = { message: "Hello, world!" };
+  const testTTL = 1000; // 1 second
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("gets data from memory if not expired", () => {
+    cache.set(testKey, testData, testTTL);
+
+    expect(cache.get(testKey)).toEqual(testData);
+  });
+
+  it("should expire after 5 minutes by default", () => {
+    cache.set(testKey, testData);
+    expect(cache.get(testKey)).not.toBeNull();
+
+    vi.advanceTimersByTime(5 * 60 * 1000 + 1);
+
+    expect(cache.get(testKey)).toBeNull();
+  });
+
+  it("returns null if cached data is expired", () => {
+    cache.set(testKey, testData, testTTL);
+
+    vi.advanceTimersByTime(testTTL + 1);
+    expect(cache.get(testKey)).toBeNull();
+  });
+
+  it("deletes data from memory", () => {
+    cache.set(testKey, testData, testTTL);
+    cache.delete(testKey);
+    expect(cache.get(testKey)).toBeNull();
+  });
+
+  it("clears all data with the app prefix from memory", () => {
+    cache.set(testKey, testData, testTTL);
+    cache.set("anotherKey", { data: "More data" }, testTTL);
+    cache.clearAll();
+    expect(cache.get(testKey)).toBeNull();
+    expect(cache.get("anotherKey")).toBeNull();
+  });
+});

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "openhands-frontend",
-  "version": "0.12.3",
+  "version": "0.13.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "openhands-frontend",
-      "version": "0.12.3",
+      "version": "0.13.0",
       "dependencies": {
         "@monaco-editor/react": "^4.6.0",
         "@nextui-org/react": "^2.4.8",
@@ -63,6 +63,7 @@
         "@typescript-eslint/parser": "^7.18.0",
         "@vitest/coverage-v8": "^1.6.0",
         "autoprefixer": "^10.4.20",
+        "cross-env": "^7.0.3",
         "eslint": "^8.57.0",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-airbnb-typescript": "^18.0.0",
@@ -7923,6 +7924,24 @@
         }
       }
     },
+    "node_modules/cross-env": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.1"
+      },
+      "bin": {
+        "cross-env": "src/bin/cross-env.js",
+        "cross-env-shell": "src/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=10.14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
     "node_modules/cross-fetch": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz",

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openhands-frontend",
-  "version": "0.12.3",
+  "version": "0.13.0",
   "private": true,
   "type": "module",
   "engines": {
@@ -45,8 +45,8 @@
     "ws": "^8.18.0"
   },
   "scripts": {
-    "dev": "npm run make-i18n && VITE_MOCK_API=false remix vite:dev",
-    "dev:mock": "npm run make-i18n && VITE_MOCK_API=true remix vite:dev",
+    "dev": "npm run make-i18n && cross-env VITE_MOCK_API=false remix vite:dev",
+    "dev:mock": "npm run make-i18n && cross-env VITE_MOCK_API=true remix vite:dev",
     "build": "npm run make-i18n && tsc && remix vite:build",
     "start": "npx sirv-cli build/ --single",
     "test": "vitest run",
@@ -89,6 +89,7 @@
     "@typescript-eslint/parser": "^7.18.0",
     "@vitest/coverage-v8": "^1.6.0",
     "autoprefixer": "^10.4.20",
+    "cross-env": "^7.0.3",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^18.0.0",

frontend/src/api/github.ts

@@ -122,6 +122,9 @@ export const retrieveGitHubUser = async (
       id: data.id,
       login: data.login,
       avatar_url: data.avatar_url,
+      company: data.company,
+      name: data.name,
+      email: data.email,
     };
 
     return user;
@@ -136,33 +139,6 @@ export const retrieveGitHubUser = async (
   return error;
 };
 
-/**
- * Given a GitHub token and a repository name, creates a repository for the authenticated user
- * @param token The GitHub token
- * @param repositoryName Name of the repository to create
- * @param description Description of the repository
- * @param isPrivate Boolean indicating if the repository should be private
- * @returns The created repository or an error response
- */
-export const createGitHubRepository = async (
-  token: string,
-  repositoryName: string,
-  description?: string,
-  isPrivate = true,
-): Promise<GitHubRepository | GitHubErrorReponse> => {
-  const response = await fetch("https://api.github.com/user/repos", {
-    method: "POST",
-    headers: generateGitHubAPIHeaders(token),
-    body: JSON.stringify({
-      name: repositoryName,
-      description,
-      private: isPrivate,
-    }),
-  });
-
-  return response.json();
-};
-
 export const retrieveLatestGitHubCommit = async (
   token: string,
   repository: string,

frontend/src/api/open-hands.ts

@@ -1,4 +1,5 @@
 import { request } from "#/services/api";
+import { cache } from "#/utils/cache";
 import {
   SaveFileSuccessResponse,
   FileUploadSuccessResponse,
@@ -15,7 +16,13 @@ class OpenHands {
    * @returns List of models available
    */
   static async getModels(): Promise<string[]> {
-    return request("/api/options/models");
+    const cachedData = cache.get<string[]>("models");
+    if (cachedData) return cachedData;
+
+    const data = await request("/api/options/models");
+    cache.set("models", data);
+
+    return data;
   }
 
   /**
@@ -23,7 +30,13 @@ class OpenHands {
    * @returns List of agents available
    */
   static async getAgents(): Promise<string[]> {
-    return request(`/api/options/agents`);
+    const cachedData = cache.get<string[]>("agents");
+    if (cachedData) return cachedData;
+
+    const data = await request(`/api/options/agents`);
+    cache.set("agents", data);
+
+    return data;
   }
 
   /**
@@ -31,11 +44,23 @@ class OpenHands {
    * @returns List of security analyzers available
    */
   static async getSecurityAnalyzers(): Promise<string[]> {
-    return request(`/api/options/security-analyzers`);
+    const cachedData = cache.get<string[]>("agents");
+    if (cachedData) return cachedData;
+
+    const data = await request(`/api/options/security-analyzers`);
+    cache.set("security-analyzers", data);
+
+    return data;
   }
 
   static async getConfig(): Promise<GetConfigResponse> {
-    return request("/config.json");
+    const cachedData = cache.get<GetConfigResponse>("config");
+    if (cachedData) return cachedData;
+
+    const data = await request("/config.json");
+    cache.set("config", data);
+
+    return data;
   }
 
   /**

frontend/src/components/Jupyter.tsx

@@ -25,7 +25,11 @@ function JupyterCell({ cell }: IJupyterCell): JSX.Element {
           className="scrollbar-custom scrollbar-thumb-gray-500 hover:scrollbar-thumb-gray-400 dark:scrollbar-thumb-white/10 dark:hover:scrollbar-thumb-white/20 overflow-auto px-5"
           style={{ padding: 0, marginBottom: 0, fontSize: "0.75rem" }}
         >
-          <SyntaxHighlighter language="python" style={atomOneDark}>
+          <SyntaxHighlighter
+            language="python"
+            style={atomOneDark}
+            wrapLongLines
+          >
             {code}
           </SyntaxHighlighter>
         </pre>
@@ -78,7 +82,11 @@ function JupyterCell({ cell }: IJupyterCell): JSX.Element {
   );
 }
 
-function JupyterEditor(): JSX.Element {
+interface JupyterEditorProps {
+  maxWidth: number;
+}
+
+function JupyterEditor({ maxWidth }: JupyterEditorProps) {
   const { t } = useTranslation();
 
   const { cells } = useSelector((state: RootState) => state.jupyter);
@@ -88,7 +96,7 @@ function JupyterEditor(): JSX.Element {
     useScrollToBottom(jupyterRef);
 
   return (
-    <div className="flex-1">
+    <div className="flex-1" style={{ maxWidth }}>
       <div
         className="overflow-y-auto h-full"
         ref={jupyterRef}

frontend/src/components/chat-input.tsx

@@ -16,6 +16,7 @@ interface ChatInputProps {
   onChange?: (message: string) => void;
   onFocus?: () => void;
   onBlur?: () => void;
+  onImagePaste?: (files: File[]) => void;
   className?: React.HTMLAttributes<HTMLDivElement>["className"];
 }
 
@@ -32,9 +33,51 @@ export function ChatInput({
   onChange,
   onFocus,
   onBlur,
+  onImagePaste,
   className,
 }: ChatInputProps) {
   const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+  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
+    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);
+      }
+    }
+    // For text paste, let the default behavior handle it
+  };
+
+  const handleDragOver = (event: React.DragEvent<HTMLTextAreaElement>) => {
+    event.preventDefault();
+    if (event.dataTransfer.types.includes("Files")) {
+      setIsDraggingOver(true);
+    }
+  };
+
+  const handleDragLeave = (event: React.DragEvent<HTMLTextAreaElement>) => {
+    event.preventDefault();
+    setIsDraggingOver(false);
+  };
+
+  const handleDrop = (event: React.DragEvent<HTMLTextAreaElement>) => {
+    event.preventDefault();
+    setIsDraggingOver(false);
+    if (onImagePaste && event.dataTransfer.files.length > 0) {
+      const files = Array.from(event.dataTransfer.files).filter((file) =>
+        file.type.startsWith("image/"),
+      );
+      if (files.length > 0) {
+        onImagePaste(files);
+      }
+    }
+  };
 
   const handleSubmitMessage = () => {
     if (textareaRef.current?.value) {
@@ -67,12 +110,20 @@ export function ChatInput({
         onChange={handleChange}
         onFocus={onFocus}
         onBlur={onBlur}
+        onPaste={handlePaste}
+        onDrop={handleDrop}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
         value={value}
         minRows={1}
         maxRows={maxRows}
+        data-dragging-over={isDraggingOver}
         className={cn(
-          "grow text-sm self-center placeholder:text-neutral-400 text-white resize-none bg-transparent outline-none ring-0",
-          "transition-[height] duration-200 ease-in-out",
+          "grow text-sm self-center placeholder:text-neutral-400 text-white resize-none outline-none ring-0",
+          "transition-all duration-200 ease-in-out",
+          isDraggingOver
+            ? "bg-neutral-600/50 rounded-lg px-2"
+            : "bg-transparent",
           className,
         )}
       />

frontend/src/components/chat-interface.tsx

@@ -1,5 +1,6 @@
 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";
@@ -18,6 +19,9 @@ import ConfirmationButtons from "./chat/ConfirmationButtons";
 import { ErrorMessage } from "./error-message";
 import { ContinueButton } from "./continue-button";
 import { ScrollToBottomButton } from "./scroll-to-bottom-button";
+import { Suggestions } from "./suggestions";
+import { SUGGESTIONS } from "#/utils/suggestions";
+import BuildIt from "#/assets/build-it.svg?react";
 
 const isErrorMessage = (
   message: Message | ErrorMessage,
@@ -37,17 +41,23 @@ export function ChatInterface() {
     "positive" | "negative"
   >("positive");
   const [feedbackModalIsOpen, setFeedbackModalIsOpen] = React.useState(false);
+  const [messageToSend, setMessageToSend] = React.useState<string | null>(null);
 
   const handleSendMessage = async (content: string, files: File[]) => {
+    posthog.capture("user_message_sent", {
+      current_message_count: messages.length,
+    });
     const promises = files.map((file) => convertImageToBase64(file));
     const imageUrls = await Promise.all(promises);
 
     const timestamp = new Date().toISOString();
     dispatch(addUserMessage({ content, imageUrls, timestamp }));
     send(createChatMessage(content, imageUrls, timestamp));
+    setMessageToSend(null);
   };
 
   const handleStop = () => {
+    posthog.capture("stop_button_clicked");
     send(generateAgentStateChangeEvent(AgentState.STOPPED));
   };
 
@@ -64,6 +74,28 @@ export function ChatInterface() {
 
   return (
     <div className="h-full flex flex-col justify-between">
+      {messages.length === 0 && (
+        <div className="flex flex-col gap-6 h-full px-4 items-center justify-center">
+          <div className="flex flex-col items-center p-4 bg-neutral-700 rounded-xl w-full">
+            <BuildIt width={45} height={54} />
+            <span className="font-semibold text-[20px] leading-6 -tracking-[0.01em] gap-1">
+              Let&apos;s start building!
+            </span>
+          </div>
+          <Suggestions
+            suggestions={Object.entries(SUGGESTIONS.repo)
+              .slice(0, 4)
+              .map(([label, value]) => ({
+                label,
+                value,
+              }))}
+            onSuggestionClick={(value) => {
+              setMessageToSend(value);
+            }}
+          />
+        </div>
+      )}
+
       <div
         ref={scrollRef}
         onScroll={(e) => onChatBodyScroll(e.currentTarget)}
@@ -123,6 +155,8 @@ export function ChatInterface() {
             curAgentState === AgentState.AWAITING_USER_CONFIRMATION
           }
           mode={curAgentState === AgentState.RUNNING ? "stop" : "submit"}
+          value={messageToSend ?? undefined}
+          onChange={setMessageToSend}
         />
       </div>
 

frontend/src/components/form/custom-input.tsx

@@ -1,3 +1,6 @@
+import { useTranslation } from "react-i18next";
+import { I18nKey } from "#/i18n/declaration";
+
 interface CustomInputProps {
   name: string;
   label: string;
@@ -13,12 +16,19 @@ export function CustomInput({
   defaultValue,
   type = "text",
 }: CustomInputProps) {
+  const { t } = useTranslation();
+
   return (
     <label htmlFor={name} className="flex flex-col gap-2">
       <span className="text-[11px] leading-4 tracking-[0.5px] font-[500] text-[#A3A3A3]">
         {label}
         {required && <span className="text-[#FF4D4F]">*</span>}
-        {!required && <span className="text-[#A3A3A3]"> (optional)</span>}
+        {!required && (
+          <span className="text-[#A3A3A3]">
+            {" "}
+            {t(I18nKey.CUSTOM_INPUT$OPTIONAL_LABEL)}
+          </span>
+        )}
       </span>
       <input
         id={name}

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

@@ -5,16 +5,18 @@ import {
   Switch,
 } from "@nextui-org/react";
 import { useFetcher, useLocation, useNavigate } from "@remix-run/react";
+import { useTranslation } from "react-i18next";
 import clsx from "clsx";
 import React from "react";
-import { ModalBackdrop } from "#/components/modals/modal-backdrop";
-import { ModelSelector } from "#/components/modals/settings/ModelSelector";
-import { clientAction } from "#/routes/settings";
-import { Settings } from "#/services/settings";
-import { extractModelAndProvider } from "#/utils/extractModelAndProvider";
 import { organizeModelsAndProviders } from "#/utils/organizeModelsAndProviders";
+import { ModelSelector } from "#/components/modals/settings/ModelSelector";
+import { Settings } from "#/services/settings";
+import { ModalBackdrop } from "#/components/modals/modal-backdrop";
+import { clientAction } from "#/routes/settings";
+import { extractModelAndProvider } from "#/utils/extractModelAndProvider";
 import ModalButton from "../buttons/ModalButton";
 import { DangerModal } from "../modals/confirmation-modals/danger-modal";
+import { I18nKey } from "#/i18n/declaration";
 
 interface SettingsFormProps {
   disabled?: boolean;
@@ -35,6 +37,7 @@ export function SettingsForm({
 }: SettingsFormProps) {
   const location = useLocation();
   const navigate = useNavigate();
+  const { t } = useTranslation();
 
   const fetcher = useFetcher<typeof clientAction>();
   const formRef = React.useRef<HTMLFormElement>(null);
@@ -161,7 +164,7 @@ export function SettingsForm({
               label: "text-[#A3A3A3] text-xs",
             }}
           >
-            Advanced Options
+            {t(I18nKey.SETTINGS_FORM$ADVANCED_OPTIONS_LABEL)}
           </Switch>
 
           {showAdvancedOptions && (
@@ -171,7 +174,7 @@ export function SettingsForm({
                   htmlFor="custom-model"
                   className="font-[500] text-[#A3A3A3] text-xs"
                 >
-                  Custom Model
+                  {t(I18nKey.SETTINGS_FORM$CUSTOM_MODEL_LABEL)}
                 </label>
                 <Input
                   isDisabled={disabled}
@@ -190,7 +193,7 @@ export function SettingsForm({
                   htmlFor="base-url"
                   className="font-[500] text-[#A3A3A3] text-xs"
                 >
-                  Base URL
+                  {t(I18nKey.SETTINGS_FORM$BASE_URL_LABEL)}
                 </label>
                 <Input
                   isDisabled={disabled}
@@ -220,7 +223,7 @@ export function SettingsForm({
               htmlFor="api-key"
               className="font-[500] text-[#A3A3A3] text-xs"
             >
-              API Key
+              {t(I18nKey.SETTINGS_FORM$API_KEY_LABEL)}
             </label>
             <Input
               isDisabled={disabled}
@@ -234,14 +237,14 @@ export function SettingsForm({
               }}
             />
             <p className="text-sm text-[#A3A3A3]">
-              Don&apos;t know your API key?{" "}
+              {t(I18nKey.SETTINGS_FORM$DONT_KNOW_API_KEY_LABEL)}{" "}
               <a
                 href="https://docs.all-hands.dev/modules/usage/llms"
                 rel="noreferrer noopener"
                 target="_blank"
                 className="underline underline-offset-2"
               >
-                Click here for instructions
+                {t(I18nKey.SETTINGS_FORM$CLICK_HERE_FOR_INSTRUCTIONS_LABEL)}
               </a>
             </p>
           </fieldset>
@@ -255,7 +258,7 @@ export function SettingsForm({
                 htmlFor="agent"
                 className="font-[500] text-[#A3A3A3] text-xs"
               >
-                Agent
+                {t(I18nKey.SETTINGS_FORM$AGENT_LABEL)}
               </label>
               <Autocomplete
                 isDisabled={disabled}
@@ -291,7 +294,7 @@ export function SettingsForm({
                   htmlFor="security-analyzer"
                   className="font-[500] text-[#A3A3A3] text-xs"
                 >
-                  Security Analyzer (Optional)
+                  {t(I18nKey.SETTINGS_FORM$SECURITY_ANALYZER_LABEL)}
                 </label>
                 <Autocomplete
                   isDisabled={disabled}
@@ -334,7 +337,7 @@ export function SettingsForm({
                   label: "text-[#A3A3A3] text-xs",
                 }}
               >
-                Enable Confirmation Mode
+                {t(I18nKey.SETTINGS_FORM$ENABLE_CONFIRMATION_MODE_LABEL)}
               </Switch>
             </>
           )}
@@ -345,18 +348,18 @@ export function SettingsForm({
             <ModalButton
               disabled={disabled || fetcher.state === "submitting"}
               type="submit"
-              text="Save"
+              text={t(I18nKey.SETTINGS_FORM$SAVE_LABEL)}
               className="bg-[#4465DB] w-full"
             />
             <ModalButton
-              text="Close"
+              text={t(I18nKey.SETTINGS_FORM$CLOSE_LABEL)}
               className="bg-[#737373] w-full"
               onClick={handleCloseClick}
             />
           </div>
           <ModalButton
             disabled={disabled}
-            text="Reset to defaults"
+            text={t(I18nKey.SETTINGS_FORM$RESET_TO_DEFAULTS_LABEL)}
             variant="text-like"
             className="text-danger self-start"
             onClick={() => {
@@ -369,15 +372,17 @@ export function SettingsForm({
       {confirmResetDefaultsModalOpen && (
         <ModalBackdrop>
           <DangerModal
-            title="Are you sure?"
-            description="All saved information in your AI settings will be deleted including any API keys."
+            title={t(I18nKey.SETTINGS_FORM$ARE_YOU_SURE_LABEL)}
+            description={t(
+              I18nKey.SETTINGS_FORM$ALL_INFORMATION_WILL_BE_DELETED_MESSAGE,
+            )}
             buttons={{
               danger: {
-                text: "Reset Defaults",
+                text: t(I18nKey.SETTINGS_FORM$RESET_TO_DEFAULTS_LABEL),
                 onClick: handleConfirmResetSettings,
               },
               cancel: {
-                text: "Cancel",
+                text: t(I18nKey.SETTINGS_FORM$CANCEL_LABEL),
                 onClick: () => setConfirmResetDefaultsModalOpen(false),
               },
             }}
@@ -387,12 +392,17 @@ export function SettingsForm({
       {confirmEndSessionModalOpen && (
         <ModalBackdrop>
           <DangerModal
-            title="End Session"
-            description="Changing your settings will clear your workspace and start a new session. Are you sure you want to continue?"
+            title={t(I18nKey.SETTINGS_FORM$END_SESSION_LABEL)}
+            description={t(
+              I18nKey.SETTINGS_FORM$CHANGING_WORKSPACE_WARNING_MESSAGE,
+            )}
             buttons={{
-              danger: { text: "End Session", onClick: handleConfirmEndSession },
+              danger: {
+                text: t(I18nKey.SETTINGS_FORM$END_SESSION_LABEL),
+                onClick: handleConfirmEndSession,
+              },
               cancel: {
-                text: "Cancel",
+                text: t(I18nKey.SETTINGS_FORM$CANCEL_LABEL),
                 onClick: () => setConfirmEndSessionModalOpen(false),
               },
             }}

frontend/src/components/interactive-chat-box.tsx

@@ -9,6 +9,8 @@ interface InteractiveChatBoxProps {
   mode?: "stop" | "submit";
   onSubmit: (message: string, images: File[]) => void;
   onStop: () => void;
+  value?: string;
+  onChange?: (message: string) => void;
 }
 
 export function InteractiveChatBox({
@@ -16,6 +18,8 @@ export function InteractiveChatBox({
   mode = "submit",
   onSubmit,
   onStop,
+  value,
+  onChange,
 }: InteractiveChatBoxProps) {
   const [images, setImages] = React.useState<File[]>([]);
 
@@ -53,6 +57,13 @@ export function InteractiveChatBox({
         className={cn(
           "flex items-end gap-1",
           "bg-neutral-700 border border-neutral-600 rounded-lg px-2 py-[10px]",
+          "transition-colors duration-200",
+          "hover:border-neutral-500 focus-within:border-neutral-500",
+          "group relative",
+          "before:pointer-events-none before:absolute before:inset-0 before:rounded-lg before:transition-colors",
+          "before:border-2 before:border-dashed before:border-transparent",
+          "[&:has(*:focus-within)]:before:border-neutral-500/50",
+          "[&:has(*[data-dragging-over='true'])]:before:border-neutral-500/50",
         )}
       >
         <UploadImageInput onUpload={handleUpload} />
@@ -60,8 +71,11 @@ export function InteractiveChatBox({
           disabled={isDisabled}
           button={mode}
           placeholder="What do you want to build?"
+          onChange={onChange}
           onSubmit={handleSubmit}
           onStop={onStop}
+          value={value}
+          onImagePaste={handleUpload}
         />
       </div>
     </div>

frontend/src/components/modals/AccountSettingsModal.tsx

@@ -1,5 +1,6 @@
 import { useFetcher, useRouteLoaderData } from "@remix-run/react";
 import React from "react";
+import { useTranslation } from "react-i18next";
 import { BaseModalTitle } from "./confirmation-modals/BaseModal";
 import ModalBody from "./ModalBody";
 import ModalButton from "../buttons/ModalButton";
@@ -9,6 +10,7 @@ import { clientLoader } from "#/routes/_oh";
 import { clientAction as settingsClientAction } from "#/routes/settings";
 import { clientAction as loginClientAction } from "#/routes/login";
 import { AvailableLanguages } from "#/i18n";
+import { I18nKey } from "#/i18n/declaration";
 
 interface AccountSettingsModalProps {
   onClose: () => void;
@@ -23,6 +25,7 @@ function AccountSettingsModal({
   gitHubError,
   analyticsConsent,
 }: AccountSettingsModalProps) {
+  const { t } = useTranslation();
   const data = useRouteLoaderData<typeof clientLoader>("routes/_oh");
   const settingsFetcher = useFetcher<typeof settingsClientAction>({
     key: "settings",
@@ -86,13 +89,13 @@ function AccountSettingsModal({
           />
           {gitHubError && (
             <p className="text-danger text-xs">
-              GitHub token is invalid. Please try again.
+              {t(I18nKey.ACCOUNT_SETTINGS_MODAL$GITHUB_TOKEN_INVALID)}
             </p>
           )}
           {data?.ghToken && !gitHubError && (
             <ModalButton
               variant="text-like"
-              text="Disconnect"
+              text={t(I18nKey.ACCOUNT_SETTINGS_MODAL$DISCONNECT)}
               onClick={() => {
                 settingsFetcher.submit(
                   {},
@@ -122,11 +125,11 @@ function AccountSettingsModal({
             }
             type="submit"
             intent="account"
-            text="Save"
+            text={t(I18nKey.ACCOUNT_SETTINGS_MODAL$SAVE)}
             className="bg-[#4465DB]"
           />
           <ModalButton
-            text="Close"
+            text={t(I18nKey.ACCOUNT_SETTINGS_MODAL$CLOSE)}
             onClick={onClose}
             className="bg-[#737373]"
           />

frontend/src/components/modals/ConnectToGitHubByTokenModal.tsx

@@ -1,4 +1,5 @@
 import { Form, useNavigation } from "@remix-run/react";
+import { useTranslation } from "react-i18next";
 import {
   BaseModalDescription,
   BaseModalTitle,
@@ -7,10 +8,11 @@ import ModalButton from "../buttons/ModalButton";
 import AllHandsLogo from "#/assets/branding/all-hands-logo-spark.svg?react";
 import ModalBody from "./ModalBody";
 import { CustomInput } from "../form/custom-input";
+import { I18nKey } from "#/i18n/declaration";
 
 function ConnectToGitHubByTokenModal() {
   const navigation = useNavigation();
-
+  const { t } = useTranslation();
   return (
     <ModalBody testID="auth-modal">
       <div className="flex flex-col gap-2">
@@ -29,13 +31,18 @@ function ConnectToGitHubByTokenModal() {
             required
           />
           <p className="text-xs text-[#A3A3A3]">
-            By connecting you agree to our{" "}
-            <span className="text-hyperlink">terms of service</span>.
+            {t(
+              I18nKey.CONNECT_TO_GITHUB_BY_TOKEN_MODAL$BY_CONNECTING_YOU_AGREE,
+            )}{" "}
+            <span className="text-hyperlink">
+              {t(I18nKey.CONNECT_TO_GITHUB_BY_TOKEN_MODAL$TERMS_OF_SERVICE)}
+            </span>
+            .
           </p>
         </label>
         <ModalButton
           type="submit"
-          text="Continue"
+          text={t(I18nKey.CONNECT_TO_GITHUB_BY_TOKEN_MODAL$CONTINUE)}
           className="bg-[#791B80] w-full"
           disabled={navigation.state === "loading"}
         />

frontend/src/components/modals/LoadingProject.tsx

@@ -1,6 +1,8 @@
+import { useTranslation } from "react-i18next";
 import LoadingSpinnerOuter from "#/assets/loading-outer.svg?react";
 import { cn } from "#/utils/utils";
 import ModalBody from "./ModalBody";
+import { I18nKey } from "#/i18n/declaration";
 
 interface LoadingSpinnerProps {
   size: "small" | "large";
@@ -28,10 +30,12 @@ interface LoadingProjectModalProps {
 }
 
 function LoadingProjectModal({ message }: LoadingProjectModalProps) {
+  const { t } = useTranslation();
+
   return (
     <ModalBody>
       <span className="text-xl leading-6 -tracking-[0.01em] font-semibold">
-        {message || "Loading..."}
+        {message || t(I18nKey.LOADING_PROJECT$LOADING)}
       </span>
       <LoadingSpinner size="large" />
     </ModalBody>

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

@@ -1,4 +1,5 @@
 import { useFetcher, useRouteLoaderData } from "@remix-run/react";
+import { useTranslation } from "react-i18next";
 import ModalBody from "./ModalBody";
 import { CustomInput } from "../form/custom-input";
 import ModalButton from "../buttons/ModalButton";
@@ -8,6 +9,7 @@ import {
 } from "./confirmation-modals/BaseModal";
 import { clientLoader } from "#/routes/_oh";
 import { clientAction } from "#/routes/login";
+import { I18nKey } from "#/i18n/declaration";
 
 interface ConnectToGitHubModalProps {
   onClose: () => void;
@@ -16,6 +18,7 @@ interface ConnectToGitHubModalProps {
 export function ConnectToGitHubModal({ onClose }: ConnectToGitHubModalProps) {
   const data = useRouteLoaderData<typeof clientLoader>("routes/_oh");
   const fetcher = useFetcher<typeof clientAction>({ key: "login" });
+  const { t } = useTranslation();
 
   return (
     <ModalBody>
@@ -24,14 +27,14 @@ export function ConnectToGitHubModal({ onClose }: ConnectToGitHubModalProps) {
         <BaseModalDescription
           description={
             <span>
-              Get your token{" "}
+              {t(I18nKey.CONNECT_TO_GITHUB_MODAL$GET_YOUR_TOKEN)}{" "}
               <a
                 href="https://github.com/settings/tokens/new?description=openhands-app&scopes=repo,user,workflow"
                 target="_blank"
                 rel="noreferrer noopener"
                 className="text-[#791B80] underline"
               >
-                here
+                {t(I18nKey.CONNECT_TO_GITHUB_MODAL$HERE)}
               </a>
             </span>
           }
@@ -55,13 +58,13 @@ export function ConnectToGitHubModal({ onClose }: ConnectToGitHubModalProps) {
           <ModalButton
             testId="connect-to-github"
             type="submit"
-            text="Connect"
+            text={t(I18nKey.CONNECT_TO_GITHUB_MODAL$CONNECT)}
             disabled={fetcher.state === "submitting"}
             className="bg-[#791B80] w-full"
           />
           <ModalButton
             onClick={onClose}
-            text="Close"
+            text={t(I18nKey.CONNECT_TO_GITHUB_MODAL$CLOSE)}
             className="bg-[#737373] w-full"
           />
         </div>

frontend/src/components/modals/security/Security.tsx

@@ -1,6 +1,8 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 import SecurityInvariant from "./invariant/Invariant";
 import BaseModal from "../base-modal/BaseModal";
+import { I18nKey } from "#/i18n/declaration";
 
 interface SecurityProps {
   isOpen: boolean;
@@ -17,11 +19,13 @@ const SecurityAnalyzers: Record<SecurityAnalyzerOption, React.ElementType> = {
 };
 
 function Security({ isOpen, onOpenChange, securityAnalyzer }: SecurityProps) {
+  const { t } = useTranslation();
+
   const AnalyzerComponent =
     securityAnalyzer &&
     SecurityAnalyzers[securityAnalyzer as SecurityAnalyzerOption]
       ? SecurityAnalyzers[securityAnalyzer as SecurityAnalyzerOption]
-      : () => <div>Unknown security analyzer chosen</div>;
+      : () => <div>{t(I18nKey.SECURITY$UNKNOWN_ANALYZER_LABEL)}</div>;
 
   return (
     <BaseModal

frontend/src/components/modals/security/invariant/Invariant.tsx

@@ -123,7 +123,7 @@ function SecurityInvariant(): JSX.Element {
 
   async function exportTraces(): Promise<void> {
     const data = await request(`/api/security/export-trace`);
-    toast.info("Trace exported");
+    toast.info(t(I18nKey.INVARIANT$TRACE_EXPORTED_MESSAGE));
 
     const filename = `openhands-trace-${getFormattedDateTime()}.json`;
     downloadJSON(data, filename);
@@ -134,7 +134,7 @@ function SecurityInvariant(): JSX.Element {
       method: "POST",
       body: JSON.stringify({ policy }),
     });
-    toast.info("Policy updated");
+    toast.info(t(I18nKey.INVARIANT$POLICY_UPDATED_MESSAGE));
   }
 
   async function updateSettings(): Promise<void> {
@@ -143,7 +143,7 @@ function SecurityInvariant(): JSX.Element {
       method: "POST",
       body: JSON.stringify(payload),
     });
-    toast.info("Settings updated");
+    toast.info(t(I18nKey.INVARIANT$SETTINGS_UPDATED_MESSAGE));
   }
 
   const handleExportTraces = useCallback(() => {
@@ -162,9 +162,9 @@ function SecurityInvariant(): JSX.Element {
     logs: (
       <>
         <div className="flex justify-between items-center border-b border-neutral-600 mb-4 p-4">
-          <h2 className="text-2xl">Logs</h2>
+          <h2 className="text-2xl">{t(I18nKey.INVARIANT$LOG_LABEL)}</h2>
           <Button onClick={handleExportTraces} className="bg-neutral-700">
-            Export Trace
+            {t(I18nKey.INVARIANT$EXPORT_TRACE_LABEL)}
           </Button>
         </div>
         <div className="flex-1 p-4 max-h-screen overflow-y-auto" ref={logsRef}>
@@ -195,9 +195,9 @@ function SecurityInvariant(): JSX.Element {
     policy: (
       <>
         <div className="flex justify-between items-center border-b border-neutral-600 mb-4 p-4">
-          <h2 className="text-2xl">Policy</h2>
+          <h2 className="text-2xl">{t(I18nKey.INVARIANT$POLICY_LABEL)}</h2>
           <Button className="bg-neutral-700" onClick={handleUpdatePolicy}>
-            Update Policy
+            {t(I18nKey.INVARIANT$UPDATE_POLICY_LABEL)}
           </Button>
         </div>
         <div className="flex grow items-center justify-center">
@@ -214,14 +214,16 @@ function SecurityInvariant(): JSX.Element {
     settings: (
       <>
         <div className="flex justify-between items-center border-b border-neutral-600 mb-4 p-4">
-          <h2 className="text-2xl">Settings</h2>
+          <h2 className="text-2xl">{t(I18nKey.INVARIANT$SETTINGS_LABEL)}</h2>
           <Button className="bg-neutral-700" onClick={handleUpdateSettings}>
-            Update Settings
+            {t(I18nKey.INVARIANT$UPDATE_SETTINGS_LABEL)}
           </Button>
         </div>
         <div className="flex grow p-4">
           <div className="flex flex-col w-full">
-            <p className="mb-2">Ask for user confirmation on risk severity:</p>
+            <p className="mb-2">
+              {t(I18nKey.INVARIANT$ASK_CONFIRMATION_RISK_SEVERITY_LABEL)}
+            </p>
             <Select
               placeholder="Select risk severity"
               value={selectedRisk}
@@ -264,7 +266,7 @@ function SecurityInvariant(): JSX.Element {
                 key={ActionSecurityRisk.HIGH + 1}
                 aria-label="Don't ask for confirmation"
               >
-                Don&apos;t ask for confirmation
+                {t(I18nKey.INVARIANT$DONT_ASK_FOR_CONFIRMATION_LABEL)}
               </SelectItem>
             </Select>
           </div>
@@ -278,18 +280,17 @@ function SecurityInvariant(): JSX.Element {
       <div className="w-60 bg-neutral-800 border-r border-r-neutral-600 p-4 flex-shrink-0">
         <div className="text-center mb-2">
           <InvariantLogoIcon className="mx-auto mb-1" />
-          <b>Invariant Analyzer</b>
+          <b>{t(I18nKey.INVARIANT$INVARIANT_ANALYZER_LABEL)}</b>
         </div>
         <p className="text-[0.6rem]">
-          Invariant Analyzer continuously monitors your OpenHands agent for
-          security issues.{" "}
+          {t(I18nKey.INVARIANT$INVARIANT_ANALYZER_MESSAGE)}{" "}
           <a
             className="underline"
             href="https://github.com/invariantlabs-ai/invariant"
             target="_blank"
             rel="noreferrer"
           >
-            Click to learn more
+            {t(I18nKey.INVARIANT$CLICK_TO_LEARN_MORE_LABEL)}
           </a>
         </p>
         <hr className="border-t border-neutral-600 my-2" />
@@ -298,19 +299,19 @@ function SecurityInvariant(): JSX.Element {
             className={`cursor-pointer p-2 rounded ${activeSection === "logs" && "bg-neutral-600"}`}
             onClick={() => setActiveSection("logs")}
           >
-            Logs
+            {t(I18nKey.INVARIANT$LOG_LABEL)}
           </div>
           <div
             className={`cursor-pointer p-2 rounded ${activeSection === "policy" && "bg-neutral-600"}`}
             onClick={() => setActiveSection("policy")}
           >
-            Policy
+            {t(I18nKey.INVARIANT$POLICY_LABEL)}
           </div>
           <div
             className={`cursor-pointer p-2 rounded ${activeSection === "settings" && "bg-neutral-600"}`}
             onClick={() => setActiveSection("settings")}
           >
-            Settings
+            {t(I18nKey.INVARIANT$SETTINGS_LABEL)}
           </div>
         </ul>
       </div>

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { useDispatch } from "react-redux";
 import toast from "react-hot-toast";
+import posthog from "posthog-js";
 import EllipsisH from "#/assets/ellipsis-h.svg?react";
 import { ModalBackdrop } from "../modals/modal-backdrop";
 import { ConnectToGitHubModal } from "../modals/connect-to-github-modal";
@@ -11,6 +12,7 @@ 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";
 
 interface ProjectMenuCardProps {
   isConnectedToGitHub: boolean;
@@ -31,18 +33,17 @@ export function ProjectMenuCard({
   const [contextMenuIsOpen, setContextMenuIsOpen] = React.useState(false);
   const [connectToGitHubModalOpen, setConnectToGitHubModalOpen] =
     React.useState(false);
+  const [working, setWorking] = React.useState(false);
 
   const toggleMenuVisibility = () => {
     setContextMenuIsOpen((prev) => !prev);
   };
 
   const handlePushToGitHub = () => {
+    posthog.capture("push_to_github_button_clicked");
     const rawEvent = {
       content: `
-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.
+Please push the changes to GitHub and open a pull request.
 `,
       imageUrls: [],
       timestamp: new Date().toISOString(),
@@ -58,20 +59,27 @@ Finally, open up a pull request using the GitHub API and the token in the GITHUB
     setContextMenuIsOpen(false);
   };
 
+  const handleDownloadWorkspace = () => {
+    posthog.capture("download_workspace_button_clicked");
+    try {
+      setWorking(true);
+      downloadWorkspace().then(
+        () => setWorking(false),
+        () => setWorking(false),
+      );
+    } catch (error) {
+      toast.error("Failed to download workspace");
+    }
+  };
+
   return (
     <div className="px-4 py-[10px] w-[337px] rounded-xl border border-[#525252] flex justify-between items-center relative">
-      {contextMenuIsOpen && (
+      {!working && contextMenuIsOpen && (
         <ProjectMenuCardContextMenu
           isConnectedToGitHub={isConnectedToGitHub}
           onConnectToGitHub={() => setConnectToGitHubModalOpen(true)}
           onPushToGitHub={handlePushToGitHub}
-          onDownloadWorkspace={() => {
-            try {
-              downloadWorkspace();
-            } catch (error) {
-              toast.error("Failed to download workspace");
-            }
-          }}
+          onDownloadWorkspace={handleDownloadWorkspace}
           onClose={() => setContextMenuIsOpen(false)}
         />
       )}
@@ -93,7 +101,11 @@ Finally, open up a pull request using the GitHub API and the token in the GITHUB
         onClick={toggleMenuVisibility}
         aria-label="Open project menu"
       >
-        <EllipsisH width={36} height={36} />
+        {working ? (
+          <LoadingSpinner size="small" />
+        ) : (
+          <EllipsisH width={36} height={36} />
+        )}
       </button>
       {connectToGitHubModalOpen && (
         <ModalBackdrop onClose={() => setConnectToGitHubModalOpen(false)}>

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

@@ -1,5 +1,7 @@
+import { useTranslation } from "react-i18next";
 import { cn } from "#/utils/utils";
 import CloudConnection from "#/assets/cloud-connection.svg?react";
+import { I18nKey } from "#/i18n/declaration";
 
 interface ProjectMenuDetailsPlaceholderProps {
   isConnectedToGitHub: boolean;
@@ -10,9 +12,13 @@ export function ProjectMenuDetailsPlaceholder({
   isConnectedToGitHub,
   onConnectToGitHub,
 }: ProjectMenuDetailsPlaceholderProps) {
+  const { t } = useTranslation();
+
   return (
     <div className="flex flex-col">
-      <span className="text-sm leading-6 font-semibold">New Project</span>
+      <span className="text-sm leading-6 font-semibold">
+        {t(I18nKey.PROJECT_MENU_DETAILS_PLACEHOLDER$NEW_PROJECT_LABEL)}
+      </span>
       <button
         type="button"
         onClick={onConnectToGitHub}

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

@@ -1,5 +1,7 @@
+import { useTranslation } from "react-i18next";
 import ExternalLinkIcon from "#/assets/external-link.svg?react";
 import { formatTimeDelta } from "#/utils/format-time-delta";
+import { I18nKey } from "#/i18n/declaration";
 
 interface ProjectMenuDetailsProps {
   repoName: string;
@@ -12,6 +14,7 @@ export function ProjectMenuDetails({
   avatar,
   lastCommit,
 }: ProjectMenuDetailsProps) {
+  const { t } = useTranslation();
   return (
     <div className="flex flex-col">
       <a
@@ -32,7 +35,8 @@ export function ProjectMenuDetails({
       >
         <span>{lastCommit.sha.slice(-7)}</span> <span>&middot;</span>{" "}
         <span>
-          {formatTimeDelta(new Date(lastCommit.commit.author.date))} ago
+          {formatTimeDelta(new Date(lastCommit.commit.author.date))}{" "}
+          {t(I18nKey.PROJECT_MENU_DETAILS$AGO_LABEL)}
         </span>
       </a>
     </div>

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

@@ -1,6 +1,8 @@
+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;
@@ -18,7 +20,7 @@ export function ProjectMenuCardContextMenu({
   onClose,
 }: ProjectMenuCardContextMenuProps) {
   const menuRef = useClickOutsideElement<HTMLUListElement>(onClose);
-
+  const { t } = useTranslation();
   return (
     <ContextMenu
       ref={menuRef}
@@ -26,16 +28,16 @@ export function ProjectMenuCardContextMenu({
     >
       {!isConnectedToGitHub && (
         <ContextMenuListItem onClick={onConnectToGitHub}>
-          Connect to GitHub
+          {t(I18nKey.PROJECT_MENU_CARD_CONTEXT_MENU$CONNECT_TO_GITHUB_LABEL)}
         </ContextMenuListItem>
       )}
       {isConnectedToGitHub && (
         <ContextMenuListItem onClick={onPushToGitHub}>
-          Push to GitHub
+          {t(I18nKey.PROJECT_MENU_CARD_CONTEXT_MENU$PUSH_TO_GITHUB_LABEL)}
         </ContextMenuListItem>
       )}
       <ContextMenuListItem onClick={onDownloadWorkspace}>
-        Download as .zip
+        {t(I18nKey.PROJECT_MENU_CARD_CONTEXT_MENU$DOWNLOAD_AS_ZIP_LABEL)}
       </ContextMenuListItem>
     </ContextMenu>
   );

frontend/src/components/suggestion-item.tsx

@@ -0,0 +1,21 @@
+export type Suggestion = { label: string; value: string };
+
+interface SuggestionItemProps {
+  suggestion: Suggestion;
+  onClick: (value: string) => void;
+}
+
+export function SuggestionItem({ suggestion, onClick }: SuggestionItemProps) {
+  return (
+    <li className="border border-neutral-600 rounded-xl hover:bg-neutral-700">
+      <button
+        type="button"
+        data-testid="suggestion"
+        onClick={() => onClick(suggestion.value)}
+        className="text-[16px] leading-6 -tracking-[0.01em] text-center w-full p-4 font-semibold"
+      >
+        {suggestion.label}
+      </button>
+    </li>
+  );
+}

frontend/src/components/suggestions.tsx

@@ -0,0 +1,23 @@
+import { SuggestionItem, type Suggestion } from "./suggestion-item";
+
+interface SuggestionsProps {
+  suggestions: Suggestion[];
+  onSuggestionClick: (value: string) => void;
+}
+
+export function Suggestions({
+  suggestions,
+  onSuggestionClick,
+}: SuggestionsProps) {
+  return (
+    <ul data-testid="suggestions" className="flex flex-col gap-4 w-full">
+      {suggestions.map((suggestion, index) => (
+        <SuggestionItem
+          key={index}
+          suggestion={suggestion}
+          onClick={onSuggestionClick}
+        />
+      ))}
+    </ul>
+  );
+}

frontend/src/context/socket.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Data } from "ws";
+import posthog from "posthog-js";
 import EventLogger from "#/utils/event-logger";
 
 interface WebSocketClientOptions {
@@ -58,6 +59,7 @@ function SocketProvider({ children }: SocketProviderProps) {
     ]);
 
     ws.addEventListener("open", (event) => {
+      posthog.capture("socket_opened");
       setIsConnected(true);
       options?.onOpen?.(event);
     });
@@ -70,11 +72,13 @@ function SocketProvider({ children }: SocketProviderProps) {
     });
 
     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);

frontend/src/i18n/translation.json

@@ -191,7 +191,8 @@
     "fr": "Planificateur",
     "it": "Pianificatore",
     "pt": "Planejador",
-    "es": "Planificador"
+    "es": "Planificador",
+    "tr": "Planlayıcı"
   },
   "WORKSPACE$JUPYTER_TAB_LABEL": {
     "en": "Jupyter IPython",
@@ -204,7 +205,8 @@
     "fr": "Jupyter IPython",
     "it": "Jupyter IPython",
     "pt": "Jupyter IPython",
-    "es": "Jupyter IPython"
+    "es": "Jupyter IPython",
+    "tr": "Jupyter IPython"
   },
   "WORKSPACE$CODE_EDITOR_TAB_LABEL": {
     "en": "Code Editor",
@@ -258,7 +260,8 @@
     "fr": "Par défaut: ./workspace",
     "it": "Predefinito: ./workspace",
     "pt": "Padrão: ./workspace",
-    "es": "Predeterminado: ./workspace"
+    "es": "Predeterminado: ./workspace",
+    "tr": "Varsayılan: ./workspace"
   },
   "CONFIGURATION$MODAL_TITLE": {
     "en": "Configuration",
@@ -341,7 +344,8 @@
     "fr": "Langue",
     "it": "Lingua",
     "pt": "Idioma",
-    "es": "Idioma"
+    "es": "Idioma",
+    "tr": "Dil"
   },
   "CONFIGURATION$LANGUAGE_SELECT_PLACEHOLDER": {
     "en": "Select a language",
@@ -410,7 +414,8 @@
     "fr": "Enregistrer",
     "it": "Salva",
     "pt": "Salvar",
-    "es": "Guardar"
+    "es": "Guardar",
+    "tr": "Kaydet"
   },
   "CONFIGURATION$MODAL_RESET_BUTTON_LABEL": {
     "en": "Reset to defaults",
@@ -798,7 +803,96 @@
     "tr": "İptal"
   },
   "FEEDBACK$EMAIL_PLACEHOLDER": {
-    "en": "Enter your email address."
+    "en": "Enter your email address",
+    "es": "Ingresa tu correo electrónico"
+  },
+  "FEEDBACK$PASSWORD_COPIED_MESSAGE": {
+    "en": "Password copied to clipboard.",
+    "es": "Contraseña copiada al portapapeles."
+  },
+  "FEEDBACK$GO_TO_FEEDBACK": {
+    "en": "Go to shared feedback",
+    "es": "Ir a feedback compartido"
+  },
+  "FEEDBACK$PASSWORD": {
+    "en": "Password:",
+    "es": "Contraseña:"
+  },
+  "FEEDBACK$INVALID_EMAIL_FORMAT": {
+    "en": "Invalid email format",
+    "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:"
+  },
+  "FEEDBACK$COPY_LABEL": {
+    "en": "Copy",
+    "es": "Copiar"
+  },
+  "FEEDBACK$SHARING_SETTINGS_LABEL": {
+    "en": "Sharing settings",
+    "es": "Configuración de compartir"
+  },
+  "SECURITY$UNKNOWN_ANALYZER_LABEL":{
+    "en": "Unknown security analyzer chosen",
+    "es": "Analizador de seguridad desconocido"
+  },
+  "INVARIANT$UPDATE_POLICY_LABEL": {
+    "en": "Update Policy",
+    "es": "Actualizar política"
+  },
+  "INVARIANT$UPDATE_SETTINGS_LABEL": {
+    "en": "Update Settings",
+    "es": "Actualizar configuración"
+  },
+  "INVARIANT$SETTINGS_LABEL": {
+    "en": "Settings",
+    "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:"
+  },
+  "INVARIANT$DONT_ASK_FOR_CONFIRMATION_LABEL": {
+    "en": "Don't ask for confirmation",
+    "es": "No solicitar confirmación"
+  },
+  "INVARIANT$INVARIANT_ANALYZER_LABEL": {
+    "en": "Invariant Analyzer",
+    "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."
+  },
+  "INVARIANT$CLICK_TO_LEARN_MORE_LABEL": {
+    "en": "Click to learn more",
+    "es": "Clic para aprender más"
+  },
+  "INVARIANT$POLICY_LABEL": {
+    "en": "Policy",
+    "es": "Política"
+  },
+  "INVARIANT$LOG_LABEL": {
+    "en": "Logs",
+    "es": "Logs"
+  },
+  "INVARIANT$EXPORT_TRACE_LABEL": {
+    "en": "Export Trace",
+    "es": "Exportar traza"
+  },
+  "INVARIANT$TRACE_EXPORTED_MESSAGE": {
+    "en": "Trace exported",
+    "es": "Traza exportada"
+  },
+  "INVARIANT$POLICY_UPDATED_MESSAGE": {
+    "en": "Policy updated",
+    "es": "Política actualizada"
+  },
+  "INVARIANT$SETTINGS_UPDATED_MESSAGE": {
+    "en": "Settings updated",
+    "es": "Configuración actualizada"
   },
   "CHAT_INTERFACE$INITIALIZING_AGENT_LOADING_MESSAGE": {
     "en": "Starting up!",
@@ -1442,10 +1536,12 @@
     "tr": "Özel"
   },
   "ERROR_MESSAGE$SHOW_DETAILS": {
-    "en": "Show details"
+    "en": "Show details",
+    "es": "Mostrar detalles"
   },
   "ERROR_MESSAGE$HIDE_DETAILS": {
-    "en": "Hide details"
+    "en": "Hide details",
+    "es": "Ocultar detalles"
   },
   "STATUS$STARTING_RUNTIME": {
     "en": "Starting Runtime...",
@@ -1517,8 +1613,137 @@
     "fr": "En attente que le client soit prêt...",
     "tr": "İstemcinin hazır olması bekleniyor..."
   },
+  "ACCOUNT_SETTINGS_MODAL$DISCONNECT":{
+    "en": "Disconnect",
+    "es": "Desconectar"
+  },
+  "ACCOUNT_SETTINGS_MODAL$SAVE":{
+    "en": "Save",
+    "es": "Guardar"
+  },
+  "ACCOUNT_SETTINGS_MODAL$CLOSE":{
+    "en": "Close",
+    "es": "Cerrar"
+  },
+  "ACCOUNT_SETTINGS_MODAL$GITHUB_TOKEN_INVALID":{
+    "en": "GitHub token is invalid. Please try again.",
+    "es": ""
+  },
+  "CONNECT_TO_GITHUB_MODAL$GET_YOUR_TOKEN": {
+    "en": "Get your token",
+    "es": "Obten tu token"
+  },
+  "CONNECT_TO_GITHUB_MODAL$HERE": {
+    "en": "here",
+    "es": "aquí"
+  },
+  "CONNECT_TO_GITHUB_MODAL$CONNECT": {
+    "en": "Connect",
+    "es": "Conectar"
+  },
+  "CONNECT_TO_GITHUB_MODAL$CLOSE": {
+    "en": "Close",
+    "es": "Cerrar"
+  },
+  "CONNECT_TO_GITHUB_BY_TOKEN_MODAL$BY_CONNECTING_YOU_AGREE": {
+    "en": "By connecting you agree to our",
+    "es": "Al conectarte tu aceptas nuestros"
+  },
+  "CONNECT_TO_GITHUB_BY_TOKEN_MODAL$TERMS_OF_SERVICE": {
+    "en": "terms of service",
+    "es": "términos de servicio"
+  },
+  "CONNECT_TO_GITHUB_BY_TOKEN_MODAL$CONTINUE": {
+    "en": "Continue",
+    "es": "Continuar"
+  },
+  "LOADING_PROJECT$LOADING": {
+    "en": "Loading...",
+    "es": "Cargando..."
+  },
+  "CUSTOM_INPUT$OPTIONAL_LABEL": {
+    "en": "(Optional)",
+    "es": "(Opcional)"
+  },
+  "SETTINGS_FORM$ADVANCED_OPTIONS_LABEL": {
+    "en": "Advanced Options",
+    "es": "Opciones avanzadas"
+  },
+  "SETTINGS_FORM$CUSTOM_MODEL_LABEL": {
+    "en": "Custom Model",
+    "es": "Modelo personalizado"
+  },
+  "SETTINGS_FORM$BASE_URL_LABEL": {
+    "en": "Base URL",
+    "es": "URL base"
+  },
+  "SETTINGS_FORM$API_KEY_LABEL": {
+    "en": "API Key",
+    "es": "API Key"
+  },
+  "SETTINGS_FORM$DONT_KNOW_API_KEY_LABEL": {
+    "en": "Don't know your API key?",
+    "es": "¿No sabes tu API key?"
+  },
+  "SETTINGS_FORM$CLICK_HERE_FOR_INSTRUCTIONS_LABEL": {
+    "en": "Click here for instructions",
+    "es": "Clic aquí para instrucciones"
+  },
+  "SETTINGS_FORM$AGENT_LABEL": {
+    "en": "Agent",
+    "es": "Agente"
+  },
+  "SETTINGS_FORM$SECURITY_ANALYZER_LABEL": {
+    "en": "Security Analyzer (Optional)",
+    "es": "Analizador de seguridad (opcional)"
+  },
+  "SETTINGS_FORM$ENABLE_CONFIRMATION_MODE_LABEL": {
+    "en": "Enable Confirmation Mode",
+    "es": "Habilitar modo de confirmación"
+  },
+  "SETTINGS_FORM$SAVE_LABEL": {
+    "en": "Save",
+    "es": "Guardar"
+  },
+  "SETTINGS_FORM$CLOSE_LABEL": {
+    "en": "Close",
+    "es": "Cerrar"
+  },
+  "SETTINGS_FORM$RESET_TO_DEFAULTS_LABEL": {
+    "en": "Reset to defaults",
+    "es": "Reiniciar valores por defect"
+  },
+  "SETTINGS_FORM$CANCEL_LABEL": {
+    "en": "Cancel",
+    "es": "Cancelar"
+  },
+  "SETTINGS_FORM$END_SESSION_LABEL": {
+    "en": "End Session",
+    "es": "Terminar sesión"
+  },
+  "SETTINGS_FORM$CHANGING_WORKSPACE_WARNING_MESSAGE": {
+    "en": "Changing your settings will clear your workspace and start a new session. Are you sure you want to continue?",
+    "es": "Cambiar tu configuración limpiará tu espacio de trabajo e iniciará una nueva sesión. ¿Estás seguro de continuar?"
+  },
+  "SETTINGS_FORM$ARE_YOU_SURE_LABEL": {
+    "en": "Are you sure?",
+    "es": "¿Estás seguro?"
+  },
+  "SETTINGS_FORM$ALL_INFORMATION_WILL_BE_DELETED_MESSAGE": {
+    "en": "All saved information in your AI settings will be deleted, including any API keys.",
+    "es": "Toda la información guardada en tu configuración de IA será eliminada, incluyendo tus API Keys"
+  },
+  "PROJECT_MENU_DETAILS_PLACEHOLDER$NEW_PROJECT_LABEL": {
+    "en":"New Project",
+    "es":"Nuevo proyecto"
+  },
+  "PROJECT_MENU_DETAILS$AGO_LABEL": {
+    "en":"ago",
+    "es":"atrás"
+  },
   "STATUS$ERROR_LLM_AUTHENTICATION": {
-    "en": "Error authenticating with the LLM provider. Please check your API key"
+    "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"
   },
   "STATUS$ERROR_RUNTIME_DISCONNECTED": {
     "en": "There was an error while connecting to the runtime. Please refresh the page."
@@ -1528,5 +1753,17 @@
   },
   "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/mocks/handlers.ts

@@ -92,6 +92,9 @@ export const handlers = [
       id: 1,
       login: "octocat",
       avatar_url: "https://avatars.githubusercontent.com/u/583231?v=4",
+      company: "GitHub",
+      email: "placeholder@placeholder.placeholder",
+      name: "monalisa octocat",
     };
 
     return HttpResponse.json(user);

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

@@ -8,17 +8,23 @@ import {
   useNavigate,
   useRouteLoaderData,
 } from "@remix-run/react";
-import React, { Suspense } from "react";
+import React from "react";
+import { useDispatch } from "react-redux";
+import posthog from "posthog-js";
 import { SuggestionBox } from "./suggestion-box";
 import { TaskForm } from "./task-form";
 import { HeroHeading } from "./hero-heading";
 import { retrieveAllGitHubUserRepositories } from "#/api/github";
 import store from "#/store";
-import { setInitialQuery } from "#/state/initial-query-slice";
+import {
+  setImportedProjectZip,
+  setInitialQuery,
+} from "#/state/initial-query-slice";
 import { clientLoader as rootClientLoader } from "#/routes/_oh";
 import OpenHands from "#/api/open-hands";
 import { generateGitHubAuthUrl } from "#/utils/generate-github-auth-url";
 import { GitHubRepositoriesSuggestionBox } from "#/components/github-repositories-suggestion-box";
+import { convertZipToBase64 } from "#/utils/convert-zip-to-base64";
 
 export const clientLoader = async ({ request }: ClientLoaderFunctionArgs) => {
   let isSaas = false;
@@ -59,14 +65,18 @@ export const clientAction = async ({ request }: ClientActionFunctionArgs) => {
   const q = formData.get("q")?.toString();
   if (q) store.dispatch(setInitialQuery(q));
 
+  posthog.capture("initial_query_submitted", {
+    query_character_length: q?.length,
+  });
+
   return redirect("/app");
 };
 
 function Home() {
   const navigate = useNavigate();
+  const dispatch = useDispatch();
   const rootData = useRouteLoaderData<typeof rootClientLoader>("routes/_oh");
   const { repositories, githubAuthUrl } = useLoaderData<typeof clientLoader>();
-  const [importedFile, setImportedFile] = React.useState<File | null>(null);
 
   return (
     <div
@@ -76,10 +86,10 @@ function Home() {
       <HeroHeading />
       <div className="flex flex-col gap-16 w-[600px] items-center">
         <div className="flex flex-col gap-2 w-full">
-          <TaskForm importedProjectZip={importedFile} />
+          <TaskForm />
         </div>
         <div className="flex gap-4 w-full">
-          <Suspense
+          <React.Suspense
             fallback={
               <SuggestionBox
                 title="Open a Repo"
@@ -96,36 +106,36 @@ function Home() {
                 />
               )}
             </Await>
-          </Suspense>
+          </React.Suspense>
           <SuggestionBox
-            title={importedFile ? "Project Loaded" : "+ Import Project"}
+            title="+ Import Project"
             content={
-              importedFile?.name ?? (
-                <label
-                  htmlFor="import-project"
-                  className="w-full flex justify-center"
-                >
-                  <span className="border-2 border-dashed border-neutral-600 rounded px-2 py-1 cursor-pointer">
-                    Upload a .zip
-                  </span>
-                  <input
-                    hidden
-                    type="file"
-                    accept="application/zip"
-                    id="import-project"
-                    multiple={false}
-                    onChange={(event) => {
-                      if (event.target.files) {
-                        const zip = event.target.files[0];
-                        setImportedFile(zip);
-                        navigate("/app");
-                      } else {
-                        // TODO: handle error
-                      }
-                    }}
-                  />
-                </label>
-              )
+              <label
+                htmlFor="import-project"
+                className="w-full flex justify-center"
+              >
+                <span className="border-2 border-dashed border-neutral-600 rounded px-2 py-1 cursor-pointer">
+                  Upload a .zip
+                </span>
+                <input
+                  hidden
+                  type="file"
+                  accept="application/zip"
+                  id="import-project"
+                  multiple={false}
+                  onChange={async (event) => {
+                    if (event.target.files) {
+                      const zip = event.target.files[0];
+                      dispatch(
+                        setImportedProjectZip(await convertZipToBase64(zip)),
+                      );
+                      navigate("/app");
+                    } else {
+                      // TODO: handle error
+                    }
+                  }}
+                />
+              </label>
             }
           />
         </div>

frontend/src/routes/_oh._index/task-form.tsx

@@ -2,11 +2,7 @@ import React from "react";
 import { Form, useNavigation } from "@remix-run/react";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "#/store";
-import {
-  addFile,
-  removeFile,
-  setImportedProjectZip,
-} from "#/state/initial-query-slice";
+import { addFile, removeFile } from "#/state/initial-query-slice";
 import { SuggestionBubble } from "#/components/suggestion-bubble";
 import { SUGGESTIONS } from "#/utils/suggestions";
 import { convertImageToBase64 } from "#/utils/convert-image-to-base-64";
@@ -14,15 +10,10 @@ import { ChatInput } from "#/components/chat-input";
 import { UploadImageInput } from "#/components/upload-image-input";
 import { ImageCarousel } from "#/components/image-carousel";
 import { getRandomKey } from "#/utils/get-random-key";
-import { convertZipToBase64 } from "#/utils/convert-zip-to-base64";
 import { AttachImageLabel } from "#/components/attach-image-label";
 import { cn } from "#/utils/utils";
 
-interface TaskFormProps {
-  importedProjectZip: File | null;
-}
-
-export function TaskForm({ importedProjectZip }: TaskFormProps) {
+export function TaskForm() {
   const dispatch = useDispatch();
   const navigation = useNavigation();
 
@@ -30,29 +21,15 @@ export function TaskForm({ importedProjectZip }: TaskFormProps) {
     (state: RootState) => state.initalQuery,
   );
 
-  const hasLoadedProject = React.useMemo(
-    () => importedProjectZip || selectedRepository,
-    [importedProjectZip, selectedRepository],
-  );
-
   const formRef = React.useRef<HTMLFormElement>(null);
   const [text, setText] = React.useState("");
   const [suggestion, setSuggestion] = React.useState(
-    getRandomKey(hasLoadedProject ? SUGGESTIONS.repo : SUGGESTIONS["non-repo"]),
+    getRandomKey(SUGGESTIONS["non-repo"]),
   );
   const [inputIsFocused, setInputIsFocused] = React.useState(false);
 
-  React.useEffect(() => {
-    // Display a suggestion based on whether a repository is selected
-    if (hasLoadedProject) {
-      setSuggestion(getRandomKey(SUGGESTIONS.repo));
-    } else {
-      setSuggestion(getRandomKey(SUGGESTIONS["non-repo"]));
-    }
-  }, [selectedRepository, importedProjectZip]);
-
   const onRefreshSuggestion = () => {
-    const suggestions = SUGGESTIONS[hasLoadedProject ? "repo" : "non-repo"];
+    const suggestions = SUGGESTIONS["non-repo"];
     // remove current suggestion to avoid refreshing to the same suggestion
     const suggestionCopy = { ...suggestions };
     delete suggestionCopy[suggestion];
@@ -62,20 +39,11 @@ export function TaskForm({ importedProjectZip }: TaskFormProps) {
   };
 
   const onClickSuggestion = () => {
-    const suggestions = SUGGESTIONS[hasLoadedProject ? "repo" : "non-repo"];
+    const suggestions = SUGGESTIONS["non-repo"];
     const value = suggestions[suggestion];
     setText(value);
   };
 
-  const handleSubmitForm = async () => {
-    // This is handled on top of the form submission
-    if (importedProjectZip) {
-      dispatch(
-        setImportedProjectZip(await convertZipToBase64(importedProjectZip)),
-      );
-    }
-  };
-
   const placeholder = React.useMemo(() => {
     if (selectedRepository) {
       return `What would you like to change in ${selectedRepository}?`;
@@ -90,7 +58,6 @@ export function TaskForm({ importedProjectZip }: TaskFormProps) {
         ref={formRef}
         method="post"
         className="flex flex-col items-center gap-2"
-        onSubmit={handleSubmitForm}
         replace
       >
         <SuggestionBubble
@@ -100,8 +67,14 @@ export function TaskForm({ importedProjectZip }: TaskFormProps) {
         />
         <div
           className={cn(
-            "border border-neutral-600 px-4 py-[17px] rounded-lg text-[17px] leading-5 w-full",
+            "border border-neutral-600 px-4 py-[17px] rounded-lg text-[17px] leading-5 w-full transition-colors duration-200",
             inputIsFocused ? "bg-neutral-600" : "bg-neutral-700",
+            "hover:border-neutral-500 focus-within:border-neutral-500",
+            "group relative",
+            "before:pointer-events-none before:absolute before:inset-0 before:rounded-lg before:transition-colors",
+            "before:border-2 before:border-dashed before:border-transparent",
+            "[&:has(*:focus-within)]:before:border-neutral-500/50",
+            "[&:has(*[data-dragging-over='true'])]:before:border-neutral-500/50",
           )}
         >
           <ChatInput
@@ -112,6 +85,13 @@ export function TaskForm({ importedProjectZip }: TaskFormProps) {
             onChange={(message) => setText(message)}
             onFocus={() => setInputIsFocused(true)}
             onBlur={() => setInputIsFocused(false)}
+            onImagePaste={async (imageFiles) => {
+              const promises = imageFiles.map(convertImageToBase64);
+              const base64Images = await Promise.all(promises);
+              base64Images.forEach((base64) => {
+                dispatch(addFile(base64));
+              });
+            }}
             placeholder={placeholder}
             value={text}
             maxRows={15}

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

@@ -1,7 +1,23 @@
+import React from "react";
 import JupyterEditor from "#/components/Jupyter";
 
 function Jupyter() {
-  return <JupyterEditor />;
+  const parentRef = React.useRef<HTMLDivElement>(null);
+  const [parentWidth, setParentWidth] = React.useState(0);
+
+  // This is a hack to prevent the editor from overflowing
+  // Should be removed after revising the parent and containers
+  React.useEffect(() => {
+    if (parentRef.current) {
+      setParentWidth(parentRef.current.offsetWidth);
+    }
+  }, []);
+
+  return (
+    <div ref={parentRef}>
+      <JupyterEditor maxWidth={parentWidth} />
+    </div>
+  );
 }
 
 export default Jupyter;

frontend/src/routes/_oh.app.tsx

@@ -36,6 +36,7 @@ import ListIcon from "#/assets/list-type-number.svg?react";
 import { createChatMessage } from "#/services/chatService";
 import {
   clearFiles,
+  clearInitialQuery,
   clearSelectedRepository,
   setImportedProjectZip,
 } from "#/state/initial-query-slice";
@@ -114,7 +115,6 @@ export const clientAction = async ({ request }: ClientActionFunctionArgs) => {
 };
 
 function App() {
-  console.log("render app");
   const dispatch = useDispatch();
   const { files, importedProjectZip } = useSelector(
     (state: RootState) => state.initalQuery,
@@ -255,6 +255,7 @@ function App() {
     dispatch(clearMessages());
     dispatch(clearTerminal());
     dispatch(clearJupyter());
+    dispatch(clearInitialQuery()); // Clear initial query when navigating to /app
     startSocketConnection();
   });
 
@@ -292,7 +293,7 @@ function App() {
   return (
     <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">
+        <Container className="w-[390px] max-h-full relative">
           <ChatInterface />
         </Container>
 

frontend/src/routes/_oh.tsx

@@ -51,13 +51,13 @@ export const clientLoader = async ({ request }: ClientLoaderFunctionArgs) => {
 
   if (!userConsents) {
     posthog.opt_out_capturing();
-  } else {
+  } else if (userConsents && !posthog.has_opted_in_capturing()) {
     posthog.opt_in_capturing();
   }
 
   let isAuthed = false;
   let githubAuthUrl: string | null = null;
-
+  let user: GitHubUser | GitHubErrorReponse | null = null;
   try {
     isAuthed = await userIsAuthenticated();
     if (!isAuthed && window.__GITHUB_CLIENT_ID__) {
@@ -72,7 +72,6 @@ export const clientLoader = async ({ request }: ClientLoaderFunctionArgs) => {
     githubAuthUrl = null;
   }
 
-  let user: GitHubUser | GitHubErrorReponse | null = null;
   if (ghToken) user = await retrieveGitHubUser(ghToken);
 
   const settings = getSettings();
@@ -84,6 +83,7 @@ export const clientLoader = async ({ request }: ClientLoaderFunctionArgs) => {
     token = null;
   }
 
+  // Store the results in cache
   return defer({
     token,
     ghToken,
@@ -167,6 +167,16 @@ export default function MainApp() {
     string | null
   >(null);
 
+  React.useEffect(() => {
+    if (user && !isGitHubErrorReponse(user)) {
+      posthog.identify(user.login, {
+        company: user.company,
+        name: user.name,
+        email: user.email,
+      });
+    }
+  }, [user]);
+
   React.useEffect(() => {
     // We fetch this here instead of the data loader because the server seems to block
     // the retrieval when the session is closing -- preventing the screen from rendering until

frontend/src/routes/logout.ts

@@ -1,8 +1,13 @@
 import { json } from "@remix-run/react";
+import posthog from "posthog-js";
+import { cache } from "#/utils/cache";
 
 export const clientAction = () => {
   const ghToken = localStorage.getItem("ghToken");
   if (ghToken) localStorage.removeItem("ghToken");
 
+  cache.clearAll();
+  posthog.reset();
+
   return json({ success: true });
 };

frontend/src/routes/settings.ts

@@ -1,4 +1,5 @@
 import { ClientActionFunctionArgs, json } from "@remix-run/react";
+import posthog from "posthog-js";
 import {
   getDefaultSettings,
   LATEST_SETTINGS_VERSION,
@@ -38,6 +39,7 @@ export const clientAction = async ({ request }: ClientActionFunctionArgs) => {
     saveSettings(getDefaultSettings());
     if (requestedToEndSession(formData)) removeSessionTokenAndSelectedRepo();
 
+    posthog.capture("settings_reset");
     return json({ success: true });
   }
 
@@ -97,5 +99,10 @@ export const clientAction = async ({ request }: ClientActionFunctionArgs) => {
   }
 
   if (requestedToEndSession(formData)) removeSessionTokenAndSelectedRepo();
+
+  posthog.capture("settings_saved", {
+    LLM_MODEL,
+    LLM_API_KEY: LLM_API_KEY ? "SET" : "UNSET",
+  });
   return json({ success: true });
 };

frontend/src/services/api.ts

@@ -63,6 +63,16 @@ export async function request(
   } catch (e) {
     onFail(`Error fetching ${url}`);
   }
+  if (response?.status === 401) {
+    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/observations.ts

@@ -9,10 +9,18 @@ import { addAssistantMessage } from "#/state/chatSlice";
 
 export function handleObservationMessage(message: ObservationMessage) {
   switch (message.observation) {
-    case ObservationType.RUN:
+    case ObservationType.RUN: {
       if (message.extras.hidden) break;
-      store.dispatch(appendOutput(message.content));
+      let { content } = message;
+
+      if (content.length > 5000) {
+        const head = content.slice(0, 5000);
+        content = `${head}\r\n\n... (truncated ${message.content.length - 5000} characters) ...`;
+      }
+
+      store.dispatch(appendOutput(content));
       break;
+    }
     case ObservationType.RUN_IPYTHON:
       // FIXME: render this as markdown
       store.dispatch(appendJupyterOutput(message.content));

frontend/src/state/initial-query-slice.ts

@@ -30,6 +30,9 @@ export const selectedFilesSlice = createSlice({
     setInitialQuery(state, action: PayloadAction<string>) {
       state.initialQuery = action.payload;
     },
+    clearInitialQuery(state) {
+      state.initialQuery = null;
+    },
     setSelectedRepository(state, action: PayloadAction<string | null>) {
       state.selectedRepository = action.payload;
     },
@@ -47,6 +50,7 @@ export const {
   removeFile,
   clearFiles,
   setInitialQuery,
+  clearInitialQuery,
   setSelectedRepository,
   clearSelectedRepository,
   setImportedProjectZip,

frontend/src/types/github.d.ts

@@ -8,6 +8,9 @@ interface GitHubUser {
   id: number;
   login: string;
   avatar_url: string;
+  company: string | null;
+  name: string | null;
+  email: string | null;
 }
 
 interface GitHubRepository {

frontend/src/utils/cache.ts

@@ -0,0 +1,61 @@
+type CacheKey = string;
+type CacheEntry<T> = {
+  data: T;
+  expiration: number;
+};
+
+class Cache {
+  private defaultTTL = 5 * 60 * 1000; // 5 minutes
+
+  private cacheMemory: Record<string, string> = {};
+
+  /**
+   * Retrieve the cached data from memory
+   * @param key The key to be retrieved from memory
+   * @returns The data stored in memory
+   */
+  public get<T>(key: CacheKey): T | null {
+    const cachedEntry = this.cacheMemory[key];
+    if (cachedEntry) {
+      const { data, expiration } = JSON.parse(cachedEntry) as CacheEntry<T>;
+      if (Date.now() < expiration) return data;
+      this.delete(key); // Remove expired cache
+    }
+
+    return null;
+  }
+
+  /**
+   * 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
+   * @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);
+  }
+
+  /**
+   * Remove the data from memory
+   * @param key The key to be removed from memory
+   * @returns void
+   */
+  public delete(key: CacheKey): void {
+    delete this.cacheMemory[key];
+  }
+
+  /**
+   * Clear all data
+   * @returns void
+   */
+  public clearAll(): void {
+    Object.keys(this.cacheMemory).forEach((key) => {
+      delete this.cacheMemory[key];
+    });
+  }
+}
+
+export const cache = new Cache();

frontend/src/utils/user-is-authenticated.ts

@@ -1,12 +1,20 @@
 import OpenHands from "#/api/open-hands";
+import { cache } from "./cache";
 
 export const userIsAuthenticated = async () => {
   if (window.__APP_MODE__ === "oss") return true;
 
+  const cachedData = cache.get<boolean>("user_is_authenticated");
+  if (cachedData) return cachedData;
+
+  let authenticated = false;
   try {
     await OpenHands.authenticate();
-    return true;
+    authenticated = true;
   } catch (error) {
-    return false;
+    authenticated = false;
   }
+
+  cache.set("user_is_authenticated", authenticated, 3 * 60 * 1000); // cache for 3 minutes
+  return authenticated;
 };

frontend/src/utils/verified-models.ts

@@ -1,10 +1,6 @@
 // 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-20240620",
-  "claude-3-5-sonnet-20241022",
-];
+export const VERIFIED_MODELS = ["gpt-4o", "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`)
@@ -23,11 +19,8 @@ export const VERIFIED_OPENAI_MODELS = [
 export const VERIFIED_ANTHROPIC_MODELS = [
   "claude-2",
   "claude-2.1",
-  "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",
 ];

openhands/__init__.py

@@ -6,12 +6,14 @@ __package_name__ = 'openhands_ai'
 def get_version():
     try:
         from importlib.metadata import PackageNotFoundError, version
+
         return version(__package_name__)
     except (ImportError, PackageNotFoundError):
         pass
 
     try:
         from pkg_resources import DistributionNotFound, get_distribution
+
         return get_distribution(__package_name__).version
     except (ImportError, DistributionNotFound):
         pass

openhands/agenthub/codeact_agent/codeact_agent.py

@@ -39,7 +39,6 @@ from openhands.runtime.plugins import (
     JupyterRequirement,
     PluginRequirement,
 )
-from openhands.utils.microagent import MicroAgent
 from openhands.utils.prompt import PromptManager
 
 
@@ -86,16 +85,6 @@ 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(
@@ -105,7 +94,6 @@ 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,
@@ -114,18 +102,17 @@ class CodeActAgent(Agent):
             logger.debug(
                 f'TOOLS loaded for CodeActAgent: {json.dumps(self.tools, indent=2)}'
             )
-            self.system_prompt = codeact_function_calling.SYSTEM_PROMPT
-            self.initial_user_message = None
+            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'),
+            )
         else:
-            # Non-function-calling mode
             self.action_parser = CodeActResponseParser()
             self.prompt_manager = PromptManager(
-                prompt_dir=os.path.join(os.path.dirname(__file__)),
+                microagent_dir=os.path.join(os.path.dirname(__file__), 'micro'),
+                prompt_dir=os.path.join(os.path.dirname(__file__), 'prompts', 'default'),
                 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()
 
@@ -337,8 +324,8 @@ class CodeActAgent(Agent):
             return self.pending_actions.popleft()
 
         # if we're done, go back
-        last_user_message = state.get_last_user_message()
-        if last_user_message and last_user_message.strip() == '/exit':
+        latest_user_message = state.get_last_user_message()
+        if latest_user_message and latest_user_message.content.strip() == '/exit':
             return AgentFinishAction()
 
         # prepare what we want to send to the LLM
@@ -403,17 +390,19 @@ class CodeActAgent(Agent):
                 role='system',
                 content=[
                     TextContent(
-                        text=self.system_prompt,
-                        cache_prompt=self.llm.is_caching_prompt_active(),  # Cache system prompt
+                        text=self.prompt_manager.get_system_message(),
+                        cache_prompt=self.llm.is_caching_prompt_active(),
                     )
                 ],
             )
         ]
-        if self.initial_user_message:
+        example_message = self.prompt_manager.get_example_user_message()
+        if example_message:
             messages.append(
                 Message(
                     role='user',
-                    content=[TextContent(text=self.initial_user_message)],
+                    content=[TextContent(text=example_message)],
+                    cache_prompt=self.llm.is_caching_prompt_active(),
                 )
             )
 
@@ -462,8 +451,9 @@ 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
@@ -493,23 +483,6 @@ class CodeActAgent(Agent):
                         break
 
         if not self.function_calling_active:
-            # 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))
+            self.prompt_manager.add_turns_left_reminder(messages, state)
 
         return messages

openhands/agenthub/codeact_agent/function_calling.py

@@ -25,13 +25,6 @@ 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.
@@ -245,7 +238,7 @@ StrReplaceEditorTool = ChatCompletionToolParam(
                     'type': 'string',
                 },
                 'path': {
-                    'description': 'Absolute path to file or directory, e.g. `/repo/file.py` or `/repo`.',
+                    'description': 'Absolute path to file or directory, e.g. `/workspace/file.py` or `/workspace`.',
                     'type': 'string',
                 },
                 'file_text': {
@@ -284,6 +277,17 @@ _browser_action_space = HighLevelActionSet(
 
 
 _BROWSER_DESCRIPTION = """Interact with the browser using Python code.
+
+See the description of "code" parameter for more details.
+
+Multiple actions can be provided at once, but will be executed sequentially without any feedback from the page.
+More than 2-3 actions usually leads to failure or unexpected behavior. Example:
+fill('a12', 'example with "quotes"')
+click('a51')
+click('48', button='middle', modifiers=['Shift'])
+"""
+
+_BROWSER_TOOL_DESCRIPTION = """
 The following 15 functions are available. Nothing else is supported.
 
 goto(url: str)
@@ -385,20 +389,15 @@ upload_file(bid: str, file: str | list[str])
         upload_file('572', '/home/user/my_receipt.pdf')
 
         upload_file('63', ['/home/bob/Documents/image.jpg', '/home/bob/Documents/file.zip'])
-
-Multiple actions can be provided at once, but will be executed sequentially without any feedback from the page.
-More than 2-3 actions usually leads to failure or unexpected behavior. Example:
-fill('a12', 'example with "quotes"')
-click('a51')
-click('48', button='middle', modifiers=['Shift'])
 """
 
+
 for _, action in _browser_action_space.action_set.items():
     assert (
-        action.signature in _BROWSER_DESCRIPTION
+        action.signature in _BROWSER_TOOL_DESCRIPTION
     ), f'Browser description mismatch. Please double check if the BrowserGym updated their action space.\n\nAction: {action.signature}'
     assert (
-        action.description in _BROWSER_DESCRIPTION
+        action.description in _BROWSER_TOOL_DESCRIPTION
     ), f'Browser description mismatch. Please double check if the BrowserGym updated their action space.\n\nAction: {action.description}'
 
 BrowserTool = ChatCompletionToolParam(
@@ -411,7 +410,10 @@ BrowserTool = ChatCompletionToolParam(
             'properties': {
                 'code': {
                     'type': 'string',
-                    'description': 'The Python code that interacts with the browser.',
+                    'description': (
+                        'The Python code that interacts with the browser.\n'
+                        + _BROWSER_TOOL_DESCRIPTION
+                    ),
                 }
             },
             'required': ['code'],

openhands/agenthub/codeact_agent/micro/flarglebargle.md

@@ -0,0 +1,9 @@
+---
+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,69 +1,31 @@
 ---
 name: github
 agent: CodeActAgent
-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."
+triggers:
+- github
+- git
 ---
 
-# How to Interact with Github
+You have access to an environment variable, `GITHUB_TOKEN`, which allows you to interact with
+the GitHub API.
 
-## Environment Variable Available
+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.
 
-- `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}"
+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"}'
 ```
-
-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/default/system_prompt.j2

@@ -163,6 +163,9 @@ 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/prompts/default/user_prompt.j2

@@ -215,12 +215,5 @@ 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_agent/prompts/tools/system_prompt.j2

@@ -0,0 +1,7 @@
+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_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.strip() == '/exit':
+        if last_user_message and last_user_message.content.strip() == '/exit':
             return AgentFinishAction()
 
         # prepare what we want to send to the LLM

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) -> str | None:
+    def get_last_agent_message(self) -> MessageAction | None:
         for event in reversed(self.history):
             if isinstance(event, MessageAction) and event.source == EventSource.AGENT:
-                return event.content
+                return event
         return None
 
-    def get_last_user_message(self) -> str | None:
+    def get_last_user_message(self) -> MessageAction | None:
         for event in reversed(self.history):
             if isinstance(event, MessageAction) and event.source == EventSource.USER:
-                return event.content
+                return event
         return None

openhands/core/config/app_config.py

@@ -69,6 +69,7 @@ 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] = {}
 
@@ -139,6 +140,7 @@ 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,7 +14,8 @@ 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 sandbox.
+        timeout: The timeout for the default sandbox action execution.
+        remote_runtime_init_timeout: The timeout for the remote runtime to start.
         enable_auto_lint: Whether to enable auto-lint.
         use_host_network: Whether to use the host network.
         initialize_plugins: Whether to initialize plugins.
@@ -41,6 +42,7 @@ 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/main.py

@@ -123,6 +123,7 @@ async def run_controller(
 
     if runtime is None:
         runtime = create_runtime(config, sid=sid)
+        await runtime.connect()
 
     event_stream = runtime.event_stream
 
@@ -188,8 +189,6 @@ async def run_controller(
 
     event_stream.subscribe(EventStreamSubscriber.MAIN, on_event, sid)
 
-    await runtime.connect()
-
     end_states = [
         AgentState.FINISHED,
         AgentState.REJECTED,
@@ -213,7 +212,11 @@ async def run_controller(
 
     # save trajectories if applicable
     if config.trajectories_path is not None:
-        file_path = os.path.join(config.trajectories_path, sid + '.json')
+        # 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
         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/llm/llm.py

@@ -342,9 +342,14 @@ class LLM(RetryMixin, DebugMixin):
         # but model_info will have the correct value for some reason.
         # we can go with it, but we will need to keep an eye if model_info is correct for Vertex or other providers
         # remove when litellm is updated to fix https://github.com/BerriAI/litellm/issues/5608
-        return litellm.supports_vision(self.config.model) or (
-            self.model_info is not None
-            and self.model_info.get('supports_vision', False)
+        # Check both the full model name and the name after proxy prefix for vision support
+        return (
+            litellm.supports_vision(self.config.model)
+            or litellm.supports_vision(self.config.model.split('/')[-1])
+            or (
+                self.model_info is not None
+                and self.model_info.get('supports_vision', False)
+            )
         )
 
     def is_caching_prompt_active(self) -> bool:

openhands/runtime/__init__.py

@@ -23,6 +23,10 @@ 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/base.py

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

openhands/runtime/impl/eventstream/eventstream_runtime.py

@@ -1,4 +1,5 @@
 import os
+from pathlib import Path
 import tempfile
 import threading
 from functools import lru_cache
@@ -604,7 +605,7 @@ class EventStreamRuntime(Runtime):
         except requests.Timeout:
             raise TimeoutError('List files operation timed out')
 
-    def copy_from(self, path: str) -> bytes:
+    def copy_from(self, path: str) -> Path:
         """Zip all files in the sandbox and return as a stream of bytes."""
         self._refresh_logs()
         try:
@@ -617,8 +618,11 @@ class EventStreamRuntime(Runtime):
                 stream=True,
                 timeout=30,
             )
-            data = response.content
-            return data
+            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)
         except requests.Timeout:
             raise TimeoutError('Copy operation timed out')
 

openhands/runtime/impl/remote/remote_runtime.py

@@ -1,6 +1,7 @@
 import os
 import tempfile
 import threading
+from pathlib import Path
 from typing import Callable, Optional
 from zipfile import ZipFile
 
@@ -90,9 +91,8 @@ class RemoteRuntime(Runtime):
         self.runtime_url: str | None = None
 
     async def connect(self):
-        await call_sync_from_async(self._start_or_attach_to_runtime)
         try:
-            await call_sync_from_async(self._wait_until_alive)
+            await call_sync_from_async(self._start_or_attach_to_runtime)
         except RuntimeNotReadyError:
             self.log('error', 'Runtime failed to start, timed out before ready')
             raise
@@ -260,13 +260,19 @@ 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',
@@ -277,6 +283,14 @@ class RemoteRuntime(Runtime):
         assert runtime_data['runtime_id'] == self.runtime_id
         assert 'pod_status' in runtime_data
         pod_status = runtime_data['pod_status']
+
+        # FIXME: We should fix it at the backend of /start endpoint, make sure
+        # the pod is created before returning the response.
+        # Retry a period of time to give the cluster time to start the pod
+        if pod_status == 'Not Found':
+            raise RuntimeNotReadyError(
+                f'Runtime (ID={self.runtime_id}) is not yet ready. Status: {pod_status}'
+            )
         if pod_status == 'Ready':
             try:
                 self._send_request(
@@ -291,7 +305,7 @@ class RemoteRuntime(Runtime):
                     f'Runtime /alive failed to respond with 200: {e}'
                 )
             return
-        if pod_status in ('Failed', 'Unknown', 'Not Found'):
+        if pod_status in ('Failed', 'Unknown'):
             # clean up the runtime
             self.close()
             raise RuntimeError(
@@ -460,13 +474,18 @@ class RemoteRuntime(Runtime):
         assert isinstance(response_json, list)
         return response_json
 
-    def copy_from(self, path: str) -> bytes:
+    def copy_from(self, path: str) -> Path:
         """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,
         )
-        return response.content
+        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)

openhands/runtime/impl/runloop/README.md

@@ -0,0 +1,31 @@
+# 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)

openhands/runtime/impl/runloop/runloop_runtime.py

@@ -0,0 +1,272 @@
+import logging
+import threading
+import time
+from typing import Callable
+
+import requests
+import tenacity
+from runloop_api_client import Runloop
+from runloop_api_client.types import DevboxView
+from runloop_api_client.types.shared_params import LaunchParameters
+
+from openhands.core.config import AppConfig
+from openhands.core.logger import openhands_logger as logger
+from openhands.events import EventStream
+from openhands.runtime.impl.eventstream.eventstream_runtime import (
+    EventStreamRuntime,
+    LogBuffer,
+)
+from openhands.runtime.plugins import PluginRequirement
+from openhands.runtime.utils.command import get_remote_startup_command
+from openhands.runtime.utils.request import send_request
+from openhands.utils.tenacity_stop import stop_if_should_exit
+
+
+class RunloopLogBuffer(LogBuffer):
+    """Synchronous buffer for Runloop devbox logs.
+
+    This class provides a thread-safe way to collect, store, and retrieve logs
+    from a Docker container. It uses a list to store log lines and provides methods
+    for appending, retrieving, and clearing logs.
+    """
+
+    def __init__(self, runloop_api_client: Runloop, devbox_id: str):
+        self.client_ready = False
+        self.init_msg = 'Runtime client initialized.'
+
+        self.buffer: list[str] = []
+        self.lock = threading.Lock()
+        self._stop_event = threading.Event()
+        self.runloop_api_client = runloop_api_client
+        self.devbox_id = devbox_id
+        self.log_index = 0
+        self.log_stream_thread = threading.Thread(target=self.stream_logs)
+        self.log_stream_thread.daemon = True
+        self.log_stream_thread.start()
+
+    def stream_logs(self):
+        """Stream logs from the Docker container in a separate thread.
+
+        This method runs in its own thread to handle the blocking
+        operation of reading log lines from the Docker SDK's synchronous generator.
+        """
+
+        try:
+            # TODO(Runloop) Replace with stream
+            while True:
+                raw_logs = self.runloop_api_client.devboxes.logs.list(
+                    self.devbox_id
+                ).logs[self.log_index :]
+                logs = [
+                    log.message
+                    for log in raw_logs
+                    if log.message and log.cmd_id is None
+                ]
+
+                self.log_index += len(raw_logs)
+                if self._stop_event.is_set():
+                    break
+                if logs:
+                    for log_line in logs:
+                        self.append(log_line)
+                        if self.init_msg in log_line:
+                            self.client_ready = True
+
+                time.sleep(1)
+        except Exception as e:
+            logger.error(f'Error streaming runloop logs: {e}')
+
+    # NB: Match LogBuffer behavior on below methods
+
+    def get_and_clear(self) -> list[str]:
+        with self.lock:
+            logs = list(self.buffer)
+            self.buffer.clear()
+            return logs
+
+    def append(self, log_line: str):
+        with self.lock:
+            self.buffer.append(log_line)
+
+    def close(self, timeout: float = 5.0):
+        self._stop_event.set()
+        self.log_stream_thread.join(timeout)
+
+
+class RunloopRuntime(EventStreamRuntime):
+    """The RunloopRuntime class is an EventStreamRuntime that utilizes Runloop Devbox as a runtime environment."""
+
+    _sandbox_port: int = 4444
+
+    def __init__(
+        self,
+        config: AppConfig,
+        event_stream: EventStream,
+        sid: str = 'default',
+        plugins: list[PluginRequirement] | None = None,
+        env_vars: dict[str, str] | None = None,
+        status_callback: Callable | None = None,
+        attach_to_existing: bool = False,
+    ):
+        assert config.runloop_api_key is not None, 'Runloop API key is required'
+        self.devbox: DevboxView | None = None
+        self.config = config
+        self.runloop_api_client = Runloop(
+            bearer_token=config.runloop_api_key,
+        )
+        self.session = requests.Session()
+        self.container_name = self.container_name_prefix + sid
+        self.action_semaphore = threading.Semaphore(1)  # Ensure one action at a time
+        self.init_base_runtime(
+            config,
+            event_stream,
+            sid,
+            plugins,
+            env_vars,
+            status_callback,
+            attach_to_existing,
+        )
+        # Buffer for container logs
+        self.log_buffer: LogBuffer | None = None
+
+    @tenacity.retry(
+        stop=tenacity.stop_after_attempt(120),
+        wait=tenacity.wait_fixed(1),
+    )
+    def _wait_for_devbox(self, devbox: DevboxView) -> DevboxView:
+        """Pull devbox status until it is running"""
+        if devbox == 'running':
+            return devbox
+
+        devbox = self.runloop_api_client.devboxes.retrieve(id=devbox.id)
+        if devbox.status != 'running':
+            raise ConnectionRefusedError('Devbox is not running')
+
+        # Devbox is connected and running
+        logging.debug(f'devbox.id={devbox.id} is running')
+        return devbox
+
+    def _create_new_devbox(self) -> DevboxView:
+        # Note: Runloop connect
+        sandbox_workspace_dir = self.config.workspace_mount_path_in_sandbox
+        plugin_args = []
+        if self.plugins is not None and len(self.plugins) > 0:
+            plugin_args.append('--plugins')
+            plugin_args.extend([plugin.name for plugin in self.plugins])
+
+        browsergym_args = []
+        if self.config.sandbox.browsergym_eval_env is not None:
+            browsergym_args = [
+                '-browsergym-eval-env',
+                self.config.sandbox.browsergym_eval_env,
+            ]
+
+        # Copied from EventstreamRuntime
+        start_command = get_remote_startup_command(
+            self._sandbox_port,
+            sandbox_workspace_dir,
+            'openhands' if self.config.run_as_openhands else 'root',
+            self.config.sandbox.user_id,
+            plugin_args,
+            browsergym_args,
+        )
+
+        # Add some additional commands based on our image
+        # NB: start off as root, action_execution_server will ultimately choose user but expects all context
+        # (ie browser) to be installed as root
+        start_command = (
+            'export MAMBA_ROOT_PREFIX=/openhands/micromamba && '
+            'cd /openhands/code && '
+            + '/openhands/micromamba/bin/micromamba run -n openhands poetry config virtualenvs.path /openhands/poetry && '
+            + ' '.join(start_command)
+        )
+        entrypoint = f"sudo bash -c '{start_command}'"
+
+        devbox = self.runloop_api_client.devboxes.create(
+            entrypoint=entrypoint,
+            setup_commands=[f'mkdir -p {self.config.workspace_mount_path_in_sandbox}'],
+            name=self.sid,
+            environment_variables={'DEBUG': 'true'} if self.config.debug else {},
+            prebuilt='openhands',
+            launch_parameters=LaunchParameters(
+                available_ports=[self._sandbox_port],
+                resource_size_request="LARGE",
+            ),
+            metadata={'container-name': self.container_name},
+        )
+        return self._wait_for_devbox(devbox)
+
+    async def connect(self):
+        self.send_status_message('STATUS$STARTING_RUNTIME')
+
+        if self.attach_to_existing:
+            active_devboxes = self.runloop_api_client.devboxes.list(
+                status='running'
+            ).devboxes
+            self.devbox = next(
+                (devbox for devbox in active_devboxes if devbox.name == self.sid), None
+            )
+
+        if self.devbox is None:
+            self.devbox = self._create_new_devbox()
+
+        # Create tunnel - this will return a stable url, so is safe to call if we are attaching to existing
+        tunnel = self.runloop_api_client.devboxes.create_tunnel(
+            id=self.devbox.id,
+            port=self._sandbox_port,
+        )
+
+        # Hook up logs
+        self.log_buffer = RunloopLogBuffer(self.runloop_api_client, self.devbox.id)
+        self.api_url = f'https://{tunnel.url}'
+        logger.info(f'Container started. Server url: {self.api_url}')
+
+        # End Runloop connect
+        # NOTE: Copied from EventStreamRuntime
+        logger.info('Waiting for client to become ready...')
+        self.send_status_message('STATUS$WAITING_FOR_CLIENT')
+        self._wait_until_alive()
+
+        if not self.attach_to_existing:
+            self.setup_initial_env()
+
+        logger.info(
+            f'Container initialized with plugins: {[plugin.name for plugin in self.plugins]}'
+        )
+        self.send_status_message(' ')
+
+    @tenacity.retry(
+        stop=tenacity.stop_after_delay(120) | stop_if_should_exit(),
+        wait=tenacity.wait_fixed(1),
+        reraise=(ConnectionRefusedError,),
+    )
+    def _wait_until_alive(self):
+        # NB(Runloop): Remote logs are not guaranteed realtime, removing client_ready check from logs
+        self._refresh_logs()
+        if not self.log_buffer:
+            raise RuntimeError('Runtime client is not ready.')
+        response = send_request(
+            self.session,
+            'GET',
+            f'{self.api_url}/alive',
+            timeout=5,
+        )
+        if response.status_code == 200:
+            return
+        else:
+            msg = f'Action execution API is not alive. Response: {response}'
+            logger.error(msg)
+            raise RuntimeError(msg)
+
+    def close(self, rm_all_containers: bool = True):
+        if self.log_buffer:
+            self.log_buffer.close()
+
+        if self.session:
+            self.session.close()
+
+        if self.attach_to_existing:
+            return
+
+        if self.devbox:
+            self.runloop_api_client.devboxes.shutdown(self.devbox.id)

openhands/server/github.py

@@ -1,6 +1,7 @@
 import os
 
 import httpx
+from tenacity import retry, stop_after_attempt, wait_exponential
 
 from openhands.core.logger import openhands_logger as logger
 from openhands.server.sheets_client import GoogleSheetsClient
@@ -101,6 +102,7 @@ async def authenticate_github_user(auth_token) -> bool:
     return True
 
 
+@retry(stop=stop_after_attempt(3), wait=wait_exponential(multiplier=1, min=1, max=5))
 async def get_github_user(token: str) -> str:
     """Get GitHub user info from token.
 
@@ -108,19 +110,25 @@ async def get_github_user(token: str) -> str:
         token: GitHub access token
 
     Returns:
-        Tuple of (login, error_message)
-        If successful, error_message is None
-        If failed, login is None and error_message contains the error
+        github handle of the user
     """
     logger.info('Fetching GitHub user info from token')
     headers = {
         'Accept': 'application/vnd.github+json',
         'Authorization': f'Bearer {token}',
-        'X-GitHub-Api-Version': '2022-11-28',
     }
-    async with httpx.AsyncClient() as client:
-        logger.debug('Making request to GitHub API')
-        response = await client.get('https://api.github.com/user', headers=headers)
+    async with httpx.AsyncClient(
+        timeout=httpx.Timeout(connect=5.0, read=5.0, write=5.0, pool=5.0)
+    ) as client:
+        try:
+            response = await client.get('https://api.github.com/user', headers=headers)
+        except httpx.RequestError as e:
+            logger.error(f'Error making request to GitHub API: {str(e)}')
+            logger.error(e)
+            raise
+
+        logger.info('Received response from GitHub API')
+        logger.debug(f'Response status code: {response.status_code}')
         response.raise_for_status()
         user_data = response.json()
         login = user_data.get('login')

openhands/server/listen.py

@@ -1,12 +1,13 @@
 import asyncio
-import io
 import os
 import re
 import tempfile
+import time
 import uuid
 import warnings
 from contextlib import asynccontextmanager
 
+import jwt
 import requests
 from pathspec import PathSpec
 from pathspec.patterns import GitWildMatchPattern
@@ -16,6 +17,7 @@ from openhands.server.data_models.feedback import FeedbackDataModel, store_feedb
 from openhands.server.github import (
     GITHUB_CLIENT_ID,
     GITHUB_CLIENT_SECRET,
+    UserVerifier,
     authenticate_github_user,
 )
 from openhands.storage import get_file_store
@@ -27,6 +29,7 @@ with warnings.catch_warnings():
 
 from dotenv import load_dotenv
 from fastapi import (
+    BackgroundTasks,
     FastAPI,
     HTTPException,
     Request,
@@ -34,7 +37,7 @@ from fastapi import (
     WebSocket,
     status,
 )
-from fastapi.responses import JSONResponse, StreamingResponse
+from fastapi.responses import FileResponse, JSONResponse
 from fastapi.security import HTTPBearer
 from fastapi.staticfiles import StaticFiles
 from pydantic import BaseModel
@@ -60,7 +63,7 @@ from openhands.events.serialization import event_to_dict
 from openhands.events.stream import AsyncEventStreamWrapper
 from openhands.llm import bedrock
 from openhands.runtime.base import Runtime
-from openhands.server.auth import get_sid_from_token, sign_token
+from openhands.server.auth.auth import get_sid_from_token, sign_token
 from openhands.server.middleware import LocalhostCORSMiddleware, NoCacheMiddleware
 from openhands.server.session import SessionManager
 
@@ -204,12 +207,22 @@ async def attach_session(request: Request, call_next):
         response = await call_next(request)
         return response
 
-    github_token = request.headers.get('X-GitHub-Token')
-    if not await authenticate_github_user(github_token):
-        return JSONResponse(
-            status_code=status.HTTP_401_UNAUTHORIZED,
-            content={'error': 'Not authenticated'},
-        )
+    user_verifier = UserVerifier()
+    if user_verifier.is_active():
+        signed_token = request.cookies.get('github_auth')
+        if not signed_token:
+            return JSONResponse(
+                status_code=status.HTTP_401_UNAUTHORIZED,
+                content={'error': 'Not authenticated'},
+            )
+        try:
+            jwt.decode(signed_token, config.jwt_secret, algorithms=['HS256'])
+        except Exception as e:
+            logger.warning(f'Invalid token: {e}')
+            return JSONResponse(
+                status_code=status.HTTP_401_UNAUTHORIZED,
+                content={'error': 'Invalid token'},
+            )
 
     if not request.headers.get('Authorization'):
         logger.warning('Missing Authorization header')
@@ -790,20 +803,21 @@ async def security_api(request: Request):
 
 
 @app.get('/api/zip-directory')
-async def zip_current_workspace(request: Request):
+async def zip_current_workspace(request: Request, background_tasks: BackgroundTasks):
     try:
         logger.debug('Zipping workspace')
         runtime: Runtime = request.state.conversation.runtime
-
         path = runtime.config.workspace_mount_path_in_sandbox
-        zip_file_bytes = await call_sync_from_async(runtime.copy_from, path)
-        zip_stream = io.BytesIO(zip_file_bytes)  # Wrap to behave like a file stream
-        response = StreamingResponse(
-            zip_stream,
+        zip_file = await call_sync_from_async(runtime.copy_from, path)
+        response = FileResponse(
+            path=zip_file,
+            filename='workspace.zip',
             media_type='application/x-zip-compressed',
-            headers={'Content-Disposition': 'attachment; filename=workspace.zip'},
         )
 
+        # This will execute after the response is sent (So the file is not deleted before being sent)
+        background_tasks.add_task(zip_file.unlink)
+
         return response
     except Exception as e:
         logger.error(f'Error zipping workspace: {e}', exc_info=True)
@@ -863,10 +877,26 @@ async def authenticate(request: Request):
             content={'error': 'Not authorized via GitHub waitlist'},
         )
 
+    # Create a signed JWT token with 1-hour expiration
+    cookie_data = {
+        'github_token': token,
+        'exp': int(time.time()) + 3600,  # 1 hour expiration
+    }
+    signed_token = sign_token(cookie_data, config.jwt_secret)
+
     response = JSONResponse(
         status_code=status.HTTP_200_OK, content={'message': 'User authenticated'}
     )
 
+    # Set secure cookie with signed token
+    response.set_cookie(
+        key='github_auth',
+        value=signed_token,
+        max_age=3600,  # 1 hour in seconds
+        httponly=True,
+        secure=True,
+        samesite='strict',
+    )
     return response
 
 

openhands/server/session/session.py

@@ -138,6 +138,10 @@ class Session:
             return
         if event.source == EventSource.AGENT:
             await self.send(event_to_dict(event))
+        elif event.source == EventSource.USER and isinstance(
+            event, CmdOutputObservation
+        ):
+            await self.send(event_to_dict(event))
         # NOTE: ipython observations are not sent here currently
         elif event.source == EventSource.ENVIRONMENT and isinstance(
             event, (CmdOutputObservation, AgentStateChangedObservation)

openhands/utils/microagent.py

@@ -3,15 +3,11 @@ import os
 import frontmatter
 import pydantic
 
-from openhands.controller.agent import Agent
-from openhands.core.exceptions import MicroAgentValidationError
-from openhands.core.logger import openhands_logger as logger
-
 
 class MicroAgentMetadata(pydantic.BaseModel):
     name: str
     agent: str
-    require_env_var: dict[str, str]
+    triggers: list[str] = []
 
 
 class MicroAgent:
@@ -23,22 +19,30 @@ class MicroAgent:
             self._loaded = frontmatter.load(file)
             self._content = self._loaded.content
             self._metadata = MicroAgentMetadata(**self._loaded.metadata)
-        self._validate_micro_agent()
+
+    def get_trigger(self, message: str) -> str | None:
+        message = message.lower()
+        for trigger in self.triggers:
+            if trigger.lower() in message:
+                return trigger
+        return None
 
     @property
     def content(self) -> str:
         return self._content
 
-    def _validate_micro_agent(self):
-        logger.debug(
-            f'Loading and validating micro agent [{self._metadata.name}] based on [{self._metadata.agent}]'
-        )
-        # Make sure the agent is registered
-        agent_cls = Agent.get_cls(self._metadata.agent)
-        assert agent_cls is not None
-        # Make sure the environment variables are set
-        for env_var, instruction in self._metadata.require_env_var.items():
-            if env_var not in os.environ:
-                raise MicroAgentValidationError(
-                    f'Environment variable [{env_var}] is required by micro agent [{self._metadata.name}] but not set. {instruction}'
-                )
+    @property
+    def metadata(self) -> MicroAgentMetadata:
+        return self._metadata
+
+    @property
+    def name(self) -> str:
+        return self._metadata.name
+
+    @property
+    def triggers(self) -> list[str]:
+        return self._metadata.triggers
+
+    @property
+    def agent(self) -> str:
+        return self._metadata.agent

openhands/utils/prompt.py

@@ -1,7 +1,10 @@
 import os
+from itertools import islice
 
 from jinja2 import Template
 
+from openhands.controller.state.state import State
+from openhands.core.message import Message, TextContent
 from openhands.utils.microagent import MicroAgent
 
 
@@ -16,21 +19,31 @@ class PromptManager:
     Attributes:
         prompt_dir (str): Directory containing prompt templates.
         agent_skills_docs (str): Documentation of agent skills.
-        micro_agent (MicroAgent | None): Micro-agent, if specified.
     """
 
     def __init__(
         self,
         prompt_dir: str,
-        agent_skills_docs: str,
-        micro_agent: MicroAgent | None = None,
+        microagent_dir: str = '',
+        agent_skills_docs: str = '',
     ):
         self.prompt_dir: str = prompt_dir
         self.agent_skills_docs: str = agent_skills_docs
 
         self.system_template: Template = self._load_template('system_prompt')
         self.user_template: Template = self._load_template('user_prompt')
-        self.micro_agent: MicroAgent | None = micro_agent
+        self.microagents: dict = {}
+
+        microagent_files = []
+        if microagent_dir:
+            microagent_files = [
+                os.path.join(microagent_dir, f)
+                for f in os.listdir(microagent_dir)
+                if f.endswith('.md')
+            ]
+        for microagent_file in microagent_files:
+            microagent = MicroAgent(microagent_file)
+            self.microagents[microagent.name] = microagent
 
     def _load_template(self, template_name: str) -> Template:
         template_path = os.path.join(self.prompt_dir, f'{template_name}.j2')
@@ -39,15 +52,13 @@ class PromptManager:
         with open(template_path, 'r') as file:
             return Template(file.read())
 
-    @property
-    def system_message(self) -> str:
+    def get_system_message(self) -> str:
         rendered = self.system_template.render(
             agent_skills_docs=self.agent_skills_docs,
         ).strip()
         return rendered
 
-    @property
-    def initial_user_message(self) -> str:
+    def get_example_user_message(self) -> str:
         """This is the initial user message provided to the agent
         before *actual* user instructions are provided.
 
@@ -57,7 +68,39 @@ class PromptManager:
         These additional context will convert the current generic agent
         into a more specialized agent that is tailored to the user's task.
         """
-        rendered = self.user_template.render(
-            micro_agent=self.micro_agent.content if self.micro_agent else None
+        return self.user_template.render().strip()
+
+    def enhance_message(self, message: Message) -> None:
+        """Enhance the user message with additional context.
+
+        This method is used to enhance the user message with additional context
+        about the user's task. The additional context will convert the current
+        generic agent into a more specialized agent that is tailored to the user's task.
+        """
+        if not message.content:
+            return
+        message_content = message.content[0].text
+        for microagent in self.microagents.values():
+            trigger = microagent.get_trigger(message_content)
+            if trigger:
+                micro_text = f'<extra_info>\nThe following information has been included based on a keyword match for "{trigger}". It may or may not be relevant to the user\'s request.'
+                micro_text += '\n\n' + microagent.content
+                micro_text += '\n</extra_info>'
+                message.content.append(TextContent(text=micro_text))
+
+    def add_turns_left_reminder(self, messages: list[Message], state: State) -> None:
+        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,
         )
-        return rendered.strip()
+        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))

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "openhands-ai"
-version = "0.12.3"
+version = "0.13.0"
 description = "OpenHands: Code Less, Make More"
 authors = ["OpenHands"]
 license = "MIT"
@@ -61,6 +61,7 @@ protobuf = "^4.21.6,<5.0.0" # chromadb currently fails on 5.0+
 opentelemetry-api = "1.25.0"
 opentelemetry-exporter-otlp-proto-grpc = "1.25.0"
 modal = "^0.64.145"
+runloop-api-client = "0.7.0"
 
 [tool.poetry.group.llama-index.dependencies]
 llama-index = "*"

tests/runtime/conftest.py

@@ -14,6 +14,7 @@ from openhands.events import EventStream
 from openhands.runtime.base import Runtime
 from openhands.runtime.impl.eventstream.eventstream_runtime import EventStreamRuntime
 from openhands.runtime.impl.remote.remote_runtime import RemoteRuntime
+from openhands.runtime.impl.runloop.runloop_runtime import RunloopRuntime
 from openhands.runtime.plugins import AgentSkillsRequirement, JupyterRequirement
 from openhands.storage import get_file_store
 from openhands.utils.async_utils import call_async_from_sync
@@ -131,6 +132,8 @@ def get_runtime_classes():
         return [EventStreamRuntime]
     elif runtime.lower() == 'remote':
         return [RemoteRuntime]
+    elif runtime.lower() == 'runloop':
+        return [RunloopRuntime]
     else:
         raise ValueError(f'Invalid runtime: {runtime}')
 

tests/runtime/test_bash.py

@@ -1,6 +1,7 @@
 """Bash-related tests for the EventStreamRuntime, which connects to the ActionExecutor running in the sandbox."""
 
 import os
+from pathlib import Path
 
 import pytest
 from conftest import (
@@ -586,8 +587,10 @@ def test_copy_from_directory(temp_dir, runtime_cls):
         path_to_copy_from = f'{sandbox_dir}/test_dir'
         result = runtime.copy_from(path=path_to_copy_from)
 
-        # Result is returned in bytes
-        assert isinstance(result, bytes)
+        # Result is returned as a path
+        assert isinstance(result, Path)
+
+        result.unlink()
     finally:
         _close_test_runtime(runtime)
 

tests/unit/test_config.py

@@ -461,6 +461,7 @@ def test_api_keys_repr_str():
         jwt_secret='my_jwt_secret',
         modal_api_token_id='my_modal_api_token_id',
         modal_api_token_secret='my_modal_api_token_secret',
+        runloop_api_key='my_runloop_api_key',
     )
     assert "e2b_api_key='******'" in repr(app_config)
     assert "e2b_api_key='******'" in str(app_config)
@@ -470,6 +471,8 @@ def test_api_keys_repr_str():
     assert "modal_api_token_id='******'" in str(app_config)
     assert "modal_api_token_secret='******'" in repr(app_config)
     assert "modal_api_token_secret='******'" in str(app_config)
+    assert "runloop_api_key='******'" in repr(app_config)
+    assert "runloop_api_key='******'" in str(app_config)
 
     # Check that no other attrs in AppConfig have 'key' or 'token' in their name
     # This will fail when new attrs are added, and attract attention
@@ -477,6 +480,7 @@ def test_api_keys_repr_str():
         'e2b_api_key',
         'modal_api_token_id',
         'modal_api_token_secret',
+        'runloop_api_key',
     ]
     for attr_name in dir(AppConfig):
         if (

tests/unit/test_microagent_utils.py

@@ -1,13 +1,8 @@
 import os
 
-import pytest
 from pytest import MonkeyPatch
 
 import openhands.agenthub  # noqa: F401
-from openhands.core.exceptions import (
-    AgentNotRegisteredError,
-    MicroAgentValidationError,
-)
 from openhands.utils.microagent import MicroAgent
 
 CONTENT = (
@@ -34,40 +29,3 @@ def test_micro_agent_load(tmp_path, monkeypatch: MonkeyPatch):
     micro_agent = MicroAgent(os.path.join(tmp_path, 'dummy.md'))
     assert micro_agent is not None
     assert micro_agent.content == CONTENT.strip()
-
-
-def test_not_existing_agent(tmp_path, monkeypatch: MonkeyPatch):
-    with open(os.path.join(tmp_path, 'dummy.md'), 'w') as f:
-        f.write(
-            (
-                '---\n'
-                'name: dummy\n'
-                'agent: NotExistingAgent\n'
-                'require_env_var:\n'
-                '  SANDBOX_OPENHANDS_TEST_ENV_VAR: "Set this environment variable for testing purposes"\n'
-                '---\n' + CONTENT
-            )
-        )
-    monkeypatch.setenv('SANDBOX_OPENHANDS_TEST_ENV_VAR', 'dummy_value')
-
-    with pytest.raises(AgentNotRegisteredError):
-        MicroAgent(os.path.join(tmp_path, 'dummy.md'))
-
-
-def test_not_existing_env_var(tmp_path):
-    with open(os.path.join(tmp_path, 'dummy.md'), 'w') as f:
-        f.write(
-            (
-                '---\n'
-                'name: dummy\n'
-                'agent: CodeActAgent\n'
-                'require_env_var:\n'
-                '  SANDBOX_OPENHANDS_TEST_ENV_VAR: "Set this environment variable for testing purposes"\n'
-                '---\n' + CONTENT
-            )
-        )
-
-    with pytest.raises(MicroAgentValidationError) as excinfo:
-        MicroAgent(os.path.join(tmp_path, 'dummy.md'))
-
-    assert 'Set this environment variable for testing purposes' in str(excinfo.value)

tests/unit/test_prompt_manager.py

@@ -1,9 +1,9 @@
 import os
 import shutil
-from unittest.mock import Mock
 
 import pytest
 
+from openhands.core.message import Message, TextContent
 from openhands.utils.microagent import MicroAgent
 from openhands.utils.prompt import PromptManager
 
@@ -11,7 +11,9 @@ from openhands.utils.prompt import PromptManager
 @pytest.fixture
 def prompt_dir(tmp_path):
     # Copy contents from "openhands/agenthub/codeact_agent" to the temp directory
-    shutil.copytree('openhands/agenthub/codeact_agent', tmp_path, dirs_exist_ok=True)
+    shutil.copytree(
+        'openhands/agenthub/codeact_agent/prompts/default', tmp_path, dirs_exist_ok=True
+    )
 
     # Return the temporary directory path
     return tmp_path
@@ -25,78 +27,79 @@ def agent_skills_docs():
     return SAMPLE_AGENT_SKILLS_DOCS
 
 
-def test_prompt_manager_without_micro_agent(prompt_dir, agent_skills_docs):
-    manager = PromptManager(prompt_dir, agent_skills_docs)
+def test_prompt_manager_without_microagent(prompt_dir, agent_skills_docs):
+    manager = PromptManager(
+        prompt_dir, microagent_dir='', agent_skills_docs=agent_skills_docs
+    )
 
     assert manager.prompt_dir == prompt_dir
     assert manager.agent_skills_docs == agent_skills_docs
-    assert manager.micro_agent is None
+    assert len(manager.microagents) == 0
 
-    assert isinstance(manager.system_message, str)
+    assert isinstance(manager.get_system_message(), str)
     assert (
         "A chat between a curious user and an artificial intelligence assistant. The assistant gives helpful, detailed answers to the user's questions."
-        in manager.system_message
+        in manager.get_system_message()
     )
-    assert SAMPLE_AGENT_SKILLS_DOCS in manager.system_message
-    assert isinstance(manager.initial_user_message, str)
-    assert '--- BEGIN OF GUIDELINE ---' not in manager.initial_user_message
-    assert '--- END OF GUIDELINE ---' not in manager.initial_user_message
-    assert "NOW, LET'S START!" in manager.initial_user_message
-    assert 'micro_agent' not in manager.initial_user_message
+    assert SAMPLE_AGENT_SKILLS_DOCS in manager.get_system_message()
+    assert isinstance(manager.get_example_user_message(), str)
+    assert '--- BEGIN OF GUIDELINE ---' not in manager.get_example_user_message()
+    assert '--- END OF GUIDELINE ---' not in manager.get_example_user_message()
+    assert "NOW, LET'S START!" in manager.get_example_user_message()
+    assert 'microagent' not in manager.get_example_user_message()
 
 
-def test_prompt_manager_with_micro_agent(prompt_dir, agent_skills_docs):
-    micro_agent_name = 'test_micro_agent'
-    micro_agent_content = (
-        '## Micro Agent\n'
-        'This is a test micro agent.\n'
-        'It is used to test the prompt manager.\n'
-    )
+def test_prompt_manager_with_microagent(prompt_dir, agent_skills_docs):
+    microagent_name = 'test_microagent'
+    microagent_content = """
+---
+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
+"""
 
     # Create a temporary micro agent file
     os.makedirs(os.path.join(prompt_dir, 'micro'), exist_ok=True)
-    with open(os.path.join(prompt_dir, 'micro', f'{micro_agent_name}.md'), 'w') as f:
-        f.write(micro_agent_content)
-
-    # Mock MicroAgent
-    mock_micro_agent = Mock(spec=MicroAgent)
-    mock_micro_agent.content = micro_agent_content
+    with open(os.path.join(prompt_dir, 'micro', f'{microagent_name}.md'), 'w') as f:
+        f.write(microagent_content)
 
     manager = PromptManager(
         prompt_dir=prompt_dir,
+        microagent_dir=os.path.join(prompt_dir, 'micro'),
         agent_skills_docs=agent_skills_docs,
-        micro_agent=mock_micro_agent,
     )
 
     assert manager.prompt_dir == prompt_dir
     assert manager.agent_skills_docs == agent_skills_docs
-    assert manager.micro_agent == mock_micro_agent
+    assert len(manager.microagents) == 1
 
-    assert isinstance(manager.system_message, str)
+    assert isinstance(manager.get_system_message(), str)
     assert (
         "A chat between a curious user and an artificial intelligence assistant. The assistant gives helpful, detailed answers to the user's questions."
-        in manager.system_message
+        in manager.get_system_message()
     )
-    assert SAMPLE_AGENT_SKILLS_DOCS in manager.system_message
+    assert SAMPLE_AGENT_SKILLS_DOCS in manager.get_system_message()
 
-    assert isinstance(manager.initial_user_message, str)
-    assert (
-        '--- BEGIN OF GUIDELINE ---\n'
-        + 'The following information may assist you in completing your task:\n\n'
-        + micro_agent_content
-        + '\n'
-        + '--- END OF GUIDELINE ---\n'
-        + "\n\nNOW, LET'S START!"
-    ) in manager.initial_user_message
-    assert micro_agent_content in manager.initial_user_message
+    assert isinstance(manager.get_example_user_message(), str)
 
-    # Clean up the temporary file
-    os.remove(os.path.join(prompt_dir, 'micro', f'{micro_agent_name}.md'))
+    message = Message(
+        role='user',
+        content=[TextContent(text='Hello, flarglebargle!')],
+    )
+    manager.enhance_message(message)
+    assert 'magic word' in message.content[1].text
+
+    os.remove(os.path.join(prompt_dir, 'micro', f'{microagent_name}.md'))
 
 
 def test_prompt_manager_file_not_found(prompt_dir, agent_skills_docs):
     with pytest.raises(FileNotFoundError):
-        MicroAgent(os.path.join(prompt_dir, 'micro', 'non_existent_micro_agent.md'))
+        MicroAgent(os.path.join(prompt_dir, 'micro', 'non_existent_microagent.md'))
 
 
 def test_prompt_manager_template_rendering(prompt_dir, agent_skills_docs):
@@ -104,12 +107,14 @@ def test_prompt_manager_template_rendering(prompt_dir, agent_skills_docs):
     with open(os.path.join(prompt_dir, 'system_prompt.j2'), 'w') as f:
         f.write('System prompt: {{ agent_skills_docs }}')
     with open(os.path.join(prompt_dir, 'user_prompt.j2'), 'w') as f:
-        f.write('User prompt: {{ micro_agent }}')
+        f.write('User prompt: foo')
 
-    manager = PromptManager(prompt_dir, agent_skills_docs)
+    manager = PromptManager(
+        prompt_dir, microagent_dir='', agent_skills_docs=agent_skills_docs
+    )
 
-    assert manager.system_message == f'System prompt: {agent_skills_docs}'
-    assert manager.initial_user_message == 'User prompt: None'
+    assert manager.get_system_message() == f'System prompt: {agent_skills_docs}'
+    assert manager.get_example_user_message() == 'User prompt: foo'
 
     # Clean up temporary files
     os.remove(os.path.join(prompt_dir, 'system_prompt.j2'))