Show all verified OpenHands models at once when OpenHands provider is selected

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

.github/CODEOWNERS

@@ -3,6 +3,7 @@
 
 # Frontend code owners
 /frontend/ @rbren @amanape
+/openhands-ui/ @amanape
 
 # Evaluation code owners
 /evaluation/ @xingyaoww @neubig

.github/workflows/fe-unit-tests.yml

@@ -9,8 +9,8 @@ on:
       - main
   pull_request:
     paths:
-      - 'frontend/**'
-      -  '.github/workflows/fe-unit-tests.yml'
+      - "frontend/**"
+      - ".github/workflows/fe-unit-tests.yml"
 
 # If triggered by a PR, it will be in the same group. However, each commit on main will be in its own unique group
 concurrency:
@@ -38,7 +38,7 @@ jobs:
         run: npm ci
       - name: Run TypeScript compilation
         working-directory: ./frontend
-        run: npm run make-i18n && tsc
+        run: npm run build
       - name: Run tests and collect coverage
         working-directory: ./frontend
         run: npm run test:coverage

CONTRIBUTING.md

@@ -31,7 +31,7 @@ We're always looking to improve the look and feel of the application. If you've
 for something that's bugging you, feel free to open up a PR that changes the [`./frontend`](./frontend) directory.
 
 If you're looking to make a bigger change, add a new UI element, or significantly alter the style
-of the application, please open an issue first, or better, join the #frontend channel in our Slack
+of the application, please open an issue first, or better, join the #eng-ui-ux channel in our Slack
 to gather consensus from our design team first.
 
 #### Improving the agent

config.template.toml

@@ -18,9 +18,6 @@
 # Cache directory path
 #cache_dir = "/tmp/cache"
 
-# Reasoning effort for o1 models (low, medium, high, or not set)
-#reasoning_effort = "medium"
-
 # Debugging enabled
 #debug = false
 
@@ -119,6 +116,9 @@ api_key = ""
 # API version
 #api_version = ""
 
+# Reasoning effort for OpenAI o-series models (low, medium, high, or not set)
+#reasoning_effort = "medium"
+
 # Cost per input token
 #input_cost_per_token = 0.0
 

docs/usage/configuration-options.mdx

@@ -8,6 +8,12 @@ description: This page outlines all available configuration options for OpenHand
    In GUI Mode, any settings applied through the Settings UI will take precedence.
 </Note>
 
+## Location of the `config.toml` File
+
+When running OpenHands in CLI, headless, or development mode, you can use a project-specific `config.toml` file for configuration, which must be
+located in the same directory from which the command is run. Alternatively, you may use the `--config-file` option to
+specify a different path to the `config.toml` file.
+
 ## Core Configuration
 
 The core configuration options are defined in the `[core]` section of the `config.toml` file.

docs/usage/how-to/cli-mode.mdx

@@ -33,6 +33,45 @@ pip install openhands-ai
 uvx --python 3.12 --from openhands-ai openhands
 ```
 
+<AccordionGroup>
+
+<Accordion title="Create shell aliases for easy access across environments">
+
+Add the following to your shell configuration file (`.bashrc`, `.zshrc`, etc.):
+
+```bash
+# Add OpenHands aliases
+alias openhands="uvx --python 3.12 --from openhands-ai openhands"
+alias oh="uvx --python 3.12 --from openhands-ai openhands"
+```
+
+After adding these lines, reload your shell configuration with `source ~/.bashrc` or `source ~/.zshrc` (depending on your shell).
+
+</Accordion>
+
+<Accordion title="Install OpenHands in home directory without global installation">
+
+You can install OpenHands in a virtual environment in your home directory using `uv`:
+
+```bash
+# Create a virtual environment in your home directory
+cd ~
+uv venv .openhands-venv --python 3.12
+
+# Install OpenHands in the virtual environment
+uv pip install -t ~/.openhands-venv/lib/python3.12/site-packages openhands-ai
+
+# Add the bin directory to your PATH in your shell configuration file
+echo 'export PATH="$PATH:$HOME/.openhands-venv/bin"' >> ~/.bashrc  # or ~/.zshrc
+
+# Reload your shell configuration
+source ~/.bashrc  # or source ~/.zshrc
+```
+
+</Accordion>
+
+</AccordionGroup>
+
 2. Launch an interactive OpenHands conversation from the command line:
 ```bash
 openhands

docs/usage/how-to/gui-mode.mdx

@@ -122,17 +122,15 @@ OpenHands automatically exports a `GITLAB_TOKEN` to the shell environment if pro
 </Accordion>
 </AccordionGroup>
 
-#### BitBucket Setup (Coming soon ...)
+#### BitBucket Setup
 <AccordionGroup>
 <Accordion title="Setting Up a BitBucket Password">
 1. **Generate an App Password**:
    - On BitBucket, go to Personal Settings > App Password.
    - Create a new password with the following scopes:
-     - `repository: read`
+     - `account`: `read`
      - `repository: write`
-     - `pull requests: read`
      - `pull requests: write`
-     - `issues: read`
      - `issues: write`
    - App passwords are non-expiring token. OpenHands will migrate to using API tokens in the future.
   2. **Enter Token in OpenHands**:

docs/usage/prompting/microagents-org.mdx

@@ -24,3 +24,12 @@ General microagent file example for organization `Great-Co` located inside the `
 ```
 
 For GitLab organizations, the same microagent would be located inside the `openhands-config` repository.
+
+## User Microagents When Running Openhands on Your Own
+
+<Note>
+  This works with CLI, headless and development modes. It does not work out of the box when running OpenHands using the docker command.
+</Note>
+
+When running OpenHands on your own, you can place microagents in the `~/.openhands/microagents` folder on your local
+system and OpenHands will always load it for all your conversations.

evaluation/benchmarks/swe_bench/run_infer.py

@@ -109,9 +109,7 @@ def get_instruction(instance: pd.Series, metadata: EvalMetadata) -> MessageActio
         template_name = 'swt.j2'
     elif mode == 'swe':
         if 'claude' in llm_model:
-            template_name = 'swe_claude.j2'
-        elif 'gemini' in llm_model:
-            template_name = 'swe_gemini.j2'
+            template_name = 'swe_default.j2'
         elif 'gpt-4.1' in llm_model:
             template_name = 'swe_gpt4.j2'
         else:

frontend/.eslintrc

@@ -13,8 +13,9 @@
     "plugin:react-hooks/recommended",
     "plugin:@tanstack/query/recommended",
   ],
-  "plugins": ["prettier", "unused-imports"],
+  "plugins": ["prettier", "unused-imports", "i18next"],
   "rules": {
+    "i18next/no-literal-string": "error",
     "unused-imports/no-unused-imports": "error",
     "prettier/prettier": ["error"],
     // Resolves https://stackoverflow.com/questions/59265981/typescript-eslint-missing-file-extension-ts-import-extensions/59268871#59268871

frontend/.husky/pre-commit

@@ -1,7 +1,7 @@
 # Run frontend checks
 echo "Running frontend checks..."
 cd frontend
-npm run check-unlocalized-strings
+npm run lint
 npm run check-translation-completeness
 npx lint-staged
 

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

@@ -10,9 +10,7 @@ describe("ChatMessage", () => {
     expect(screen.getByText("Hello, World!")).toBeInTheDocument();
   });
 
-  it.todo("should render an assistant message");
-
-  it.skip("should support code syntax highlighting", () => {
+  it("should support code syntax highlighting", () => {
     const code = "```js\nconsole.log('Hello, World!')\n```";
     render(<ChatMessage type="user" message={code} />);
 
@@ -46,8 +44,6 @@ describe("ChatMessage", () => {
     );
   });
 
-  it("should display an error toast if copying content to clipboard fails", async () => {});
-
   it("should render a component passed as a prop", () => {
     function Component() {
       return <div data-testid="custom-component">Custom Component</div>;

frontend/__tests__/components/features/chat/launch-microagent-modal.test.tsx

@@ -0,0 +1,167 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { LaunchMicroagentModal } from "#/components/features/chat/microagent/launch-microagent-modal";
+import { MemoryService } from "#/api/memory-service/memory-service.api";
+import { FileService } from "#/api/file-service/file-service.api";
+import { I18nKey } from "#/i18n/declaration";
+
+vi.mock("react-router", async () => ({
+  useParams: vi.fn().mockReturnValue({
+    conversationId: "123",
+  }),
+}));
+
+// Mock the useHandleRuntimeActive hook
+vi.mock("#/hooks/use-handle-runtime-active", () => ({
+  useHandleRuntimeActive: vi.fn().mockReturnValue({ runtimeActive: true }),
+}));
+
+// Mock the useMicroagentPrompt hook
+vi.mock("#/hooks/query/use-microagent-prompt", () => ({
+  useMicroagentPrompt: vi.fn().mockReturnValue({
+    data: "Generated prompt",
+    isLoading: false
+  }),
+}));
+
+// Mock the useGetMicroagents hook
+vi.mock("#/hooks/query/use-get-microagents", () => ({
+  useGetMicroagents: vi.fn().mockReturnValue({
+    data: ["file1", "file2"]
+  }),
+}));
+
+// Mock the useTranslation hook
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        [I18nKey.MICROAGENT$ADD_TO_MICROAGENT]: "Add to Microagent",
+        [I18nKey.MICROAGENT$WHAT_TO_REMEMBER]: "What would you like your microagent to remember?",
+        [I18nKey.MICROAGENT$WHERE_TO_PUT]: "Where should we put it?",
+        [I18nKey.MICROAGENT$ADD_TRIGGERS]: "Add triggers for the microagent",
+        [I18nKey.MICROAGENT$DESCRIBE_WHAT_TO_ADD]: "Describe what you want to add to the Microagent...",
+        [I18nKey.MICROAGENT$SELECT_FILE_OR_CUSTOM]: "Select a microagent file or enter a custom value",
+        [I18nKey.MICROAGENT$TYPE_TRIGGER_SPACE]: "Type a trigger and press Space to add it",
+        [I18nKey.MICROAGENT$LOADING_PROMPT]: "Loading prompt...",
+        [I18nKey.MICROAGENT$CANCEL]: "Cancel",
+        [I18nKey.MICROAGENT$LAUNCH]: "Launch"
+      };
+      return translations[key] || key;
+    },
+    i18n: {
+      changeLanguage: vi.fn(),
+    },
+  }),
+  Trans: ({ i18nKey }: { i18nKey: string }) => i18nKey,
+}));
+
+describe("LaunchMicroagentModal", () => {
+  const onCloseMock = vi.fn();
+  const onLaunchMock = vi.fn();
+  const eventId = 12;
+  const conversationId = "123";
+
+  const renderMicroagentModal = (
+    { isLoading }: { isLoading: boolean } = { isLoading: false },
+  ) =>
+    render(
+      <LaunchMicroagentModal
+        onClose={onCloseMock}
+        onLaunch={onLaunchMock}
+        eventId={eventId}
+        selectedRepo="some-repo"
+        isLoading={isLoading}
+      />,
+      {
+        wrapper: ({ children }) => (
+          <QueryClientProvider client={new QueryClient()}>
+            {children}
+          </QueryClientProvider>
+        ),
+      },
+    );
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should render the launch microagent modal", () => {
+    renderMicroagentModal();
+    expect(screen.getByTestId("launch-microagent-modal")).toBeInTheDocument();
+  });
+
+  it("should render the form fields", () => {
+    renderMicroagentModal();
+
+    // inputs
+    screen.getByTestId("query-input");
+    screen.getByTestId("target-input");
+    screen.getByTestId("trigger-input");
+
+    // action buttons
+    screen.getByRole("button", { name: "Launch" });
+    screen.getByRole("button", { name: "Cancel" });
+  });
+
+  it("should call onClose when pressing the cancel button", async () => {
+    renderMicroagentModal();
+
+    const cancelButton = screen.getByRole("button", { name: "Cancel" });
+    await userEvent.click(cancelButton);
+    expect(onCloseMock).toHaveBeenCalled();
+  });
+
+  it("should display the prompt from the hook", async () => {
+    renderMicroagentModal();
+
+    // Since we're mocking the hook, we just need to verify the UI shows the data
+    const descriptionInput = screen.getByTestId("query-input");
+    expect(descriptionInput).toHaveValue("Generated prompt");
+  });
+
+  it("should display the list of microagent files from the hook", async () => {
+    renderMicroagentModal();
+
+    // Since we're mocking the hook, we just need to verify the UI shows the data
+    const targetInput = screen.getByTestId("target-input");
+    expect(targetInput).toHaveValue("");
+
+    await userEvent.click(targetInput);
+
+    expect(screen.getByText("file1")).toBeInTheDocument();
+    expect(screen.getByText("file2")).toBeInTheDocument();
+
+    await userEvent.click(screen.getByText("file1"));
+    expect(targetInput).toHaveValue("file1");
+  });
+
+  it("should call onLaunch with the form data", async () => {
+    renderMicroagentModal();
+
+    const triggerInput = screen.getByTestId("trigger-input");
+    await userEvent.type(triggerInput, "trigger1 ");
+    await userEvent.type(triggerInput, "trigger2 ");
+
+    const targetInput = screen.getByTestId("target-input");
+    await userEvent.click(targetInput);
+    await userEvent.click(screen.getByText("file1"));
+
+    const launchButton = await screen.findByRole("button", { name: "Launch" });
+    await userEvent.click(launchButton);
+
+    expect(onLaunchMock).toHaveBeenCalledWith("Generated prompt", "file1", [
+      "trigger1",
+      "trigger2",
+    ]);
+  });
+
+  it("should disable the launch button if isLoading is true", async () => {
+    renderMicroagentModal({ isLoading: true });
+
+    const launchButton = screen.getByRole("button", { name: "Launch" });
+    expect(launchButton).toBeDisabled();
+  });
+});

frontend/__tests__/components/features/chat/messages.test.tsx

@@ -0,0 +1,107 @@
+import { render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Messages } from "#/components/features/chat/messages";
+import {
+  AssistantMessageAction,
+  OpenHandsAction,
+  UserMessageAction,
+} from "#/types/core/actions";
+import { OpenHandsObservation } from "#/types/core/observations";
+import OpenHands from "#/api/open-hands";
+import { Conversation } from "#/api/open-hands.types";
+
+vi.mock("react-router", () => ({
+  useParams: () => ({ conversationId: "123" }),
+}));
+
+let queryClient: QueryClient;
+
+const renderMessages = ({
+  messages,
+}: {
+  messages: (OpenHandsAction | OpenHandsObservation)[];
+}) => {
+  const { rerender, ...rest } = render(
+    <Messages messages={messages} isAwaitingUserConfirmation={false} />,
+    {
+      wrapper: ({ children }) => (
+        <QueryClientProvider client={queryClient!}>
+          {children}
+        </QueryClientProvider>
+      ),
+    },
+  );
+
+  const rerenderMessages = (
+    newMessages: (OpenHandsAction | OpenHandsObservation)[],
+  ) => {
+    rerender(
+      <Messages messages={newMessages} isAwaitingUserConfirmation={false} />,
+    );
+  };
+
+  return { ...rest, rerender: rerenderMessages };
+};
+
+describe("Messages", () => {
+  beforeEach(() => {
+    queryClient = new QueryClient();
+  });
+
+  const assistantMessage: AssistantMessageAction = {
+    id: 0,
+    action: "message",
+    source: "agent",
+    message: "Hello, Assistant!",
+    timestamp: new Date().toISOString(),
+    args: {
+      image_urls: [],
+      file_urls: [],
+      thought: "",
+      wait_for_response: false,
+    },
+  };
+
+  const userMessage: UserMessageAction = {
+    id: 1,
+    action: "message",
+    source: "user",
+    message: "Hello, User!",
+    timestamp: new Date().toISOString(),
+    args: { content: "Hello, User!", image_urls: [], file_urls: [] },
+  };
+
+  it("should render", () => {
+    renderMessages({ messages: [userMessage, assistantMessage] });
+
+    expect(screen.getByText("Hello, User!")).toBeInTheDocument();
+    expect(screen.getByText("Hello, Assistant!")).toBeInTheDocument();
+  });
+
+  it("should render a launch to microagent action button on chat messages only if it is a user message", () => {
+    const getConversationSpy = vi.spyOn(OpenHands, "getConversation");
+    const mockConversation: Conversation = {
+      conversation_id: "123",
+      title: "Test Conversation",
+      status: "RUNNING",
+      runtime_status: "STATUS$READY",
+      created_at: new Date().toISOString(),
+      last_updated_at: new Date().toISOString(),
+      selected_branch: null,
+      selected_repository: null,
+      git_provider: "github",
+      session_api_key: null,
+      url: null,
+    };
+
+    getConversationSpy.mockResolvedValue(mockConversation);
+
+    renderMessages({
+      messages: [userMessage, assistantMessage],
+    });
+
+    expect(screen.getByText("Hello, User!")).toBeInTheDocument();
+    expect(screen.getByText("Hello, Assistant!")).toBeInTheDocument();
+  });
+});

frontend/__tests__/components/features/home/home-header.test.tsx

@@ -17,12 +17,12 @@ vi.mock("react-i18next", async () => {
       t: (key: string) => {
         // Return a mock translation for the test
         const translations: Record<string, string> = {
-          "HOME$LETS_START_BUILDING": "Let's start building",
-          "HOME$LAUNCH_FROM_SCRATCH": "Launch from Scratch",
-          "HOME$LOADING": "Loading...",
-          "HOME$OPENHANDS_DESCRIPTION": "OpenHands is an AI software engineer",
-          "HOME$NOT_SURE_HOW_TO_START": "Not sure how to start?",
-          "HOME$READ_THIS": "Read this"
+          HOME$LETS_START_BUILDING: "Let's start building",
+          HOME$LAUNCH_FROM_SCRATCH: "Launch from Scratch",
+          HOME$LOADING: "Loading...",
+          HOME$OPENHANDS_DESCRIPTION: "OpenHands is an AI software engineer",
+          HOME$NOT_SURE_HOW_TO_START: "Not sure how to start?",
+          HOME$READ_THIS: "Read this",
         };
         return translations[key] || key;
       },
@@ -69,7 +69,6 @@ describe("HomeHeader", () => {
       undefined,
       undefined,
       undefined,
-      [],
       undefined,
       undefined,
       undefined,

frontend/__tests__/components/features/home/repo-connector.test.tsx

@@ -206,9 +206,8 @@ describe("RepoConnector", () => {
       "rbren/polaris",
       "github",
       undefined,
-      [],
-      undefined,
       undefined,
+      "main",
       undefined,
     );
   });

frontend/__tests__/components/features/home/repo-selection-form.test.tsx

@@ -66,6 +66,11 @@ vi.mock("#/hooks/use-debounce", () => ({
   useDebounce: (value: string) => value,
 }));
 
+vi.mock("react-router", async (importActual) => ({
+  ...(await importActual()),
+  useNavigate: vi.fn(),
+}));
+
 const mockOnRepoSelection = vi.fn();
 const renderForm = () =>
   render(<RepositorySelectionForm onRepoSelection={mockOnRepoSelection} />, {
@@ -252,8 +257,6 @@ describe("RepositorySelectionForm", () => {
     expect(searchedRepo).toBeInTheDocument();
 
     await userEvent.click(searchedRepo);
-    expect(mockOnRepoSelection).toHaveBeenCalledWith(
-      MOCK_SEARCH_REPOS[0].full_name,
-    );
+    expect(mockOnRepoSelection).toHaveBeenCalledWith(MOCK_SEARCH_REPOS[0]);
   });
 });

frontend/__tests__/components/features/home/task-card.test.tsx

@@ -88,9 +88,14 @@ describe("TaskCard", () => {
         MOCK_RESPOSITORIES[0].full_name,
         MOCK_RESPOSITORIES[0].git_provider,
         undefined,
-        [],
+        {
+          git_provider: "github",
+          issue_number: 123,
+          repo: "repo1",
+          task_type: "MERGE_CONFLICTS",
+          title: "Task 1",
+        },
         undefined,
-        MOCK_TASK_1,
         undefined,
       );
     });

frontend/__tests__/components/shared/inputs/badge-input.test.tsx

@@ -0,0 +1,62 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { BadgeInput } from "#/components/shared/inputs/badge-input";
+
+describe("BadgeInput", () => {
+  it("should render the values", () => {
+    const onChangeMock = vi.fn();
+    render(<BadgeInput value={["test", "test2"]} onChange={onChangeMock} />);
+
+    expect(screen.getByText("test")).toBeInTheDocument();
+    expect(screen.getByText("test2")).toBeInTheDocument();
+  });
+
+  it("should render the input's as a badge on space", async () => {
+    const onChangeMock = vi.fn();
+    render(<BadgeInput value={["badge1"]} onChange={onChangeMock} />);
+
+    const input = screen.getByTestId("badge-input");
+    expect(input).toHaveValue("");
+
+    await userEvent.type(input, "test");
+    await userEvent.type(input, " ");
+
+    expect(onChangeMock).toHaveBeenCalledWith(["badge1", "test"]);
+    expect(input).toHaveValue("");
+  });
+
+  it("should remove the badge on backspace", async () => {
+    const onChangeMock = vi.fn();
+    render(<BadgeInput value={["badge1", "badge2"]} onChange={onChangeMock} />);
+
+    const input = screen.getByTestId("badge-input");
+    expect(input).toHaveValue("");
+
+    await userEvent.type(input, "{backspace}");
+
+    expect(onChangeMock).toHaveBeenCalledWith(["badge1"]);
+    expect(input).toHaveValue("");
+  });
+
+  it("should remove the badge on click", async () => {
+    const onChangeMock = vi.fn();
+    render(<BadgeInput value={["badge1"]} onChange={onChangeMock} />);
+
+    const removeButton = screen.getByTestId("remove-button");
+    await userEvent.click(removeButton);
+
+    expect(onChangeMock).toHaveBeenCalledWith([]);
+  });
+
+  it("should not create empty badges", async () => {
+    const onChangeMock = vi.fn();
+    render(<BadgeInput value={[]} onChange={onChangeMock} />);
+
+    const input = screen.getByTestId("badge-input");
+    expect(input).toHaveValue("");
+
+    await userEvent.type(input, " ");
+    expect(onChangeMock).not.toHaveBeenCalled();
+  });
+});

frontend/__tests__/microagent-status-indicator.test.tsx

@@ -0,0 +1,105 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { MicroagentStatusIndicator } from "#/components/features/chat/microagent/microagent-status-indicator";
+import { MicroagentStatus } from "#/types/microagent-status";
+
+// Mock the translation hook
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+describe("MicroagentStatusIndicator", () => {
+  it("should show 'View your PR' when status is completed and PR URL is provided", () => {
+    render(
+      <MicroagentStatusIndicator
+        status={MicroagentStatus.COMPLETED}
+        conversationId="test-conversation"
+        prUrl="https://github.com/owner/repo/pull/123"
+      />,
+    );
+
+    const link = screen.getByRole("link", { name: "MICROAGENT$VIEW_YOUR_PR" });
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute(
+      "href",
+      "https://github.com/owner/repo/pull/123",
+    );
+    expect(link).toHaveAttribute("target", "_blank");
+    expect(link).toHaveAttribute("rel", "noopener noreferrer");
+  });
+
+  it("should show default completed message when status is completed but no PR URL", () => {
+    render(
+      <MicroagentStatusIndicator
+        status={MicroagentStatus.COMPLETED}
+        conversationId="test-conversation"
+      />,
+    );
+
+    const link = screen.getByRole("link", {
+      name: "MICROAGENT$STATUS_COMPLETED",
+    });
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute("href", "/conversations/test-conversation");
+  });
+
+  it("should show creating status without PR URL", () => {
+    render(
+      <MicroagentStatusIndicator
+        status={MicroagentStatus.CREATING}
+        conversationId="test-conversation"
+      />,
+    );
+
+    expect(screen.getByText("MICROAGENT$STATUS_CREATING")).toBeInTheDocument();
+  });
+
+  it("should show error status", () => {
+    render(
+      <MicroagentStatusIndicator
+        status={MicroagentStatus.ERROR}
+        conversationId="test-conversation"
+      />,
+    );
+
+    expect(screen.getByText("MICROAGENT$STATUS_ERROR")).toBeInTheDocument();
+  });
+
+  it("should prioritize PR URL over conversation link when both are provided", () => {
+    render(
+      <MicroagentStatusIndicator
+        status={MicroagentStatus.COMPLETED}
+        conversationId="test-conversation"
+        prUrl="https://github.com/owner/repo/pull/123"
+      />,
+    );
+
+    const link = screen.getByRole("link", { name: "MICROAGENT$VIEW_YOUR_PR" });
+    expect(link).toHaveAttribute(
+      "href",
+      "https://github.com/owner/repo/pull/123",
+    );
+    // Should not link to conversation when PR URL is available
+    expect(link).not.toHaveAttribute(
+      "href",
+      "/conversations/test-conversation",
+    );
+  });
+
+  it("should work with GitLab MR URLs", () => {
+    render(
+      <MicroagentStatusIndicator
+        status={MicroagentStatus.COMPLETED}
+        prUrl="https://gitlab.com/owner/repo/-/merge_requests/456"
+      />,
+    );
+
+    const link = screen.getByRole("link", { name: "MICROAGENT$VIEW_YOUR_PR" });
+    expect(link).toHaveAttribute(
+      "href",
+      "https://gitlab.com/owner/repo/-/merge_requests/456",
+    );
+  });
+});

frontend/__tests__/parse-pr-url.test.ts

@@ -0,0 +1,142 @@
+import { describe, it, expect } from "vitest";
+import {
+  extractPRUrls,
+  containsPRUrl,
+  getFirstPRUrl,
+} from "#/utils/parse-pr-url";
+
+describe("parse-pr-url", () => {
+  describe("extractPRUrls", () => {
+    it("should extract GitHub PR URLs", () => {
+      const text = "Check out this PR: https://github.com/owner/repo/pull/123";
+      const urls = extractPRUrls(text);
+      expect(urls).toEqual(["https://github.com/owner/repo/pull/123"]);
+    });
+
+    it("should extract GitLab MR URLs", () => {
+      const text =
+        "Merge request: https://gitlab.com/owner/repo/-/merge_requests/456";
+      const urls = extractPRUrls(text);
+      expect(urls).toEqual([
+        "https://gitlab.com/owner/repo/-/merge_requests/456",
+      ]);
+    });
+
+    it("should extract Bitbucket PR URLs", () => {
+      const text =
+        "PR link: https://bitbucket.org/owner/repo/pull-requests/789";
+      const urls = extractPRUrls(text);
+      expect(urls).toEqual([
+        "https://bitbucket.org/owner/repo/pull-requests/789",
+      ]);
+    });
+
+    it("should extract Azure DevOps PR URLs", () => {
+      const text =
+        "Azure PR: https://dev.azure.com/org/project/_git/repo/pullrequest/101";
+      const urls = extractPRUrls(text);
+      expect(urls).toEqual([
+        "https://dev.azure.com/org/project/_git/repo/pullrequest/101",
+      ]);
+    });
+
+    it("should extract multiple PR URLs", () => {
+      const text = `
+        GitHub: https://github.com/owner/repo/pull/123
+        GitLab: https://gitlab.com/owner/repo/-/merge_requests/456
+      `;
+      const urls = extractPRUrls(text);
+      expect(urls).toHaveLength(2);
+      expect(urls).toContain("https://github.com/owner/repo/pull/123");
+      expect(urls).toContain(
+        "https://gitlab.com/owner/repo/-/merge_requests/456",
+      );
+    });
+
+    it("should handle self-hosted GitLab URLs", () => {
+      const text =
+        "Self-hosted: https://gitlab.example.com/owner/repo/-/merge_requests/123";
+      const urls = extractPRUrls(text);
+      expect(urls).toEqual([
+        "https://gitlab.example.com/owner/repo/-/merge_requests/123",
+      ]);
+    });
+
+    it("should return empty array when no PR URLs found", () => {
+      const text = "This is just regular text with no PR URLs";
+      const urls = extractPRUrls(text);
+      expect(urls).toEqual([]);
+    });
+
+    it("should handle URLs with HTTP instead of HTTPS", () => {
+      const text = "HTTP PR: http://github.com/owner/repo/pull/123";
+      const urls = extractPRUrls(text);
+      expect(urls).toEqual(["http://github.com/owner/repo/pull/123"]);
+    });
+
+    it("should remove duplicate URLs", () => {
+      const text = `
+        Same PR mentioned twice:
+        https://github.com/owner/repo/pull/123
+        https://github.com/owner/repo/pull/123
+      `;
+      const urls = extractPRUrls(text);
+      expect(urls).toEqual(["https://github.com/owner/repo/pull/123"]);
+    });
+  });
+
+  describe("containsPRUrl", () => {
+    it("should return true when PR URL is present", () => {
+      const text = "Check out this PR: https://github.com/owner/repo/pull/123";
+      expect(containsPRUrl(text)).toBe(true);
+    });
+
+    it("should return false when no PR URL is present", () => {
+      const text = "This is just regular text";
+      expect(containsPRUrl(text)).toBe(false);
+    });
+  });
+
+  describe("getFirstPRUrl", () => {
+    it("should return the first PR URL found", () => {
+      const text = `
+        First: https://github.com/owner/repo/pull/123
+        Second: https://gitlab.com/owner/repo/-/merge_requests/456
+      `;
+      const url = getFirstPRUrl(text);
+      expect(url).toBe("https://github.com/owner/repo/pull/123");
+    });
+
+    it("should return null when no PR URL is found", () => {
+      const text = "This is just regular text";
+      const url = getFirstPRUrl(text);
+      expect(url).toBeNull();
+    });
+  });
+
+  describe("real-world scenarios", () => {
+    it("should handle typical microagent finish messages", () => {
+      const text = `
+        I have successfully created a pull request with the requested changes.
+        You can view the PR here: https://github.com/All-Hands-AI/OpenHands/pull/1234
+
+        The changes include:
+        - Updated the component
+        - Added tests
+        - Fixed the issue
+      `;
+      const url = getFirstPRUrl(text);
+      expect(url).toBe("https://github.com/All-Hands-AI/OpenHands/pull/1234");
+    });
+
+    it("should handle messages with PR URLs in the middle", () => {
+      const text = `
+        Task completed successfully! I've created a pull request at
+        https://github.com/owner/repo/pull/567 with all the requested changes.
+        Please review when you have a chance.
+      `;
+      const url = getFirstPRUrl(text);
+      expect(url).toBe("https://github.com/owner/repo/pull/567");
+    });
+  });
+});

frontend/__tests__/routes/settings.test.tsx

@@ -1,8 +1,8 @@
 import { render, screen, within } from "@testing-library/react";
 import { createRoutesStub } from "react-router";
 import { describe, expect, it, vi } from "vitest";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import SettingsScreen from "#/routes/settings";
+import { QueryClientProvider } from "@tanstack/react-query";
+import SettingsScreen, { clientLoader } from "#/routes/settings";
 import OpenHands from "#/api/open-hands";
 
 // Mock the i18next hook
@@ -31,16 +31,27 @@ vi.mock("react-i18next", async () => {
 });
 
 describe("Settings Screen", () => {
-  const { handleLogoutMock } = vi.hoisted(() => ({
+  const { handleLogoutMock, mockQueryClient } = vi.hoisted(() => ({
     handleLogoutMock: vi.fn(),
+    mockQueryClient: (() => {
+      const { QueryClient } = require("@tanstack/react-query");
+      return new QueryClient();
+    })(),
   }));
+
   vi.mock("#/hooks/use-app-logout", () => ({
     useAppLogout: vi.fn().mockReturnValue({ handleLogout: handleLogoutMock }),
   }));
 
+  vi.mock("#/query-client-config", () => ({
+    queryClient: mockQueryClient,
+  }));
+
   const RouterStub = createRoutesStub([
     {
       Component: SettingsScreen,
+      // @ts-expect-error - custom loader
+      clientLoader,
       path: "/settings",
       children: [
         {
@@ -56,8 +67,8 @@ describe("Settings Screen", () => {
           path: "/settings/app",
         },
         {
-          Component: () => <div data-testid="credits-settings-screen" />,
-          path: "/settings/credits",
+          Component: () => <div data-testid="billing-settings-screen" />,
+          path: "/settings/billing",
         },
         {
           Component: () => <div data-testid="api-keys-settings-screen" />,
@@ -67,26 +78,27 @@ describe("Settings Screen", () => {
     },
   ]);
 
-  const renderSettingsScreen = (path = "/settings") => {
-    const queryClient = new QueryClient();
-    return render(<RouterStub initialEntries={[path]} />, {
+  const renderSettingsScreen = (path = "/settings") =>
+    render(<RouterStub initialEntries={[path]} />, {
       wrapper: ({ children }) => (
-        <QueryClientProvider client={queryClient}>
+        <QueryClientProvider client={mockQueryClient}>
           {children}
         </QueryClientProvider>
       ),
     });
-  };
 
   it("should render the navbar", async () => {
     const sectionsToInclude = ["llm", "integrations", "application", "secrets"];
-    const sectionsToExclude = ["api keys", "credits"];
+    const sectionsToExclude = ["api keys", "credits", "billing"];
     const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
     // @ts-expect-error - only return app mode
     getConfigSpy.mockResolvedValue({
       APP_MODE: "oss",
     });
 
+    // Clear any existing query data
+    mockQueryClient.clear();
+
     renderSettingsScreen();
 
     const navbar = await screen.findByTestId("settings-navbar");
@@ -102,6 +114,8 @@ describe("Settings Screen", () => {
       });
       expect(sectionElement).not.toBeInTheDocument();
     });
+
+    getConfigSpy.mockRestore();
   });
 
   it("should render the saas navbar", async () => {
@@ -113,12 +127,15 @@ describe("Settings Screen", () => {
     const sectionsToInclude = [
       "integrations",
       "application",
-      "credits",
+      "credits", // The nav item shows "credits" text but routes to /billing
       "secrets",
       "api keys",
     ];
     const sectionsToExclude = ["llm"];
 
+    // Clear any existing query data
+    mockQueryClient.clear();
+
     renderSettingsScreen();
 
     const navbar = await screen.findByTestId("settings-navbar");
@@ -134,30 +151,44 @@ describe("Settings Screen", () => {
       });
       expect(sectionElement).not.toBeInTheDocument();
     });
+
+    getConfigSpy.mockRestore();
   });
 
-  it("should not be able to access oss-restricted routes in oss", async () => {
+  it("should not be able to access saas-only routes in oss mode", async () => {
     const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
     // @ts-expect-error - only return app mode
     getConfigSpy.mockResolvedValue({
       APP_MODE: "oss",
     });
 
-    const { rerender } = renderSettingsScreen("/settings/credits");
+    // Clear any existing query data
+    mockQueryClient.clear();
+
+    // In OSS mode, accessing restricted routes should redirect to /settings
+    // Since createRoutesStub doesn't handle clientLoader redirects properly,
+    // we test that the correct navbar is shown (OSS navbar) and that
+    // the restricted route components are not rendered when accessing /settings
+    renderSettingsScreen("/settings");
+
+    // Verify we're in OSS mode by checking the navbar
+    const navbar = await screen.findByTestId("settings-navbar");
+    expect(within(navbar).getByText("LLM")).toBeInTheDocument();
     expect(
-      screen.queryByTestId("credits-settings-screen"),
+      within(navbar).queryByText("credits", { exact: false }),
     ).not.toBeInTheDocument();
 
-    rerender(<RouterStub initialEntries={["/settings/api-keys"]} />);
-    expect(
-      screen.queryByTestId("api-keys-settings-screen"),
-    ).not.toBeInTheDocument();
-    rerender(<RouterStub initialEntries={["/settings/billing"]} />);
+    // Verify the LLM settings screen is shown
+    expect(screen.getByTestId("llm-settings-screen")).toBeInTheDocument();
     expect(
       screen.queryByTestId("billing-settings-screen"),
     ).not.toBeInTheDocument();
-    rerender(<RouterStub initialEntries={["/settings"]} />);
+    expect(
+      screen.queryByTestId("api-keys-settings-screen"),
+    ).not.toBeInTheDocument();
+
+    getConfigSpy.mockRestore();
   });
 
-  it.todo("should not be able to access saas-restricted routes in saas");
+  it.todo("should not be able to access oss-only routes in saas mode");
 });

frontend/__tests__/utils/check-home-hardcoded-strings.test.tsx

@@ -1,42 +0,0 @@
-import { render } from "@testing-library/react";
-import { test, expect, describe, vi } from "vitest";
-import { HomeHeader } from "#/components/features/home/home-header";
-
-// Mock dependencies
-vi.mock("#/hooks/mutation/use-create-conversation", () => ({
-  useCreateConversation: () => ({
-    mutate: vi.fn(),
-    isPending: false,
-    isSuccess: false,
-  }),
-}));
-
-vi.mock("#/hooks/use-is-creating-conversation", () => ({
-  useIsCreatingConversation: () => false,
-}));
-
-vi.mock("react-i18next", () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}));
-
-describe("Check for hardcoded English strings in Home components", () => {
-  test("HomeHeader should not have hardcoded English strings", () => {
-    const { container } = render(<HomeHeader />);
-
-    // Get all text content
-    const text = container.textContent;
-
-    // List of English strings that should be translated
-    const hardcodedStrings = [
-      "Launch from Scratch",
-      "Read this",
-    ];
-
-    // Check each string
-    hardcodedStrings.forEach((str) => {
-      expect(text).not.toContain(str);
-    });
-  });
-});

frontend/__tests__/utils/extract-model-and-provider.test.ts

@@ -83,16 +83,18 @@ describe("extractModelAndProvider", () => {
       separator: "/",
     });
 
+    // These models are no longer in the VERIFIED_ANTHROPIC_MODELS list
+    // but we keep the tests for backward compatibility
     expect(extractModelAndProvider("claude-3-haiku-20240307")).toEqual({
-      provider: "anthropic",
+      provider: "",
       model: "claude-3-haiku-20240307",
-      separator: "/",
+      separator: "",
     });
 
     expect(extractModelAndProvider("claude-2.1")).toEqual({
-      provider: "anthropic",
+      provider: "",
       model: "claude-2.1",
-      separator: "/",
+      separator: "",
     });
   });
 });

frontend/__tests__/utils/organize-models-and-providers.test.ts

@@ -52,14 +52,16 @@ test("organizeModelsAndProviders", () => {
       separator: "/",
       models: [
         "claude-3-5-sonnet-20241022",
+      ],
+    },
+    other: {
+      separator: "",
+      models: [
+        "together-ai-21.1b-41b",
         "claude-3-haiku-20240307",
         "claude-2",
         "claude-2.1",
       ],
     },
-    other: {
-      separator: "",
-      models: ["together-ai-21.1b-41b"],
-    },
   });
 });

frontend/package-lock.json

@@ -27,14 +27,14 @@
         "clsx": "^2.1.1",
         "eslint-config-airbnb-typescript": "^18.0.0",
         "framer-motion": "^12.23.0",
-        "i18next": "^25.3.1",
+        "i18next": "^25.3.2",
         "i18next-browser-languagedetector": "^8.2.0",
         "i18next-http-backend": "^3.0.2",
         "isbot": "^5.1.28",
         "jose": "^6.0.11",
         "lucide-react": "^0.525.0",
         "monaco-editor": "^0.52.2",
-        "posthog-js": "^1.256.2",
+        "posthog-js": "^1.257.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-highlight": "^0.15.0",
@@ -50,7 +50,7 @@
         "sirv-cli": "^3.0.1",
         "socket.io-client": "^4.8.1",
         "tailwind-merge": "^3.3.1",
-        "vite": "^7.0.2",
+        "vite": "^7.0.3",
         "web-vitals": "^5.0.3",
         "ws": "^8.18.2"
       },
@@ -67,7 +67,7 @@
         "@testing-library/jest-dom": "^6.6.1",
         "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^14.6.1",
-        "@types/node": "^24.0.10",
+        "@types/node": "^24.0.12",
         "@types/react": "^19.1.8",
         "@types/react-dom": "^19.1.6",
         "@types/react-highlight": "^0.12.8",
@@ -82,6 +82,7 @@
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-airbnb-typescript": "^18.0.0",
         "eslint-config-prettier": "^10.1.5",
+        "eslint-plugin-i18next": "^6.1.2",
         "eslint-plugin-import": "^2.32.0",
         "eslint-plugin-jsx-a11y": "^6.10.2",
         "eslint-plugin-prettier": "^5.5.1",
@@ -6186,9 +6187,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "24.0.10",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.10.tgz",
-      "integrity": "sha512-ENHwaH+JIRTDIEEbDK6QSQntAYGtbvdDXnMXnZaZ6k13Du1dPMmprkEHIL7ok2Wl2aZevetwTAb5S+7yIF+enA==",
+      "version": "24.0.12",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.12.tgz",
+      "integrity": "sha512-LtOrbvDf5ndC9Xi+4QZjVL0woFymF/xSTKZKPgrrl7H7XoeDvnD+E2IclKVDyaK9UM756W/3BXqSU+JEHopA9g==",
       "devOptional": true,
       "dependencies": {
         "undici-types": "~7.8.0"
@@ -9121,6 +9122,20 @@
         "ms": "^2.1.1"
       }
     },
+    "node_modules/eslint-plugin-i18next": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-i18next/-/eslint-plugin-i18next-6.1.2.tgz",
+      "integrity": "sha512-hvTmws4kouNHkk314+9MHNj+RQmsqrkejWhTXGlRC0j8H+EXq2qDRLe6UqIjrFZo7/ogyd4btuqsnKCBi8wHbw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "lodash": "^4.17.21",
+        "requireindex": "~1.1.0"
+      },
+      "engines": {
+        "node": ">=18.10.0"
+      }
+    },
     "node_modules/eslint-plugin-import": {
       "version": "2.32.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
@@ -10669,9 +10684,9 @@
       }
     },
     "node_modules/i18next": {
-      "version": "25.3.1",
-      "resolved": "https://registry.npmjs.org/i18next/-/i18next-25.3.1.tgz",
-      "integrity": "sha512-S4CPAx8LfMOnURnnJa8jFWvur+UX/LWcl6+61p9VV7SK2m0445JeBJ6tLD0D5SR0H29G4PYfWkEhivKG5p4RDg==",
+      "version": "25.3.2",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-25.3.2.tgz",
+      "integrity": "sha512-JSnbZDxRVbphc5jiptxr3o2zocy5dEqpVm9qCGdJwRNO+9saUJS0/u4LnM/13C23fUEWxAylPqKU/NpMV/IjqA==",
       "funding": [
         {
           "type": "individual",
@@ -14298,9 +14313,9 @@
       "license": "MIT"
     },
     "node_modules/posthog-js": {
-      "version": "1.256.2",
-      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.256.2.tgz",
-      "integrity": "sha512-ypepnUHr33i5a1Uk39mozZXXTENRPC17HCG3WHKK6aRcpNwNs8uEqXaIKICGNM+qre+totKeTgl0WoaUFYmyoQ==",
+      "version": "1.257.0",
+      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.257.0.tgz",
+      "integrity": "sha512-Ujg9RGtWVCu+4tmlRpALSy2ZOZI6JtieSYXIDDdgMWm167KYKvTtbMPHdoBaPWcNu0Km+1hAIBnQFygyn30KhA==",
       "dependencies": {
         "core-js": "^3.38.1",
         "fflate": "^0.4.8",
@@ -15117,6 +15132,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/requireindex": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.1.0.tgz",
+      "integrity": "sha512-LBnkqsDE7BZKvqylbmn7lTIVdpx4K/QCduRATpO5R+wtPmky/a8pN1bO2D6wXppn1497AJF9mNjqAXr6bdl9jg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.5"
+      }
+    },
     "node_modules/requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -17209,9 +17234,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.0.2.tgz",
-      "integrity": "sha512-hxdyZDY1CM6SNpKI4w4lcUc3Mtkd9ej4ECWVHSMrOdSinVc2zYOAppHeGc/hzmRo3pxM5blMzkuWHOJA/3NiFw==",
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.0.3.tgz",
+      "integrity": "sha512-y2L5oJZF7bj4c0jgGYgBNSdIu+5HF+m68rn2cQXFbGoShdhV1phX9rbnxy9YXj82aS8MMsCLAAFkRxZeWdldrQ==",
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.6",

frontend/package.json

@@ -26,14 +26,14 @@
     "clsx": "^2.1.1",
     "eslint-config-airbnb-typescript": "^18.0.0",
     "framer-motion": "^12.23.0",
-    "i18next": "^25.3.1",
+    "i18next": "^25.3.2",
     "i18next-browser-languagedetector": "^8.2.0",
     "i18next-http-backend": "^3.0.2",
     "isbot": "^5.1.28",
     "jose": "^6.0.11",
     "lucide-react": "^0.525.0",
     "monaco-editor": "^0.52.2",
-    "posthog-js": "^1.256.2",
+    "posthog-js": "^1.257.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-highlight": "^0.15.0",
@@ -49,7 +49,7 @@
     "sirv-cli": "^3.0.1",
     "socket.io-client": "^4.8.1",
     "tailwind-merge": "^3.3.1",
-    "vite": "^7.0.2",
+    "vite": "^7.0.3",
     "web-vitals": "^5.0.3",
     "ws": "^8.18.2"
   },
@@ -70,7 +70,6 @@
     "lint:fix": "eslint src --ext .ts,.tsx,.js --fix && prettier --write src/**/*.{ts,tsx}",
     "prepare": "cd .. && husky frontend/.husky",
     "typecheck": "react-router typegen && tsc",
-    "check-unlocalized-strings": "node scripts/check-unlocalized-strings.cjs",
     "check-translation-completeness": "node scripts/check-translation-completeness.cjs"
   },
   "lint-staged": {
@@ -92,7 +91,7 @@
     "@testing-library/jest-dom": "^6.6.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^24.0.10",
+    "@types/node": "^24.0.12",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@types/react-highlight": "^0.12.8",
@@ -107,6 +106,7 @@
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^18.0.0",
     "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-i18next": "^6.1.2",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.5.1",

frontend/scripts/check-unlocalized-strings.cjs

@@ -1,739 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Pre-commit hook script to check for unlocalized strings in the frontend code
- * This script is based on the test in __tests__/utils/check-hardcoded-strings.test.tsx
- */
-
-const path = require('path');
-const fs = require('fs');
-const parser = require('@babel/parser');
-const traverse = require('@babel/traverse').default;
-
-// Files/directories to ignore
-const IGNORE_PATHS = [
-  // Build and dependency files
-  "node_modules",
-  "dist",
-  ".git",
-  "test",
-  "__tests__",
-  ".d.ts",
-  "i18n",
-  "package.json",
-  "package-lock.json",
-  "tsconfig.json",
-
-  // Internal code that doesn't need localization
-  "mocks", // Mock data
-  "assets", // SVG paths and CSS classes
-  "types", // Type definitions and constants
-  "state", // Redux state management
-  "api", // API endpoints
-  "services", // Internal services
-  "hooks", // React hooks
-  "context", // React context
-  "store", // Redux store
-  "routes.ts", // Route definitions
-  "root.tsx", // Root component
-  "entry.client.tsx", // Client entry point
-  "utils/scan-unlocalized-strings.ts", // Original scanner
-  "utils/scan-unlocalized-strings-ast.ts", // This file itself
-  "frontend/src/components/features/home/tasks/get-prompt-for-query.ts", // Only contains agent prompts
-];
-
-// Extensions to scan
-const SCAN_EXTENSIONS = [".ts", ".tsx", ".js", ".jsx"];
-
-// Attributes that typically don't contain user-facing text
-const NON_TEXT_ATTRIBUTES = [
-  "allow",
-  "className",
-  "i18nKey",
-  "testId",
-  "id",
-  "name",
-  "type",
-  "href",
-  "src",
-  "rel",
-  "target",
-  "style",
-  "onClick",
-  "onChange",
-  "onSubmit",
-  "data-testid",
-  "aria-labelledby",
-  "aria-describedby",
-  "aria-hidden",
-  "role",
-  "sandbox",
-];
-
-function shouldIgnorePath(filePath) {
-  return IGNORE_PATHS.some((ignore) => filePath.includes(ignore));
-}
-
-// Check if a string looks like a translation key
-// Translation keys typically use dots, underscores, or are all caps
-// Also check for the pattern with $ which is used in our translation keys
-function isLikelyTranslationKey(str) {
-  return (
-    /^[A-Z0-9_$.]+$/.test(str) ||
-    str.includes(".") ||
-    /[A-Z0-9_]+\$[A-Z0-9_]+/.test(str)
-  );
-}
-
-// Check if a string is a raw translation key that should be wrapped in t()
-function isRawTranslationKey(str) {
-  // Check for our specific translation key pattern (e.g., "SETTINGS$GITHUB_SETTINGS")
-  // Exclude specific keys that are already properly used with i18next.t() in the code
-  const excludedKeys = [
-    "STATUS$ERROR_LLM_OUT_OF_CREDITS",
-    "ERROR$GENERIC",
-    "GITHUB$AUTH_SCOPE",
-  ];
-
-  if (excludedKeys.includes(str)) {
-    return false;
-  }
-
-  return /^[A-Z0-9_]+\$[A-Z0-9_]+$/.test(str);
-}
-
-// Specific technical strings that should be excluded from localization
-const EXCLUDED_TECHNICAL_STRINGS = [
-  "openid email profile", // OAuth scope string - not user-facing
-  "OPEN_ISSUE", // Task type identifier, not a UI string
-  "Merge Request", // Git provider specific terminology
-  "GitLab API", // Git provider specific terminology
-  "Pull Request", // Git provider specific terminology
-  "GitHub API", // Git provider specific terminology
-  "add-secret-form", // Test ID for secret form
-  "edit-secret-form", // Test ID for secret form
-  "search-api-key-input", // Input name for search API key
-  "noopener,noreferrer", // Options for window.open
-  "STATUS$READY",
-  "STATUS$STOPPED",
-  "STATUS$ERROR",
-];
-
-function isExcludedTechnicalString(str) {
-  return EXCLUDED_TECHNICAL_STRINGS.includes(str);
-}
-
-function isLikelyCode(str) {
-  // A string with no spaces and at least one underscore or colon is likely a code.
-  // (e.g.: "browser_interactive" or "error:")
-  if (str.includes(" ")) {
-    return false
-  }
-  if (str.includes(":") || str.includes("_")){
-    return true
-  }
-  return false
-}
-
-function isCommonDevelopmentString(str) {
-
-  // Technical patterns that are definitely not UI strings
-  const technicalPatterns = [
-    // URLs and paths
-    /^https?:\/\//, // URLs
-    /^\/[a-zA-Z0-9_\-./]*$/, // File paths
-    /^[a-zA-Z0-9_-]+\.[a-zA-Z0-9_-]+$/, // File extensions, class names
-    /^@[a-zA-Z0-9/-]+$/, // Import paths
-    /^#\/[a-zA-Z0-9/-]+$/, // Alias imports
-    /^[a-zA-Z0-9/-]+\/[a-zA-Z0-9/-]+$/, // Module paths
-    /^data:image\/[a-zA-Z0-9;,]+$/, // Data URLs
-    /^application\/[a-zA-Z0-9-]+$/, // MIME types
-    /^!\[image]\(data:image\/png;base64,$/, // Markdown image with base64 data
-
-    // Numbers, IDs, and technical values
-    /^\d+(\.\d+)?$/, // Numbers
-    /^#[0-9a-fA-F]{3,8}$/, // Color codes
-    /^[a-zA-Z0-9_-]+=[a-zA-Z0-9_-]+$/, // Key-value pairs
-    /^mm:ss$/, // Time format
-    /^[a-zA-Z0-9]+\/[a-zA-Z0-9-]+$/, // Provider/model format
-    /^\?[a-zA-Z0-9_-]+$/, // URL parameters
-    /^[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}$/i, // UUID
-    /^[A-Za-z0-9+/=]+$/, // Base64
-
-    // HTML and CSS selectors
-    /^[a-z]+(\[[^\]]+\])+$/, // CSS attribute selectors
-    /^[a-z]+:[a-z-]+$/, // CSS pseudo-selectors
-    /^[a-z]+\.[a-z0-9_-]+$/, // CSS class selectors
-    /^[a-z]+#[a-z0-9_-]+$/, // CSS ID selectors
-    /^[a-z]+\s*>\s*[a-z]+$/, // CSS child selectors
-    /^[a-z]+\s+[a-z]+$/, // CSS descendant selectors
-
-    // CSS and styling patterns
-    /^[a-z0-9-]+:[a-z0-9-]+$/, // CSS property:value
-    /^[a-z0-9-]+:[a-z0-9-]+;[a-z0-9-]+:[a-z0-9-]+$/, // Multiple CSS properties
-  ];
-
-  // File extensions and media types
-  const fileExtensionPattern =
-    /^\.(png|jpg|jpeg|gif|svg|webp|bmp|ico|pdf|mp4|webm|ogg|mp3|wav|json|xml|csv|txt|md|html|css|js|jsx|ts|tsx)$/i;
-  if (fileExtensionPattern.test(str)) {
-    return true;
-  }
-
-  // AI model and provider patterns
-  const aiRelatedPattern =
-    /^(AI|OpenAI|VertexAI|PaLM|Gemini|Anthropic|Anyscale|Databricks|Ollama|FriendliAI|Groq|DeepInfra|AI21|Replicate|OpenRouter|Azure|AWS|SageMaker|Bedrock|Mistral|Perplexity|Fireworks|Cloudflare|Workers|Voyage|claude-|gpt-|o1-|o3-)/i;
-  if (aiRelatedPattern.test(str)) {
-    return true;
-  }
-
-  // CSS units and values
-  const cssUnitsPattern =
-    /\b\d+(px|rem|em|vh|vw|vmin|vmax|ch|ex|fr|deg|rad|turn|grad|ms|s)$|^(px|rem|em|vh|vw|vmin|vmax|ch|ex|fr|deg|rad|turn|grad|ms|s)$/;
-  const cssValuesPattern =
-    /(rgb|rgba|hsl|hsla|#[0-9a-fA-F]+|solid|absolute|relative|sticky|fixed|static|block|inline|flex|grid|none|auto|hidden|visible)/;
-
-  if (cssUnitsPattern.test(str) || cssValuesPattern.test(str)) {
-    return true;
-  }
-
-  // Check for CSS class strings with brackets (common in the codebase)
-  if (
-    str.includes("[") &&
-    str.includes("]") &&
-    (str.includes("px") ||
-      str.includes("rem") ||
-      str.includes("em") ||
-      str.includes("w-") ||
-      str.includes("h-") ||
-      str.includes("p-") ||
-      str.includes("m-"))
-  ) {
-    return true;
-  }
-
-  // Check for CSS class strings with specific patterns
-  if (
-    str.includes("border-") ||
-    str.includes("rounded-") ||
-    str.includes("cursor-") ||
-    str.includes("opacity-") ||
-    str.includes("disabled:") ||
-    str.includes("hover:") ||
-    str.includes("focus-within:") ||
-    str.includes("first-of-type:") ||
-    str.includes("last-of-type:") ||
-    str.includes("group-data-")
-  ) {
-    return true;
-  }
-
-  // Check if it looks like a Tailwind class string
-  if (/^[a-z0-9-]+(\s+[a-z0-9-]+)*$/.test(str)) {
-    // Common Tailwind prefixes and patterns
-    const tailwindPrefixes = [
-      "bg-", "text-", "border-", "rounded-", "p-", "m-", "px-", "py-", "mx-", "my-",
-      "w-", "h-", "min-w-", "min-h-", "max-w-", "max-h-", "flex-", "grid-", "gap-",
-      "space-", "items-", "justify-", "self-", "col-", "row-", "order-", "object-",
-      "overflow-", "opacity-", "z-", "top-", "right-", "bottom-", "left-", "inset-",
-      "font-", "tracking-", "leading-", "list-", "placeholder-", "shadow-", "ring-",
-      "transition-", "duration-", "ease-", "delay-", "animate-", "scale-", "rotate-",
-      "translate-", "skew-", "origin-", "cursor-", "select-", "resize-", "fill-", "stroke-",
-    ];
-
-    // Check if any word in the string starts with a Tailwind prefix
-    const words = str.split(/\s+/);
-    for (const word of words) {
-      for (const prefix of tailwindPrefixes) {
-        if (word.startsWith(prefix)) {
-          return true;
-        }
-      }
-    }
-
-    // Check for Tailwind modifiers
-    const tailwindModifiers = [
-      "hover:", "focus:", "active:", "disabled:", "visited:", "first:", "last:",
-      "odd:", "even:", "group-hover:", "focus-within:", "focus-visible:", "motion-safe:",
-      "motion-reduce:", "dark:", "light:", "sm:", "md:", "lg:", "xl:", "2xl:",
-    ];
-
-    for (const word of words) {
-      for (const modifier of tailwindModifiers) {
-        if (word.includes(modifier)) {
-          return true;
-        }
-      }
-    }
-
-    // Check for CSS property combinations
-    const cssProperties = [
-      "border", "rounded", "px", "py", "mx", "my", "p", "m", "w", "h", "flex",
-      "grid", "gap", "transition", "duration", "font", "leading", "tracking",
-    ];
-
-    // If the string contains multiple CSS properties, it's likely a CSS class string
-    let cssPropertyCount = 0;
-    for (const word of words) {
-      if (
-        cssProperties.some(
-          (prop) => word === prop || word.startsWith(`${prop}-`),
-        )
-      ) {
-        cssPropertyCount += 1;
-      }
-    }
-
-    if (cssPropertyCount >= 2) {
-      return true;
-    }
-  }
-
-  // Check for specific CSS class patterns that appear in the test failures
-  if (
-    str.match(
-      /^(border|rounded|flex|grid|transition|duration|ease|hover:|focus:|active:|disabled:|placeholder:|text-|bg-|w-|h-|p-|m-|gap-|items-|justify-|self-|overflow-|cursor-|opacity-|z-|top-|right-|bottom-|left-|inset-|font-|tracking-|leading-|whitespace-|break-|truncate|shadow-|ring-|outline-|animate-|transform|rotate-|scale-|skew-|translate-|origin-|first-of-type:|last-of-type:|group-data-|max-|min-|px-|py-|mx-|my-|grow|shrink|resize-|underline|italic|normal)/,
-    )
-  ) {
-    return true;
-  }
-
-  // HTML tags and attributes
-  if (
-    /^<[a-z0-9]+(?:\s[^>]*)?>.*<\/[a-z0-9]+>$/i.test(str) ||
-    /^<[a-z0-9]+ [^>]+\/>$/i.test(str)
-  ) {
-    return true;
-  }
-
-  // Check for specific patterns in suggestions and examples
-  if (
-    str.includes("* ") &&
-    (str.includes("create a") ||
-      str.includes("build a") ||
-      str.includes("make a"))
-  ) {
-    // This is likely a suggestion or example, not a UI string
-    return false;
-  }
-
-  // Check for specific technical identifiers from the test failures
-  if (
-    /^(download_via_vscode_button_clicked|open-vscode-error-|set-indicator|settings_saved|openhands-trace-|provider-item-|last_browser_action_error)$/.test(
-      str,
-    )
-  ) {
-    return true;
-  }
-
-  // Check for URL paths and query parameters
-  if (
-    str.startsWith("?") ||
-    str.startsWith("/") ||
-    str.includes("auth.") ||
-    str.includes("$1auth.")
-  ) {
-    return true;
-  }
-
-  // Check for specific strings that should be excluded
-  if (
-    str === "Cache Hit:" ||
-    str === "Cache Write:" ||
-    str === "ADD_DOCS" ||
-    str === "ADD_DOCKERFILE" ||
-    str === "Verified" ||
-    str === "Others" ||
-    str === "Feedback" ||
-    str === "JSON File" ||
-    str === "mt-0.5 md:mt-0"
-  ) {
-    return true;
-  }
-
-  // Check for long suggestion texts
-  if (
-    str.length > 100 &&
-    (str.includes("Please write a bash script") ||
-      str.includes("Please investigate the repo") ||
-      str.includes("Please push the changes") ||
-      str.includes("Examine the dependencies") ||
-      str.includes("Investigate the documentation") ||
-      str.includes("Investigate the current repo") ||
-      str.includes("I want to create a Hello World app") ||
-      str.includes("I want to create a VueJS app") ||
-      str.includes("This should be a client-only app"))
-  ) {
-    return true;
-  }
-
-  // Check for specific error messages and UI text
-  if (
-    str === "All data associated with this project will be lost." ||
-    str === "You will lose any unsaved information." ||
-    str ===
-      "This conversation does not exist, or you do not have permission to access it." ||
-    str === "Failed to fetch settings. Please try reloading." ||
-    str ===
-      "If you tell OpenHands to start a web server, the app will appear here." ||
-    str ===
-      "Your browser doesn't support downloading files. Please use Chrome, Edge, or another browser that supports the File System Access API." ||
-    str ===
-      "Something went wrong while fetching settings. Please reload the page." ||
-    str ===
-      "To help us improve, we collect feedback from your interactions to improve our prompts. By submitting this form, you consent to us collecting this data." ||
-    str === "Please push the latest changes to the existing pull request."
-  ) {
-    return true;
-  }
-
-  // Check against all technical patterns
-  return technicalPatterns.some((pattern) => pattern.test(str));
-}
-
-function isLikelyUserFacingText(str) {
-
-  // Basic validation - skip very short strings or strings without letters
-  if (!str || str.length <= 2 || !/[a-zA-Z]/.test(str)) {
-    return false;
-  }
-
-  // Check if it's a specifically excluded technical string
-  if (isExcludedTechnicalString(str)) {
-    return false;
-  }
-
-  // Check if it looks like a code rather than a key
-  if (isLikelyCode(str)) {
-    return false
-  }
-
-  // Check if it's a raw translation key that should be wrapped in t()
-  if (isRawTranslationKey(str)) {
-    return true;
-  }
-
-  // Check if it's a translation key pattern (e.g., "SETTINGS$BASE_URL")
-  // These should be wrapped in t() or use I18nKey enum
-  if (isLikelyTranslationKey(str) && /^[A-Z0-9_]+\$[A-Z0-9_]+$/.test(str)) {
-    return true;
-  }
-
-  // First, check if it's a common development string (not user-facing)
-  if (isCommonDevelopmentString(str)) {
-    return false;
-  }
-
-  // Multi-word phrases are likely UI text
-  const hasMultipleWords = /\s+/.test(str) && str.split(/\s+/).length > 1;
-
-  // Sentences and questions are likely UI text
-  const hasPunctuation = /[?!.,:]/.test(str);
-  const isCapitalizedPhrase = /^[A-Z]/.test(str) && hasMultipleWords;
-  const isTitleCase = hasMultipleWords && /\s[A-Z]/.test(str);
-  const hasSentenceStructure = /^[A-Z].*[.!?]$/.test(str); // Starts with capital, ends with punctuation
-  const hasQuestionForm =
-    /^(What|How|Why|When|Where|Who|Can|Could|Would|Will|Is|Are|Do|Does|Did|Should|May|Might)/.test(
-      str,
-    );
-
-  // Product names and camelCase identifiers are likely UI text
-  const hasInternalCapitals = /[a-z][A-Z]/.test(str); // CamelCase product names
-
-  // Instruction text patterns are likely UI text
-  const looksLikeInstruction =
-    /^(Enter|Type|Select|Choose|Provide|Specify|Search|Find|Input|Add|Write|Describe|Set|Pick|Browse|Upload|Download|Click|Tap|Press|Go to|Visit|Open|Close)/i.test(
-      str,
-    );
-
-  // Error and status messages are likely UI text
-  const looksLikeErrorOrStatus =
-    /(failed|error|invalid|required|missing|incorrect|wrong|unavailable|not found|not available|try again|success|completed|finished|done|saved|updated|created|deleted|removed|added)/i.test(
-      str,
-    );
-
-  // Single word check - assume it's UI text unless proven otherwise
-  const isSingleWord =
-    !str.includes(" ") && str.length > 1 && /^[a-zA-Z]+$/.test(str);
-
-  // For single words, we need to be more careful
-  if (isSingleWord) {
-    // Skip common programming terms and variable names
-    const isCommonProgrammingTerm =
-      /^(null|undefined|true|false|function|class|interface|type|enum|const|let|var|return|import|export|default|async|await|try|catch|finally|throw|new|this|super|extends|implements|instanceof|typeof|void|delete|in|of|for|while|do|if|else|switch|case|break|continue|yield|static|get|set|public|private|protected|readonly|abstract|implements|namespace|module|declare|as|from|with)$/i.test(
-        str,
-      );
-
-    if (isCommonProgrammingTerm) {
-      return false;
-    }
-
-    // Skip common variable name patterns
-    const looksLikeVariableName =
-      /^[a-z][a-zA-Z0-9]*$/.test(str) && str.length <= 20;
-
-    if (looksLikeVariableName) {
-      return false;
-    }
-
-    // Skip common CSS values
-    const isCommonCssValue =
-      /^(auto|none|hidden|visible|block|inline|flex|grid|row|column|wrap|nowrap|center|start|end|stretch|cover|contain|fixed|absolute|relative|static|sticky|pointer|default|inherit|initial|unset)$/i.test(
-        str,
-      );
-
-    if (isCommonCssValue) {
-      return false;
-    }
-
-    // Skip common file extensions
-    const isFileExtension = /^\.[a-z0-9]+$/i.test(str);
-    if (isFileExtension) {
-      return false;
-    }
-
-    // Skip common abbreviations
-    const isCommonAbbreviation =
-      /^(id|src|href|url|alt|img|btn|nav|div|span|ul|li|ol|dl|dt|dd|svg|png|jpg|gif|pdf|doc|txt|md|js|ts|jsx|tsx|css|scss|less|html|xml|json|yaml|yml|toml|csv|mp3|mp4|wav|avi|mov|mpeg|webm|webp|ttf|woff|eot|otf)$/i.test(
-        str,
-      );
-
-    if (isCommonAbbreviation) {
-      return false;
-    }
-
-    // If it's a single word that's not a programming term, variable name, CSS value, file extension, or abbreviation,
-    // it might be UI text, but we'll be conservative and return false
-    return false;
-  }
-
-  // If it has multiple words, punctuation, or looks like a sentence, it's likely UI text
-  return (
-    hasMultipleWords ||
-    hasPunctuation ||
-    isCapitalizedPhrase ||
-    isTitleCase ||
-    hasSentenceStructure ||
-    hasQuestionForm ||
-    hasInternalCapitals ||
-    looksLikeInstruction ||
-    looksLikeErrorOrStatus
-  );
-}
-
-function isInTranslationContext(path) {
-  // Check if the JSX text is inside a <Trans> component
-  let current = path;
-  while (current.parentPath) {
-    if (
-      current.isJSXElement() &&
-      current.node.openingElement &&
-      current.node.openingElement.name &&
-      current.node.openingElement.name.name === "Trans"
-    ) {
-      return true;
-    }
-    current = current.parentPath;
-  }
-  return false;
-}
-
-function scanFileForUnlocalizedStrings(filePath) {
-  // Skip suggestion content files as they contain special strings that are already properly localized
-  if (filePath.includes("utils/suggestions/") || filePath.includes("mocks/task-suggestions-handlers.ts")) {
-    return [];
-  }
-
-  try {
-    const content = fs.readFileSync(filePath, "utf-8");
-    const unlocalizedStrings = [];
-
-    // Skip files that are too large
-    if (content.length > 1000000) {
-      console.warn(`Skipping large file: ${filePath}`);
-      return [];
-    }
-
-    try {
-      // Parse the file
-      const ast = parser.parse(content, {
-        sourceType: "module",
-        plugins: ["jsx", "typescript", "classProperties", "decorators-legacy"],
-      });
-
-      // Traverse the AST
-      traverse(ast, {
-        // Find JSX text content
-        JSXText(jsxTextPath) {
-          const text = jsxTextPath.node.value.trim();
-          if (
-            text &&
-            isLikelyUserFacingText(text) &&
-            !isInTranslationContext(jsxTextPath)
-          ) {
-            unlocalizedStrings.push(text);
-          }
-        },
-
-        // Find string literals in JSX attributes
-        JSXAttribute(jsxAttrPath) {
-          const attrName = jsxAttrPath.node.name.name.toString();
-
-          // Skip technical attributes that don't contain user-facing text
-          if (NON_TEXT_ATTRIBUTES.includes(attrName)) {
-            return;
-          }
-
-          // Skip styling attributes
-          if (
-            attrName === "className" ||
-            attrName === "class" ||
-            attrName === "style"
-          ) {
-            return;
-          }
-
-          // Skip data attributes and event handlers
-          if (attrName.startsWith("data-") || attrName.startsWith("on")) {
-            return;
-          }
-
-          // Check the attribute value
-          const value = jsxAttrPath.node.value;
-          if (value && value.type === "StringLiteral") {
-            const text = value.value.trim();
-            if (text && isLikelyUserFacingText(text)) {
-              unlocalizedStrings.push(text);
-            }
-          }
-        },
-
-        // Find string literals in code
-        StringLiteral(stringPath) {
-          // Skip if parent is JSX attribute (already handled above)
-          if (stringPath.parent.type === "JSXAttribute") {
-            return;
-          }
-
-          // Skip if parent is import/export declaration
-          if (
-            stringPath.parent.type === "ImportDeclaration" ||
-            stringPath.parent.type === "ExportDeclaration"
-          ) {
-            return;
-          }
-
-          // Skip if parent is object property key
-          if (
-            stringPath.parent.type === "ObjectProperty" &&
-            stringPath.parent.key === stringPath.node
-          ) {
-            return;
-          }
-
-          // Skip if inside a t() call or Trans component
-          let isInsideTranslation = false;
-          let current = stringPath;
-
-          while (current.parentPath && !isInsideTranslation) {
-            // Check for t() function call
-            if (
-              current.parent.type === "CallExpression" &&
-              current.parent.callee &&
-              ((current.parent.callee.type === "Identifier" &&
-                current.parent.callee.name === "t") ||
-                (current.parent.callee.type === "MemberExpression" &&
-                  current.parent.callee.property &&
-                  current.parent.callee.property.name === "t"))
-            ) {
-              isInsideTranslation = true;
-              break;
-            }
-
-            // Check for <Trans> component
-            if (
-              current.parent.type === "JSXElement" &&
-              current.parent.openingElement &&
-              current.parent.openingElement.name &&
-              current.parent.openingElement.name.name === "Trans"
-            ) {
-              isInsideTranslation = true;
-              break;
-            }
-
-            current = current.parentPath;
-          }
-
-          if (!isInsideTranslation) {
-            const text = stringPath.node.value.trim();
-            if (text && isLikelyUserFacingText(text)) {
-              unlocalizedStrings.push(text);
-            }
-          }
-        },
-      });
-
-      return unlocalizedStrings;
-    } catch (error) {
-      console.error(`Error parsing file ${filePath}:`, error);
-      return [];
-    }
-  } catch (error) {
-    console.error(`Error reading file ${filePath}:`, error);
-    return [];
-  }
-}
-
-function scanDirectoryForUnlocalizedStrings(dirPath) {
-  const results = new Map();
-
-  function scanDir(currentPath) {
-    const entries = fs.readdirSync(currentPath, { withFileTypes: true });
-
-    for (const entry of entries) {
-      const fullPath = path.join(currentPath, entry.name);
-
-      if (!shouldIgnorePath(fullPath)) {
-        if (entry.isDirectory()) {
-          scanDir(fullPath);
-        } else if (
-          entry.isFile() &&
-          SCAN_EXTENSIONS.includes(path.extname(fullPath))
-        ) {
-          const unlocalized = scanFileForUnlocalizedStrings(fullPath);
-          if (unlocalized.length > 0) {
-            results.set(fullPath, unlocalized);
-          }
-        }
-      }
-    }
-  }
-
-  scanDir(dirPath);
-  return results;
-}
-
-// Run the check
-try {
-  const srcPath = path.resolve(__dirname, '../src');
-  console.log('Checking for unlocalized strings in frontend code...');
-
-  // Get unlocalized strings using the AST scanner
-  const results = scanDirectoryForUnlocalizedStrings(srcPath);
-
-  // If we found any unlocalized strings, format them for output and exit with error
-  if (results.size > 0) {
-    const formattedResults = Array.from(results.entries())
-      .map(([file, strings]) => `\n${file}:\n  ${strings.join('\n  ')}`)
-      .join('\n');
-
-    console.error(`Error: Found unlocalized strings in the following files:${formattedResults}`);
-    process.exit(1);
-  }
-
-  console.log('✅ No unlocalized strings found in frontend code.');
-  process.exit(0);
-} catch (error) {
-  console.error('Error running unlocalized strings check:', error);
-  process.exit(1);
-}

frontend/src/api/memory-service/memory-service.api.ts

@@ -0,0 +1,21 @@
+import { openHands } from "../open-hands-axios";
+
+interface GetPromptResponse {
+  status: string;
+  prompt: string;
+}
+
+export class MemoryService {
+  static async getPrompt(
+    conversationId: string,
+    eventId: number,
+  ): Promise<string> {
+    const { data } = await openHands.get<GetPromptResponse>(
+      `/api/conversations/${conversationId}/remember_prompt`,
+      {
+        params: { event_id: eventId },
+      },
+    );
+    return data.prompt;
+  }
+}

frontend/src/api/open-hands.ts

@@ -258,19 +258,17 @@ class OpenHands {
     selectedRepository?: string,
     git_provider?: Provider,
     initialUserMsg?: string,
-    imageUrls?: string[],
-    replayJson?: string,
     suggested_task?: SuggestedTask,
     selected_branch?: string,
+    conversationInstructions?: string,
   ): Promise<Conversation> {
     const body = {
       repository: selectedRepository,
       git_provider,
       selected_branch,
       initial_user_msg: initialUserMsg,
-      image_urls: imageUrls,
-      replay_json: replayJson,
       suggested_task,
+      conversation_instructions: conversationInstructions,
     };
 
     const { data } = await openHands.post<Conversation>(

frontend/src/api/open-hands.types.ts

@@ -84,7 +84,7 @@ export interface Conversation {
   title: string;
   selected_repository: string | null;
   selected_branch: string | null;
-  git_provider: string | null;
+  git_provider: Provider | null;
   last_updated_at: string;
   created_at: string;
   status: ConversationStatus;

frontend/src/components/features/chat/chat-message.tsx

@@ -12,12 +12,17 @@ import { paragraph } from "../markdown/paragraph";
 interface ChatMessageProps {
   type: OpenHandsSourceType;
   message: string;
+  actions?: Array<{
+    icon: React.ReactNode;
+    onClick: () => void;
+  }>;
 }
 
 export function ChatMessage({
   type,
   message,
   children,
+  actions,
 }: React.PropsWithChildren<ChatMessageProps>) {
   const [isHovering, setIsHovering] = React.useState(false);
   const [isCopy, setIsCopy] = React.useState(false);
@@ -47,31 +52,54 @@ export function ChatMessage({
       onMouseEnter={() => setIsHovering(true)}
       onMouseLeave={() => setIsHovering(false)}
       className={cn(
-        "rounded-xl relative",
+        "rounded-xl relative w-fit",
         "flex flex-col gap-2",
         type === "user" && " max-w-[305px] p-4 bg-tertiary self-end",
         type === "agent" && "mt-6 max-w-full bg-transparent",
       )}
     >
-      <CopyToClipboardButton
-        isHidden={!isHovering}
-        isDisabled={isCopy}
-        onClick={handleCopyToClipboard}
-        mode={isCopy ? "copied" : "copy"}
-      />
-      <div className="text-sm break-words">
-        <Markdown
-          components={{
-            code,
-            ul,
-            ol,
-            a: anchor,
-            p: paragraph,
-          }}
-          remarkPlugins={[remarkGfm]}
-        >
-          {message}
-        </Markdown>
+      <div
+        className={cn(
+          "absolute -top-2.5 -right-2.5",
+          !isHovering ? "hidden" : "flex",
+          "items-center gap-1",
+        )}
+      >
+        {actions?.map((action, index) => (
+          <button
+            key={index}
+            type="button"
+            onClick={action.onClick}
+            className="button-base p-1 cursor-pointer"
+            aria-label={`Action ${index + 1}`}
+          >
+            {action.icon}
+          </button>
+        ))}
+
+        <CopyToClipboardButton
+          isHidden={!isHovering}
+          isDisabled={isCopy}
+          onClick={handleCopyToClipboard}
+          mode={isCopy ? "copied" : "copy"}
+        />
+      </div>
+
+      <div className="text-sm break-words flex">
+        <div>
+          <Markdown
+            components={{
+              code,
+              ul,
+              ol,
+              a: anchor,
+              p: paragraph,
+            }}
+            remarkPlugins={[remarkGfm]}
+          >
+            {message}
+          </Markdown>
+        </div>
       </div>
       {children}
     </article>

frontend/src/components/features/chat/event-message.tsx

@@ -19,6 +19,8 @@ import { MCPObservationContent } from "./mcp-observation-content";
 import { getObservationResult } from "./event-content-helpers/get-observation-result";
 import { getEventContent } from "./event-content-helpers/get-event-content";
 import { GenericEventMessage } from "./generic-event-message";
+import { MicroagentStatus } from "#/types/microagent-status";
+import { MicroagentStatusIndicator } from "./microagent/microagent-status-indicator";
 import { FileList } from "../files/file-list";
 import { parseMessageFromEvent } from "./event-content-helpers/parse-message-from-event";
 import { LikertScale } from "../feedback/likert-scale";
@@ -35,6 +37,13 @@ interface EventMessageProps {
   hasObservationPair: boolean;
   isAwaitingUserConfirmation: boolean;
   isLastMessage: boolean;
+  microagentStatus?: MicroagentStatus | null;
+  microagentConversationId?: string;
+  microagentPRUrl?: string;
+  actions?: Array<{
+    icon: React.ReactNode;
+    onClick: () => void;
+  }>;
   isInLast10Actions: boolean;
 }
 
@@ -43,6 +52,10 @@ export function EventMessage({
   hasObservationPair,
   isAwaitingUserConfirmation,
   isLastMessage,
+  microagentStatus,
+  microagentConversationId,
+  microagentPRUrl,
+  actions,
   isInLast10Actions,
 }: EventMessageProps) {
   const shouldShowConfirmationButtons =
@@ -82,27 +95,66 @@ export function EventMessage({
 
   if (isErrorObservation(event)) {
     return (
-      <>
+      <div>
         <ErrorMessage
           errorId={event.extras.error_id}
           defaultMessage={event.message}
         />
+        {microagentStatus && actions && (
+          <MicroagentStatusIndicator
+            status={microagentStatus}
+            conversationId={microagentConversationId}
+            prUrl={microagentPRUrl}
+          />
+        )}
         {renderLikertScale()}
-      </>
+      </div>
     );
   }
 
   if (hasObservationPair && isOpenHandsAction(event)) {
     if (hasThoughtProperty(event.args)) {
-      return <ChatMessage type="agent" message={event.args.thought} />;
+      return (
+        <div>
+          <ChatMessage
+            type="agent"
+            message={event.args.thought}
+            actions={actions}
+          />
+          {microagentStatus && actions && (
+            <MicroagentStatusIndicator
+              status={microagentStatus}
+              conversationId={microagentConversationId}
+              prUrl={microagentPRUrl}
+            />
+          )}
+        </div>
+      );
     }
-    return null;
+    return microagentStatus && actions ? (
+      <MicroagentStatusIndicator
+        status={microagentStatus}
+        conversationId={microagentConversationId}
+        prUrl={microagentPRUrl}
+      />
+    ) : null;
   }
 
   if (isFinishAction(event)) {
     return (
       <>
-        <ChatMessage type="agent" message={getEventContent(event).details} />
+        <ChatMessage
+          type="agent"
+          message={getEventContent(event).details}
+          actions={actions}
+        />
+        {microagentStatus && actions && (
+          <MicroagentStatusIndicator
+            status={microagentStatus}
+            conversationId={microagentConversationId}
+            prUrl={microagentPRUrl}
+          />
+        )}
         {renderLikertScale()}
       </>
     );
@@ -112,8 +164,8 @@ export function EventMessage({
     const message = parseMessageFromEvent(event);
 
     return (
-      <>
-        <ChatMessage type={event.source} message={message}>
+      <div className="flex flex-col self-end">
+        <ChatMessage type={event.source} message={message} actions={actions}>
           {event.args.image_urls && event.args.image_urls.length > 0 && (
             <ImageCarousel size="small" images={event.args.image_urls} />
           )}
@@ -122,15 +174,26 @@ export function EventMessage({
           )}
           {shouldShowConfirmationButtons && <ConfirmationButtons />}
         </ChatMessage>
+        {microagentStatus && actions && (
+          <MicroagentStatusIndicator
+            status={microagentStatus}
+            conversationId={microagentConversationId}
+            prUrl={microagentPRUrl}
+          />
+        )}
         {isAssistantMessage(event) &&
           event.action === "message" &&
           renderLikertScale()}
-      </>
+      </div>
     );
   }
 
   if (isRejectObservation(event)) {
-    return <ChatMessage type="agent" message={event.content} />;
+    return (
+      <div>
+        <ChatMessage type="agent" message={event.content} />
+      </div>
+    );
   }
 
   if (isMcpObservation(event)) {

frontend/src/components/features/chat/messages.tsx

@@ -1,10 +1,28 @@
 import React from "react";
+import { createPortal } from "react-dom";
 import { OpenHandsAction } from "#/types/core/actions";
 import { OpenHandsObservation } from "#/types/core/observations";
-import { isOpenHandsAction, isOpenHandsObservation } from "#/types/core/guards";
+import {
+  isOpenHandsAction,
+  isOpenHandsObservation,
+  isOpenHandsEvent,
+  isAgentStateChangeObservation,
+  isFinishAction,
+} from "#/types/core/guards";
 import { EventMessage } from "./event-message";
 import { ChatMessage } from "./chat-message";
 import { useOptimisticUserMessage } from "#/hooks/use-optimistic-user-message";
+import { LaunchMicroagentModal } from "./microagent/launch-microagent-modal";
+import { useUserConversation } from "#/hooks/query/use-user-conversation";
+import { useConversationId } from "#/hooks/use-conversation-id";
+import { useCreateConversationAndSubscribeMultiple } from "#/hooks/use-create-conversation-and-subscribe-multiple";
+import {
+  MicroagentStatus,
+  EventMicroagentStatus,
+} from "#/types/microagent-status";
+import { AgentState } from "#/types/agent-state";
+import { getFirstPRUrl } from "#/utils/parse-pr-url";
+import MemoryIcon from "#/icons/memory_icon.svg?react";
 
 interface MessagesProps {
   messages: (OpenHandsAction | OpenHandsObservation)[];
@@ -13,10 +31,23 @@ interface MessagesProps {
 
 export const Messages: React.FC<MessagesProps> = React.memo(
   ({ messages, isAwaitingUserConfirmation }) => {
+    const { createConversationAndSubscribe, isPending } =
+      useCreateConversationAndSubscribeMultiple();
     const { getOptimisticUserMessage } = useOptimisticUserMessage();
+    const { conversationId } = useConversationId();
+    const { data: conversation } = useUserConversation(conversationId);
 
     const optimisticUserMessage = getOptimisticUserMessage();
 
+    const [selectedEventId, setSelectedEventId] = React.useState<number | null>(
+      null,
+    );
+    const [showLaunchMicroagentModal, setShowLaunchMicroagentModal] =
+      React.useState(false);
+    const [microagentStatuses, setMicroagentStatuses] = React.useState<
+      EventMicroagentStatus[]
+    >([]);
+
     const actionHasObservationPair = React.useCallback(
       (event: OpenHandsAction | OpenHandsObservation): boolean => {
         if (isOpenHandsAction(event)) {
@@ -30,6 +61,139 @@ export const Messages: React.FC<MessagesProps> = React.memo(
       [messages],
     );
 
+    const getMicroagentStatusForEvent = React.useCallback(
+      (eventId: number): MicroagentStatus | null => {
+        const statusEntry = microagentStatuses.find(
+          (entry) => entry.eventId === eventId,
+        );
+        return statusEntry?.status || null;
+      },
+      [microagentStatuses],
+    );
+
+    const getMicroagentConversationIdForEvent = React.useCallback(
+      (eventId: number): string | undefined => {
+        const statusEntry = microagentStatuses.find(
+          (entry) => entry.eventId === eventId,
+        );
+        return statusEntry?.conversationId || undefined;
+      },
+      [microagentStatuses],
+    );
+
+    const getMicroagentPRUrlForEvent = React.useCallback(
+      (eventId: number): string | undefined => {
+        const statusEntry = microagentStatuses.find(
+          (entry) => entry.eventId === eventId,
+        );
+        return statusEntry?.prUrl || undefined;
+      },
+      [microagentStatuses],
+    );
+
+    const handleMicroagentEvent = React.useCallback(
+      (socketEvent: unknown, microagentConversationId: string) => {
+        // Handle error events
+        const isErrorEvent = (
+          evt: unknown,
+        ): evt is { error: true; message: string } =>
+          typeof evt === "object" &&
+          evt !== null &&
+          "error" in evt &&
+          evt.error === true;
+
+        const isAgentStatusError = (evt: unknown): boolean =>
+          isOpenHandsEvent(evt) &&
+          isAgentStateChangeObservation(evt) &&
+          evt.extras.agent_state === AgentState.ERROR;
+
+        if (isErrorEvent(socketEvent) || isAgentStatusError(socketEvent)) {
+          setMicroagentStatuses((prev) =>
+            prev.map((statusEntry) =>
+              statusEntry.conversationId === microagentConversationId
+                ? { ...statusEntry, status: MicroagentStatus.ERROR }
+                : statusEntry,
+            ),
+          );
+        } else if (
+          isOpenHandsEvent(socketEvent) &&
+          isAgentStateChangeObservation(socketEvent)
+        ) {
+          if (socketEvent.extras.agent_state === AgentState.FINISHED) {
+            setMicroagentStatuses((prev) =>
+              prev.map((statusEntry) =>
+                statusEntry.conversationId === microagentConversationId
+                  ? { ...statusEntry, status: MicroagentStatus.COMPLETED }
+                  : statusEntry,
+              ),
+            );
+          }
+        } else if (
+          isOpenHandsEvent(socketEvent) &&
+          isFinishAction(socketEvent)
+        ) {
+          // Check if the finish action contains a PR URL
+          const prUrl = getFirstPRUrl(socketEvent.args.final_thought || "");
+          if (prUrl) {
+            setMicroagentStatuses((prev) =>
+              prev.map((statusEntry) =>
+                statusEntry.conversationId === microagentConversationId
+                  ? {
+                      ...statusEntry,
+                      status: MicroagentStatus.COMPLETED,
+                      prUrl,
+                    }
+                  : statusEntry,
+              ),
+            );
+          }
+        }
+      },
+      [setMicroagentStatuses],
+    );
+
+    const handleLaunchMicroagent = (
+      query: string,
+      target: string,
+      triggers: string[],
+    ) => {
+      const conversationInstructions = `Target file: ${target}\n\nDescription: ${query}\n\nTriggers: ${triggers.join(", ")}`;
+      if (
+        !conversation ||
+        !conversation.selected_repository ||
+        !conversation.selected_branch ||
+        !conversation.git_provider ||
+        !selectedEventId
+      ) {
+        return;
+      }
+
+      createConversationAndSubscribe({
+        query,
+        conversationInstructions,
+        repository: {
+          name: conversation.selected_repository,
+          branch: conversation.selected_branch,
+          gitProvider: conversation.git_provider,
+        },
+        onSuccessCallback: (newConversationId: string) => {
+          setShowLaunchMicroagentModal(false);
+          // Update status with conversation ID
+          setMicroagentStatuses((prev) => [
+            ...prev.filter((status) => status.eventId !== selectedEventId),
+            {
+              eventId: selectedEventId,
+              conversationId: newConversationId,
+              status: MicroagentStatus.CREATING,
+            },
+          ]);
+        },
+        onEventCallback: (socketEvent: unknown, newConversationId: string) => {
+          handleMicroagentEvent(socketEvent, newConversationId);
+        },
+      });
+    };
+
     return (
       <>
         {messages.map((message, index) => (
@@ -39,6 +203,26 @@ export const Messages: React.FC<MessagesProps> = React.memo(
             hasObservationPair={actionHasObservationPair(message)}
             isAwaitingUserConfirmation={isAwaitingUserConfirmation}
             isLastMessage={messages.length - 1 === index}
+            microagentStatus={getMicroagentStatusForEvent(message.id)}
+            microagentConversationId={getMicroagentConversationIdForEvent(
+              message.id,
+            )}
+            microagentPRUrl={getMicroagentPRUrlForEvent(message.id)}
+            actions={
+              conversation?.selected_repository
+                ? [
+                    {
+                      icon: (
+                        <MemoryIcon className="w-[14px] h-[14px] text-white" />
+                      ),
+                      onClick: () => {
+                        setSelectedEventId(message.id);
+                        setShowLaunchMicroagentModal(true);
+                      },
+                    },
+                  ]
+                : undefined
+            }
             isInLast10Actions={messages.length - 1 - index < 10}
           />
         ))}
@@ -46,6 +230,21 @@ export const Messages: React.FC<MessagesProps> = React.memo(
         {optimisticUserMessage && (
           <ChatMessage type="user" message={optimisticUserMessage} />
         )}
+        {conversation?.selected_repository &&
+          showLaunchMicroagentModal &&
+          selectedEventId &&
+          createPortal(
+            <LaunchMicroagentModal
+              onClose={() => setShowLaunchMicroagentModal(false)}
+              onLaunch={handleLaunchMicroagent}
+              selectedRepo={
+                conversation.selected_repository.split("/").pop() || ""
+              }
+              eventId={selectedEventId}
+              isLoading={isPending}
+            />,
+            document.getElementById("modal-portal-exit") || document.body,
+          )}
       </>
     );
   },

frontend/src/components/features/chat/microagent/launch-microagent-modal.tsx

@@ -0,0 +1,163 @@
+import React from "react";
+import { FaCircleInfo } from "react-icons/fa6";
+import { useTranslation } from "react-i18next";
+import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
+import { ModalBody } from "#/components/shared/modals/modal-body";
+import { BrandButton } from "../../settings/brand-button";
+import { SettingsDropdownInput } from "../../settings/settings-dropdown-input";
+import { BadgeInput } from "#/components/shared/inputs/badge-input";
+import { cn } from "#/utils/utils";
+import CloseIcon from "#/icons/close.svg?react";
+import { useMicroagentPrompt } from "#/hooks/query/use-microagent-prompt";
+import { useHandleRuntimeActive } from "#/hooks/use-handle-runtime-active";
+import { LoadingMicroagentBody } from "./loading-microagent-body";
+import { LoadingMicroagentTextarea } from "./loading-microagent-textarea";
+import { useGetMicroagents } from "#/hooks/query/use-get-microagents";
+
+interface LaunchMicroagentModalProps {
+  onClose: () => void;
+  onLaunch: (query: string, target: string, triggers: string[]) => void;
+  eventId: number;
+  isLoading: boolean;
+  selectedRepo: string;
+}
+
+export function LaunchMicroagentModal({
+  onClose,
+  onLaunch,
+  eventId,
+  isLoading,
+  selectedRepo,
+}: LaunchMicroagentModalProps) {
+  const { t } = useTranslation();
+  const { runtimeActive } = useHandleRuntimeActive();
+  const { data: prompt, isLoading: promptIsLoading } =
+    useMicroagentPrompt(eventId);
+
+  const { data: microagents, isLoading: microagentsIsLoading } =
+    useGetMicroagents(`${selectedRepo}/.openhands/microagents`);
+
+  const [triggers, setTriggers] = React.useState<string[]>([]);
+
+  const formAction = (formData: FormData) => {
+    const query = formData.get("query-input")?.toString();
+    const target = formData.get("target-input")?.toString();
+
+    if (query && target) {
+      onLaunch(query, target, triggers);
+    }
+  };
+
+  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    formAction(formData);
+  };
+
+  return (
+    <ModalBackdrop onClose={onClose}>
+      {!runtimeActive && <LoadingMicroagentBody />}
+      {runtimeActive && (
+        <ModalBody className="items-start w-[728px]">
+          <div className="flex items-center justify-between w-full">
+            <h2 className="font-bold text-[20px] leading-6 -tracking-[0.01em] flex items-center gap-2">
+              {t("MICROAGENT$ADD_TO_MICROAGENT")}
+              <a
+                href="https://docs.all-hands.dev/usage/prompting/microagents-overview#microagents-overview"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <FaCircleInfo className="text-primary" />
+              </a>
+            </h2>
+
+            <button type="button" onClick={onClose}>
+              <CloseIcon />
+            </button>
+          </div>
+
+          <form
+            data-testid="launch-microagent-modal"
+            onSubmit={onSubmit}
+            className="flex flex-col gap-6 w-full"
+          >
+            <label
+              htmlFor="query-input"
+              className="flex flex-col gap-2.5 w-full text-sm"
+            >
+              {t("MICROAGENT$WHAT_TO_REMEMBER")}
+              {promptIsLoading && <LoadingMicroagentTextarea />}
+              {!promptIsLoading && (
+                <textarea
+                  required
+                  data-testid="query-input"
+                  name="query-input"
+                  defaultValue={prompt}
+                  placeholder={t("MICROAGENT$DESCRIBE_WHAT_TO_ADD")}
+                  rows={6}
+                  className={cn(
+                    "bg-tertiary border border-[#717888] w-full rounded p-2 placeholder:italic placeholder:text-tertiary-alt resize-none",
+                    "disabled:bg-[#2D2F36] disabled:border-[#2D2F36] disabled:cursor-not-allowed",
+                  )}
+                />
+              )}
+            </label>
+
+            <SettingsDropdownInput
+              testId="target-input"
+              name="target-input"
+              label={t("MICROAGENT$WHERE_TO_PUT")}
+              placeholder={t("MICROAGENT$SELECT_FILE_OR_CUSTOM")}
+              required
+              allowsCustomValue
+              isLoading={microagentsIsLoading}
+              items={
+                microagents?.map((item) => ({
+                  key: item,
+                  label: item,
+                })) || []
+              }
+            />
+
+            <label
+              htmlFor="trigger-input"
+              className="flex flex-col gap-2.5 w-full text-sm"
+            >
+              <div className="flex items-center gap-2">
+                {t("MICROAGENT$ADD_TRIGGERS")}
+                <a
+                  href="https://docs.all-hands.dev/usage/prompting/microagents-keyword"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <FaCircleInfo className="text-primary" />
+                </a>
+              </div>
+              <BadgeInput
+                name="trigger-input"
+                value={triggers}
+                placeholder={t("MICROAGENT$TYPE_TRIGGER_SPACE")}
+                onChange={setTriggers}
+              />
+            </label>
+
+            <div className="flex items-center justify-end gap-2">
+              <BrandButton type="button" variant="secondary" onClick={onClose}>
+                {t("MICROAGENT$CANCEL")}
+              </BrandButton>
+              <BrandButton
+                type="submit"
+                variant="primary"
+                isDisabled={
+                  isLoading || promptIsLoading || microagentsIsLoading
+                }
+              >
+                {t("MICROAGENT$LAUNCH")}
+              </BrandButton>
+            </div>
+          </form>
+        </ModalBody>
+      )}
+    </ModalBackdrop>
+  );
+}

frontend/src/components/features/chat/microagent/loading-microagent-body.tsx

@@ -0,0 +1,16 @@
+import { Spinner } from "@heroui/react";
+import { useTranslation } from "react-i18next";
+import { ModalBody } from "#/components/shared/modals/modal-body";
+
+export function LoadingMicroagentBody() {
+  const { t } = useTranslation();
+  return (
+    <ModalBody>
+      <h2 className="font-bold text-[20px] leading-6 -tracking-[0.01em] flex items-center gap-2">
+        {t("MICROAGENT$ADD_TO_MICROAGENT")}
+      </h2>
+      <Spinner size="lg" />
+      <p>{t("MICROAGENT$WAIT_FOR_RUNTIME")}</p>
+    </ModalBody>
+  );
+}

frontend/src/components/features/chat/microagent/loading-microagent-textarea.tsx

@@ -0,0 +1,20 @@
+import { useTranslation } from "react-i18next";
+import { cn } from "#/utils/utils";
+
+export function LoadingMicroagentTextarea() {
+  const { t } = useTranslation();
+
+  return (
+    <textarea
+      required
+      disabled
+      defaultValue=""
+      placeholder={t("MICROAGENT$LOADING_PROMPT")}
+      rows={6}
+      className={cn(
+        "bg-tertiary border border-[#717888] w-full rounded p-2 placeholder:italic placeholder:text-tertiary-alt resize-none",
+        "disabled:bg-[#2D2F36] disabled:border-[#2D2F36] disabled:cursor-not-allowed",
+      )}
+    />
+  );
+}

frontend/src/components/features/chat/microagent/microagent-status-indicator.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Spinner } from "@heroui/react";
+import { MicroagentStatus } from "#/types/microagent-status";
+import { SuccessIndicator } from "../success-indicator";
+
+interface MicroagentStatusIndicatorProps {
+  status: MicroagentStatus;
+  conversationId?: string;
+  prUrl?: string;
+}
+
+export function MicroagentStatusIndicator({
+  status,
+  conversationId,
+  prUrl,
+}: MicroagentStatusIndicatorProps) {
+  const { t } = useTranslation();
+
+  const getStatusText = () => {
+    switch (status) {
+      case MicroagentStatus.CREATING:
+        return t("MICROAGENT$STATUS_CREATING");
+      case MicroagentStatus.COMPLETED:
+        // If there's a PR URL, show "View your PR" instead of the default completed message
+        return prUrl
+          ? t("MICROAGENT$VIEW_YOUR_PR")
+          : t("MICROAGENT$STATUS_COMPLETED");
+      case MicroagentStatus.ERROR:
+        return t("MICROAGENT$STATUS_ERROR");
+      default:
+        return "";
+    }
+  };
+
+  const getStatusIcon = () => {
+    switch (status) {
+      case MicroagentStatus.CREATING:
+        return <Spinner size="sm" />;
+      case MicroagentStatus.COMPLETED:
+        return <SuccessIndicator status="success" />;
+      case MicroagentStatus.ERROR:
+        return <SuccessIndicator status="error" />;
+      default:
+        return null;
+    }
+  };
+
+  const statusText = getStatusText();
+  const shouldShowAsLink = !!conversationId;
+  const shouldShowPRLink = !!prUrl;
+
+  const renderStatusText = () => {
+    if (shouldShowPRLink) {
+      return (
+        <a
+          href={prUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="underline"
+        >
+          {statusText}
+        </a>
+      );
+    }
+
+    if (shouldShowAsLink) {
+      return (
+        <a
+          href={`/conversations/${conversationId}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="underline"
+        >
+          {statusText}
+        </a>
+      );
+    }
+
+    return <span className="underline">{statusText}</span>;
+  };
+
+  return (
+    <div className="flex items-center gap-2 mt-2 p-2 text-sm">
+      {getStatusIcon()}
+      {renderStatusText()}
+    </div>
+  );
+}

frontend/src/components/features/chat/microagent/microagent-status-toast.tsx

@@ -0,0 +1,138 @@
+import toast from "react-hot-toast";
+import { Spinner } from "@heroui/react";
+import { useTranslation } from "react-i18next";
+import { TOAST_OPTIONS } from "#/utils/custom-toast-handlers";
+import CloseIcon from "#/icons/close.svg?react";
+import { SuccessIndicator } from "../success-indicator";
+
+interface ConversationCreatedToastProps {
+  conversationId: string;
+  onClose: () => void;
+}
+
+function ConversationCreatedToast({
+  conversationId,
+  onClose,
+}: ConversationCreatedToastProps) {
+  const { t } = useTranslation();
+  return (
+    <div className="flex items-start gap-2">
+      <Spinner size="sm" />
+      <div>
+        {t("MICROAGENT$ADDING_CONTEXT")}
+        <br />
+        <a
+          href={`/conversations/${conversationId}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="underline"
+        >
+          {t("MICROAGENT$VIEW_CONVERSATION")}
+        </a>
+      </div>
+      <button type="button" onClick={onClose}>
+        <CloseIcon />
+      </button>
+    </div>
+  );
+}
+
+interface ConversationFinishedToastProps {
+  conversationId: string;
+  onClose: () => void;
+}
+
+function ConversationFinishedToast({
+  conversationId,
+  onClose,
+}: ConversationFinishedToastProps) {
+  const { t } = useTranslation();
+  return (
+    <div className="flex items-start gap-2">
+      <SuccessIndicator status="success" />
+      <div>
+        {t("MICROAGENT$SUCCESS_PR_READY")}
+        <br />
+        <a
+          href={`/conversations/${conversationId}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="underline"
+        >
+          {t("MICROAGENT$VIEW_CONVERSATION")}
+        </a>
+      </div>
+      <button type="button" onClick={onClose}>
+        <CloseIcon />
+      </button>
+    </div>
+  );
+}
+
+interface ConversationErroredToastProps {
+  errorMessage: string;
+  onClose: () => void;
+}
+
+function ConversationErroredToast({
+  errorMessage,
+  onClose,
+}: ConversationErroredToastProps) {
+  return (
+    <div className="flex items-start gap-2">
+      <SuccessIndicator status="error" />
+      <div>{errorMessage}</div>
+      <button type="button" onClick={onClose}>
+        <CloseIcon />
+      </button>
+    </div>
+  );
+}
+
+export const renderConversationCreatedToast = (conversationId: string) =>
+  toast(
+    (t) => (
+      <ConversationCreatedToast
+        conversationId={conversationId}
+        onClose={() => toast.dismiss(t.id)}
+      />
+    ),
+    {
+      ...TOAST_OPTIONS,
+      id: `status-${conversationId}`,
+      duration: 5000,
+    },
+  );
+
+export const renderConversationFinishedToast = (conversationId: string) =>
+  toast(
+    (t) => (
+      <ConversationFinishedToast
+        conversationId={conversationId}
+        onClose={() => toast.dismiss(t.id)}
+      />
+    ),
+    {
+      ...TOAST_OPTIONS,
+      id: `status-${conversationId}`,
+      duration: 5000,
+    },
+  );
+
+export const renderConversationErroredToast = (
+  conversationId: string,
+  errorMessage: string,
+) =>
+  toast(
+    (t) => (
+      <ConversationErroredToast
+        errorMessage={errorMessage}
+        onClose={() => toast.dismiss(t.id)}
+      />
+    ),
+    {
+      ...TOAST_OPTIONS,
+      id: `status-${conversationId}`,
+      duration: 5000,
+    },
+  );

frontend/src/components/features/conversation-panel/budget-usage-text.tsx

@@ -17,8 +17,12 @@ export function BudgetUsageText({
   return (
     <div className="flex justify-end">
       <span className="text-xs text-neutral-400">
-        ${currentCost.toFixed(4)} / ${maxBudget.toFixed(4)} (
-        {usagePercentage.toFixed(2)}% {t(I18nKey.CONVERSATION$USED)})
+        {t(I18nKey.CONVERSATION$BUDGET_USAGE_FORMAT, {
+          currentCost: `$${currentCost.toFixed(4)}`,
+          maxBudget: `$${maxBudget.toFixed(4)}`,
+          usagePercentage: usagePercentage.toFixed(2),
+          used: t(I18nKey.CONVERSATION$USED),
+        })}
       </span>
     </div>
   );

frontend/src/components/features/conversation-panel/conversation-card.tsx

@@ -330,11 +330,15 @@ export function ConversationCard({
                     </div>
 
                     <div className="grid grid-cols-2 gap-2 pl-4 text-sm">
-                      <span className="text-neutral-400">Cache Hit:</span>
+                      <span className="text-neutral-400">
+                        {t(I18nKey.CONVERSATION$CACHE_HIT)}
+                      </span>
                       <span className="text-right">
                         {metrics.usage.cache_read_tokens.toLocaleString()}
                       </span>
-                      <span className="text-neutral-400">Cache Write:</span>
+                      <span className="text-neutral-400">
+                        {t(I18nKey.CONVERSATION$CACHE_WRITE)}
+                      </span>
                       <span className="text-right">
                         {metrics.usage.cache_write_tokens.toLocaleString()}
                       </span>
@@ -409,10 +413,7 @@ export function ConversationCard({
       />
 
       {microagentsModalVisible && (
-        <MicroagentsModal
-          onClose={() => setMicroagentsModalVisible(false)}
-          conversationId={conversationId}
-        />
+        <MicroagentsModal onClose={() => setMicroagentsModalVisible(false)} />
       )}
     </>
   );

frontend/src/components/features/conversation-panel/microagents-modal.tsx

@@ -13,13 +13,9 @@ import { BrandButton } from "../settings/brand-button";
 
 interface MicroagentsModalProps {
   onClose: () => void;
-  conversationId: string | undefined;
 }
 
-export function MicroagentsModal({
-  onClose,
-  conversationId,
-}: MicroagentsModalProps) {
+export function MicroagentsModal({ onClose }: MicroagentsModalProps) {
   const { t } = useTranslation();
   const { curAgentState } = useSelector((state: RootState) => state.agent);
   const [expandedAgents, setExpandedAgents] = useState<Record<string, boolean>>(
@@ -31,11 +27,7 @@ export function MicroagentsModal({
     isError,
     refetch,
     isRefetching,
-  } = useConversationMicroagents({
-    agentState: curAgentState,
-    conversationId,
-    enabled: true,
-  });
+  } = useConversationMicroagents();
 
   const toggleAgent = (agentName: string) => {
     setExpandedAgents((prev) => ({

frontend/src/components/features/feedback/likert-scale.tsx

@@ -207,7 +207,7 @@ export function LikertScale({
               className={cn("text-xl transition-all", getButtonClass(rating))}
               aria-label={`Rate ${rating} stars`}
             >
-              ★
+              {t(I18nKey.FEEDBACK$STAR_RATING)}
             </button>
           ))}
           {/* Show selected reason inline with stars when submitted (only for ratings <= 3) */}

frontend/src/components/features/home/home-header.tsx

@@ -1,10 +1,12 @@
 import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router";
 import { useCreateConversation } from "#/hooks/mutation/use-create-conversation";
 import { useIsCreatingConversation } from "#/hooks/use-is-creating-conversation";
 import { BrandButton } from "../settings/brand-button";
 import AllHandsLogo from "#/assets/branding/all-hands-logo-spark.svg?react";
 
 export function HomeHeader() {
+  const navigate = useNavigate();
   const {
     mutate: createConversation,
     isPending,
@@ -28,7 +30,15 @@ export function HomeHeader() {
           testId="header-launch-button"
           variant="primary"
           type="button"
-          onClick={() => createConversation({})}
+          onClick={() =>
+            createConversation(
+              {},
+              {
+                onSuccess: (data) =>
+                  navigate(`/conversations/${data.conversation_id}`),
+              },
+            )
+          }
           isDisabled={isCreatingConversation}
         >
           {!isCreatingConversation && t("HOME$LAUNCH_FROM_SCRATCH")}

frontend/src/components/features/home/repo-connector.tsx

@@ -4,9 +4,10 @@ import { RepositorySelectionForm } from "./repo-selection-form";
 import { useConfig } from "#/hooks/query/use-config";
 import { RepoProviderLinks } from "./repo-provider-links";
 import { useUserProviders } from "#/hooks/use-user-providers";
+import { GitRepository } from "#/types/git";
 
 interface RepoConnectorProps {
-  onRepoSelection: (repoTitle: string | null) => void;
+  onRepoSelection: (repo: GitRepository | null) => void;
 }
 
 export function RepoConnector({ onRepoSelection }: RepoConnectorProps) {

frontend/src/components/features/home/repo-selection-form.test.tsx

@@ -1,151 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, test, expect, vi, beforeEach } from "vitest";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { RepositorySelectionForm } from "./repo-selection-form";
-
-// Create mock functions
-const mockUseUserRepositories = vi.fn();
-const mockUseRepositoryBranches = vi.fn();
-const mockUseCreateConversation = vi.fn();
-const mockUseIsCreatingConversation = vi.fn();
-const mockUseTranslation = vi.fn();
-const mockUseAuth = vi.fn();
-
-// Setup default mock returns
-mockUseUserRepositories.mockReturnValue({
-  data: [],
-  isLoading: false,
-  isError: false,
-});
-
-mockUseRepositoryBranches.mockReturnValue({
-  data: [],
-  isLoading: false,
-  isError: false,
-});
-
-mockUseCreateConversation.mockReturnValue({
-  mutate: vi.fn(),
-  isPending: false,
-  isSuccess: false,
-});
-
-mockUseIsCreatingConversation.mockReturnValue(false);
-
-mockUseTranslation.mockReturnValue({ t: (key: string) => key });
-
-mockUseAuth.mockReturnValue({
-  isAuthenticated: true,
-  isLoading: false,
-  providersAreSet: true,
-  user: {
-    id: 1,
-    login: "testuser",
-    avatar_url: "https://example.com/avatar.png",
-    name: "Test User",
-    email: "test@example.com",
-    company: "Test Company",
-  },
-  login: vi.fn(),
-  logout: vi.fn(),
-});
-
-// Mock the modules
-vi.mock("#/hooks/query/use-user-repositories", () => ({
-  useUserRepositories: () => mockUseUserRepositories(),
-}));
-
-vi.mock("#/hooks/query/use-repository-branches", () => ({
-  useRepositoryBranches: () => mockUseRepositoryBranches(),
-}));
-
-vi.mock("#/hooks/mutation/use-create-conversation", () => ({
-  useCreateConversation: () => mockUseCreateConversation(),
-}));
-
-vi.mock("#/hooks/use-is-creating-conversation", () => ({
-  useIsCreatingConversation: () => mockUseIsCreatingConversation(),
-}));
-
-vi.mock("react-i18next", () => ({
-  useTranslation: () => mockUseTranslation(),
-}));
-
-vi.mock("#/context/auth-context", () => ({
-  useAuth: () => mockUseAuth(),
-}));
-
-const renderRepositorySelectionForm = () =>
-  render(<RepositorySelectionForm onRepoSelection={vi.fn()} />, {
-    wrapper: ({ children }) => (
-      <QueryClientProvider client={new QueryClient()}>
-        {children}
-      </QueryClientProvider>
-    ),
-  });
-
-describe("RepositorySelectionForm", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  test("shows loading indicator when repositories are being fetched", () => {
-    // Setup loading state
-    mockUseUserRepositories.mockReturnValue({
-      data: undefined,
-      isLoading: true,
-      isError: false,
-    });
-
-    renderRepositorySelectionForm();
-
-    // Check if loading indicator is displayed
-    expect(screen.getByTestId("repo-dropdown-loading")).toBeInTheDocument();
-    expect(screen.getByText("HOME$LOADING_REPOSITORIES")).toBeInTheDocument();
-  });
-
-  test("shows dropdown when repositories are loaded", () => {
-    // Setup loaded repositories
-    mockUseUserRepositories.mockReturnValue({
-      data: [
-        {
-          id: 1,
-          full_name: "user/repo1",
-          git_provider: "github",
-          is_public: true,
-        },
-        {
-          id: 2,
-          full_name: "user/repo2",
-          git_provider: "github",
-          is_public: true,
-        },
-      ],
-      isLoading: false,
-      isError: false,
-    });
-
-    renderRepositorySelectionForm();
-
-    // Check if dropdown is displayed
-    expect(screen.getByTestId("repo-dropdown")).toBeInTheDocument();
-  });
-
-  test("shows error message when repository fetch fails", () => {
-    // Setup error state
-    mockUseUserRepositories.mockReturnValue({
-      data: undefined,
-      isLoading: false,
-      isError: true,
-      error: new Error("Failed to fetch repositories"),
-    });
-
-    renderRepositorySelectionForm();
-
-    // Check if error message is displayed
-    expect(screen.getByTestId("repo-dropdown-error")).toBeInTheDocument();
-    expect(
-      screen.getByText("HOME$FAILED_TO_LOAD_REPOSITORIES"),
-    ).toBeInTheDocument();
-  });
-});

frontend/src/components/features/home/repo-selection-form.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router";
 import { useCreateConversation } from "#/hooks/mutation/use-create-conversation";
 import { useUserRepositories } from "#/hooks/query/use-user-repositories";
 import { useRepositoryBranches } from "#/hooks/query/use-repository-branches";
@@ -19,12 +20,13 @@ import {
 } from "./repository-selection";
 
 interface RepositorySelectionFormProps {
-  onRepoSelection: (repoTitle: string | null) => void;
+  onRepoSelection: (repo: GitRepository | null) => void;
 }
 
 export function RepositorySelectionForm({
   onRepoSelection,
 }: RepositorySelectionFormProps) {
+  const navigate = useNavigate();
   const [selectedRepository, setSelectedRepository] =
     React.useState<GitRepository | null>(null);
   const [selectedBranch, setSelectedBranch] = React.useState<Branch | null>(
@@ -94,8 +96,7 @@ export function RepositorySelectionForm({
 
   const handleRepoSelection = (key: React.Key | null) => {
     const selectedRepo = allRepositories?.find((repo) => repo.id === key);
-
-    if (selectedRepo) onRepoSelection(selectedRepo.full_name);
+    if (selectedRepo) onRepoSelection(selectedRepo);
     setSelectedRepository(selectedRepo || null);
     setSelectedBranch(null); // Reset branch selection when repo changes
     branchManuallyClearedRef.current = false; // Reset the flag when repo changes
@@ -209,10 +210,19 @@ export function RepositorySelectionForm({
           isRepositoriesError
         }
         onClick={() =>
-          createConversation({
-            selectedRepository,
-            selected_branch: selectedBranch?.name,
-          })
+          createConversation(
+            {
+              repository: {
+                name: selectedRepository?.full_name || "",
+                gitProvider: selectedRepository?.git_provider || "github",
+                branch: selectedBranch?.name || "main",
+              },
+            },
+            {
+              onSuccess: (data) =>
+                navigate(`/conversations/${data.conversation_id}`),
+            },
+          )
         }
       >
         {!isCreatingConversation && "Launch"}

frontend/src/components/features/home/tasks/task-card.tsx

@@ -3,9 +3,7 @@ import { SuggestedTask } from "./task.types";
 import { useIsCreatingConversation } from "#/hooks/use-is-creating-conversation";
 import { useCreateConversation } from "#/hooks/mutation/use-create-conversation";
 import { cn } from "#/utils/utils";
-import { useUserRepositories } from "#/hooks/query/use-user-repositories";
 import { TaskIssueNumber } from "./task-issue-number";
-import { Provider } from "#/types/settings";
 import { useOptimisticUserMessage } from "#/hooks/use-optimistic-user-message";
 
 const getTaskTypeMap = (
@@ -23,28 +21,19 @@ interface TaskCardProps {
 
 export function TaskCard({ task }: TaskCardProps) {
   const { setOptimisticUserMessage } = useOptimisticUserMessage();
-  const { data: repositories } = useUserRepositories();
   const { mutate: createConversation, isPending } = useCreateConversation();
   const isCreatingConversation = useIsCreatingConversation();
   const { t } = useTranslation();
 
-  const getRepo = (repo: string, git_provider: Provider) => {
-    const selectedRepo = repositories?.find(
-      (repository) =>
-        repository.full_name === repo &&
-        repository.git_provider === git_provider,
-    );
-
-    return selectedRepo;
-  };
-
   const handleLaunchConversation = () => {
-    const repo = getRepo(task.repo, task.git_provider);
     setOptimisticUserMessage(t("TASK$ADDRESSING_TASK"));
 
     return createConversation({
-      selectedRepository: repo,
-      suggested_task: task,
+      repository: {
+        name: task.repo,
+        gitProvider: task.git_provider,
+      },
+      suggestedTask: task,
     });
   };
 
@@ -64,7 +53,7 @@ export function TaskCard({ task }: TaskCardProps) {
   }
 
   return (
-    <li className="py-3 border-b border-[#717888] flex items-center pr-6">
+    <li className="py-3 border-b border-[#717888] flex items-center pr-6 last:border-b-0">
       <TaskIssueNumber issueNumber={task.issue_number} href={href} />
 
       <div className="w-full pl-8">

frontend/src/components/features/home/tasks/task-group.tsx

@@ -1,3 +1,4 @@
+import { FaBitbucket, FaGithub, FaGitlab } from "react-icons/fa6";
 import { TaskCard } from "./task-card";
 import { TaskItemTitle } from "./task-item-title";
 import { SuggestedTask } from "./task.types";
@@ -8,9 +9,16 @@ interface TaskGroupProps {
 }
 
 export function TaskGroup({ title, tasks }: TaskGroupProps) {
+  const gitProvider = tasks.length > 0 ? tasks[0].git_provider : null;
+
   return (
     <div className="text-content-2">
-      <TaskItemTitle>{title}</TaskItemTitle>
+      <div className="flex items-center gap-2 border-b-1 border-[#717888]">
+        {gitProvider === "github" && <FaGithub size={14} />}
+        {gitProvider === "gitlab" && <FaGitlab />}
+        {gitProvider === "bitbucket" && <FaBitbucket />}
+        <TaskItemTitle>{title}</TaskItemTitle>
+      </div>
 
       <ul className="text-sm">
         {tasks.map((task) => (

frontend/src/components/features/home/tasks/task-item-title.tsx

@@ -1,6 +1,6 @@
 export function TaskItemTitle({ children: title }: React.PropsWithChildren) {
   return (
-    <div className="py-3 border-b-1 border-[#717888]">
+    <div className="py-3">
       <h3 className="text-[16px] leading-6 font-[500]">{title}</h3>
     </div>
   );

frontend/src/components/features/home/tasks/task-suggestions.tsx

@@ -6,16 +6,24 @@ import { TaskSuggestionsSkeleton } from "./task-suggestions-skeleton";
 import { cn } from "#/utils/utils";
 import { I18nKey } from "#/i18n/declaration";
 import { TooltipButton } from "#/components/shared/buttons/tooltip-button";
+import { GitRepository } from "#/types/git";
 
 interface TaskSuggestionsProps {
-  filterFor?: string | null;
+  filterFor?: GitRepository | null;
 }
 
 export function TaskSuggestions({ filterFor }: TaskSuggestionsProps) {
   const { t } = useTranslation();
   const { data: tasks, isLoading } = useSuggestedTasks();
+
   const suggestedTasks = filterFor
-    ? tasks?.filter((task) => task.title === filterFor)
+    ? tasks?.filter(
+        (element) =>
+          element.title === filterFor.full_name &&
+          !!element.tasks.find(
+            (task) => task.git_provider === filterFor.git_provider,
+          ),
+      )
     : tasks;
 
   const hasSuggestedTasks = suggestedTasks && suggestedTasks.length > 0;

frontend/src/components/features/jupyter/jupyter.tsx

@@ -1,9 +1,11 @@
 import React from "react";
 import { useSelector } from "react-redux";
+import { useTranslation } from "react-i18next";
 import { RootState } from "#/store";
 import { useScrollToBottom } from "#/hooks/use-scroll-to-bottom";
 import { JupyterCell } from "./jupyter-cell";
 import { ScrollToBottomButton } from "#/components/shared/buttons/scroll-to-bottom-button";
+import { RUNTIME_INACTIVE_STATES } from "#/types/agent-state";
 
 interface JupyterEditorProps {
   maxWidth: number;
@@ -11,28 +13,43 @@ interface JupyterEditorProps {
 
 export function JupyterEditor({ maxWidth }: JupyterEditorProps) {
   const cells = useSelector((state: RootState) => state.jupyter?.cells ?? []);
+  const { curAgentState } = useSelector((state: RootState) => state.agent);
+
   const jupyterRef = React.useRef<HTMLDivElement>(null);
 
+  const { t } = useTranslation();
+
+  const isRuntimeInactive = RUNTIME_INACTIVE_STATES.includes(curAgentState);
+
   const { hitBottom, scrollDomToBottom, onChatBodyScroll } =
     useScrollToBottom(jupyterRef);
 
   return (
-    <div className="flex-1 h-full flex flex-col" style={{ maxWidth }}>
-      <div
-        data-testid="jupyter-container"
-        className="flex-1 overflow-y-auto fast-smooth-scroll"
-        ref={jupyterRef}
-        onScroll={(e) => onChatBodyScroll(e.currentTarget)}
-      >
-        {cells.map((cell, index) => (
-          <JupyterCell key={index} cell={cell} />
-        ))}
-      </div>
-      {!hitBottom && (
-        <div className="sticky bottom-2 flex items-center justify-center">
-          <ScrollToBottomButton onClick={scrollDomToBottom} />
+    <>
+      {isRuntimeInactive && (
+        <div className="w-full h-full flex items-center text-center justify-center text-2xl text-tertiary-light">
+          {t("DIFF_VIEWER$WAITING_FOR_RUNTIME")}
         </div>
       )}
-    </div>
+      {!isRuntimeInactive && (
+        <div className="flex-1 h-full flex flex-col" style={{ maxWidth }}>
+          <div
+            data-testid="jupyter-container"
+            className="flex-1 overflow-y-auto fast-smooth-scroll"
+            ref={jupyterRef}
+            onScroll={(e) => onChatBodyScroll(e.currentTarget)}
+          >
+            {cells.map((cell, index) => (
+              <JupyterCell key={index} cell={cell} />
+            ))}
+          </div>
+          {!hitBottom && (
+            <div className="sticky bottom-2 flex items-center justify-center">
+              <ScrollToBottomButton onClick={scrollDomToBottom} />
+            </div>
+          )}
+        </div>
+      )}
+    </>
   );
 }

frontend/src/components/features/settings/api-keys-manager.tsx

@@ -4,21 +4,32 @@ import { I18nKey } from "#/i18n/declaration";
 import { BrandButton } from "#/components/features/settings/brand-button";
 import { LoadingSpinner } from "#/components/shared/loading-spinner";
 import { ApiKey, CreateApiKeyResponse } from "#/api/api-keys";
-import { displayErrorToast } from "#/utils/custom-toast-handlers";
+import {
+  displayErrorToast,
+  displaySuccessToast,
+} from "#/utils/custom-toast-handlers";
 import { CreateApiKeyModal } from "./create-api-key-modal";
 import { DeleteApiKeyModal } from "./delete-api-key-modal";
 import { NewApiKeyModal } from "./new-api-key-modal";
 import { useApiKeys } from "#/hooks/query/use-api-keys";
+import {
+  useLlmApiKey,
+  useRefreshLlmApiKey,
+} from "#/hooks/query/use-llm-api-key";
 
 export function ApiKeysManager() {
   const { t } = useTranslation();
   const { data: apiKeys = [], isLoading, error } = useApiKeys();
+  const { data: llmApiKey, isLoading: isLoadingLlmKey } = useLlmApiKey();
+  const refreshLlmApiKey = useRefreshLlmApiKey();
   const [createModalOpen, setCreateModalOpen] = useState(false);
   const [deleteModalOpen, setDeleteModalOpen] = useState(false);
   const [keyToDelete, setKeyToDelete] = useState<ApiKey | null>(null);
   const [newlyCreatedKey, setNewlyCreatedKey] =
     useState<CreateApiKeyResponse | null>(null);
   const [showNewKeyModal, setShowNewKeyModal] = useState(false);
+  const [isRefreshingLlmKey, setIsRefreshingLlmKey] = useState(false);
+  const [showLlmApiKey, setShowLlmApiKey] = useState(false);
 
   // Display error toast if the query fails
   if (error) {
@@ -45,6 +56,22 @@ export function ApiKeysManager() {
     setNewlyCreatedKey(null);
   };
 
+  const handleRefreshLlmApiKey = async () => {
+    try {
+      setIsRefreshingLlmKey(true);
+      await refreshLlmApiKey.mutateAsync();
+      displaySuccessToast(
+        t(I18nKey.SETTINGS$API_KEY_REFRESHED, {
+          defaultValue: "API key refreshed successfully",
+        }),
+      );
+    } catch (err) {
+      displayErrorToast(t(I18nKey.ERROR$GENERIC));
+    } finally {
+      setIsRefreshingLlmKey(false);
+    }
+  };
+
   const formatDate = (dateString: string | null) => {
     if (!dateString) return "Never";
     return new Date(dateString).toLocaleString();
@@ -53,6 +80,128 @@ export function ApiKeysManager() {
   return (
     <>
       <div className="flex flex-col gap-6">
+        {!isLoadingLlmKey && llmApiKey && (
+          <div className="border-b border-gray-200 pb-6 mb-6">
+            <div className="flex items-center justify-between mb-2">
+              <h3 className="text-xl font-medium text-white">
+                {t(I18nKey.SETTINGS$LLM_API_KEY)}
+              </h3>
+              <BrandButton
+                type="button"
+                variant="primary"
+                onClick={handleRefreshLlmApiKey}
+                isDisabled={isRefreshingLlmKey}
+              >
+                {isRefreshingLlmKey ? (
+                  <LoadingSpinner size="small" />
+                ) : (
+                  t(I18nKey.SETTINGS$REFRESH_LLM_API_KEY)
+                )}
+              </BrandButton>
+            </div>
+            <p className="text-sm text-white mb-4">
+              {t(I18nKey.SETTINGS$LLM_API_KEY_DESCRIPTION)}
+            </p>
+            <div className="flex items-center gap-2 mt-4">
+              <div className="flex-1 bg-base-tertiary rounded-md py-2 flex items-center">
+                <div className="flex-1 pl-2">
+                  {llmApiKey.key ? (
+                    <div className="flex items-center">
+                      {showLlmApiKey ? (
+                        <span className="text-white font-mono">
+                          {llmApiKey.key}
+                        </span>
+                      ) : (
+                        <span className="text-white">{"•".repeat(20)}</span>
+                      )}
+                    </div>
+                  ) : (
+                    <span className="text-white">
+                      {t(I18nKey.API$NO_KEY_AVAILABLE)}
+                    </span>
+                  )}
+                </div>
+                <div className="flex items-center">
+                  {llmApiKey.key && (
+                    <button
+                      type="button"
+                      className="text-white hover:text-gray-300 mr-2"
+                      aria-label={
+                        showLlmApiKey ? "Hide API key" : "Show API key"
+                      }
+                      title={showLlmApiKey ? "Hide API key" : "Show API key"}
+                      onClick={() => setShowLlmApiKey(!showLlmApiKey)}
+                    >
+                      {showLlmApiKey ? (
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="20"
+                          height="20"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        >
+                          <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
+                          <line x1="1" y1="1" x2="23" y2="23" />
+                        </svg>
+                      ) : (
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="20"
+                          height="20"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        >
+                          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                          <circle cx="12" cy="12" r="3" />
+                        </svg>
+                      )}
+                    </button>
+                  )}
+                  <button
+                    type="button"
+                    className="text-white hover:text-gray-300 mr-2"
+                    aria-label="Copy API key"
+                    title="Copy API key"
+                    onClick={() => {
+                      if (llmApiKey.key) {
+                        navigator.clipboard.writeText(llmApiKey.key);
+                        displaySuccessToast(t(I18nKey.SETTINGS$API_KEY_COPIED));
+                      }
+                    }}
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="20"
+                      height="20"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+                      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        <h3 className="text-xl font-medium text-white">
+          {t(I18nKey.SETTINGS$OPENHANDS_API_KEYS)}
+        </h3>
+
         <div className="flex items-center justify-between">
           <BrandButton
             type="button"

frontend/src/components/features/settings/help-link.tsx

@@ -3,9 +3,16 @@ interface HelpLinkProps {
   text: string;
   linkText: string;
   href: string;
+  suffix?: string;
 }
 
-export function HelpLink({ testId, text, linkText, href }: HelpLinkProps) {
+export function HelpLink({
+  testId,
+  text,
+  linkText,
+  href,
+  suffix,
+}: HelpLinkProps) {
   return (
     <p data-testid={testId} className="text-xs">
       {text}{" "}
@@ -17,6 +24,7 @@ export function HelpLink({ testId, text, linkText, href }: HelpLinkProps) {
       >
         {linkText}
       </a>
+      {suffix && ` ${suffix}`}
     </p>
   );
 }

frontend/src/components/features/settings/llm-settings/reset-settings-modal.tsx

@@ -1,41 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
-import { I18nKey } from "#/i18n/declaration";
-import { BrandButton } from "../brand-button";
-
-interface ResetSettingsModalProps {
-  onReset: () => void;
-}
-
-export function ResetSettingsModal({ onReset }: ResetSettingsModalProps) {
-  const { t } = useTranslation();
-
-  return (
-    <ModalBackdrop>
-      <div className="bg-base-secondary p-4 rounded-xl flex flex-col gap-4 border border-tertiary">
-        <p>{t(I18nKey.SETTINGS$RESET_CONFIRMATION)}</p>
-        <div className="w-full flex gap-2" data-testid="reset-settings-modal">
-          <BrandButton
-            testId="confirm-button"
-            type="submit"
-            name="reset-settings"
-            variant="primary"
-            className="grow"
-          >
-            Reset
-          </BrandButton>
-
-          <BrandButton
-            testId="cancel-button"
-            type="button"
-            variant="secondary"
-            className="grow"
-            onClick={onReset}
-          >
-            Cancel
-          </BrandButton>
-        </div>
-      </div>
-    </ModalBackdrop>
-  );
-}

frontend/src/components/features/settings/mcp-settings/mcp-config-editor.tsx

@@ -41,7 +41,7 @@ export function MCPConfigEditor({ mcpConfig, onChange }: MCPConfigEditorProps) {
             className="text-sm text-blue-400 hover:underline mr-3"
             onClick={(e) => e.stopPropagation()}
           >
-            Documentation
+            {t(I18nKey.COMMON$DOCUMENTATION)}
           </a>
           <BrandButton
             type="button"

frontend/src/components/features/settings/optional-tag.tsx

@@ -1,3 +1,11 @@
+import { useTranslation } from "react-i18next";
+import { I18nKey } from "#/i18n/declaration";
+
 export function OptionalTag() {
-  return <span className="text-xs text-tertiary-alt">(Optional)</span>;
+  const { t } = useTranslation();
+  return (
+    <span className="text-xs text-tertiary-alt">
+      {t(I18nKey.COMMON$OPTIONAL)}
+    </span>
+  );
 }

frontend/src/components/features/settings/secrets-settings/secret-form.tsx

@@ -1,6 +1,7 @@
 import { useQueryClient } from "@tanstack/react-query";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { I18nKey } from "#/i18n/declaration";
 import { useCreateSecret } from "#/hooks/mutation/use-create-secret";
 import { useUpdateSecret } from "#/hooks/mutation/use-update-secret";
 import { SettingsInput } from "../settings-input";
@@ -151,7 +152,7 @@ export function SecretForm({
 
       {mode === "add" && (
         <label className="flex flex-col gap-2.5 w-full max-w-[680px]">
-          <span className="text-sm">Value</span>
+          <span className="text-sm">{t(I18nKey.FORM$VALUE)}</span>
           <textarea
             data-testid="value-input"
             name="secret-value"
@@ -168,7 +169,7 @@ export function SecretForm({
 
       <label className="flex flex-col gap-2.5 w-full max-w-[680px]">
         <div className="flex items-center gap-2">
-          <span className="text-sm">Description</span>
+          <span className="text-sm">{t(I18nKey.FORM$DESCRIPTION)}</span>
           <OptionalTag />
         </div>
         <input
@@ -190,7 +191,7 @@ export function SecretForm({
           variant="secondary"
           onClick={onCancel}
         >
-          Cancel
+          {t(I18nKey.BUTTON$CANCEL)}
         </BrandButton>
         <BrandButton testId="submit-button" type="submit" variant="primary">
           {mode === "add" && t("SECRETS$ADD_SECRET")}

frontend/src/components/features/settings/settings-dropdown-input.tsx

@@ -1,5 +1,6 @@
 import { Autocomplete, AutocompleteItem } from "@heroui/react";
 import { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
 import { OptionalTag } from "./optional-tag";
 import { cn } from "#/utils/utils";
 
@@ -12,9 +13,12 @@ interface SettingsDropdownInputProps {
   placeholder?: string;
   showOptionalTag?: boolean;
   isDisabled?: boolean;
+  isLoading?: boolean;
   defaultSelectedKey?: string;
   selectedKey?: string;
   isClearable?: boolean;
+  allowsCustomValue?: boolean;
+  required?: boolean;
   onSelectionChange?: (key: React.Key | null) => void;
   onInputChange?: (value: string) => void;
   defaultFilter?: (textValue: string, inputValue: string) => boolean;
@@ -29,13 +33,17 @@ export function SettingsDropdownInput({
   placeholder,
   showOptionalTag,
   isDisabled,
+  isLoading,
   defaultSelectedKey,
   selectedKey,
   isClearable,
+  allowsCustomValue,
+  required,
   onSelectionChange,
   onInputChange,
   defaultFilter,
 }: SettingsDropdownInputProps) {
+  const { t } = useTranslation();
   return (
     <label className={cn("flex flex-col gap-2.5", wrapperClassName)}>
       {label && (
@@ -54,8 +62,11 @@ export function SettingsDropdownInput({
         onSelectionChange={onSelectionChange}
         onInputChange={onInputChange}
         isClearable={isClearable}
-        isDisabled={isDisabled}
-        placeholder={placeholder}
+        isDisabled={isDisabled || isLoading}
+        isLoading={isLoading}
+        placeholder={isLoading ? t("HOME$LOADING") : placeholder}
+        allowsCustomValue={allowsCustomValue}
+        isRequired={required}
         className="w-full"
         classNames={{
           popoverContent: "bg-tertiary rounded-xl border border-[#717888]",

frontend/src/components/features/settings/settings-switch.tsx

@@ -1,4 +1,6 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
+import { I18nKey } from "#/i18n/declaration";
 import { StyledSwitchComponent } from "./styled-switch-component";
 
 interface SettingsSwitchProps {
@@ -19,6 +21,7 @@ export function SettingsSwitch({
   isToggled: controlledIsToggled,
   isBeta,
 }: React.PropsWithChildren<SettingsSwitchProps>) {
+  const { t } = useTranslation();
   const [isToggled, setIsToggled] = React.useState(defaultIsToggled ?? false);
 
   const handleToggle = (value: boolean) => {
@@ -35,7 +38,6 @@ export function SettingsSwitch({
         type="checkbox"
         onChange={(e) => handleToggle(e.target.checked)}
         checked={controlledIsToggled ?? isToggled}
-        defaultChecked={defaultIsToggled}
       />
 
       <StyledSwitchComponent isToggled={controlledIsToggled ?? isToggled} />
@@ -44,7 +46,7 @@ export function SettingsSwitch({
         <span className="text-sm">{children}</span>
         {isBeta && (
           <span className="text-[11px] leading-4 text-[#0D0F11] font-[500] tracking-tighter bg-primary px-1 rounded-full">
-            Beta
+            {t(I18nKey.BADGE$BETA)}
           </span>
         )}
       </div>

frontend/src/components/features/terminal/terminal.tsx

@@ -22,7 +22,14 @@ function Terminal() {
           {t("DIFF_VIEWER$WAITING_FOR_RUNTIME")}
         </div>
       )}
-      <div ref={ref} className="h-full w-full" />
+      <div
+        ref={ref}
+        className={
+          isRuntimeInactive
+            ? "w-0 h-0 opacity-0 overflow-hidden"
+            : "h-full w-full"
+        }
+      />
     </div>
   );
 }

frontend/src/components/shared/badge.tsx

@@ -0,0 +1,21 @@
+import { cn } from "#/utils/utils";
+
+interface BrandBadgeProps {
+  className?: string;
+}
+
+export function BrandBadge({
+  children,
+  className,
+}: React.PropsWithChildren<BrandBadgeProps>) {
+  return (
+    <span
+      className={cn(
+        "text-sm leading-4 text-[#0D0F11] font-semibold tracking-tighter bg-primary p-1 rounded-full",
+        className,
+      )}
+    >
+      {children}
+    </span>
+  );
+}

frontend/src/components/shared/buttons/copy-to-clipboard-button.tsx

@@ -27,7 +27,7 @@ export function CopyToClipboardButton({
       aria-label={t(
         mode === "copy" ? I18nKey.BUTTON$COPY : I18nKey.BUTTON$COPIED,
       )}
-      className="button-base p-1 absolute top-1 right-1"
+      className="button-base p-1 cursor-pointer"
     >
       {mode === "copy" && <CopyIcon width={15} height={15} />}
       {mode === "copied" && <CheckmarkIcon width={15} height={15} />}

frontend/src/components/shared/inputs/badge-input.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { FaX } from "react-icons/fa6";
+import { cn } from "#/utils/utils";
+import { BrandBadge } from "../badge";
+
+interface BadgeInputProps {
+  name?: string;
+  value: string[];
+  placeholder?: string;
+  onChange: (value: string[]) => void;
+}
+
+export function BadgeInput({
+  name,
+  value,
+  placeholder,
+  onChange,
+}: BadgeInputProps) {
+  const [inputValue, setInputValue] = React.useState("");
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    // If pressing Backspace with empty input, remove the last badge
+    if (e.key === "Backspace" && inputValue === "" && value.length > 0) {
+      const newBadges = [...value];
+      newBadges.pop();
+      onChange(newBadges);
+      return;
+    }
+
+    // If pressing Space or Enter with non-empty input, add a new badge
+    if (e.key === " " && inputValue.trim() !== "") {
+      e.preventDefault();
+      const newBadge = inputValue.trim();
+      onChange([...value, newBadge]);
+      setInputValue("");
+    }
+  };
+
+  const removeBadge = (indexToRemove: number) => {
+    onChange(value.filter((_, index) => index !== indexToRemove));
+  };
+
+  return (
+    <div
+      className={cn(
+        "bg-tertiary border border-[#717888] rounded w-full p-2 placeholder:italic placeholder:text-tertiary-alt",
+        "flex flex-wrap items-center gap-2",
+      )}
+    >
+      {value.map((badge, index) => (
+        <div key={index}>
+          <BrandBadge className="flex items-center gap-0.5">
+            {badge}
+            <button
+              data-testid="remove-button"
+              type="button"
+              onClick={() => removeBadge(index)}
+            >
+              <FaX className="w-3 h-3 text-black" />
+            </button>
+          </BrandBadge>
+        </div>
+      ))}
+      <input
+        data-testid={name || "badge-input"}
+        name={name}
+        value={inputValue}
+        placeholder={value.length === 0 ? placeholder : ""}
+        onChange={(e) => setInputValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+        className="flex-grow outline-none bg-transparent"
+      />
+    </div>
+  );
+}

frontend/src/components/shared/modals/confirmation-modal.tsx

@@ -1,3 +1,5 @@
+import { useTranslation } from "react-i18next";
+import { I18nKey } from "#/i18n/declaration";
 import { BrandButton } from "#/components/features/settings/brand-button";
 import { ModalBackdrop } from "./modal-backdrop";
 
@@ -12,6 +14,7 @@ export function ConfirmationModal({
   onConfirm,
   onCancel,
 }: ConfirmationModalProps) {
+  const { t } = useTranslation();
   return (
     <ModalBackdrop onClose={onCancel}>
       <div
@@ -27,7 +30,7 @@ export function ConfirmationModal({
             variant="secondary"
             className="grow"
           >
-            Cancel
+            {t(I18nKey.BUTTON$CANCEL)}
           </BrandButton>
           <BrandButton
             testId="confirm-button"
@@ -36,7 +39,7 @@ export function ConfirmationModal({
             variant="primary"
             className="grow"
           >
-            Confirm
+            {t(I18nKey.BUTTON$CONFIRM)}
           </BrandButton>
         </div>
       </div>

frontend/src/components/shared/modals/settings/model-selector.tsx

@@ -97,26 +97,30 @@ export function ModelSelector({
           }}
         >
           <AutocompleteSection title={t(I18nKey.MODEL_SELECTOR$VERIFIED)}>
-            {Object.keys(models)
-              .filter((provider) => VERIFIED_PROVIDERS.includes(provider))
-              .map((provider) => (
+            {VERIFIED_PROVIDERS.filter((provider) => models[provider]).map(
+              (provider) => (
                 <AutocompleteItem
                   data-testid={`provider-item-${provider}`}
                   key={provider}
                 >
                   {mapProvider(provider)}
                 </AutocompleteItem>
-              ))}
-          </AutocompleteSection>
-          <AutocompleteSection title={t(I18nKey.MODEL_SELECTOR$OTHERS)}>
-            {Object.keys(models)
-              .filter((provider) => !VERIFIED_PROVIDERS.includes(provider))
-              .map((provider) => (
-                <AutocompleteItem key={provider}>
-                  {mapProvider(provider)}
-                </AutocompleteItem>
-              ))}
+              ),
+            )}
           </AutocompleteSection>
+          {Object.keys(models).some(
+            (provider) => !VERIFIED_PROVIDERS.includes(provider),
+          ) ? (
+            <AutocompleteSection title={t(I18nKey.MODEL_SELECTOR$OTHERS)}>
+              {Object.keys(models)
+                .filter((provider) => !VERIFIED_PROVIDERS.includes(provider))
+                .map((provider) => (
+                  <AutocompleteItem key={provider}>
+                    {mapProvider(provider)}
+                  </AutocompleteItem>
+                ))}
+            </AutocompleteSection>
+          ) : null}
         </Autocomplete>
       </fieldset>
 
@@ -147,24 +151,28 @@ export function ModelSelector({
           }}
         >
           <AutocompleteSection title={t(I18nKey.MODEL_SELECTOR$VERIFIED)}>
-            {models[selectedProvider || ""]?.models
-              .filter((model) => VERIFIED_MODELS.includes(model))
-              .map((model) => (
-                <AutocompleteItem key={model}>{model}</AutocompleteItem>
-              ))}
-          </AutocompleteSection>
-          <AutocompleteSection title={t(I18nKey.MODEL_SELECTOR$OTHERS)}>
-            {models[selectedProvider || ""]?.models
-              .filter((model) => !VERIFIED_MODELS.includes(model))
-              .map((model) => (
-                <AutocompleteItem
-                  data-testid={`model-item-${model}`}
-                  key={model}
-                >
-                  {model}
-                </AutocompleteItem>
-              ))}
+            {VERIFIED_MODELS.filter((model) =>
+              models[selectedProvider || ""]?.models?.includes(model),
+            ).map((model) => (
+              <AutocompleteItem key={model}>{model}</AutocompleteItem>
+            ))}
           </AutocompleteSection>
+          {models[selectedProvider || ""]?.models?.some(
+            (model) => !VERIFIED_MODELS.includes(model),
+          ) ? (
+            <AutocompleteSection title={t(I18nKey.MODEL_SELECTOR$OTHERS)}>
+              {models[selectedProvider || ""]?.models
+                .filter((model) => !VERIFIED_MODELS.includes(model))
+                .map((model) => (
+                  <AutocompleteItem
+                    data-testid={`model-item-${model}`}
+                    key={model}
+                  >
+                    {model}
+                  </AutocompleteItem>
+                ))}
+            </AutocompleteSection>
+          ) : null}
         </Autocomplete>
       </fieldset>
     </div>

frontend/src/context/conversation-subscriptions-provider.tsx

@@ -0,0 +1,315 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
+import { io, Socket } from "socket.io-client";
+import { OpenHandsParsedEvent } from "#/types/core";
+import {
+  isOpenHandsEvent,
+  isAgentStateChangeObservation,
+  isStatusUpdate,
+} from "#/types/core/guards";
+import { AgentState } from "#/types/agent-state";
+import {
+  renderConversationErroredToast,
+  renderConversationCreatedToast,
+  renderConversationFinishedToast,
+} from "#/components/features/chat/microagent/microagent-status-toast";
+
+interface ConversationSocket {
+  socket: Socket;
+  isConnected: boolean;
+  events: OpenHandsParsedEvent[];
+}
+
+interface ConversationSubscriptionsContextType {
+  activeConversationIds: string[];
+  subscribeToConversation: (options: {
+    conversationId: string;
+    sessionApiKey: string | null;
+    providersSet: ("github" | "gitlab" | "bitbucket")[];
+    baseUrl: string;
+    onEvent?: (event: unknown, conversationId: string) => void;
+  }) => void;
+  unsubscribeFromConversation: (conversationId: string) => void;
+  isSubscribedToConversation: (conversationId: string) => boolean;
+  getEventsForConversation: (conversationId: string) => OpenHandsParsedEvent[];
+}
+
+const ConversationSubscriptionsContext =
+  createContext<ConversationSubscriptionsContextType>({
+    activeConversationIds: [],
+    subscribeToConversation: () => {
+      throw new Error("ConversationSubscriptionsProvider not initialized");
+    },
+    unsubscribeFromConversation: () => {
+      throw new Error("ConversationSubscriptionsProvider not initialized");
+    },
+    isSubscribedToConversation: () => false,
+    getEventsForConversation: () => [],
+  });
+
+const isErrorEvent = (
+  event: unknown,
+): event is { error: true; message: string } =>
+  typeof event === "object" &&
+  event !== null &&
+  "error" in event &&
+  event.error === true &&
+  "message" in event &&
+  typeof event.message === "string";
+
+const isAgentStatusError = (event: unknown): event is OpenHandsParsedEvent =>
+  isOpenHandsEvent(event) &&
+  isAgentStateChangeObservation(event) &&
+  event.extras.agent_state === AgentState.ERROR;
+
+export function ConversationSubscriptionsProvider({
+  children,
+}: React.PropsWithChildren) {
+  const [activeConversationIds, setActiveConversationIds] = useState<string[]>(
+    [],
+  );
+  const [conversationSockets, setConversationSockets] = useState<
+    Record<string, ConversationSocket>
+  >({});
+  const eventHandlersRef = useRef<Record<string, (event: unknown) => void>>({});
+
+  // Cleanup function to remove all subscriptions when component unmounts
+  useEffect(
+    () => () => {
+      // Store the current sockets in a local variable to avoid closure issues
+      const socketsToDisconnect = { ...conversationSockets };
+
+      Object.values(socketsToDisconnect).forEach((socketData) => {
+        if (socketData.socket) {
+          socketData.socket.removeAllListeners();
+          socketData.socket.disconnect();
+        }
+      });
+    },
+    [],
+  );
+
+  const unsubscribeFromConversation = useCallback(
+    (conversationId: string) => {
+      // Get a local reference to the socket data to avoid race conditions
+      const socketData = conversationSockets[conversationId];
+
+      if (socketData) {
+        const { socket } = socketData;
+        const handler = eventHandlersRef.current[conversationId];
+
+        if (socket) {
+          if (handler) {
+            socket.off("oh_event", handler);
+          }
+          socket.removeAllListeners();
+          socket.disconnect();
+        }
+
+        // Update state to remove the socket
+        setConversationSockets((prev) => {
+          const newSockets = { ...prev };
+          delete newSockets[conversationId];
+          return newSockets;
+        });
+
+        // Remove from active IDs
+        setActiveConversationIds((prev) =>
+          prev.filter((id) => id !== conversationId),
+        );
+
+        // Clean up event handler reference
+        delete eventHandlersRef.current[conversationId];
+      }
+    },
+    [conversationSockets],
+  );
+
+  const subscribeToConversation = useCallback(
+    (options: {
+      conversationId: string;
+      sessionApiKey: string | null;
+      providersSet: ("github" | "gitlab" | "bitbucket")[];
+      baseUrl: string;
+      onEvent?: (event: unknown, conversationId: string) => void;
+    }) => {
+      const { conversationId, sessionApiKey, providersSet, baseUrl, onEvent } =
+        options;
+
+      // If already subscribed, don't create a new subscription
+      if (conversationSockets[conversationId]) {
+        return;
+      }
+
+      const handleOhEvent = (event: unknown) => {
+        // Call the custom event handler if provided
+        if (onEvent) {
+          onEvent(event, conversationId);
+        }
+
+        // Update the events for this subscription
+        if (isOpenHandsEvent(event)) {
+          setConversationSockets((prev) => {
+            // Make sure the conversation still exists in our state
+            if (!prev[conversationId]) return prev;
+
+            return {
+              ...prev,
+              [conversationId]: {
+                ...prev[conversationId],
+                events: [...(prev[conversationId]?.events || []), event],
+              },
+            };
+          });
+        }
+
+        // Handle error events
+        if (isErrorEvent(event) || isAgentStatusError(event)) {
+          renderConversationErroredToast(
+            conversationId,
+            isErrorEvent(event)
+              ? event.message
+              : "Unknown error, please try again",
+          );
+        } else if (isStatusUpdate(event)) {
+          if (event.type === "info" && event.id === "STATUS$STARTING_RUNTIME") {
+            renderConversationCreatedToast(conversationId);
+          }
+        } else if (
+          isOpenHandsEvent(event) &&
+          isAgentStateChangeObservation(event)
+        ) {
+          if (event.extras.agent_state === AgentState.FINISHED) {
+            renderConversationFinishedToast(conversationId);
+            unsubscribeFromConversation(conversationId);
+          }
+        }
+      };
+
+      // Store the event handler in ref for cleanup
+      eventHandlersRef.current[conversationId] = handleOhEvent;
+
+      try {
+        // Create socket connection
+        const socket = io(baseUrl, {
+          transports: ["websocket"],
+          query: {
+            conversation_id: conversationId,
+            session_api_key: sessionApiKey,
+            providers_set: providersSet,
+          },
+          reconnection: true,
+          reconnectionAttempts: 5,
+          reconnectionDelay: 1000,
+        });
+
+        // Set up event listeners
+        socket.on("connect", () => {
+          setConversationSockets((prev) => {
+            // Make sure the conversation still exists in our state
+            if (!prev[conversationId]) return prev;
+
+            return {
+              ...prev,
+              [conversationId]: {
+                ...prev[conversationId],
+                isConnected: true,
+              },
+            };
+          });
+        });
+
+        socket.on("connect_error", (error) => {
+          console.warn(
+            `Socket for conversation ${conversationId} CONNECTION ERROR:`,
+            error,
+          );
+        });
+
+        socket.on("disconnect", (reason) => {
+          console.warn(
+            `Socket for conversation ${conversationId} DISCONNECTED! Reason:`,
+            reason,
+          );
+          setConversationSockets((prev) => {
+            // Make sure the conversation still exists in our state
+            if (!prev[conversationId]) return prev;
+
+            return {
+              ...prev,
+              [conversationId]: {
+                ...prev[conversationId],
+                isConnected: false,
+              },
+            };
+          });
+        });
+
+        socket.on("oh_event", handleOhEvent);
+
+        // Add the socket to our state first
+        setConversationSockets((prev) => ({
+          ...prev,
+          [conversationId]: {
+            socket,
+            isConnected: socket.connected,
+            events: [],
+          },
+        }));
+
+        // Then add to active conversation IDs
+        setActiveConversationIds((prev) =>
+          prev.includes(conversationId) ? prev : [...prev, conversationId],
+        );
+      } catch (error) {
+        // Clean up the event handler if there was an error
+        delete eventHandlersRef.current[conversationId];
+      }
+    },
+    [conversationSockets],
+  );
+
+  const isSubscribedToConversation = useCallback(
+    (conversationId: string) => !!conversationSockets[conversationId],
+    [conversationSockets],
+  );
+
+  const getEventsForConversation = useCallback(
+    (conversationId: string) =>
+      conversationSockets[conversationId]?.events || [],
+    [conversationSockets],
+  );
+
+  const value = React.useMemo(
+    () => ({
+      activeConversationIds,
+      subscribeToConversation,
+      unsubscribeFromConversation,
+      isSubscribedToConversation,
+      getEventsForConversation,
+    }),
+    [
+      activeConversationIds,
+      subscribeToConversation,
+      unsubscribeFromConversation,
+      isSubscribedToConversation,
+      getEventsForConversation,
+    ],
+  );
+
+  return (
+    <ConversationSubscriptionsContext.Provider value={value}>
+      {children}
+    </ConversationSubscriptionsContext.Provider>
+  );
+}
+
+export function useConversationSubscriptions() {
+  return useContext(ConversationSubscriptionsContext);
+}

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

@@ -328,6 +328,7 @@ export function WsClientProvider({
       transports: ["websocket"],
       query,
     });
+
     sio.on("connect", handleConnect);
     sio.on("oh_event", handleMessage);
     sio.on("connect_error", handleError);

frontend/src/entry.client.tsx

@@ -67,6 +67,7 @@ prepareApp().then(() =>
           <QueryClientProvider client={queryClient}>
             <HydratedRouter />
             <PosthogInit />
+            <div id="modal-portal-exit" />
           </QueryClientProvider>
         </Provider>
       </StrictMode>,

frontend/src/hooks/mutation/use-create-conversation.ts

@@ -1,58 +1,47 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useNavigate } from "react-router";
 import posthog from "posthog-js";
-import { useDispatch, useSelector } from "react-redux";
 import OpenHands from "#/api/open-hands";
-import { setInitialPrompt } from "#/state/initial-query-slice";
-import { RootState } from "#/store";
-import { GitRepository } from "#/types/git";
 import { SuggestedTask } from "#/components/features/home/tasks/task.types";
+import { Provider } from "#/types/settings";
+
+interface CreateConversationVariables {
+  query?: string;
+  repository?: {
+    name: string;
+    gitProvider: Provider;
+    branch?: string;
+  };
+  suggestedTask?: SuggestedTask;
+  conversationInstructions?: string;
+}
 
 export const useCreateConversation = () => {
-  const navigate = useNavigate();
-  const dispatch = useDispatch();
   const queryClient = useQueryClient();
 
-  const { selectedRepository, files, replayJson } = useSelector(
-    (state: RootState) => state.initialQuery,
-  );
-
   return useMutation({
     mutationKey: ["create-conversation"],
-    mutationFn: async (variables: {
-      q?: string;
-      selectedRepository?: GitRepository | null;
-      selected_branch?: string;
-      suggested_task?: SuggestedTask;
-    }) => {
-      if (variables.q) dispatch(setInitialPrompt(variables.q));
+    mutationFn: async (variables: CreateConversationVariables) => {
+      const { query, repository, suggestedTask, conversationInstructions } =
+        variables;
 
       return OpenHands.createConversation(
-        variables.selectedRepository
-          ? variables.selectedRepository.full_name
-          : undefined,
-        variables.selectedRepository
-          ? variables.selectedRepository.git_provider
-          : undefined,
-        variables.q,
-        files,
-        replayJson || undefined,
-        variables.suggested_task || undefined,
-        variables.selected_branch,
+        repository?.name,
+        repository?.gitProvider,
+        query,
+        suggestedTask,
+        repository?.branch,
+        conversationInstructions,
       );
     },
-    onSuccess: async ({ conversation_id: conversationId }, { q }) => {
+    onSuccess: async (_, { query, repository }) => {
       posthog.capture("initial_query_submitted", {
         entry_point: "task_form",
-        query_character_length: q?.length,
-        has_repository: !!selectedRepository,
-        has_files: files.length > 0,
-        has_replay_json: !!replayJson,
+        query_character_length: query?.length,
+        has_repository: !!repository,
       });
       await queryClient.invalidateQueries({
         queryKey: ["user", "conversations"],
       });
-      navigate(`/conversations/${conversationId}`);
     },
   });
 };

frontend/src/hooks/query/use-conversation-microagents.ts

@@ -1,19 +1,15 @@
 import { useQuery } from "@tanstack/react-query";
+import { useSelector } from "react-redux";
 import OpenHands from "#/api/open-hands";
+import { useConversationId } from "../use-conversation-id";
+import { RootState } from "#/store";
 import { AgentState } from "#/types/agent-state";
 
-interface UseConversationMicroagentsOptions {
-  agentState?: AgentState;
-  conversationId: string | undefined;
-  enabled?: boolean;
-}
+export const useConversationMicroagents = () => {
+  const { conversationId } = useConversationId();
+  const { curAgentState } = useSelector((state: RootState) => state.agent);
 
-export const useConversationMicroagents = ({
-  agentState,
-  conversationId,
-  enabled = true,
-}: UseConversationMicroagentsOptions) =>
-  useQuery({
+  return useQuery({
     queryKey: ["conversation", conversationId, "microagents"],
     queryFn: async () => {
       if (!conversationId) {
@@ -24,9 +20,9 @@ export const useConversationMicroagents = ({
     },
     enabled:
       !!conversationId &&
-      enabled &&
-      agentState !== AgentState.LOADING &&
-      agentState !== AgentState.INIT,
+      curAgentState !== AgentState.LOADING &&
+      curAgentState !== AgentState.INIT,
     staleTime: 1000 * 60 * 5, // 5 minutes
     gcTime: 1000 * 60 * 15, // 15 minutes
   });
+};

frontend/src/hooks/query/use-get-microagent-prompt.ts

@@ -1,12 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { useConversationId } from "../use-conversation-id";
-import OpenHands from "#/api/open-hands";
-
-export const useGetMicroagentPrompt = ({ eventId }: { eventId: number }) => {
-  const { conversationId } = useConversationId();
-
-  return useQuery({
-    queryKey: ["conversation", "remember_prompt", conversationId, eventId],
-    queryFn: () => OpenHands.getMicroagentPrompt(conversationId, eventId),
-  });
-};

frontend/src/hooks/query/use-get-microagents.ts

@@ -0,0 +1,15 @@
+import { useQuery } from "@tanstack/react-query";
+import { useConversationId } from "../use-conversation-id";
+import { FileService } from "#/api/file-service/file-service.api";
+
+export const useGetMicroagents = (microagentDirectory: string) => {
+  const { conversationId } = useConversationId();
+
+  return useQuery({
+    queryKey: ["files", "microagents", conversationId, microagentDirectory],
+    queryFn: () => FileService.getFiles(conversationId!, microagentDirectory),
+    enabled: !!conversationId,
+    select: (data) =>
+      data.map((fileName) => fileName.replace(microagentDirectory, "")),
+  });
+};

frontend/src/hooks/query/use-llm-api-key.ts

@@ -0,0 +1,46 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { openHands } from "#/api/open-hands-axios";
+import { useConfig } from "./use-config";
+
+export const LLM_API_KEY_QUERY_KEY = "llm-api-key";
+
+export interface LlmApiKeyResponse {
+  key: string | null;
+}
+
+export function useLlmApiKey() {
+  const { data: config } = useConfig();
+
+  return useQuery({
+    queryKey: [LLM_API_KEY_QUERY_KEY],
+    enabled: config?.APP_MODE === "saas",
+    queryFn: async () => {
+      try {
+        const { data } =
+          await openHands.get<LlmApiKeyResponse>("/api/keys/llm/byor");
+        return data;
+      } catch (error) {
+        return { key: null };
+      }
+    },
+    staleTime: 1000 * 60 * 5, // 5 minutes
+    gcTime: 1000 * 60 * 15, // 15 minutes
+  });
+}
+
+export function useRefreshLlmApiKey() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async () => {
+      const { data } = await openHands.post<LlmApiKeyResponse>(
+        "/api/keys/llm/byor/refresh",
+      );
+      return data;
+    },
+    onSuccess: () => {
+      // Invalidate the LLM API key query to trigger a refetch
+      queryClient.invalidateQueries({ queryKey: [LLM_API_KEY_QUERY_KEY] });
+    },
+  });
+}

frontend/src/hooks/query/use-microagent-prompt.ts

@@ -0,0 +1,15 @@
+import { useQuery } from "@tanstack/react-query";
+import { MemoryService } from "#/api/memory-service/memory-service.api";
+import { useConversationId } from "../use-conversation-id";
+
+export const useMicroagentPrompt = (eventId: number) => {
+  const { conversationId } = useConversationId();
+
+  return useQuery({
+    queryKey: ["memory", "prompt", conversationId, eventId],
+    queryFn: () => MemoryService.getPrompt(conversationId!, eventId),
+    enabled: !!conversationId,
+    staleTime: 1000 * 60 * 5, // 5 minutes
+    gcTime: 1000 * 60 * 15, // 15 minutes
+  });
+};

frontend/src/hooks/use-create-conversation-and-subscribe-multiple.ts

@@ -0,0 +1,84 @@
+import React from "react";
+import { useCreateConversation } from "./mutation/use-create-conversation";
+import { useUserProviders } from "./use-user-providers";
+import { useConversationSubscriptions } from "#/context/conversation-subscriptions-provider";
+import { Provider } from "#/types/settings";
+
+/**
+ * Custom hook to create a conversation and subscribe to it, supporting multiple subscriptions.
+ * This extends the functionality of useCreateConversationAndSubscribe to allow subscribing to
+ * multiple conversations simultaneously.
+ */
+export const useCreateConversationAndSubscribeMultiple = () => {
+  const { mutate: createConversation, isPending } = useCreateConversation();
+  const { providers } = useUserProviders();
+  const {
+    subscribeToConversation,
+    unsubscribeFromConversation,
+    isSubscribedToConversation,
+    activeConversationIds,
+  } = useConversationSubscriptions();
+
+  const createConversationAndSubscribe = React.useCallback(
+    ({
+      query,
+      conversationInstructions,
+      repository,
+      onSuccessCallback,
+      onEventCallback,
+    }: {
+      query: string;
+      conversationInstructions: string;
+      repository: {
+        name: string;
+        branch: string;
+        gitProvider: Provider;
+      };
+      onSuccessCallback?: (conversationId: string) => void;
+      onEventCallback?: (event: unknown, conversationId: string) => void;
+    }) => {
+      createConversation(
+        {
+          query,
+          conversationInstructions,
+          repository,
+        },
+        {
+          onSuccess: (data) => {
+            let baseUrl = "";
+            if (data?.url && !data.url.startsWith("/")) {
+              baseUrl = new URL(data.url).host;
+            } else {
+              baseUrl =
+                (import.meta.env.VITE_BACKEND_BASE_URL as string | undefined) ||
+                window?.location.host;
+            }
+
+            // Subscribe to the conversation
+            subscribeToConversation({
+              conversationId: data.conversation_id,
+              sessionApiKey: data.session_api_key,
+              providersSet: providers,
+              baseUrl,
+              onEvent: onEventCallback,
+            });
+
+            // Call the success callback if provided
+            if (onSuccessCallback) {
+              onSuccessCallback(data.conversation_id);
+            }
+          },
+        },
+      );
+    },
+    [createConversation, subscribeToConversation, providers],
+  );
+
+  return {
+    createConversationAndSubscribe,
+    unsubscribeFromConversation,
+    isSubscribedToConversation,
+    activeConversationIds,
+    isPending,
+  };
+};

frontend/src/i18n/declaration.ts

@@ -1,5 +1,26 @@
 // this file generate by script, don't modify it manually!!!
 export enum I18nKey {
+  MICROAGENT$NO_REPOSITORY_FOUND = "MICROAGENT$NO_REPOSITORY_FOUND",
+  MICROAGENT$ADD_TO_MICROAGENT = "MICROAGENT$ADD_TO_MICROAGENT",
+  MICROAGENT$WHAT_TO_ADD = "MICROAGENT$WHAT_TO_ADD",
+  MICROAGENT$WHERE_TO_PUT = "MICROAGENT$WHERE_TO_PUT",
+  MICROAGENT$ADD_TRIGGER = "MICROAGENT$ADD_TRIGGER",
+  MICROAGENT$WHAT_TO_REMEMBER = "MICROAGENT$WHAT_TO_REMEMBER",
+  MICROAGENT$ADD_TRIGGERS = "MICROAGENT$ADD_TRIGGERS",
+  MICROAGENT$WAIT_FOR_RUNTIME = "MICROAGENT$WAIT_FOR_RUNTIME",
+  MICROAGENT$ADDING_CONTEXT = "MICROAGENT$ADDING_CONTEXT",
+  MICROAGENT$VIEW_CONVERSATION = "MICROAGENT$VIEW_CONVERSATION",
+  MICROAGENT$SUCCESS_PR_READY = "MICROAGENT$SUCCESS_PR_READY",
+  MICROAGENT$STATUS_CREATING = "MICROAGENT$STATUS_CREATING",
+  MICROAGENT$STATUS_COMPLETED = "MICROAGENT$STATUS_COMPLETED",
+  MICROAGENT$STATUS_ERROR = "MICROAGENT$STATUS_ERROR",
+  MICROAGENT$VIEW_YOUR_PR = "MICROAGENT$VIEW_YOUR_PR",
+  MICROAGENT$DESCRIBE_WHAT_TO_ADD = "MICROAGENT$DESCRIBE_WHAT_TO_ADD",
+  MICROAGENT$SELECT_FILE_OR_CUSTOM = "MICROAGENT$SELECT_FILE_OR_CUSTOM",
+  MICROAGENT$TYPE_TRIGGER_SPACE = "MICROAGENT$TYPE_TRIGGER_SPACE",
+  MICROAGENT$LOADING_PROMPT = "MICROAGENT$LOADING_PROMPT",
+  MICROAGENT$CANCEL = "MICROAGENT$CANCEL",
+  MICROAGENT$LAUNCH = "MICROAGENT$LAUNCH",
   STATUS$WEBSOCKET_CLOSED = "STATUS$WEBSOCKET_CLOSED",
   HOME$LAUNCH_FROM_SCRATCH = "HOME$LAUNCH_FROM_SCRATCH",
   HOME$READ_THIS = "HOME$READ_THIS",
@@ -347,6 +368,9 @@ export enum I18nKey {
   SETTINGS$LANGUAGE_TOOLTIP = "SETTINGS$LANGUAGE_TOOLTIP",
   SETTINGS$DISABLED_RUNNING = "SETTINGS$DISABLED_RUNNING",
   SETTINGS$API_KEY_PLACEHOLDER = "SETTINGS$API_KEY_PLACEHOLDER",
+  SETTINGS$LLM_API_KEY = "SETTINGS$LLM_API_KEY",
+  SETTINGS$LLM_API_KEY_DESCRIPTION = "SETTINGS$LLM_API_KEY_DESCRIPTION",
+  SETTINGS$REFRESH_LLM_API_KEY = "SETTINGS$REFRESH_LLM_API_KEY",
   SETTINGS$CONFIRMATION_MODE = "SETTINGS$CONFIRMATION_MODE",
   SETTINGS$CONFIRMATION_MODE_TOOLTIP = "SETTINGS$CONFIRMATION_MODE_TOOLTIP",
   SETTINGS$AGENT_SELECT_ENABLED = "SETTINGS$AGENT_SELECT_ENABLED",
@@ -359,6 +383,9 @@ export enum I18nKey {
   SETTINGS$RESET = "SETTINGS$RESET",
   SETTINGS$API_KEYS = "SETTINGS$API_KEYS",
   SETTINGS$API_KEYS_DESCRIPTION = "SETTINGS$API_KEYS_DESCRIPTION",
+  SETTINGS$OPENHANDS_API_KEY_HELP = "SETTINGS$OPENHANDS_API_KEY_HELP",
+  SETTINGS$OPENHANDS_API_KEY_HELP_TEXT = "SETTINGS$OPENHANDS_API_KEY_HELP_TEXT",
+  SETTINGS$OPENHANDS_API_KEY_HELP_SUFFIX = "SETTINGS$OPENHANDS_API_KEY_HELP_SUFFIX",
   SETTINGS$CREATE_API_KEY = "SETTINGS$CREATE_API_KEY",
   SETTINGS$CREATE_API_KEY_DESCRIPTION = "SETTINGS$CREATE_API_KEY_DESCRIPTION",
   SETTINGS$DELETE_API_KEY = "SETTINGS$DELETE_API_KEY",
@@ -373,6 +400,7 @@ export enum I18nKey {
   SETTINGS$API_KEY_DELETED = "SETTINGS$API_KEY_DELETED",
   SETTINGS$API_KEY_WARNING = "SETTINGS$API_KEY_WARNING",
   SETTINGS$API_KEY_COPIED = "SETTINGS$API_KEY_COPIED",
+  SETTINGS$API_KEY_REFRESHED = "SETTINGS$API_KEY_REFRESHED",
   SETTINGS$API_KEY_NAME_PLACEHOLDER = "SETTINGS$API_KEY_NAME_PLACEHOLDER",
   BUTTON$CREATE = "BUTTON$CREATE",
   BUTTON$DELETE = "BUTTON$DELETE",
@@ -642,4 +670,15 @@ export enum I18nKey {
   API$TAVILY_KEY_EXAMPLE = "API$TAVILY_KEY_EXAMPLE",
   API$TVLY_KEY_EXAMPLE = "API$TVLY_KEY_EXAMPLE",
   SECRETS$CONNECT_GIT_PROVIDER = "SECRETS$CONNECT_GIT_PROVIDER",
+  SETTINGS$OPENHANDS_API_KEYS = "SETTINGS$OPENHANDS_API_KEYS",
+  CONVERSATION$BUDGET_USAGE_FORMAT = "CONVERSATION$BUDGET_USAGE_FORMAT",
+  CONVERSATION$CACHE_HIT = "CONVERSATION$CACHE_HIT",
+  CONVERSATION$CACHE_WRITE = "CONVERSATION$CACHE_WRITE",
+  FEEDBACK$STAR_RATING = "FEEDBACK$STAR_RATING",
+  BUTTON$CONFIRM = "BUTTON$CONFIRM",
+  FORM$VALUE = "FORM$VALUE",
+  FORM$DESCRIPTION = "FORM$DESCRIPTION",
+  COMMON$OPTIONAL = "COMMON$OPTIONAL",
+  BROWSER$SERVER_MESSAGE = "BROWSER$SERVER_MESSAGE",
+  API$NO_KEY_AVAILABLE = "API$NO_KEY_AVAILABLE",
 }

frontend/src/i18n/translation.json

@@ -1,4 +1,340 @@
 {
+    "MICROAGENT$NO_REPOSITORY_FOUND": {
+        "en": "No repository found to launch microagent",
+        "ja": "マイクロエージェントを起動するためのリポジトリが見つかりません",
+        "zh-CN": "未找到启动微代理的存储库",
+        "zh-TW": "未找到啟動微代理的存儲庫",
+        "ko-KR": "마이크로에이전트를 시작할 저장소를 찾을 수 없습니다",
+        "no": "Ingen repository funnet for å starte mikroagent",
+        "it": "Nessun repository trovato per avviare il microagente",
+        "pt": "Nenhum repositório encontrado para iniciar o microagente",
+        "es": "No se encontró ningún repositorio para iniciar el microagente",
+        "ar": "لم يتم العثور على مستودع لإطلاق الوكيل المصغر",
+        "fr": "Aucun dépôt trouvé pour lancer le micro-agent",
+        "tr": "Mikro ajanı başlatmak için depo bulunamadı",
+        "de": "Kein Repository gefunden, um Microagent zu starten",
+        "uk": "Не знайдено репозиторій для запуску мікроагента"
+    },
+    "MICROAGENT$ADD_TO_MICROAGENT": {
+        "en": "Add to Microagent",
+        "ja": "マイクロエージェントに追加",
+        "zh-CN": "添加到微代理",
+        "zh-TW": "添加到微代理",
+        "ko-KR": "마이크로에이전트에 추가",
+        "no": "Legg til i mikroagent",
+        "it": "Aggiungi al microagente",
+        "pt": "Adicionar ao microagente",
+        "es": "Añadir al microagente",
+        "ar": "إضافة إلى الوكيل المصغر",
+        "fr": "Ajouter au micro-agent",
+        "tr": "Mikro ajana ekle",
+        "de": "Zum Microagent hinzufügen",
+        "uk": "Додати до мікроагента"
+    },
+    "MICROAGENT$WHAT_TO_ADD": {
+        "en": "What would you like to add to the Microagent?",
+        "ja": "マイクロエージェントに何を追加しますか？",
+        "zh-CN": "您想添加什么到微代理？",
+        "zh-TW": "您想添加什麼到微代理？",
+        "ko-KR": "마이크로에이전트에 무엇을 추가하시겠습니까?",
+        "no": "Hva vil du legge til i mikroagenten?",
+        "it": "Cosa vorresti aggiungere al microagente?",
+        "pt": "O que você gostaria de adicionar ao microagente?",
+        "es": "¿Qué te gustaría añadir al microagente?",
+        "ar": "ماذا تريد أن تضيف إلى الوكيل المصغر؟",
+        "fr": "Que souhaitez-vous ajouter au micro-agent ?",
+        "tr": "Mikro ajana ne eklemek istersiniz?",
+        "de": "Was möchten Sie zum Microagent hinzufügen?",
+        "uk": "Що ви хочете додати до мікроагента?"
+    },
+    "MICROAGENT$WHERE_TO_PUT": {
+        "en": "Where should we put it?",
+        "ja": "どこに配置しますか？",
+        "zh-CN": "我们应该把它放在哪里？",
+        "zh-TW": "我們應該把它放在哪裡？",
+        "ko-KR": "어디에 넣을까요?",
+        "no": "Hvor skal vi plassere det?",
+        "it": "Dove dovremmo metterlo?",
+        "pt": "Onde devemos colocá-lo?",
+        "es": "¿Dónde deberíamos ponerlo?",
+        "ar": "أين يجب أن نضعه؟",
+        "fr": "Où devons-nous le mettre ?",
+        "tr": "Nereye koyalım?",
+        "de": "Wo sollen wir es platzieren?",
+        "uk": "Куди ми повинні його помістити?"
+    },
+    "MICROAGENT$ADD_TRIGGER": {
+        "en": "Add a trigger for the microagent",
+        "ja": "マイクロエージェントのトリガーを追加",
+        "zh-CN": "为微代理添加触发器",
+        "zh-TW": "為微代理添加觸發器",
+        "ko-KR": "마이크로에이전트의 트리거 추가",
+        "no": "Legg til en utløser for mikroagenten",
+        "it": "Aggiungi un trigger per il microagente",
+        "pt": "Adicionar um gatilho para o microagente",
+        "es": "Añadir un disparador para el microagente",
+        "ar": "إضافة مشغل للوكيل المصغر",
+        "fr": "Ajouter un déclencheur pour le micro-agent",
+        "tr": "Mikro ajan için bir tetikleyici ekleyin",
+        "de": "Fügen Sie einen Auslöser für den Microagent hinzu",
+        "uk": "Додати тригер для мікроагента"
+    },
+    "MICROAGENT$WHAT_TO_REMEMBER": {
+        "en": "What would you like your microagent to remember?",
+        "ja": "マイクロエージェントに何を覚えさせたいですか？",
+        "zh-CN": "您希望您的微代理记住什么？",
+        "zh-TW": "您希望您的微代理記住什麼？",
+        "ko-KR": "마이크로에이전트가 무엇을 기억하기를 원하시나요?",
+        "no": "Hva vil du at mikroagenten din skal huske?",
+        "it": "Cosa vorresti che il tuo microagente ricordasse?",
+        "pt": "O que você gostaria que seu microagente lembrasse?",
+        "es": "¿Qué te gustaría que tu microagente recordara?",
+        "ar": "ماذا تريد أن يتذكر وكيلك المصغر؟",
+        "fr": "Que souhaitez-vous que votre micro-agent se souvienne ?",
+        "tr": "Mikro ajanınızın neyi hatırlamasını istersiniz?",
+        "de": "Was soll sich Ihr Microagent merken?",
+        "uk": "Що ви хочете, щоб ваш мікроагент запам'ятав?"
+    },
+    "MICROAGENT$ADD_TRIGGERS": {
+        "en": "Add triggers for the microagent",
+        "ja": "マイクロエージェントのトリガーを追加",
+        "zh-CN": "为微代理添加触发器",
+        "zh-TW": "為微代理添加觸發器",
+        "ko-KR": "마이크로에이전트의 트리거 추가",
+        "no": "Legg til utløsere for mikroagenten",
+        "it": "Aggiungi trigger per il microagente",
+        "pt": "Adicionar gatilhos para o microagente",
+        "es": "Añadir disparadores para el microagente",
+        "ar": "إضافة مشغلات للوكيل المصغر",
+        "fr": "Ajouter des déclencheurs pour le micro-agent",
+        "tr": "Mikro ajan için tetikleyiciler ekleyin",
+        "de": "Auslöser für den Microagent hinzufügen",
+        "uk": "Додати тригери для мікроагента"
+    },
+    "MICROAGENT$WAIT_FOR_RUNTIME": {
+        "en": "Please wait for the runtime to be active.",
+        "ja": "ランタイムがアクティブになるまでお待ちください。",
+        "zh-CN": "请等待运行时激活。",
+        "zh-TW": "請等待運行時激活。",
+        "ko-KR": "런타임이 활성화될 때까지 기다려주세요.",
+        "no": "Vennligst vent til kjøretidsmiljøet er aktivt.",
+        "it": "Attendere che il runtime sia attivo.",
+        "pt": "Aguarde até que o tempo de execução esteja ativo.",
+        "es": "Por favor, espere a que el tiempo de ejecución esté activo.",
+        "ar": "يرجى الانتظار حتى يصبح وقت التشغيل نشطًا.",
+        "fr": "Veuillez attendre que le runtime soit actif.",
+        "tr": "Lütfen çalışma zamanının aktif olmasını bekleyin.",
+        "de": "Bitte warten Sie, bis die Laufzeitumgebung aktiv ist.",
+        "uk": "Будь ласка, зачекайте, поки середовище виконання стане активним."
+    },
+    "MICROAGENT$ADDING_CONTEXT": {
+        "en": "OpenHands is adding this new context to your respository. We'll let you know when the pull request is ready.",
+        "ja": "OpenHandsはこの新しいコンテキストをあなたのリポジトリに追加しています。プルリクエストの準備ができたらお知らせします。",
+        "zh-CN": "OpenHands正在将此新上下文添加到您的存储库中。拉取请求准备好后，我们会通知您。",
+        "zh-TW": "OpenHands正在將此新上下文添加到您的存儲庫中。拉取請求準備好後，我們會通知您。",
+        "ko-KR": "OpenHands가 이 새로운 컨텍스트를 저장소에 추가하고 있습니다. 풀 리퀘스트가 준비되면 알려드리겠습니다.",
+        "no": "OpenHands legger til denne nye konteksten i ditt repository. Vi gir deg beskjed når pull-forespørselen er klar.",
+        "it": "OpenHands sta aggiungendo questo nuovo contesto al tuo repository. Ti faremo sapere quando la pull request sarà pronta.",
+        "pt": "OpenHands está adicionando este novo contexto ao seu repositório. Avisaremos quando o pull request estiver pronto.",
+        "es": "OpenHands está añadiendo este nuevo contexto a tu repositorio. Te avisaremos cuando la solicitud de extracción esté lista.",
+        "ar": "يقوم OpenHands بإضافة هذا السياق الجديد إلى مستودعك. سنعلمك عندما يكون طلب السحب جاهزًا.",
+        "fr": "OpenHands ajoute ce nouveau contexte à votre dépôt. Nous vous informerons lorsque la pull request sera prête.",
+        "tr": "OpenHands bu yeni bağlamı deponuza ekliyor. Çekme isteği hazır olduğunda size haber vereceğiz.",
+        "de": "OpenHands fügt diesen neuen Kontext zu Ihrem Repository hinzu. Wir informieren Sie, wenn der Pull Request bereit ist.",
+        "uk": "OpenHands додає цей новий контекст до вашого репозиторію. Ми повідомимо вас, коли запит на витягування буде готовий."
+    },
+    "MICROAGENT$VIEW_CONVERSATION": {
+        "en": "View Conversation",
+        "ja": "会話を表示",
+        "zh-CN": "查看对话",
+        "zh-TW": "查看對話",
+        "ko-KR": "대화 보기",
+        "no": "Vis samtale",
+        "it": "Visualizza conversazione",
+        "pt": "Ver conversa",
+        "es": "Ver conversación",
+        "ar": "عرض المحادثة",
+        "fr": "Voir la conversation",
+        "tr": "Konuşmayı Görüntüle",
+        "de": "Konversation anzeigen",
+        "uk": "Переглянути розмову"
+    },
+    "MICROAGENT$SUCCESS_PR_READY": {
+        "en": "Success! Your microagent pull request is ready.",
+        "ja": "成功！マイクロエージェントのプルリクエストの準備ができました。",
+        "zh-CN": "成功！您的微代理拉取请求已准备就绪。",
+        "zh-TW": "成功！您的微代理拉取請求已準備就緒。",
+        "ko-KR": "성공! 마이크로에이전트 풀 리퀘스트가 준비되었습니다.",
+        "no": "Suksess! Din mikroagent pull request er klar.",
+        "it": "Successo! La tua pull request del microagente è pronta.",
+        "pt": "Sucesso! Seu pull request de microagente está pronto.",
+        "es": "¡Éxito! Tu solicitud de extracción de microagente está lista.",
+        "ar": "نجاح! طلب سحب الوكيل المصغر الخاص بك جاهز.",
+        "fr": "Succès ! Votre pull request de micro-agent est prête.",
+        "tr": "Başarılı! Mikro ajan çekme isteğiniz hazır.",
+        "de": "Erfolg! Ihr Microagent Pull Request ist bereit.",
+        "uk": "Успіх! Ваш запит на витягування мікроагента готовий."
+    },
+    "MICROAGENT$STATUS_CREATING": {
+        "en": "Modifying microagent...",
+        "ja": "マイクロエージェントを変更中...",
+        "zh-CN": "正在修改微代理...",
+        "zh-TW": "正在修改微代理...",
+        "ko-KR": "마이크로에이전트 수정 중...",
+        "no": "Endrer mikroagent...",
+        "it": "Modifica del microagente in corso...",
+        "pt": "Modificando microagente...",
+        "es": "Modificando microagente...",
+        "ar": "تعديل الوكيل المصغر...",
+        "fr": "Modification du micro-agent en cours...",
+        "tr": "Mikro ajan değiştiriliyor...",
+        "de": "Microagent wird geändert...",
+        "uk": "Зміна мікроагента..."
+    },
+    "MICROAGENT$STATUS_COMPLETED": {
+        "en": "View microagent update",
+        "ja": "マイクロエージェントの更新を表示",
+        "zh-CN": "查看微代理更新",
+        "zh-TW": "查看微代理更新",
+        "ko-KR": "마이크로에이전트 업데이트 보기",
+        "no": "Vis mikroagent oppdatering",
+        "it": "Visualizza aggiornamento microagente",
+        "pt": "Ver atualização do microagente",
+        "es": "Ver actualización del microagente",
+        "ar": "عرض تحديث الوكيل المصغر",
+        "fr": "Voir la mise à jour du micro-agent",
+        "tr": "Mikro ajan güncellemesini görüntüle",
+        "de": "Microagent-Update anzeigen",
+        "uk": "Переглянути оновлення мікроагента"
+    },
+    "MICROAGENT$STATUS_ERROR": {
+        "en": "Microagent encountered an error",
+        "ja": "マイクロエージェントでエラーが発生しました",
+        "zh-CN": "微代理遇到错误",
+        "zh-TW": "微代理遇到錯誤",
+        "ko-KR": "마이크로에이전트에서 오류가 발생했습니다",
+        "no": "Mikroagent støtte på en feil",
+        "it": "Il microagente ha riscontrato un errore",
+        "pt": "Microagente encontrou um erro",
+        "es": "El microagente encontró un error",
+        "ar": "واجه الوكيل المصغر خطأ",
+        "fr": "Le micro-agent a rencontré une erreur",
+        "tr": "Mikro ajan bir hatayla karşılaştı",
+        "de": "Microagent ist auf einen Fehler gestoßen",
+        "uk": "Мікроагент зіткнувся з помилкою"
+    },
+    "MICROAGENT$VIEW_YOUR_PR": {
+        "en": "View your PR",
+        "ja": "PRを表示",
+        "zh-CN": "查看您的PR",
+        "zh-TW": "查看您的PR",
+        "ko-KR": "PR 보기",
+        "no": "Se din PR",
+        "it": "Visualizza la tua PR",
+        "pt": "Ver seu PR",
+        "es": "Ver tu PR",
+        "ar": "عرض طلب السحب الخاص بك",
+        "fr": "Voir votre PR",
+        "tr": "PR'ınızı görüntüleyin",
+        "de": "Ihre PR anzeigen",
+        "uk": "Переглянути ваш PR"
+    },
+    "MICROAGENT$DESCRIBE_WHAT_TO_ADD": {
+        "en": "Describe what you want to add to the Microagent...",
+        "ja": "マイクロエージェントに追加したい内容を説明してください...",
+        "zh-CN": "描述您想添加到微代理的内容...",
+        "zh-TW": "描述您想添加到微代理的內容...",
+        "ko-KR": "마이크로에이전트에 추가하고 싶은 내용을 설명하세요...",
+        "no": "Beskriv hva du vil legge til i mikroagenten...",
+        "it": "Descrivi cosa vuoi aggiungere al microagente...",
+        "pt": "Descreva o que você deseja adicionar ao microagente...",
+        "es": "Describe lo que quieres añadir al microagente...",
+        "ar": "صف ما تريد إضافته إلى الوكيل المصغر...",
+        "fr": "Décrivez ce que vous souhaitez ajouter au micro-agent...",
+        "tr": "Mikro ajana eklemek istediğinizi açıklayın...",
+        "de": "Beschreiben Sie, was Sie zum Microagent hinzufügen möchten...",
+        "uk": "Опишіть, що ви хочете додати до мікроагента..."
+    },
+    "MICROAGENT$SELECT_FILE_OR_CUSTOM": {
+        "en": "Select a microagent file or enter a custom value",
+        "ja": "マイクロエージェントファイルを選択するか、カスタム値を入力してください",
+        "zh-CN": "选择微代理文件或输入自定义值",
+        "zh-TW": "選擇微代理文件或輸入自定義值",
+        "ko-KR": "마이크로에이전트 파일을 선택하거나 사용자 지정 값을 입력하세요",
+        "no": "Velg en mikroagent-fil eller skriv inn en egendefinert verdi",
+        "it": "Seleziona un file microagente o inserisci un valore personalizzato",
+        "pt": "Selecione um arquivo de microagente ou insira um valor personalizado",
+        "es": "Selecciona un archivo de microagente o introduce un valor personalizado",
+        "ar": "حدد ملف وكيل مصغر أو أدخل قيمة مخصصة",
+        "fr": "Sélectionnez un fichier micro-agent ou entrez une valeur personnalisée",
+        "tr": "Bir mikro ajan dosyası seçin veya özel bir değer girin",
+        "de": "Wählen Sie eine Microagent-Datei aus oder geben Sie einen benutzerdefinierten Wert ein",
+        "uk": "Виберіть файл мікроагента або введіть власне значення"
+    },
+    "MICROAGENT$TYPE_TRIGGER_SPACE": {
+        "en": "Type a trigger and press Space to add it",
+        "ja": "トリガーを入力し、スペースキーを押して追加してください",
+        "zh-CN": "输入触发器并按空格键添加",
+        "zh-TW": "輸入觸發器並按空格鍵添加",
+        "ko-KR": "트리거를 입력하고 스페이스바를 눌러 추가하세요",
+        "no": "Skriv inn en utløser og trykk mellomrom for å legge den til",
+        "it": "Digita un trigger e premi Spazio per aggiungerlo",
+        "pt": "Digite um gatilho e pressione Espaço para adicioná-lo",
+        "es": "Escribe un disparador y pulsa Espacio para añadirlo",
+        "ar": "اكتب مشغلًا واضغط على المسافة لإضافته",
+        "fr": "Tapez un déclencheur et appuyez sur Espace pour l'ajouter",
+        "tr": "Bir tetikleyici yazın ve eklemek için Boşluk tuşuna basın",
+        "de": "Geben Sie einen Auslöser ein und drücken Sie die Leertaste, um ihn hinzuzufügen",
+        "uk": "Введіть тригер і натисніть пробіл, щоб додати його"
+    },
+    "MICROAGENT$LOADING_PROMPT": {
+        "en": "Loading prompt...",
+        "ja": "プロンプトを読み込み中...",
+        "zh-CN": "加载提示中...",
+        "zh-TW": "加載提示中...",
+        "ko-KR": "프롬프트 로딩 중...",
+        "no": "Laster inn prompt...",
+        "it": "Caricamento prompt...",
+        "pt": "Carregando prompt...",
+        "es": "Cargando prompt...",
+        "ar": "جاري تحميل المطالبة...",
+        "fr": "Chargement du prompt...",
+        "tr": "İstem yükleniyor...",
+        "de": "Prompt wird geladen...",
+        "uk": "Завантаження підказки..."
+    },
+    "MICROAGENT$CANCEL": {
+        "en": "Cancel",
+        "ja": "キャンセル",
+        "zh-CN": "取消",
+        "zh-TW": "取消",
+        "ko-KR": "취소",
+        "no": "Avbryt",
+        "it": "Annulla",
+        "pt": "Cancelar",
+        "es": "Cancelar",
+        "ar": "إلغاء",
+        "fr": "Annuler",
+        "tr": "İptal",
+        "de": "Abbrechen",
+        "uk": "Скасувати"
+    },
+    "MICROAGENT$LAUNCH": {
+        "en": "Launch",
+        "ja": "起動",
+        "zh-CN": "启动",
+        "zh-TW": "啟動",
+        "ko-KR": "시작",
+        "no": "Start",
+        "it": "Avvia",
+        "pt": "Iniciar",
+        "es": "Iniciar",
+        "ar": "إطلاق",
+        "fr": "Lancer",
+        "tr": "Başlat",
+        "de": "Starten",
+        "uk": "Запустити"
+    },
     "STATUS$WEBSOCKET_CLOSED": {
         "en": "The WebSocket connection was closed.",
         "ja": "WebSocket接続が閉じられました。",
@@ -4047,7 +4383,7 @@
         "ja": "設定を更新しました",
         "uk": "Налаштування оновлено"
     },
-     "CHAT_INTERFACE$AUGMENTED_PROMPT_FILES_TITLE":{
+    "CHAT_INTERFACE$AUGMENTED_PROMPT_FILES_TITLE": {
         "en": "NEW FILES ADDED",
         "de": "NEUE DATEIEN HINZUGEFÜGT",
         "zh-CN": "已添加新文件",
@@ -4061,8 +4397,8 @@
         "fr": "NOUVEAUX FICHIERS AJOUTÉS",
         "tr": "YENİ DOSYALAR EKLENDİ",
         "ja": "新しいファイルが追加されました",
-         "uk": "ДОДАНО НОВІ ФАЙЛИ"
-     },
+        "uk": "ДОДАНО НОВІ ФАЙЛИ"
+    },
     "CHAT_INTERFACE$DISCONNECTED": {
         "en": "Disconnected",
         "ja": "切断されました",
@@ -5551,6 +5887,54 @@
         "ja": "APIキーを入力",
         "uk": "Введіть свій ключ API."
     },
+    "SETTINGS$LLM_API_KEY": {
+        "en": "LLM API Key",
+        "zh-CN": "LLM API 密钥",
+        "zh-TW": "LLM API 金鑰",
+        "de": "LLM API Schlüssel",
+        "ko-KR": "LLM API 키",
+        "no": "LLM API-nøkkel",
+        "it": "Chiave API LLM",
+        "pt": "Chave API LLM",
+        "es": "Clave API LLM",
+        "ar": "مفتاح API للنماذج اللغوية الكبيرة",
+        "fr": "Clé API LLM",
+        "tr": "LLM API Anahtarı",
+        "ja": "LLM APIキー",
+        "uk": "Ключ API LLM"
+    },
+    "SETTINGS$LLM_API_KEY_DESCRIPTION": {
+        "en": "You can use this API Key as the LLM API Key for OpenHands open-source and CLI. It will incur cost on your OpenHands Cloud account. Do NOT share this key elsewhere.",
+        "zh-CN": "您可以将此 API 密钥用作 OpenHands 开源和 CLI 的 LLM API 密钥。它将在您的 OpenHands Cloud 账户上产生费用。请勿在其他地方共享此密钥。",
+        "zh-TW": "您可以將此 API 金鑰用作 OpenHands 開源和 CLI 的 LLM API 金鑰。它將在您的 OpenHands Cloud 帳戶上產生費用。請勿在其他地方共享此金鑰。",
+        "de": "Sie können diesen API-Schlüssel als LLM-API-Schlüssel für OpenHands Open-Source und CLI verwenden. Es fallen Kosten für Ihr OpenHands Cloud-Konto an. Teilen Sie diesen Schlüssel NICHT anderswo.",
+        "ko-KR": "이 API 키를 OpenHands 오픈소스 및 CLI용 LLM API 키로 사용할 수 있습니다. OpenHands Cloud 계정에 비용이 청구됩니다. 이 키를 다른 곳에서 공유하지 마세요.",
+        "no": "Du kan bruke denne API-nøkkelen som LLM API-nøkkel for OpenHands åpen kildekode og CLI. Det vil påløpe kostnader på din OpenHands Cloud-konto. IKKE del denne nøkkelen andre steder.",
+        "it": "Puoi utilizzare questa chiave API come chiave API LLM per OpenHands open-source e CLI. Comporterà costi sul tuo account OpenHands Cloud. NON condividere questa chiave altrove.",
+        "pt": "Você pode usar esta Chave API como a Chave API LLM para OpenHands de código aberto e CLI. Isso incorrerá em custos na sua conta OpenHands Cloud. NÃO compartilhe esta chave em outros lugares.",
+        "es": "Puede usar esta Clave API como la Clave API LLM para OpenHands de código abierto y CLI. Incurrirá en costos en su cuenta de OpenHands Cloud. NO comparta esta clave en ningún otro lugar.",
+        "ar": "يمكنك استخدام مفتاح API هذا كمفتاح API للنماذج اللغوية الكبيرة لـ OpenHands مفتوح المصدر وواجهة سطر الأوامر. سيتكبد تكلفة على حساب OpenHands Cloud الخاص بك. لا تشارك هذا المفتاح في أي مكان آخر.",
+        "fr": "Vous pouvez utiliser cette clé API comme clé API LLM pour OpenHands open-source et CLI. Cela entraînera des coûts sur votre compte OpenHands Cloud. NE partagez PAS cette clé ailleurs.",
+        "tr": "Bu API Anahtarını, OpenHands açık kaynak ve CLI için LLM API Anahtarı olarak kullanabilirsiniz. OpenHands Cloud hesabınızda maliyet oluşturacaktır. Bu anahtarı başka yerlerde paylaşmayın.",
+        "ja": "このAPIキーをOpenHandsオープンソースおよびCLIのLLM APIキーとして使用できます。OpenHands Cloudアカウントに費用が発生します。このキーを他の場所で共有しないでください。",
+        "uk": "Ви можете використовувати цей ключ API як ключ API LLM для OpenHands з відкритим кодом та CLI. Це призведе до витрат на вашому обліковому записі OpenHands Cloud. НЕ діліться цим ключем деінде."
+    },
+    "SETTINGS$REFRESH_LLM_API_KEY": {
+        "en": "Refresh API Key",
+        "zh-CN": "刷新 API 密钥",
+        "zh-TW": "刷新 API 金鑰",
+        "de": "API-Schlüssel aktualisieren",
+        "ko-KR": "API 키 새로고침",
+        "no": "Oppdater API-nøkkel",
+        "it": "Aggiorna chiave API",
+        "pt": "Atualizar chave API",
+        "es": "Actualizar clave API",
+        "ar": "تحديث مفتاح API",
+        "fr": "Actualiser la clé API",
+        "tr": "API Anahtarını Yenile",
+        "ja": "APIキーを更新",
+        "uk": "Оновити ключ API"
+    },
     "SETTINGS$CONFIRMATION_MODE": {
         "en": "Enable Confirmation Mode",
         "de": "Bestätigungsmodus aktivieren",
@@ -5615,7 +5999,7 @@
         "ja": "セキュリティアナライザー",
         "uk": "Увімкнути аналізатор безпеки"
     },
-    "SETTINGS$SECURITY_ANALYZER_PLACEHOLDER":{
+    "SETTINGS$SECURITY_ANALYZER_PLACEHOLDER": {
         "en": "Select a security analyzer…",
         "de": "Wählen Sie einen Sicherheitsanalysator aus…",
         "zh-CN": "选择一个安全分析器…",
@@ -5743,6 +6127,54 @@
         "de": "API-Schlüssel ermöglichen es Ihnen, sich programmatisch bei der OpenHands-API zu authentifizieren. Halten Sie Ihre API-Schlüssel sicher; jeder mit Ihrem API-Schlüssel kann auf Ihr Konto zugreifen. Weitere Informationen zur Verwendung der API finden Sie in unserer <a>API-Dokumentation</a>.",
         "uk": "Ключі API дозволяють вам програмно автентифікуватися за допомогою API OpenHands. Зберігайте свої ключі API в безпеці; будь-хто, хто має ваш ключ API, може отримати доступ до вашого облікового запису. Для отримання додаткової інформації про використання API, перегляньте нашу <a>документацію API</a>."
     },
+    "SETTINGS$OPENHANDS_API_KEY_HELP": {
+        "en": "You can find your OpenHands API Key in the <a>API Keys</a> tab of OpenHands Cloud.",
+        "ja": "OpenHands APIキーはOpenHands Cloudの<a>APIキー</a>タブで確認できます。",
+        "zh-CN": "您可以在OpenHands Cloud的<a>API密钥</a>标签页中找到您的OpenHands API密钥。",
+        "zh-TW": "您可以在OpenHands Cloud的<a>API密鑰</a>標籤頁中找到您的OpenHands API密鑰。",
+        "ko-KR": "OpenHands API 키는 OpenHands Cloud의 <a>API 키</a> 탭에서 찾을 수 있습니다.",
+        "no": "Du kan finne din OpenHands API-nøkkel i <a>API-nøkler</a>-fanen i OpenHands Cloud.",
+        "it": "Puoi trovare la tua chiave API OpenHands nella scheda <a>Chiavi API</a> di OpenHands Cloud.",
+        "pt": "Você pode encontrar sua chave de API OpenHands na guia <a>Chaves de API</a> do OpenHands Cloud.",
+        "es": "Puede encontrar su clave API de OpenHands en la pestaña <a>Claves API</a> de OpenHands Cloud.",
+        "ar": "يمكنك العثور على مفتاح API الخاص بـ OpenHands في علامة التبويب <a>مفاتيح API</a> في OpenHands Cloud.",
+        "fr": "Vous pouvez trouver votre clé API OpenHands dans l'onglet <a>Clés API</a> d'OpenHands Cloud.",
+        "tr": "OpenHands API Anahtarınızı OpenHands Cloud'un <a>API Anahtarları</a> sekmesinde bulabilirsiniz.",
+        "de": "Sie finden Ihren OpenHands API-Schlüssel im Tab <a>API-Schlüssel</a> von OpenHands Cloud.",
+        "uk": "Ви можете знайти свій ключ API OpenHands у вкладці <a>Ключі API</a> OpenHands Cloud."
+    },
+    "SETTINGS$OPENHANDS_API_KEY_HELP_TEXT": {
+        "en": "You can find your OpenHands API Key in the",
+        "ja": "OpenHands APIキーは",
+        "zh-CN": "您可以在",
+        "zh-TW": "您可以在",
+        "ko-KR": "OpenHands API 키는",
+        "no": "Du kan finne din OpenHands API-nøkkel i",
+        "it": "Puoi trovare la tua chiave API OpenHands nella",
+        "pt": "Você pode encontrar sua chave de API OpenHands na",
+        "es": "Puede encontrar su clave API de OpenHands en la",
+        "ar": "يمكنك العثور على مفتاح API الخاص بـ OpenHands في",
+        "fr": "Vous pouvez trouver votre clé API OpenHands dans",
+        "tr": "OpenHands API Anahtarınızı",
+        "de": "Sie finden Ihren OpenHands API-Schlüssel im",
+        "uk": "Ви можете знайти свій ключ API OpenHands у"
+    },
+    "SETTINGS$OPENHANDS_API_KEY_HELP_SUFFIX": {
+        "en": "tab of OpenHands Cloud.",
+        "ja": "タブで確認できます。",
+        "zh-CN": "标签页中找到您的OpenHands API密钥。",
+        "zh-TW": "標籤頁中找到您的OpenHands API密鑰。",
+        "ko-KR": "탭에서 찾을 수 있습니다.",
+        "no": "-fanen i OpenHands Cloud.",
+        "it": "scheda di OpenHands Cloud.",
+        "pt": "guia do OpenHands Cloud.",
+        "es": "pestaña de OpenHands Cloud.",
+        "ar": "علامة التبويب في OpenHands Cloud.",
+        "fr": "l'onglet d'OpenHands Cloud.",
+        "tr": "OpenHands Cloud'un sekmesinde bulabilirsiniz.",
+        "de": "Tab von OpenHands Cloud.",
+        "uk": "вкладці OpenHands Cloud."
+    },
     "SETTINGS$CREATE_API_KEY": {
         "en": "Create API Key",
         "uk": "Створити API ключ",
@@ -5967,6 +6399,22 @@
         "es": "Clave API copiada al portapapeles",
         "tr": "API anahtarı panoya kopyalandı"
     },
+    "SETTINGS$API_KEY_REFRESHED": {
+        "en": "API key refreshed successfully",
+        "uk": "Ключ API успішно оновлено",
+        "ja": "APIキーが正常に更新されました",
+        "zh-CN": "API密钥已成功刷新",
+        "zh-TW": "API金鑰已成功刷新",
+        "ko-KR": "API 키가 성공적으로 새로고침되었습니다",
+        "no": "API-nøkkel oppdatert",
+        "ar": "تم تحديث مفتاح API بنجاح",
+        "de": "API-Schlüssel erfolgreich aktualisiert",
+        "fr": "Clé API actualisée avec succès",
+        "it": "Chiave API aggiornata con successo",
+        "pt": "Chave API atualizada com sucesso",
+        "es": "Clave API actualizada con éxito",
+        "tr": "API anahtarı başarıyla yenilendi"
+    },
     "SETTINGS$API_KEY_NAME_PLACEHOLDER": {
         "en": "My API Key",
         "uk": "Мій ключ API",
@@ -10270,5 +10718,181 @@
         "tr": "Gizli anahtarları yönetmek için bir Git sağlayıcısına bağlan",
         "de": "Git-Anbieter verbinden, um Geheimnisse zu verwalten",
         "uk": "Підключити провайдера Git для управління секретами"
+    },
+    "SETTINGS$OPENHANDS_API_KEYS": {
+        "en": "OpenHands API Keys",
+        "ja": "OpenHands APIキー",
+        "zh-CN": "OpenHands API密钥",
+        "zh-TW": "OpenHands API密鑰",
+        "ko-KR": "OpenHands API 키",
+        "no": "OpenHands API-nøkler",
+        "it": "Chiavi API OpenHands",
+        "pt": "Chaves de API OpenHands",
+        "es": "Claves API de OpenHands",
+        "ar": "مفاتيح API لـ OpenHands",
+        "fr": "Clés API OpenHands",
+        "tr": "OpenHands API Anahtarları",
+        "de": "OpenHands API-Schlüssel",
+        "uk": "API-ключі OpenHands"
+    },
+    "CONVERSATION$BUDGET_USAGE_FORMAT": {
+        "en": "${currentCost} / ${maxBudget} ({usagePercentage}% {used})",
+        "ja": "${currentCost} / ${maxBudget} ({usagePercentage}% {used})",
+        "zh-CN": "${currentCost} / ${maxBudget} ({usagePercentage}% {used})",
+        "zh-TW": "${currentCost} / ${maxBudget} ({usagePercentage}% {used})",
+        "ko-KR": "${currentCost} / ${maxBudget} ({usagePercentage}% {used})",
+        "no": "${currentCost} / ${maxBudget} ({usagePercentage}% {used})",
+        "it": "${currentCost} / ${maxBudget} ({usagePercentage}% {used})",
+        "pt": "${currentCost} / ${maxBudget} ({usagePercentage}% {used})",
+        "es": "${currentCost} / ${maxBudget} ({usagePercentage}% {used})",
+        "ar": "${currentCost} / ${maxBudget} ({usagePercentage}% {used})",
+        "fr": "${currentCost} / ${maxBudget} ({usagePercentage}% {used})",
+        "tr": "${currentCost} / ${maxBudget} ({usagePercentage}% {used})",
+        "de": "${currentCost} / ${maxBudget} ({usagePercentage}% {used})",
+        "uk": "${currentCost} / ${maxBudget} ({usagePercentage}% {used})"
+    },
+    "CONVERSATION$CACHE_HIT": {
+        "en": "Cache Hit",
+        "ja": "キャッシュヒット",
+        "zh-CN": "缓存命中",
+        "zh-TW": "緩存命中",
+        "ko-KR": "캐시 히트",
+        "no": "Cache Treff",
+        "it": "Cache Hit",
+        "pt": "Cache Hit",
+        "es": "Cache Hit",
+        "ar": "إصابة الذاكرة المؤقتة",
+        "fr": "Cache Hit",
+        "tr": "Önbellek İsabeti",
+        "de": "Cache-Treffer",
+        "uk": "Кеш-хіт"
+    },
+    "CONVERSATION$CACHE_WRITE": {
+        "en": "Cache Write",
+        "ja": "キャッシュ書き込み",
+        "zh-CN": "缓存写入",
+        "zh-TW": "緩存寫入",
+        "ko-KR": "캐시 쓰기",
+        "no": "Cache Skriv",
+        "it": "Scrittura Cache",
+        "pt": "Escrita em Cache",
+        "es": "Escritura en Caché",
+        "ar": "كتابة الذاكرة المؤقتة",
+        "fr": "Écriture Cache",
+        "tr": "Önbellek Yazma",
+        "de": "Cache-Schreiben",
+        "uk": "Запис у кеш"
+    },
+    "FEEDBACK$STAR_RATING": {
+        "en": "Star Rating",
+        "ja": "星評価",
+        "zh-CN": "星级评分",
+        "zh-TW": "星級評分",
+        "ko-KR": "별점",
+        "no": "Stjerne Vurdering",
+        "it": "Valutazione a Stelle",
+        "pt": "Avaliação por Estrelas",
+        "es": "Calificación por Estrellas",
+        "ar": "تقييم النجوم",
+        "fr": "Évaluation par Étoiles",
+        "tr": "Yıldız Değerlendirmesi",
+        "de": "Sternebewertung",
+        "uk": "Зіркова оцінка"
+    },
+    "BUTTON$CONFIRM": {
+        "en": "Confirm",
+        "ja": "確認",
+        "zh-CN": "确认",
+        "zh-TW": "確認",
+        "ko-KR": "확인",
+        "no": "Bekreft",
+        "it": "Conferma",
+        "pt": "Confirmar",
+        "es": "Confirmar",
+        "ar": "تأكيد",
+        "fr": "Confirmer",
+        "tr": "Onayla",
+        "de": "Bestätigen",
+        "uk": "Підтвердити"
+    },
+    "FORM$VALUE": {
+        "en": "Value",
+        "ja": "値",
+        "zh-CN": "值",
+        "zh-TW": "值",
+        "ko-KR": "값",
+        "no": "Verdi",
+        "it": "Valore",
+        "pt": "Valor",
+        "es": "Valor",
+        "ar": "قيمة",
+        "fr": "Valeur",
+        "tr": "Değer",
+        "de": "Wert",
+        "uk": "Значення"
+    },
+    "FORM$DESCRIPTION": {
+        "en": "Description",
+        "ja": "説明",
+        "zh-CN": "描述",
+        "zh-TW": "描述",
+        "ko-KR": "설명",
+        "no": "Beskrivelse",
+        "it": "Descrizione",
+        "pt": "Descrição",
+        "es": "Descripción",
+        "ar": "وصف",
+        "fr": "Description",
+        "tr": "Açıklama",
+        "de": "Beschreibung",
+        "uk": "Опис"
+    },
+    "COMMON$OPTIONAL": {
+        "en": "Optional",
+        "ja": "任意",
+        "zh-CN": "可选",
+        "zh-TW": "可選",
+        "ko-KR": "선택 사항",
+        "no": "Valgfritt",
+        "it": "Opzionale",
+        "pt": "Opcional",
+        "es": "Opcional",
+        "ar": "اختياري",
+        "fr": "Optionnel",
+        "tr": "İsteğe Bağlı",
+        "de": "Optional",
+        "uk": "Необов'язково"
+    },
+    "BROWSER$SERVER_MESSAGE": {
+        "en": "Server Message",
+        "ja": "サーバーメッセージ",
+        "zh-CN": "服务器消息",
+        "zh-TW": "伺服器訊息",
+        "ko-KR": "서버 메시지",
+        "no": "Servermelding",
+        "it": "Messaggio del Server",
+        "pt": "Mensagem do Servidor",
+        "es": "Mensaje del Servidor",
+        "ar": "رسالة الخادم",
+        "fr": "Message du Serveur",
+        "tr": "Sunucu Mesajı",
+        "de": "Server-Nachricht",
+        "uk": "Повідомлення сервера"
+    },
+    "API$NO_KEY_AVAILABLE": {
+        "en": "No API key available",
+        "ja": "APIキーが利用できません",
+        "zh-CN": "没有可用的API密钥",
+        "zh-TW": "沒有可用的API密鑰",
+        "ko-KR": "사용 가능한 API 키 없음",
+        "no": "Ingen API-nøkkel tilgjengelig",
+        "it": "Nessuna chiave API disponibile",
+        "pt": "Nenhuma chave API disponível",
+        "es": "No hay clave API disponible",
+        "ar": "لا يوجد مفتاح API متاح",
+        "fr": "Aucune clé API disponible",
+        "tr": "Kullanılabilir API anahtarı yok",
+        "de": "Kein API-Schlüssel verfügbar",
+        "uk": "Немає доступного API-ключа"
     }
 }

frontend/src/icons/memory_icon.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 22.3 18.66">
+  <!-- Generator: Adobe Illustrator 29.5.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 141)  -->
+  <defs>
+    <style>
+      .st0 {
+        stroke-miterlimit: 10;
+      }
+
+      .st0, .st1 {
+        fill: none;
+        stroke: currentColor;
+        stroke-linecap: round;
+        stroke-width: 2px;
+      }
+
+      .st1 {
+        stroke-linejoin: round;
+      }
+    </style>
+  </defs>
+  <path class="st1" d="M15.15,12.54h3.26c1.58,0,2.93-1.29,2.9-2.88-.03-1.53-1.28-2.77-2.82-2.77-.04,0-.08,0-.11,0,.13-.44.16-.92.04-1.43-.27-1.17-1.27-2.05-2.46-2.17-.74-.07-1.43.14-1.97.55,0,0,0-.02,0-.03,0-1.56-1.26-2.82-2.82-2.82s-2.82,1.26-2.82,2.82c0,0,0,.02,0,.03-.54-.4-1.23-.62-1.97-.55-1.19.12-2.19,1-2.46,2.17-.12.5-.09.99.04,1.43-.04,0-.08,0-.11,0-1.56,0-2.82,1.26-2.82,2.82s1.26,2.82,2.82,2.82l1.29.03c.41,0,.74.34.74.75v1.85c0,1.38,1.12,2.5,2.5,2.5h.29c1.44,0,2.6-1.17,2.6-2.6V6.49"/>
+  <polyline class="st0" points="7.97 9.74 11.22 6.49 14.47 9.74"/>
+</svg>

frontend/src/routes/conversation.tsx

@@ -37,6 +37,7 @@ import { transformVSCodeUrl } from "#/utils/vscode-url-helper";
 import OpenHands from "#/api/open-hands";
 import { TabContent } from "#/components/layout/tab-content";
 import { useIsAuthed } from "#/hooks/query/use-is-authed";
+import { ConversationSubscriptionsProvider } from "#/context/conversation-subscriptions-provider";
 import { useUserProviders } from "#/hooks/use-user-providers";
 
 function AppContent() {
@@ -195,23 +196,25 @@ function AppContent() {
 
   return (
     <WsClientProvider conversationId={conversationId}>
-      <EventHandler>
-        <div data-testid="app-route" className="flex flex-col h-full gap-3">
-          <div className="flex h-full overflow-auto">{renderMain()}</div>
+      <ConversationSubscriptionsProvider>
+        <EventHandler>
+          <div data-testid="app-route" className="flex flex-col h-full gap-3">
+            <div className="flex h-full overflow-auto">{renderMain()}</div>
 
-          <Controls
-            setSecurityOpen={onSecurityModalOpen}
-            showSecurityLock={!!settings?.SECURITY_ANALYZER}
-          />
-          {settings && (
-            <Security
-              isOpen={securityModalIsOpen}
-              onOpenChange={onSecurityModalOpenChange}
-              securityAnalyzer={settings.SECURITY_ANALYZER}
+            <Controls
+              setSecurityOpen={onSecurityModalOpen}
+              showSecurityLock={!!settings?.SECURITY_ANALYZER}
             />
-          )}
-        </div>
-      </EventHandler>
+            {settings && (
+              <Security
+                isOpen={securityModalIsOpen}
+                onOpenChange={onSecurityModalOpenChange}
+                securityAnalyzer={settings.SECURITY_ANALYZER}
+              />
+            )}
+          </div>
+        </EventHandler>
+      </ConversationSubscriptionsProvider>
     </WsClientProvider>
   );
 }

frontend/src/routes/home.tsx

@@ -4,14 +4,15 @@ import { HomeHeader } from "#/components/features/home/home-header";
 import { RepoConnector } from "#/components/features/home/repo-connector";
 import { TaskSuggestions } from "#/components/features/home/tasks/task-suggestions";
 import { useUserProviders } from "#/hooks/use-user-providers";
+import { GitRepository } from "#/types/git";
 
 <PrefetchPageLinks page="/conversations/:conversationId" />;
 
 function HomeScreen() {
   const { providers } = useUserProviders();
-  const [selectedRepoTitle, setSelectedRepoTitle] = React.useState<
-    string | null
-  >(null);
+  const [selectedRepo, setSelectedRepo] = React.useState<GitRepository | null>(
+    null,
+  );
 
   const providersAreSet = providers.length > 0;
 
@@ -25,11 +26,9 @@ function HomeScreen() {
       <hr className="border-[#717888]" />
 
       <main className="flex flex-col lg:flex-row justify-between gap-8">
-        <RepoConnector
-          onRepoSelection={(title) => setSelectedRepoTitle(title)}
-        />
+        <RepoConnector onRepoSelection={(repo) => setSelectedRepo(repo)} />
         <hr className="md:hidden border-[#717888]" />
-        {providersAreSet && <TaskSuggestions filterFor={selectedRepoTitle} />}
+        {providersAreSet && <TaskSuggestions filterFor={selectedRepo} />}
       </main>
     </div>
   );

frontend/src/routes/jupyter-tab.tsx

@@ -7,15 +7,36 @@ function Jupyter() {
 
   // This is a hack to prevent the editor from overflowing
   // Should be removed after revising the parent and containers
+  // Use ResizeObserver to properly track parent width changes
   React.useEffect(() => {
+    let resizeObserver: ResizeObserver | null = null;
+
+    resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        // Use contentRect.width for more accurate measurements
+        const { width } = entry.contentRect;
+        if (width > 0) {
+          setParentWidth(width);
+        }
+      }
+    });
+
     if (parentRef.current) {
-      setParentWidth(parentRef.current.offsetWidth);
+      resizeObserver.observe(parentRef.current);
     }
+
+    return () => {
+      resizeObserver?.disconnect();
+    };
   }, []);
 
+  // Provide a fallback width to prevent the editor from being hidden
+  // Use parentWidth if available, otherwise use a large default
+  const maxWidth = parentWidth > 0 ? parentWidth : 9999;
+
   return (
     <div ref={parentRef} className="h-full">
-      <JupyterEditor maxWidth={parentWidth} />
+      <JupyterEditor maxWidth={maxWidth} />
     </div>
   );
 }

frontend/src/routes/llm-settings.tsx

@@ -49,6 +49,11 @@ function LlmSettingsScreen() {
     securityAnalyzer: false,
   });
 
+  // Track the currently selected model to show help text
+  const [currentSelectedModel, setCurrentSelectedModel] = React.useState<
+    string | null
+  >(null);
+
   const modelsAndProviders = organizeModelsAndProviders(
     resources?.models || [],
   );
@@ -74,6 +79,13 @@ function LlmSettingsScreen() {
     else setView("basic");
   }, [settings, resources]);
 
+  // Initialize currentSelectedModel with the current settings
+  React.useEffect(() => {
+    if (settings?.LLM_MODEL) {
+      setCurrentSelectedModel(settings.LLM_MODEL);
+    }
+  }, [settings?.LLM_MODEL]);
+
   const handleSuccessfulMutation = () => {
     displaySuccessToast(t(I18nKey.SETTINGS$SAVED_WARNING));
     setDirtyInputs({
@@ -184,6 +196,9 @@ function LlmSettingsScreen() {
       ...prev,
       model: modelIsDirty,
     }));
+
+    // Track the currently selected model for help text display
+    setCurrentSelectedModel(model);
   };
 
   const handleApiKeyIsDirty = (apiKey: string) => {
@@ -208,6 +223,9 @@ function LlmSettingsScreen() {
       ...prev,
       model: modelIsDirty,
     }));
+
+    // Track the currently selected model for help text display
+    setCurrentSelectedModel(model);
   };
 
   const handleBaseUrlIsDirty = (baseUrl: string) => {
@@ -279,13 +297,25 @@ function LlmSettingsScreen() {
               className="flex flex-col gap-6"
             >
               {!isLoading && !isFetching && (
-                <ModelSelector
-                  models={modelsAndProviders}
-                  currentModel={
-                    settings.LLM_MODEL || "anthropic/claude-sonnet-4-20250514"
-                  }
-                  onChange={handleModelIsDirty}
-                />
+                <>
+                  <ModelSelector
+                    models={modelsAndProviders}
+                    currentModel={
+                      settings.LLM_MODEL || "openhands/claude-sonnet-4-20250514"
+                    }
+                    onChange={handleModelIsDirty}
+                  />
+                  {(settings.LLM_MODEL?.startsWith("openhands/") ||
+                    currentSelectedModel?.startsWith("openhands/")) && (
+                    <HelpLink
+                      testId="openhands-api-key-help"
+                      text={t(I18nKey.SETTINGS$OPENHANDS_API_KEY_HELP_TEXT)}
+                      linkText={t(I18nKey.SETTINGS$NAV_API_KEYS)}
+                      href="https://app.all-hands.dev/settings/api-keys"
+                      suffix={t(I18nKey.SETTINGS$OPENHANDS_API_KEY_HELP_SUFFIX)}
+                    />
+                  )}
+                </>
               )}
 
               <SettingsInput
@@ -345,13 +375,23 @@ function LlmSettingsScreen() {
                 name="llm-custom-model-input"
                 label={t(I18nKey.SETTINGS$CUSTOM_MODEL)}
                 defaultValue={
-                  settings.LLM_MODEL || "anthropic/claude-sonnet-4-20250514"
+                  settings.LLM_MODEL || "openhands/claude-sonnet-4-20250514"
                 }
-                placeholder="anthropic/claude-sonnet-4-20250514"
+                placeholder="openhands/claude-sonnet-4-20250514"
                 type="text"
                 className="w-full max-w-[680px]"
                 onChange={handleCustomModelIsDirty}
               />
+              {(settings.LLM_MODEL?.startsWith("openhands/") ||
+                currentSelectedModel?.startsWith("openhands/")) && (
+                <HelpLink
+                  testId="openhands-api-key-help-2"
+                  text={t(I18nKey.SETTINGS$OPENHANDS_API_KEY_HELP_TEXT)}
+                  linkText={t(I18nKey.SETTINGS$NAV_API_KEYS)}
+                  href="https://app.all-hands.dev/settings/api-keys"
+                  suffix={t(I18nKey.SETTINGS$OPENHANDS_API_KEY_HELP_SUFFIX)}
+                />
+              )}
 
               <SettingsInput
                 testId="base-url-input"

frontend/src/routes/served-tab.tsx

@@ -50,7 +50,7 @@ function ServedApp() {
     return (
       <div className="flex items-center justify-center w-full h-full p-10">
         <span className="text-neutral-400 font-bold">
-          If you tell OpenHands to start a web server, the app will appear here.
+          {t(I18nKey.BROWSER$SERVER_MESSAGE)}
         </span>
       </div>
     );

frontend/src/routes/settings.tsx

@@ -1,55 +1,70 @@
-import { NavLink, Outlet, useLocation, useNavigate } from "react-router";
+import { NavLink, Outlet, redirect } from "react-router";
 import { useTranslation } from "react-i18next";
-import React from "react";
 import SettingsIcon from "#/icons/settings.svg?react";
 import { cn } from "#/utils/utils";
 import { useConfig } from "#/hooks/query/use-config";
 import { I18nKey } from "#/i18n/declaration";
+import { Route } from "./+types/settings";
+import OpenHands from "#/api/open-hands";
+import { queryClient } from "#/query-client-config";
+import { GetConfigResponse } from "#/api/open-hands.types";
 
-function SettingsScreen() {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const { pathname } = useLocation();
-  const { data: config } = useConfig();
+const SAAS_ONLY_PATHS = [
+  "/settings/user",
+  "/settings/billing",
+  "/settings/credits",
+  "/settings/api-keys",
+];
+
+const SAAS_NAV_ITEMS = [
+  { to: "/settings/user", text: "SETTINGS$NAV_USER" },
+  { to: "/settings/integrations", text: "SETTINGS$NAV_INTEGRATIONS" },
+  { to: "/settings/app", text: "SETTINGS$NAV_APPLICATION" },
+  { to: "/settings/billing", text: "SETTINGS$NAV_CREDITS" },
+  { to: "/settings/secrets", text: "SETTINGS$NAV_SECRETS" },
+  { to: "/settings/api-keys", text: "SETTINGS$NAV_API_KEYS" },
+];
+
+const OSS_NAV_ITEMS = [
+  { to: "/settings", text: "SETTINGS$NAV_LLM" },
+  { to: "/settings/mcp", text: "SETTINGS$NAV_MCP" },
+  { to: "/settings/integrations", text: "SETTINGS$NAV_INTEGRATIONS" },
+  { to: "/settings/app", text: "SETTINGS$NAV_APPLICATION" },
+  { to: "/settings/secrets", text: "SETTINGS$NAV_SECRETS" },
+];
+
+export const clientLoader = async ({ request }: Route.ClientLoaderArgs) => {
+  const url = new URL(request.url);
+  const { pathname } = url;
+
+  let config = queryClient.getQueryData<GetConfigResponse>(["config"]);
+  if (!config) {
+    config = await OpenHands.getConfig();
+    queryClient.setQueryData<GetConfigResponse>(["config"], config);
+  }
 
   const isSaas = config?.APP_MODE === "saas";
 
-  const saasNavItems = [
-    { to: "/settings/user", text: t("SETTINGS$NAV_USER") },
-    { to: "/settings/integrations", text: t("SETTINGS$NAV_INTEGRATIONS") },
-    { to: "/settings/app", text: t("SETTINGS$NAV_APPLICATION") },
-    { to: "/settings/billing", text: t("SETTINGS$NAV_CREDITS") },
-    { to: "/settings/secrets", text: t("SETTINGS$NAV_SECRETS") },
-    { to: "/settings/api-keys", text: t("SETTINGS$NAV_API_KEYS") },
-  ];
+  if (isSaas && pathname === "/settings") {
+    // no llm settings in saas mode, so redirect to user settings
+    return redirect("/settings/user");
+  }
 
-  const ossNavItems = [
-    { to: "/settings", text: t("SETTINGS$NAV_LLM") },
-    { to: "/settings/mcp", text: t("SETTINGS$NAV_MCP") },
-    { to: "/settings/integrations", text: t("SETTINGS$NAV_INTEGRATIONS") },
-    { to: "/settings/app", text: t("SETTINGS$NAV_APPLICATION") },
-    { to: "/settings/secrets", text: t("SETTINGS$NAV_SECRETS") },
-  ];
+  if (!isSaas && SAAS_ONLY_PATHS.includes(pathname)) {
+    // if in OSS mode, do not allow access to saas-only paths
+    return redirect("/settings");
+  }
 
-  React.useEffect(() => {
-    if (isSaas) {
-      if (pathname === "/settings") {
-        navigate("/settings/user");
-      }
-    } else {
-      const noEnteringPaths = [
-        "/settings/user",
-        "/settings/billing",
-        "/settings/credits",
-        "/settings/api-keys",
-      ];
-      if (noEnteringPaths.includes(pathname)) {
-        navigate("/settings");
-      }
-    }
-  }, [isSaas, pathname]);
+  return null;
+};
 
-  const navItems = isSaas ? saasNavItems : ossNavItems;
+function SettingsScreen() {
+  const { t } = useTranslation();
+  const { data: config } = useConfig();
+
+  const isSaas = config?.APP_MODE === "saas";
+  // this is used to determine which settings are available in the UI
+  const navItems = isSaas ? SAAS_NAV_ITEMS : OSS_NAV_ITEMS;
 
   return (
     <main
@@ -77,7 +92,7 @@ function SettingsScreen() {
               )
             }
           >
-            <span className="text-[#F9FBFE] text-sm">{text}</span>
+            <span className="text-[#F9FBFE] text-sm">{t(text)}</span>
           </NavLink>
         ))}
       </nav>

frontend/src/test/localization-fix.test.ts

@@ -1,81 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { execSync } from "child_process";
-import path from "path";
-import fs from "fs";
-
-describe("Localization Fix Tests", () => {
-  it("should not find any unlocalized strings in the frontend code", () => {
-    const scriptPath = path.join(
-      __dirname,
-      "../../scripts/check-unlocalized-strings.cjs",
-    );
-
-    // Run the localization check script
-    const result = execSync(`node ${scriptPath}`, {
-      cwd: path.join(__dirname, "../.."),
-      encoding: "utf8",
-    });
-
-    // The script should output success message and exit with code 0
-    expect(result).toContain(
-      "✅ No unlocalized strings found in frontend code.",
-    );
-  });
-
-  it("should properly detect user-facing attributes like placeholder, alt, and aria-label", () => {
-    // This test verifies that our fix to include placeholder, alt, and aria-label
-    // attributes in the localization check is working correctly by testing the regex patterns
-
-    const scriptPath = path.join(
-      __dirname,
-      "../../scripts/check-unlocalized-strings.cjs",
-    );
-    const scriptContent = fs.readFileSync(scriptPath, "utf8");
-
-    // Verify that these attributes are now being checked for localization
-    // by ensuring they're not excluded from text extraction
-    const nonTextAttributesMatch = scriptContent.match(
-      /const NON_TEXT_ATTRIBUTES = \[(.*?)\]/s,
-    );
-    expect(nonTextAttributesMatch).toBeTruthy();
-
-    const nonTextAttributes = nonTextAttributesMatch![1];
-    expect(nonTextAttributes).not.toContain('"placeholder"');
-    expect(nonTextAttributes).not.toContain('"alt"');
-    expect(nonTextAttributes).not.toContain('"aria-label"');
-
-    // Verify that the script contains the correct attributes that should be excluded
-    expect(nonTextAttributes).toContain('"className"');
-    expect(nonTextAttributes).toContain('"testId"');
-    expect(nonTextAttributes).toContain('"href"');
-  });
-
-  it("should not incorrectly flag CSS units as unlocalized strings", () => {
-    // This test verifies that our fix to the CSS units regex pattern
-    // prevents false positives like "Suggested Tasks" being flagged
-
-    const testStrings = [
-      "Suggested Tasks",
-      "No tasks available",
-      "Select a branch",
-      "Select a repo",
-      "Custom Models",
-      "API Keys",
-      "Git Settings",
-    ];
-
-    // These strings should not be flagged as CSS units
-    const cssUnitsPattern =
-      /\b\d+(px|rem|em|vh|vw|vmin|vmax|ch|ex|fr|deg|rad|turn|grad|ms|s)$|^(px|rem|em|vh|vw|vmin|vmax|ch|ex|fr|deg|rad|turn|grad|ms|s)$/;
-
-    testStrings.forEach((str) => {
-      expect(cssUnitsPattern.test(str)).toBe(false);
-    });
-
-    // But actual CSS units should still be detected
-    const actualCssUnits = ["10px", "2rem", "100vh", "px", "rem", "s"];
-    actualCssUnits.forEach((unit) => {
-      expect(cssUnitsPattern.test(unit)).toBe(true);
-    });
-  });
-});

frontend/src/types/agent-state.tsx

@@ -15,6 +15,7 @@ export enum AgentState {
 }
 
 export const RUNTIME_INACTIVE_STATES = [
+  AgentState.INIT,
   AgentState.LOADING,
   AgentState.STOPPED,
   AgentState.ERROR,

frontend/src/types/core/guards.ts

@@ -5,6 +5,7 @@ import {
   OpenHandsAction,
   SystemMessageAction,
   CommandAction,
+  FinishAction,
 } from "./actions";
 import {
   AgentStateChangeObservation,
@@ -15,6 +16,16 @@ import {
 } from "./observations";
 import { StatusUpdate } from "./variances";
 
+export const isOpenHandsEvent = (
+  event: unknown,
+): event is OpenHandsParsedEvent =>
+  typeof event === "object" &&
+  event !== null &&
+  "id" in event &&
+  "source" in event &&
+  "message" in event &&
+  "timestamp" in event;
+
 export const isOpenHandsAction = (
   event: OpenHandsParsedEvent,
 ): event is OpenHandsAction => "action" in event;
@@ -58,7 +69,7 @@ export const isCommandObservation = (
 
 export const isFinishAction = (
   event: OpenHandsParsedEvent,
-): event is AssistantMessageAction =>
+): event is FinishAction =>
   isOpenHandsAction(event) && event.action === "finish";
 
 export const isSystemMessage = (
@@ -76,7 +87,9 @@ export const isMcpObservation = (
 ): event is MCPObservation =>
   isOpenHandsObservation(event) && event.observation === "mcp";
 
-export const isStatusUpdate = (
-  event: OpenHandsParsedEvent,
-): event is StatusUpdate =>
-  "status_update" in event && "type" in event && "id" in event;
+export const isStatusUpdate = (event: unknown): event is StatusUpdate =>
+  typeof event === "object" &&
+  event !== null &&
+  "status_update" in event &&
+  "type" in event &&
+  "id" in event;

frontend/src/types/core/variances.ts

@@ -35,7 +35,7 @@ interface LocalUserMessageAction {
 
 export interface StatusUpdate {
   status_update: true;
-  type: "error";
+  type: "error" | "info";
   id: string;
   message: string;
 }

frontend/src/types/microagent-status.ts

@@ -0,0 +1,12 @@
+export enum MicroagentStatus {
+  CREATING = "creating",
+  COMPLETED = "completed",
+  ERROR = "error",
+}
+
+export interface EventMicroagentStatus {
+  eventId: number;
+  conversationId: string;
+  status: MicroagentStatus;
+  prUrl?: string; // Optional PR URL for completed status
+}

frontend/src/utils/custom-toast-handlers.tsx

@@ -9,7 +9,7 @@ const TOAST_STYLE: CSSProperties = {
   borderRadius: "4px",
 };
 
-const TOAST_OPTIONS: ToastOptions = {
+export const TOAST_OPTIONS: ToastOptions = {
   position: "top-right",
   style: TOAST_STYLE,
 };

frontend/src/utils/extract-model-and-provider.ts

@@ -1,7 +1,9 @@
 import { isNumber } from "./is-number";
 import {
   VERIFIED_ANTHROPIC_MODELS,
+  VERIFIED_MISTRAL_MODELS,
   VERIFIED_OPENAI_MODELS,
+  VERIFIED_OPENHANDS_MODELS,
 } from "./verified-models";
 
 /**
@@ -47,6 +49,12 @@ export const extractModelAndProvider = (model: string) => {
     if (VERIFIED_ANTHROPIC_MODELS.includes(split[0])) {
       return { provider: "anthropic", model: split[0], separator: "/" };
     }
+    if (VERIFIED_MISTRAL_MODELS.includes(split[0])) {
+      return { provider: "mistral", model: split[0], separator: "/" };
+    }
+    if (VERIFIED_OPENHANDS_MODELS.includes(split[0])) {
+      return { provider: "openhands", model: split[0], separator: "/" };
+    }
     // return as model only
     return { provider: "", model, separator: "" };
   }

frontend/src/utils/map-provider.ts

@@ -23,6 +23,7 @@ export const MAP_PROVIDER = {
   replicate: "Replicate",
   voyage: "Voyage AI",
   openrouter: "OpenRouter",
+  openhands: "OpenHands",
 };
 
 export const mapProvider = (provider: string) =>

frontend/src/utils/parse-pr-url.ts

@@ -0,0 +1,57 @@
+/**
+ * Utility function to parse Pull Request URLs from text
+ */
+
+// Common PR URL patterns for different Git providers
+const PR_URL_PATTERNS = [
+  // GitHub: https://github.com/owner/repo/pull/123
+  /https?:\/\/github\.com\/[^/\s]+\/[^/\s]+\/pull\/\d+/gi,
+  // GitLab: https://gitlab.com/owner/repo/-/merge_requests/123
+  /https?:\/\/gitlab\.com\/[^/\s]+\/[^/\s]+\/-\/merge_requests\/\d+/gi,
+  // GitLab self-hosted: https://gitlab.example.com/owner/repo/-/merge_requests/123
+  /https?:\/\/[^/\s]*gitlab[^/\s]*\/[^/\s]+\/[^/\s]+\/-\/merge_requests\/\d+/gi,
+  // Bitbucket: https://bitbucket.org/owner/repo/pull-requests/123
+  /https?:\/\/bitbucket\.org\/[^/\s]+\/[^/\s]+\/pull-requests\/\d+/gi,
+  // Azure DevOps: https://dev.azure.com/org/project/_git/repo/pullrequest/123
+  /https?:\/\/dev\.azure\.com\/[^/\s]+\/[^/\s]+\/_git\/[^/\s]+\/pullrequest\/\d+/gi,
+  // Generic pattern for other providers that might use /pull/ or /pr/
+  /https?:\/\/[^/\s]+\/[^/\s]+\/[^/\s]+\/(?:pull|pr)\/\d+/gi,
+];
+
+/**
+ * Extracts PR URLs from a given text
+ * @param text - The text to search for PR URLs
+ * @returns Array of found PR URLs
+ */
+export function extractPRUrls(text: string): string[] {
+  const urls: string[] = [];
+
+  for (const pattern of PR_URL_PATTERNS) {
+    const matches = text.match(pattern);
+    if (matches) {
+      urls.push(...matches);
+    }
+  }
+
+  // Remove duplicates and return
+  return [...new Set(urls)];
+}
+
+/**
+ * Checks if the text contains any PR URLs
+ * @param text - The text to check
+ * @returns True if PR URLs are found, false otherwise
+ */
+export function containsPRUrl(text: string): boolean {
+  return extractPRUrls(text).length > 0;
+}
+
+/**
+ * Gets the first PR URL found in the text
+ * @param text - The text to search
+ * @returns The first PR URL found, or null if none found
+ */
+export function getFirstPRUrl(text: string): string | null {
+  const urls = extractPRUrls(text);
+  return urls.length > 0 ? urls[0] : null;
+}

frontend/src/utils/verified-models.ts

@@ -1,5 +1,10 @@
 // Here are the list of verified models and providers that we know work well with OpenHands.
-export const VERIFIED_PROVIDERS = ["openai", "azure", "anthropic", "deepseek"];
+export const VERIFIED_PROVIDERS = [
+  "openhands",
+  "anthropic",
+  "openai",
+  "mistral",
+];
 export const VERIFIED_MODELS = [
   "o3-mini-2025-01-31",
   "o3-2025-04-16",
@@ -8,7 +13,10 @@ export const VERIFIED_MODELS = [
   "claude-3-7-sonnet-20250219",
   "claude-sonnet-4-20250514",
   "claude-opus-4-20250514",
+  "gemini-2.5-pro",
+  "o4-mini",
   "deepseek-chat",
+  "devstral-small-2505",
 ];
 
 // LiteLLM does not return OpenAI models with the provider, so we list them here to set them ourselves for consistency
@@ -16,31 +24,36 @@ export const VERIFIED_MODELS = [
 export const VERIFIED_OPENAI_MODELS = [
   "gpt-4o",
   "gpt-4o-mini",
-  "gpt-4-turbo",
-  "gpt-4",
-  "gpt-4-32k",
-  "o1-mini",
-  "o1",
+  "gpt-4.1",
+  "gpt-4.1-2025-04-14",
   "o3",
   "o3-2025-04-16",
-  "o3-mini",
-  "o3-mini-2025-01-31",
   "o4-mini",
   "o4-mini-2025-04-16",
+  "codex-mini-latest",
 ];
 
 // LiteLLM does not return the compatible Anthropic models with the provider, so we list them here to set them ourselves
 // (e.g., they return `claude-3-5-sonnet-20241022` instead of `anthropic/claude-3-5-sonnet-20241022`)
 export const VERIFIED_ANTHROPIC_MODELS = [
-  "claude-2",
-  "claude-2.1",
   "claude-3-5-sonnet-20240620",
   "claude-3-5-sonnet-20241022",
   "claude-3-5-haiku-20241022",
-  "claude-3-haiku-20240307",
-  "claude-3-opus-20240229",
-  "claude-3-sonnet-20240229",
   "claude-3-7-sonnet-20250219",
   "claude-sonnet-4-20250514",
   "claude-opus-4-20250514",
 ];
+
+// LiteLLM does not return the compatible Mistral models with the provider, so we list them here to set them ourselves
+// (e.g., they return `devstral-small-2505` instead of `mistral/devstral-small-2505`)
+export const VERIFIED_MISTRAL_MODELS = ["devstral-small-2505"];
+
+// LiteLLM does not return the compatible OpenHands models with the provider, so we list them here to set them ourselves
+// (e.g., they return `claude-sonnet-4-20250514` instead of `openhands/claude-sonnet-4-20250514`)
+export const VERIFIED_OPENHANDS_MODELS = [
+  "claude-sonnet-4-20250514",
+  "claude-opus-4-20250514",
+  "gemini-2.5-pro",
+  "o4-mini",
+  "devstral-small-2505",
+];

openhands-ui/.bun-version

@@ -1 +1 @@
-1.2.16
+1.2.17

openhands-ui/README.md

@@ -9,7 +9,7 @@ bun install
 To run storybook:
 
 ```bash
-bun run sb
+bun run --bun sb
 ```
 
 This project was created using `bun init` in bun v1.2.16. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.

openhands-ui/bun.lock

@@ -6,6 +6,7 @@
       "dependencies": {
         "@floating-ui/react": "^0.27.12",
         "clsx": "^2.1.1",
+        "focus-trap-react": "^11.0.4",
         "react": "^19.1.0",
         "react-bootstrap-icons": "^1.11.6",
         "react-dom": "^19.1.0",
@@ -297,6 +298,8 @@
 
     "@types/react": ["@types/react@19.1.8", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g=="],
 
+    "@types/react-dom": ["@types/react-dom@19.1.6", "", { "peerDependencies": { "@types/react": "^19.0.0" } }, "sha512-4hOiT/dwO8Ko0gV1m/TJZYk3y0KBnY9vzDh7W+DH17b2HFSOGgdj33dhihPeuy3l0q23+4e+hoXHV6hCC4dCXw=="],
+
     "@types/resolve": ["@types/resolve@1.20.6", "", {}, "sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ=="],
 
     "@vitejs/plugin-react": ["@vitejs/plugin-react@4.6.0", "", { "dependencies": { "@babel/core": "^7.27.4", "@babel/plugin-transform-react-jsx-self": "^7.27.1", "@babel/plugin-transform-react-jsx-source": "^7.27.1", "@rolldown/pluginutils": "1.0.0-beta.19", "@types/babel__core": "^7.20.5", "react-refresh": "^0.17.0" }, "peerDependencies": { "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0" } }, "sha512-5Kgff+m8e2PB+9j51eGHEpn5kUzRKH2Ry0qGoe8ItJg7pqnkPrYPkDQZGgGmTa0EGarHrkjLvOdU3b1fzI8otQ=="],
@@ -417,6 +420,10 @@
 
     "find-up": ["find-up@7.0.0", "", { "dependencies": { "locate-path": "^7.2.0", "path-exists": "^5.0.0", "unicorn-magic": "^0.1.0" } }, "sha512-YyZM99iHrqLKjmt4LJDj58KI+fYyufRLBSYcqycxf//KpBk9FoewoGX0450m9nB44qrZnovzC2oeP5hUibxc/g=="],
 
+    "focus-trap": ["focus-trap@7.6.5", "", { "dependencies": { "tabbable": "^6.2.0" } }, "sha512-7Ke1jyybbbPZyZXFxEftUtxFGLMpE2n6A+z//m4CRDlj0hW+o3iYSmh8nFlYMurOiJVDmJRilUQtJr08KfIxlg=="],
+
+    "focus-trap-react": ["focus-trap-react@11.0.4", "", { "dependencies": { "focus-trap": "^7.6.5", "tabbable": "^6.2.0" }, "peerDependencies": { "@types/react": "^18.0.0 || ^19.0.0", "@types/react-dom": "^18.0.0 || ^19.0.0", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" } }, "sha512-tC7jC/yqeAqhe4irNIzdyDf9XCtGSeECHiBSYJBO/vIN0asizbKZCt8TarB6/XqIceu42ajQ/U4lQJ9pZlWjrg=="],
+
     "foreground-child": ["foreground-child@3.3.1", "", { "dependencies": { "cross-spawn": "^7.0.6", "signal-exit": "^4.0.1" } }, "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw=="],
 
     "fsevents": ["fsevents@2.3.2", "", { "os": "darwin" }, "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="],
@@ -723,6 +730,8 @@
 
     "@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
+    "@testing-library/jest-dom/aria-query": ["aria-query@5.3.2", "", {}, "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw=="],
+
     "@testing-library/jest-dom/chalk": ["chalk@3.0.0", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg=="],
 
     "@testing-library/jest-dom/dom-accessibility-api": ["dom-accessibility-api@0.6.3", "", {}, "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w=="],

openhands-ui/components/accordion/Accordion.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Accordion, type AccordionProps } from "./Accordion";
+import { useArray } from "../../shared/hooks/use-array";
+import { Typography } from "../typography/Typography";
+
+const meta = {
+  title: "Components/Accordion",
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const AccordionComponent = ({ type }: { type: AccordionProps["type"] }) => {
+  const [keys, { replace }] = useArray(["foo"]);
+  return (
+    <div className="w-96">
+      <Accordion type={type} expandedKeys={keys} setExpandedKeys={replace}>
+        <Accordion.Item
+          value="foo"
+          label="file.txt"
+          icon={"FileEarmarkPlusFill"}
+        >
+          <Typography.Text>total 30</Typography.Text>
+        </Accordion.Item>
+        <Accordion.Item
+          value="bar"
+          label="foo.ext"
+          icon={"FileEarmarkPlusFill"}
+        >
+          <Typography.Text>total 60</Typography.Text>
+        </Accordion.Item>
+        <Accordion.Item
+          value="ipsum"
+          label="very_very_long_file_name_v3.pdf"
+          icon={"FileEarmarkPlusFill"}
+        >
+          <Typography.Text>total 90</Typography.Text>
+        </Accordion.Item>
+      </Accordion>
+    </div>
+  );
+};
+
+export const Multi: Story = {
+  render: () => <AccordionComponent type="multi" />,
+};
+
+export const Single: Story = {
+  render: () => <AccordionComponent type="single" />,
+};

openhands-ui/components/accordion/Accordion.tsx

@@ -0,0 +1,67 @@
+import React, { useCallback, type PropsWithChildren } from "react";
+
+import {
+  AccordionItem,
+  type AccordionItemPropsPublic,
+} from "./components/AccordionItem";
+import { cn } from "../../shared/utils/cn";
+import type { HTMLProps } from "../../shared/types";
+
+export type AccordionProps = HTMLProps<"div"> & {
+  expandedKeys: string[];
+  type?: "multi" | "single";
+  setExpandedKeys(keys: string[]): void;
+};
+
+type AccordionType = React.FC<PropsWithChildren<AccordionProps>> & {
+  Item: React.FC<PropsWithChildren<AccordionItemPropsPublic>>;
+};
+
+const Accordion: AccordionType = ({
+  className,
+  expandedKeys,
+  setExpandedKeys,
+  children,
+  type = "multi",
+  ...props
+}) => {
+  const onChange = useCallback(
+    (key: string, expanded: boolean) => {
+      if (type === "multi") {
+        setExpandedKeys(
+          expanded
+            ? [...expandedKeys, key]
+            : [...expandedKeys].filter((k) => k !== key)
+        );
+      } else {
+        setExpandedKeys(expanded ? [key] : []);
+      }
+    },
+    [expandedKeys, type]
+  );
+
+  const reactChildren = React.Children.toArray(children);
+  const items =
+    React.Children.map(reactChildren, (child: any) => {
+      const value = child.props.value;
+      const expanded = expandedKeys.some((key) => key === value);
+      return React.cloneElement(child, {
+        expanded,
+        onExpandedChange: () => onChange(value, !expanded),
+        className: "flex-1",
+      });
+    }) ?? [];
+  return (
+    <div
+      className={cn("flex flex-col gap-y-2.5 items-start", className)}
+      {...props}
+    >
+      {items}
+    </div>
+  );
+};
+
+Accordion.Item = AccordionItem as React.FC<
+  PropsWithChildren<AccordionItemPropsPublic>
+>;
+export { Accordion };