Upload 565 files

.gitattributes

@@ -46,3 +46,4 @@ docs/usage/llms/screenshots/2_select_model.png filter=lfs diff=lfs merge=lfs -te
 docs/usage/llms/screenshots/4_set_context_window.png filter=lfs diff=lfs merge=lfs -text
 docs/usage/llms/screenshots/5_copy_url.png filter=lfs diff=lfs merge=lfs -text
 evaluation/static/example_task_1.png filter=lfs diff=lfs merge=lfs -text
+frontend/src/assets/logo.png filter=lfs diff=lfs merge=lfs -text

frontend/README.md

@@ -0,0 +1,254 @@
+# Getting Started with the OpenHands Frontend
+
+## Overview
+
+This is the frontend of the OpenHands project. It is a React application that provides a web interface for the OpenHands project.
+
+## Tech Stack
+
+- Remix SPA Mode (React + Vite + React Router)
+- TypeScript
+- Redux
+- TanStack Query
+- Tailwind CSS
+- i18next
+- React Testing Library
+- Vitest
+- Mock Service Worker
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 20.x or later
+- `npm`, `bun`, or any other package manager that supports the `package.json` file
+
+### Installation
+
+```sh
+# Clone the repository
+git clone https://github.com/All-Hands-AI/OpenHands.git
+
+# Change the directory to the frontend
+cd OpenHands/frontend
+
+# Install the dependencies
+npm install
+```
+
+### Running the Application in Development Mode
+
+We use `msw` to mock the backend API. To start the application with the mocked backend, run the following command:
+
+```sh
+npm run dev
+```
+
+This will start the application in development mode. Open [http://localhost:3001](http://localhost:3001) to view it in the browser.
+
+**NOTE: The backend is _partially_ mocked using `msw`. Therefore, some features may not work as they would with the actual backend.**
+
+See the [Development.md](../Development.md) for extra tips on how to run in development mode.
+
+### Running the Application with the Actual Backend (Production Mode)
+
+To run the application with the actual backend:
+
+```sh
+# Build the application from the root directory
+make build
+
+# Start the application
+make run
+```
+Or to run backend and frontend separately.
+
+```sh
+# Start the backend from the root directory
+make start-backend
+
+# Serve the frontend
+make start-frontend or
+cd frontend && npm start -- --port 3001
+```
+
+Start frontend with Mock Service Worker (MSW), see testing for more info.
+```sh
+npm run dev:mock or npm run dev:mock:saas
+```
+
+### Environment Variables
+
+The frontend application uses the following environment variables:
+
+| Variable                    | Description                                                            | Default Value    |
+| --------------------------- | ---------------------------------------------------------------------- | ---------------- |
+| `VITE_BACKEND_BASE_URL`     | The backend hostname without protocol (used for WebSocket connections) | `localhost:3000` |
+| `VITE_BACKEND_HOST`         | The backend host with port for API connections                         | `127.0.0.1:3000` |
+| `VITE_MOCK_API`             | Enable/disable API mocking with MSW                                    | `false`          |
+| `VITE_MOCK_SAAS`            | Simulate SaaS mode in development                                      | `false`          |
+| `VITE_USE_TLS`              | Use HTTPS/WSS for backend connections                                  | `false`          |
+| `VITE_FRONTEND_PORT`        | Port to run the frontend application                                   | `3001`           |
+| `VITE_INSECURE_SKIP_VERIFY` | Skip TLS certificate verification                                      | `false`          |
+| `VITE_GITHUB_TOKEN`         | GitHub token for repository access (used in some tests)                | -                |
+
+You can create a `.env` file in the frontend directory with these variables based on the `.env.sample` file.
+
+### Project Structure
+
+```sh
+frontend
+├── __tests__ # Tests
+├── public
+├── src
+│   ├── api # API calls
+│   ├── assets
+│   ├── components
+│   ├── context # Local state management
+│   ├── hooks # Custom hooks
+│   ├── i18n # Internationalization
+│   ├── mocks # MSW mocks for development
+│   ├── routes # React Router file-based routes
+│   ├── services
+│   ├── state # Redux state management
+│   ├── types
+│   ├── utils # Utility/helper functions
+│   └── root.tsx # Entry point
+└── .env.sample # Sample environment variables
+```
+
+#### Components
+
+Components are organized into folders based on their **domain**, **feature**, or **shared functionality**.
+
+```sh
+components
+├── features # Domain-specific components
+├── layout
+├── modals
+└── ui # Shared UI components
+```
+
+### Features
+
+- Real-time updates with WebSockets
+- Internationalization
+- Router data loading with Remix
+- User authentication with GitHub OAuth (if saas mode is enabled)
+
+## Testing
+
+### Testing Framework and Tools
+
+We use the following testing tools:
+- **Test Runner**: Vitest
+- **Rendering**: React Testing Library
+- **User Interactions**: @testing-library/user-event
+- **API Mocking**: [Mock Service Worker (MSW)](https://mswjs.io/)
+- **Code Coverage**: Vitest with V8 coverage
+
+### Running Tests
+
+To run all tests:
+```sh
+npm run test
+```
+
+To run tests with coverage:
+```sh
+npm run test:coverage
+```
+
+### Testing Best Practices
+
+1. **Component Testing**
+   - Test components in isolation
+   - Use our custom [`renderWithProviders()`](https://github.com/All-Hands-AI/OpenHands/blob/ce26f1c6d3feec3eedf36f823dee732b5a61e517/frontend/test-utils.tsx#L56-L85) that wraps the components we want to test in our providers. It is especially useful for components that use Redux
+   - Use `render()` from React Testing Library to render components
+   - Prefer querying elements by role, label, or test ID over CSS selectors
+   - Test both rendering and interaction scenarios
+
+2. **User Event Simulation**
+   - Use `userEvent` for simulating realistic user interactions
+   - Test keyboard events, clicks, typing, and other user actions
+   - Handle edge cases like disabled states, empty inputs, etc.
+
+3. **Mocking**
+   - We test components that make network requests by mocking those requests with Mock Service Worker (MSW)
+   - Use `vi.fn()` to create mock functions for callbacks and event handlers
+   - Mock external dependencies and API calls (more info)[https://mswjs.io/docs/getting-started]
+   - Verify mock function calls using `.toHaveBeenCalledWith()`, `.toHaveBeenCalledTimes()`
+
+4. **Accessibility Testing**
+   - Use `toBeInTheDocument()` to check element presence
+   - Test keyboard navigation and screen reader compatibility
+   - Verify correct ARIA attributes and roles
+
+5. **State and Prop Testing**
+   - Test component behavior with different prop combinations
+   - Verify state changes and conditional rendering
+   - Test error states and loading scenarios
+
+6. **Internationalization (i18n) Testing**
+   - Test translation keys and placeholders
+   - Verify text rendering across different languages
+
+Example Test Structure:
+```typescript
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi } from "vitest";
+
+describe("ComponentName", () => {
+  it("should render correctly", () => {
+    render(<Component />);
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+
+  it("should handle user interactions", async () => {
+    const mockCallback = vi.fn();
+    const user = userEvent.setup();
+
+    render(<Component onClick={mockCallback} />);
+    const button = screen.getByRole("button");
+
+    await user.click(button);
+    expect(mockCallback).toHaveBeenCalledOnce();
+  });
+});
+```
+
+### Example Tests in the Codebase
+
+For real-world examples of testing, check out these test files:
+
+1. **Chat Input Component Test**:
+   [`__tests__/components/chat/chat-input.test.tsx`](https://github.com/All-Hands-AI/OpenHands/blob/main/frontend/__tests__/components/chat/chat-input.test.tsx)
+   - Demonstrates comprehensive testing of a complex input component
+   - Covers various scenarios like submission, disabled states, and user interactions
+
+2. **File Explorer Component Test**:
+   [`__tests__/components/file-explorer/file-explorer.test.tsx`](https://github.com/All-Hands-AI/OpenHands/blob/main/frontend/__tests__/components/file-explorer/file-explorer.test.tsx)
+   - Shows testing of a more complex component with multiple interactions
+   - Illustrates testing of nested components and state management
+
+### Test Coverage
+
+- Aim for high test coverage, especially for critical components
+- Focus on testing different scenarios and edge cases
+- Use code coverage reports to identify untested code paths
+
+### Continuous Integration
+
+Tests are automatically run during:
+- Pre-commit hooks
+- Pull request checks
+- CI/CD pipeline
+
+## Contributing
+
+Please read the [CONTRIBUTING.md](../CONTRIBUTING.md) file for details on our code of conduct, and the process for submitting pull requests to us.
+
+## Troubleshooting
+
+TODO

frontend/__tests__/api/file-service/file-service.api.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+import { FileService } from "#/api/file-service/file-service.api";
+import {
+  FILE_VARIANTS_1,
+  FILE_VARIANTS_2,
+} from "#/mocks/file-service-handlers";
+
+/**
+ * File service API tests. The actual API calls are mocked using MSW.
+ * You can find the mock handlers in `frontend/src/mocks/file-service-handlers.ts`.
+ */
+
+describe("FileService", () => {
+  it("should get a list of files", async () => {
+    await expect(FileService.getFiles("test-conversation-id")).resolves.toEqual(
+      FILE_VARIANTS_1,
+    );
+
+    await expect(
+      FileService.getFiles("test-conversation-id-2"),
+    ).resolves.toEqual(FILE_VARIANTS_2);
+  });
+
+  it("should get content of a file", async () => {
+    await expect(
+      FileService.getFile("test-conversation-id", "file1.txt"),
+    ).resolves.toEqual("Content of file1.txt");
+  });
+});

frontend/__tests__/components/browser.test.tsx

@@ -0,0 +1,86 @@
+import { describe, it, expect, afterEach, vi } from "vitest";
+import { screen, render } from "@testing-library/react";
+import React from "react";
+
+// Mock modules before importing the component
+vi.mock("react-router", async () => {
+  const actual = await vi.importActual("react-router");
+  return {
+    ...(actual as object),
+    useParams: () => ({ conversationId: "test-conversation-id" }),
+  };
+});
+
+vi.mock("#/context/conversation-context", () => ({
+  useConversation: () => ({ conversationId: "test-conversation-id" }),
+  ConversationProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+vi.mock("react-i18next", async () => {
+  const actual = await vi.importActual("react-i18next");
+  return {
+    ...(actual as object),
+    useTranslation: () => ({
+      t: (key: string) => key,
+      i18n: {
+        changeLanguage: () => new Promise(() => {}),
+      },
+    }),
+  };
+});
+
+// Mock redux
+const mockDispatch = vi.fn();
+let mockBrowserState = {
+  url: "https://example.com",
+  screenshotSrc: "",
+};
+
+vi.mock("react-redux", async () => {
+  const actual = await vi.importActual("react-redux");
+  return {
+    ...actual,
+    useDispatch: () => mockDispatch,
+    useSelector: () => mockBrowserState,
+  };
+});
+
+// Import the component after all mocks are set up
+import { BrowserPanel } from "#/components/features/browser/browser";
+
+describe("Browser", () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+    // Reset the mock state
+    mockBrowserState = {
+      url: "https://example.com",
+      screenshotSrc: "",
+    };
+  });
+
+  it("renders a message if no screenshotSrc is provided", () => {
+    // Set the mock state for this test
+    mockBrowserState = {
+      url: "https://example.com",
+      screenshotSrc: "",
+    };
+
+    render(<BrowserPanel />);
+
+    // i18n empty message key
+    expect(screen.getByText("BROWSER$NO_PAGE_LOADED")).toBeInTheDocument();
+  });
+
+  it("renders the url and a screenshot", () => {
+    // Set the mock state for this test
+    mockBrowserState = {
+      url: "https://example.com",
+      screenshotSrc: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN0uGvyHwAFCAJS091fQwAAAABJRU5ErkJggg==",
+    };
+
+    render(<BrowserPanel />);
+
+    expect(screen.getByText("https://example.com")).toBeInTheDocument();
+    expect(screen.getByAltText("BROWSER$SCREENSHOT_ALT")).toBeInTheDocument();
+  });
+});

frontend/__tests__/components/buttons/copy-to-clipboard.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from "@testing-library/react";
+import { test, expect, describe, vi } from "vitest";
+import { CopyToClipboardButton } from "#/components/shared/buttons/copy-to-clipboard-button";
+
+// Mock react-i18next
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+describe("CopyToClipboardButton", () => {
+  test("should have localized aria-label", () => {
+    render(
+      <CopyToClipboardButton
+        isHidden={false}
+        isDisabled={false}
+        onClick={() => {}}
+        mode="copy"
+      />
+    );
+
+    const button = screen.getByTestId("copy-to-clipboard");
+    expect(button).toHaveAttribute("aria-label", "BUTTON$COPY");
+  });
+
+  test("should have localized aria-label when copied", () => {
+    render(
+      <CopyToClipboardButton
+        isHidden={false}
+        isDisabled={false}
+        onClick={() => {}}
+        mode="copied"
+      />
+    );
+
+    const button = screen.getByTestId("copy-to-clipboard");
+    expect(button).toHaveAttribute("aria-label", "BUTTON$COPIED");
+  });
+});

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

@@ -0,0 +1,72 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect } from "vitest";
+import { ChatMessage } from "#/components/features/chat/chat-message";
+
+describe("ChatMessage", () => {
+  it("should render a user message", () => {
+    render(<ChatMessage type="user" message="Hello, World!" />);
+    expect(screen.getByTestId("user-message")).toBeInTheDocument();
+    expect(screen.getByText("Hello, World!")).toBeInTheDocument();
+  });
+
+  it.todo("should render an assistant message");
+
+  it.skip("should support code syntax highlighting", () => {
+    const code = "```js\nconsole.log('Hello, World!')\n```";
+    render(<ChatMessage type="user" message={code} />);
+
+    // SyntaxHighlighter breaks the code blocks into "tokens"
+    expect(screen.getByText("console")).toBeInTheDocument();
+    expect(screen.getByText("log")).toBeInTheDocument();
+    expect(screen.getByText("'Hello, World!'")).toBeInTheDocument();
+  });
+
+  it("should render the copy to clipboard button when the user hovers over the message", async () => {
+    const user = userEvent.setup();
+    render(<ChatMessage type="user" message="Hello, World!" />);
+    const message = screen.getByText("Hello, World!");
+
+    expect(screen.getByTestId("copy-to-clipboard")).not.toBeVisible();
+
+    await user.hover(message);
+
+    expect(screen.getByTestId("copy-to-clipboard")).toBeVisible();
+  });
+
+  it("should copy content to clipboard", async () => {
+    const user = userEvent.setup();
+    render(<ChatMessage type="user" message="Hello, World!" />);
+    const copyToClipboardButton = screen.getByTestId("copy-to-clipboard");
+
+    await user.click(copyToClipboardButton);
+
+    await waitFor(() =>
+      expect(navigator.clipboard.readText()).resolves.toBe("Hello, World!"),
+    );
+  });
+
+  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>;
+    }
+    render(
+      <ChatMessage type="user" message="Hello, World">
+        <Component />
+      </ChatMessage>,
+    );
+    expect(screen.getByTestId("custom-component")).toBeInTheDocument();
+  });
+
+  it("should apply correct styles to inline code", () => {
+    render(
+      <ChatMessage type="agent" message="Here is some `inline code` text" />,
+    );
+    const codeElement = screen.getByText("inline code");
+
+    expect(codeElement.tagName.toLowerCase()).toBe("code");
+    expect(codeElement.closest("article")).not.toBeNull();
+  });
+});

frontend/__tests__/components/chat/action-suggestions.test.tsx

@@ -0,0 +1,132 @@
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ActionSuggestions } from "#/components/features/chat/action-suggestions";
+import OpenHands from "#/api/open-hands";
+import { MOCK_DEFAULT_USER_SETTINGS } from "#/mocks/handlers";
+
+// Mock dependencies
+vi.mock("posthog-js", () => ({
+  default: {
+    capture: vi.fn(),
+  },
+}));
+
+const { useSelectorMock } = vi.hoisted(() => ({
+  useSelectorMock: vi.fn(),
+}));
+
+vi.mock("react-redux", () => ({
+  useSelector: useSelectorMock,
+}));
+
+vi.mock("#/context/auth-context", () => ({
+  useAuth: vi.fn(),
+}));
+
+// Mock react-i18next
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        ACTION$PUSH_TO_BRANCH: "Push to Branch",
+        ACTION$PUSH_CREATE_PR: "Push & Create PR",
+        ACTION$PUSH_CHANGES_TO_PR: "Push Changes to PR",
+      };
+      return translations[key] || key;
+    },
+  }),
+}));
+
+vi.mock("react-router", () => ({
+  useParams: () => ({
+    conversationId: "test-conversation-id",
+  }),
+}));
+
+const renderActionSuggestions = () =>
+  render(<ActionSuggestions onSuggestionsClick={() => {}} />, {
+    wrapper: ({ children }) => (
+      <QueryClientProvider client={new QueryClient()}>
+        {children}
+      </QueryClientProvider>
+    ),
+  });
+
+describe("ActionSuggestions", () => {
+  // Setup mocks for each test
+  beforeEach(() => {
+    vi.clearAllMocks();
+    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
+    getSettingsSpy.mockResolvedValue({
+      ...MOCK_DEFAULT_USER_SETTINGS,
+      provider_tokens_set: {
+        github: "some-token",
+      },
+    });
+
+    useSelectorMock.mockReturnValue({
+      selectedRepository: "test-repo",
+    });
+  });
+
+  it("should render both GitHub buttons when GitHub token is set and repository is selected", async () => {
+    const getConversationSpy = vi.spyOn(OpenHands, "getConversation");
+    // @ts-expect-error - only required for testing
+    getConversationSpy.mockResolvedValue({
+      selected_repository: "test-repo",
+    });
+    renderActionSuggestions();
+
+    // Find all buttons with data-testid="suggestion"
+    const buttons = await screen.findAllByTestId("suggestion");
+
+    // Check if we have at least 2 buttons
+    expect(buttons.length).toBeGreaterThanOrEqual(2);
+
+    // Check if the buttons contain the expected text
+    const pushButton = buttons.find((button) =>
+      button.textContent?.includes("Push to Branch"),
+    );
+    const prButton = buttons.find((button) =>
+      button.textContent?.includes("Push & Create PR"),
+    );
+
+    expect(pushButton).toBeInTheDocument();
+    expect(prButton).toBeInTheDocument();
+  });
+
+  it("should not render buttons when GitHub token is not set", () => {
+    renderActionSuggestions();
+
+    expect(screen.queryByTestId("suggestion")).not.toBeInTheDocument();
+  });
+
+  it("should not render buttons when no repository is selected", () => {
+    useSelectorMock.mockReturnValue({
+      selectedRepository: null,
+    });
+
+    renderActionSuggestions();
+
+    expect(screen.queryByTestId("suggestion")).not.toBeInTheDocument();
+  });
+
+  it("should have different prompts for 'Push to Branch' and 'Push & Create PR' buttons", () => {
+    // This test verifies that the prompts are different in the component
+    renderActionSuggestions();
+
+    // Get the component instance to access the internal values
+    const pushBranchPrompt =
+      "Please push the changes to a remote branch on GitHub, but do NOT create a pull request. Please use the exact SAME branch name as the one you are currently on.";
+    const createPRPrompt =
+      "Please push the changes to GitHub and open a pull request. Please create a meaningful branch name that describes the changes. If a pull request template exists in the repository, please follow it when creating the PR description.";
+
+    // Verify the prompts are different
+    expect(pushBranchPrompt).not.toEqual(createPRPrompt);
+
+    // Verify the PR prompt mentions creating a meaningful branch name
+    expect(createPRPrompt).toContain("meaningful branch name");
+    expect(createPRPrompt).not.toContain("SAME branch name");
+  });
+});

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

@@ -0,0 +1,256 @@
+import userEvent from "@testing-library/user-event";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, afterEach, vi, it, expect } from "vitest";
+import { ChatInput } from "#/components/features/chat/chat-input";
+
+describe("ChatInput", () => {
+  const onSubmitMock = vi.fn();
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should render a textarea", () => {
+    render(<ChatInput onSubmit={onSubmitMock} />);
+    expect(screen.getByTestId("chat-input")).toBeInTheDocument();
+    expect(screen.getByRole("textbox")).toBeInTheDocument();
+  });
+
+  it("should call onSubmit when the user types and presses enter", async () => {
+    const user = userEvent.setup();
+    render(<ChatInput onSubmit={onSubmitMock} />);
+    const textarea = screen.getByRole("textbox");
+
+    await user.type(textarea, "Hello, world!");
+    await user.keyboard("{Enter}");
+
+    expect(onSubmitMock).toHaveBeenCalledWith("Hello, world!");
+  });
+
+  it("should call onSubmit when pressing the submit button", async () => {
+    const user = userEvent.setup();
+    render(<ChatInput onSubmit={onSubmitMock} />);
+    const textarea = screen.getByRole("textbox");
+    const button = screen.getByRole("button");
+
+    await user.type(textarea, "Hello, world!");
+    await user.click(button);
+
+    expect(onSubmitMock).toHaveBeenCalledWith("Hello, world!");
+  });
+
+  it("should not call onSubmit when the message is empty", async () => {
+    const user = userEvent.setup();
+    render(<ChatInput onSubmit={onSubmitMock} />);
+    const button = screen.getByRole("button");
+
+    await user.click(button);
+    expect(onSubmitMock).not.toHaveBeenCalled();
+
+    await user.keyboard("{Enter}");
+    expect(onSubmitMock).not.toHaveBeenCalled();
+  });
+
+  it("should not call onSubmit when the message is only whitespace", async () => {
+    const user = userEvent.setup();
+    render(<ChatInput onSubmit={onSubmitMock} />);
+    const textarea = screen.getByRole("textbox");
+
+    await user.type(textarea, "   ");
+    await user.keyboard("{Enter}");
+
+    expect(onSubmitMock).not.toHaveBeenCalled();
+
+    await user.type(textarea, " \t\n");
+    await user.keyboard("{Enter}");
+
+    expect(onSubmitMock).not.toHaveBeenCalled();
+  });
+
+  it("should disable submit", async () => {
+    const user = userEvent.setup();
+    render(<ChatInput disabled onSubmit={onSubmitMock} />);
+
+    const button = screen.getByRole("button");
+    const textarea = screen.getByRole("textbox");
+
+    await user.type(textarea, "Hello, world!");
+
+    expect(button).toBeDisabled();
+    await user.click(button);
+    expect(onSubmitMock).not.toHaveBeenCalled();
+
+    await user.keyboard("{Enter}");
+    expect(onSubmitMock).not.toHaveBeenCalled();
+  });
+
+  it("should render a placeholder with translation key", () => {
+    render(<ChatInput onSubmit={onSubmitMock} />);
+
+    const textarea = screen.getByPlaceholderText("SUGGESTIONS$WHAT_TO_BUILD");
+    expect(textarea).toBeInTheDocument();
+  });
+
+  it("should create a newline instead of submitting when shift + enter is pressed", async () => {
+    const user = userEvent.setup();
+    render(<ChatInput onSubmit={onSubmitMock} />);
+    const textarea = screen.getByRole("textbox");
+
+    await user.type(textarea, "Hello, world!");
+    await user.keyboard("{Shift>} {Enter}"); // Shift + Enter
+
+    expect(onSubmitMock).not.toHaveBeenCalled();
+    // expect(textarea).toHaveValue("Hello, world!\n");
+  });
+
+  it("should clear the input message after sending a message", async () => {
+    const user = userEvent.setup();
+    render(<ChatInput onSubmit={onSubmitMock} />);
+    const textarea = screen.getByRole("textbox");
+    const button = screen.getByRole("button");
+
+    await user.type(textarea, "Hello, world!");
+    await user.keyboard("{Enter}");
+    expect(textarea).toHaveValue("");
+
+    await user.type(textarea, "Hello, world!");
+    await user.click(button);
+    expect(textarea).toHaveValue("");
+  });
+
+  it("should hide the submit button", () => {
+    render(<ChatInput onSubmit={onSubmitMock} showButton={false} />);
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+
+  it("should call onChange when the user types", async () => {
+    const user = userEvent.setup();
+    const onChangeMock = vi.fn();
+    render(<ChatInput onSubmit={onSubmitMock} onChange={onChangeMock} />);
+    const textarea = screen.getByRole("textbox");
+
+    await user.type(textarea, "Hello, world!");
+
+    expect(onChangeMock).toHaveBeenCalledTimes("Hello, world!".length);
+  });
+
+  it("should have set the passed value", () => {
+    render(<ChatInput value="Hello, world!" onSubmit={onSubmitMock} />);
+    const textarea = screen.getByRole("textbox");
+
+    expect(textarea).toHaveValue("Hello, world!");
+  });
+
+  it("should display the stop button and trigger the callback", async () => {
+    const user = userEvent.setup();
+    const onStopMock = vi.fn();
+    render(
+      <ChatInput onSubmit={onSubmitMock} button="stop" onStop={onStopMock} />,
+    );
+    const stopButton = screen.getByTestId("stop-button");
+
+    await user.click(stopButton);
+    expect(onStopMock).toHaveBeenCalledOnce();
+  });
+
+  it("should call onFocus and onBlur when the textarea is focused and blurred", async () => {
+    const user = userEvent.setup();
+    const onFocusMock = vi.fn();
+    const onBlurMock = vi.fn();
+    render(
+      <ChatInput
+        onSubmit={onSubmitMock}
+        onFocus={onFocusMock}
+        onBlur={onBlurMock}
+      />,
+    );
+    const textarea = screen.getByRole("textbox");
+
+    await user.click(textarea);
+    expect(onFocusMock).toHaveBeenCalledOnce();
+
+    await user.tab();
+    expect(onBlurMock).toHaveBeenCalledOnce();
+  });
+
+  it("should handle text paste correctly", () => {
+    const onSubmit = vi.fn();
+    const onChange = vi.fn();
+
+    render(<ChatInput onSubmit={onSubmit} onChange={onChange} />);
+
+    const input = screen.getByTestId("chat-input").querySelector("textarea");
+    expect(input).toBeTruthy();
+
+    // Fire paste event with text data
+    fireEvent.paste(input!, {
+      clipboardData: {
+        getData: (type: string) => (type === "text/plain" ? "test paste" : ""),
+        files: [],
+      },
+    });
+  });
+
+  it("should handle image paste correctly", () => {
+    const onSubmit = vi.fn();
+    const onImagePaste = vi.fn();
+
+    render(<ChatInput onSubmit={onSubmit} onImagePaste={onImagePaste} />);
+
+    const input = screen.getByTestId("chat-input").querySelector("textarea");
+    expect(input).toBeTruthy();
+
+    // Create a paste event with an image file
+    const file = new File(["dummy content"], "image.png", {
+      type: "image/png",
+    });
+
+    // Fire paste event with image data
+    fireEvent.paste(input!, {
+      clipboardData: {
+        getData: () => "",
+        files: [file],
+      },
+    });
+
+    // Verify image paste was handled
+    expect(onImagePaste).toHaveBeenCalledWith([file]);
+  });
+
+  it("should use the default maxRows value", () => {
+    // We can't directly test the maxRows prop as it's not exposed in the DOM
+    // Instead, we'll verify the component renders with the default props
+    render(<ChatInput onSubmit={onSubmitMock} />);
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toBeInTheDocument();
+
+    // The actual verification of maxRows=16 is handled internally by the TextareaAutosize component
+    // and affects how many rows the textarea can expand to
+  });
+
+  it("should not submit when Enter is pressed during IME composition", async () => {
+    const user = userEvent.setup();
+    render(<ChatInput onSubmit={onSubmitMock} />);
+    const textarea = screen.getByRole("textbox");
+
+    await user.type(textarea, "こんにちは");
+
+    // Simulate Enter during IME composition
+    fireEvent.keyDown(textarea, {
+      key: "Enter",
+      isComposing: true,
+      nativeEvent: { isComposing: true },
+    });
+
+    expect(onSubmitMock).not.toHaveBeenCalled();
+
+    // Simulate normal Enter after composition is done
+    fireEvent.keyDown(textarea, {
+      key: "Enter",
+      isComposing: false,
+      nativeEvent: { isComposing: false },
+    });
+
+    expect(onSubmitMock).toHaveBeenCalledWith("こんにちは");
+  });
+});

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

@@ -0,0 +1,366 @@
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { renderWithProviders } from "test-utils";
+import type { Message } from "#/message";
+import { SUGGESTIONS } from "#/utils/suggestions";
+import { WsClientProviderStatus } from "#/context/ws-client-provider";
+import { ChatInterface } from "#/components/features/chat/chat-interface";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const renderChatInterface = (messages: Message[]) =>
+  renderWithProviders(<ChatInterface />);
+
+describe("Empty state", () => {
+  const { send: sendMock } = vi.hoisted(() => ({
+    send: vi.fn(),
+  }));
+
+  const { useWsClient: useWsClientMock } = vi.hoisted(() => ({
+    useWsClient: vi.fn(() => ({
+      send: sendMock,
+      status: WsClientProviderStatus.CONNECTED,
+      isLoadingMessages: false,
+    })),
+  }));
+
+  beforeAll(() => {
+    vi.mock("react-router", async (importActual) => ({
+      ...(await importActual<typeof import("react-router")>()),
+      useRouteLoaderData: vi.fn(() => ({})),
+    }));
+
+    vi.mock("#/context/socket", async (importActual) => ({
+      ...(await importActual<typeof import("#/context/ws-client-provider")>()),
+      useWsClient: useWsClientMock,
+    }));
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it.todo("should render suggestions if empty");
+
+  it("should render the default suggestions", () => {
+    renderWithProviders(<ChatInterface />);
+
+    const suggestions = screen.getByTestId("suggestions");
+    const repoSuggestions = Object.keys(SUGGESTIONS.repo);
+
+    // check that there are at most 4 suggestions displayed
+    const displayedSuggestions = within(suggestions).getAllByRole("button");
+    expect(displayedSuggestions.length).toBeLessThanOrEqual(4);
+
+    // Check that each displayed suggestion is one of the repo suggestions
+    displayedSuggestions.forEach((suggestion) => {
+      expect(repoSuggestions).toContain(suggestion.textContent);
+    });
+  });
+
+  it.fails(
+    "should load the a user message to the input when selecting",
+    async () => {
+      // this is to test that the message is in the UI before the socket is called
+      useWsClientMock.mockImplementation(() => ({
+        send: sendMock,
+        status: WsClientProviderStatus.CONNECTED,
+        isLoadingMessages: false,
+      }));
+      const user = userEvent.setup();
+      renderWithProviders(<ChatInterface />);
+
+      const suggestions = screen.getByTestId("suggestions");
+      const displayedSuggestions = within(suggestions).getAllByRole("button");
+      const input = screen.getByTestId("chat-input");
+
+      await user.click(displayedSuggestions[0]);
+
+      // user message loaded to input
+      expect(screen.queryByTestId("suggestions")).toBeInTheDocument();
+      expect(input).toHaveValue(displayedSuggestions[0].textContent);
+    },
+  );
+
+  it.fails(
+    "should send the message to the socket only if the runtime is active",
+    async () => {
+      useWsClientMock.mockImplementation(() => ({
+        send: sendMock,
+        status: WsClientProviderStatus.CONNECTED,
+        isLoadingMessages: false,
+      }));
+      const user = userEvent.setup();
+      const { rerender } = renderWithProviders(<ChatInterface />);
+
+      const suggestions = screen.getByTestId("suggestions");
+      const displayedSuggestions = within(suggestions).getAllByRole("button");
+
+      await user.click(displayedSuggestions[0]);
+      expect(sendMock).not.toHaveBeenCalled();
+
+      useWsClientMock.mockImplementation(() => ({
+        send: sendMock,
+        status: WsClientProviderStatus.CONNECTED,
+        isLoadingMessages: false,
+      }));
+      rerender(<ChatInterface />);
+
+      await waitFor(() =>
+        expect(sendMock).toHaveBeenCalledWith(expect.any(String)),
+      );
+    },
+  );
+});
+
+describe.skip("ChatInterface", () => {
+  beforeAll(() => {
+    // mock useScrollToBottom hook
+    vi.mock("#/hooks/useScrollToBottom", () => ({
+      useScrollToBottom: vi.fn(() => ({
+        scrollDomToBottom: vi.fn(),
+        onChatBodyScroll: vi.fn(),
+        hitBottom: vi.fn(),
+      })),
+    }));
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should render messages", () => {
+    const messages: Message[] = [
+      {
+        sender: "user",
+        content: "Hello",
+        imageUrls: [],
+        timestamp: new Date().toISOString(),
+        pending: true,
+      },
+      {
+        sender: "assistant",
+        content: "Hi",
+        imageUrls: [],
+        timestamp: new Date().toISOString(),
+        pending: true,
+      },
+    ];
+    renderChatInterface(messages);
+
+    expect(screen.getAllByTestId(/-message/)).toHaveLength(2);
+  });
+
+  it("should render a chat input", () => {
+    const messages: Message[] = [];
+    renderChatInterface(messages);
+
+    expect(screen.getByTestId("chat-input")).toBeInTheDocument();
+  });
+
+  it("should call socket send when submitting a message", async () => {
+    const user = userEvent.setup();
+    const messages: Message[] = [];
+    renderChatInterface(messages);
+
+    const input = screen.getByTestId("chat-input");
+    await user.type(input, "Hello");
+    await user.keyboard("{Enter}");
+
+    // spy on send and expect to have been called
+  });
+
+  it("should render an image carousel with a message", () => {
+    let messages: Message[] = [
+      {
+        sender: "assistant",
+        content: "Here are some images",
+        imageUrls: [],
+        timestamp: new Date().toISOString(),
+        pending: true,
+      },
+    ];
+    const { rerender } = renderChatInterface(messages);
+
+    expect(screen.queryByTestId("image-carousel")).not.toBeInTheDocument();
+
+    messages = [
+      {
+        sender: "assistant",
+        content: "Here are some images",
+        imageUrls: ["image1", "image2"],
+        timestamp: new Date().toISOString(),
+        pending: true,
+      },
+    ];
+
+    rerender(<ChatInterface />);
+
+    const imageCarousel = screen.getByTestId("image-carousel");
+    expect(imageCarousel).toBeInTheDocument();
+    expect(within(imageCarousel).getAllByTestId("image-preview")).toHaveLength(
+      2,
+    );
+  });
+
+  it("should render a 'continue' action when there are more than 2 messages and awaiting user input", () => {
+    const messages: Message[] = [
+      {
+        sender: "assistant",
+        content: "Hello",
+        imageUrls: [],
+        timestamp: new Date().toISOString(),
+        pending: true,
+      },
+      {
+        sender: "user",
+        content: "Hi",
+        imageUrls: [],
+        timestamp: new Date().toISOString(),
+        pending: true,
+      },
+    ];
+    const { rerender } = renderChatInterface(messages);
+    expect(
+      screen.queryByTestId("continue-action-button"),
+    ).not.toBeInTheDocument();
+
+    messages.push({
+      sender: "assistant",
+      content: "How can I help you?",
+      imageUrls: [],
+      timestamp: new Date().toISOString(),
+      pending: true,
+    });
+
+    rerender(<ChatInterface />);
+
+    expect(screen.getByTestId("continue-action-button")).toBeInTheDocument();
+  });
+
+  it("should render inline errors", () => {
+    const messages: Message[] = [
+      {
+        sender: "assistant",
+        content: "Hello",
+        imageUrls: [],
+        timestamp: new Date().toISOString(),
+        pending: true,
+      },
+      {
+        type: "error",
+        content: "Something went wrong",
+        sender: "assistant",
+        timestamp: new Date().toISOString(),
+      },
+    ];
+    renderChatInterface(messages);
+
+    const error = screen.getByTestId("error-message");
+    expect(within(error).getByText("Something went wrong")).toBeInTheDocument();
+  });
+
+  it("should render both GitHub buttons initially when ghToken is available", () => {
+    vi.mock("react-router", async (importActual) => ({
+      ...(await importActual<typeof import("react-router")>()),
+      useRouteLoaderData: vi.fn(() => ({ ghToken: "test-token" })),
+    }));
+
+    const messages: Message[] = [
+      {
+        sender: "assistant",
+        content: "Hello",
+        imageUrls: [],
+        timestamp: new Date().toISOString(),
+        pending: true,
+      },
+    ];
+    renderChatInterface(messages);
+
+    const pushButton = screen.getByRole("button", { name: "Push to Branch" });
+    const prButton = screen.getByRole("button", { name: "Push & Create PR" });
+
+    expect(pushButton).toBeInTheDocument();
+    expect(prButton).toBeInTheDocument();
+    expect(pushButton).toHaveTextContent("Push to Branch");
+    expect(prButton).toHaveTextContent("Push & Create PR");
+  });
+
+  it("should render only 'Push changes to PR' button after PR is created", async () => {
+    vi.mock("react-router", async (importActual) => ({
+      ...(await importActual<typeof import("react-router")>()),
+      useRouteLoaderData: vi.fn(() => ({ ghToken: "test-token" })),
+    }));
+
+    const messages: Message[] = [
+      {
+        sender: "assistant",
+        content: "Hello",
+        imageUrls: [],
+        timestamp: new Date().toISOString(),
+        pending: true,
+      },
+    ];
+    const { rerender } = renderChatInterface(messages);
+    const user = userEvent.setup();
+
+    // Click the "Push & Create PR" button
+    const prButton = screen.getByRole("button", { name: "Push & Create PR" });
+    await user.click(prButton);
+
+    // Re-render to trigger state update
+    rerender(<ChatInterface />);
+
+    // Verify only one button is shown
+    const pushToPrButton = screen.getByRole("button", {
+      name: "Push changes to PR",
+    });
+    expect(pushToPrButton).toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Push to Branch" }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Push & Create PR" }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("should render feedback actions if there are more than 3 messages", () => {
+    const messages: Message[] = [
+      {
+        sender: "assistant",
+        content: "Hello",
+        imageUrls: [],
+        timestamp: new Date().toISOString(),
+        pending: true,
+      },
+      {
+        sender: "user",
+        content: "Hi",
+        imageUrls: [],
+        timestamp: new Date().toISOString(),
+        pending: true,
+      },
+      {
+        sender: "assistant",
+        content: "How can I help you?",
+        imageUrls: [],
+        timestamp: new Date().toISOString(),
+        pending: true,
+      },
+    ];
+    const { rerender } = renderChatInterface(messages);
+    expect(screen.queryByTestId("feedback-actions")).not.toBeInTheDocument();
+
+    messages.push({
+      sender: "user",
+      content: "I need help",
+      imageUrls: [],
+      timestamp: new Date().toISOString(),
+      pending: true,
+    });
+
+    rerender(<ChatInterface />);
+
+    expect(screen.getByTestId("feedback-actions")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,141 @@
+import { describe, expect, it, vi } from "vitest";
+import { screen } from "@testing-library/react";
+import { renderWithProviders } from "test-utils";
+import { createRoutesStub } from "react-router";
+import { ExpandableMessage } from "#/components/features/chat/expandable-message";
+import OpenHands from "#/api/open-hands";
+
+vi.mock("react-i18next", async () => {
+  const actual = await vi.importActual("react-i18next");
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (key: string) => key,
+      i18n: {
+        changeLanguage: () => new Promise(() => {}),
+        language: "en",
+        exists: () => true,
+      },
+    }),
+  };
+});
+
+describe("ExpandableMessage", () => {
+  it("should render with neutral border for non-action messages", () => {
+    renderWithProviders(<ExpandableMessage message="Hello" type="thought" />);
+    const element = screen.getAllByText("Hello")[0];
+    const container = element.closest(
+      "div.flex.gap-2.items-center.justify-start",
+    );
+    expect(container).toHaveClass("border-neutral-300");
+    expect(screen.queryByTestId("status-icon")).not.toBeInTheDocument();
+  });
+
+  it("should render with neutral border for error messages", () => {
+    renderWithProviders(
+      <ExpandableMessage message="Error occurred" type="error" />,
+    );
+    const element = screen.getAllByText("Error occurred")[0];
+    const container = element.closest(
+      "div.flex.gap-2.items-center.justify-start",
+    );
+    expect(container).toHaveClass("border-danger");
+    expect(screen.queryByTestId("status-icon")).not.toBeInTheDocument();
+  });
+
+  it("should render with success icon for successful action messages", () => {
+    renderWithProviders(
+      <ExpandableMessage
+        id="OBSERVATION_MESSAGE$RUN"
+        message="Command executed successfully"
+        type="action"
+        success
+      />,
+    );
+    const element = screen.getByText("OBSERVATION_MESSAGE$RUN");
+    const container = element.closest(
+      "div.flex.gap-2.items-center.justify-start",
+    );
+    expect(container).toHaveClass("border-neutral-300");
+    const icon = screen.getByTestId("status-icon");
+    expect(icon).toHaveClass("fill-success");
+  });
+
+  it("should render with error icon for failed action messages", () => {
+    renderWithProviders(
+      <ExpandableMessage
+        id="OBSERVATION_MESSAGE$RUN"
+        message="Command failed"
+        type="action"
+        success={false}
+      />,
+    );
+    const element = screen.getByText("OBSERVATION_MESSAGE$RUN");
+    const container = element.closest(
+      "div.flex.gap-2.items-center.justify-start",
+    );
+    expect(container).toHaveClass("border-neutral-300");
+    const icon = screen.getByTestId("status-icon");
+    expect(icon).toHaveClass("fill-danger");
+  });
+
+  it("should render with neutral border and no icon for action messages without success prop", () => {
+    renderWithProviders(
+      <ExpandableMessage
+        id="OBSERVATION_MESSAGE$RUN"
+        message="Running command"
+        type="action"
+      />,
+    );
+    const element = screen.getByText("OBSERVATION_MESSAGE$RUN");
+    const container = element.closest(
+      "div.flex.gap-2.items-center.justify-start",
+    );
+    expect(container).toHaveClass("border-neutral-300");
+    expect(screen.queryByTestId("status-icon")).not.toBeInTheDocument();
+  });
+
+  it("should render with neutral border and no icon for action messages with undefined success (timeout case)", () => {
+    renderWithProviders(
+      <ExpandableMessage
+        id="OBSERVATION_MESSAGE$RUN"
+        message="Command timed out"
+        type="action"
+        success={undefined}
+      />,
+    );
+    const element = screen.getByText("OBSERVATION_MESSAGE$RUN");
+    const container = element.closest(
+      "div.flex.gap-2.items-center.justify-start",
+    );
+    expect(container).toHaveClass("border-neutral-300");
+    expect(screen.queryByTestId("status-icon")).not.toBeInTheDocument();
+  });
+
+  it("should render the out of credits message when the user is out of credits", async () => {
+    const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
+    // @ts-expect-error - We only care about the APP_MODE and FEATURE_FLAGS fields
+    getConfigSpy.mockResolvedValue({
+      APP_MODE: "saas",
+      FEATURE_FLAGS: {
+        ENABLE_BILLING: true,
+        HIDE_LLM_SETTINGS: false,
+      },
+    });
+    const RouterStub = createRoutesStub([
+      {
+        Component: () => (
+          <ExpandableMessage
+            id="STATUS$ERROR_LLM_OUT_OF_CREDITS"
+            message=""
+            type=""
+          />
+        ),
+        path: "/",
+      },
+    ]);
+
+    renderWithProviders(<RouterStub />);
+    await screen.findByTestId("out-of-credits");
+  });
+});

frontend/__tests__/components/context-menu/account-settings-context-menu.test.tsx

@@ -0,0 +1,74 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, test, vi } from "vitest";
+import { AccountSettingsContextMenu } from "#/components/features/context-menu/account-settings-context-menu";
+
+describe("AccountSettingsContextMenu", () => {
+  const user = userEvent.setup();
+  const onClickAccountSettingsMock = vi.fn();
+  const onLogoutMock = vi.fn();
+  const onCloseMock = vi.fn();
+
+  afterEach(() => {
+    onClickAccountSettingsMock.mockClear();
+    onLogoutMock.mockClear();
+    onCloseMock.mockClear();
+  });
+
+  it("should always render the right options", () => {
+    render(
+      <AccountSettingsContextMenu
+        onLogout={onLogoutMock}
+        onClose={onCloseMock}
+      />,
+    );
+
+    expect(
+      screen.getByTestId("account-settings-context-menu"),
+    ).toBeInTheDocument();
+    expect(screen.getByText("ACCOUNT_SETTINGS$LOGOUT")).toBeInTheDocument();
+  });
+
+  it("should call onLogout when the logout option is clicked", async () => {
+    render(
+      <AccountSettingsContextMenu
+        onLogout={onLogoutMock}
+        onClose={onCloseMock}
+      />,
+    );
+
+    const logoutOption = screen.getByText("ACCOUNT_SETTINGS$LOGOUT");
+    await user.click(logoutOption);
+
+    expect(onLogoutMock).toHaveBeenCalledOnce();
+  });
+
+  test("logout button is always enabled", async () => {
+    render(
+      <AccountSettingsContextMenu
+        onLogout={onLogoutMock}
+        onClose={onCloseMock}
+      />,
+    );
+
+    const logoutOption = screen.getByText("ACCOUNT_SETTINGS$LOGOUT");
+    await user.click(logoutOption);
+
+    expect(onLogoutMock).toHaveBeenCalledOnce();
+  });
+
+  it("should call onClose when clicking outside of the element", async () => {
+    render(
+      <AccountSettingsContextMenu
+        onLogout={onLogoutMock}
+        onClose={onCloseMock}
+      />,
+    );
+
+    const accountSettingsButton = screen.getByText("ACCOUNT_SETTINGS$LOGOUT");
+    await user.click(accountSettingsButton);
+    await user.click(document.body);
+
+    expect(onCloseMock).toHaveBeenCalledOnce();
+  });
+});

frontend/__tests__/components/context-menu/context-menu-list-item.test.tsx

@@ -0,0 +1,44 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { ContextMenuListItem } from "#/components/features/context-menu/context-menu-list-item";
+
+describe("ContextMenuListItem", () => {
+  it("should render the component with the children", () => {
+    const onClickMock = vi.fn();
+    render(
+      <ContextMenuListItem onClick={onClickMock}>Test</ContextMenuListItem>,
+    );
+
+    expect(screen.getByTestId("context-menu-list-item")).toBeInTheDocument();
+    expect(screen.getByText("Test")).toBeInTheDocument();
+  });
+
+  it("should call the onClick callback when clicked", async () => {
+    const user = userEvent.setup();
+    const onClickMock = vi.fn();
+    render(
+      <ContextMenuListItem onClick={onClickMock}>Test</ContextMenuListItem>,
+    );
+
+    const element = screen.getByTestId("context-menu-list-item");
+    await user.click(element);
+
+    expect(onClickMock).toHaveBeenCalledOnce();
+  });
+
+  it("should not call the onClick callback when clicked and the button is disabled", async () => {
+    const user = userEvent.setup();
+    const onClickMock = vi.fn();
+    render(
+      <ContextMenuListItem onClick={onClickMock} isDisabled>
+        Test
+      </ContextMenuListItem>,
+    );
+
+    const element = screen.getByTestId("context-menu-list-item");
+    await user.click(element);
+
+    expect(onClickMock).not.toHaveBeenCalled();
+  });
+});

frontend/__tests__/components/features/analytics/analytics-consent-form-modal.test.tsx

@@ -0,0 +1,30 @@
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { AnalyticsConsentFormModal } from "#/components/features/analytics/analytics-consent-form-modal";
+import OpenHands from "#/api/open-hands";
+
+describe("AnalyticsConsentFormModal", () => {
+  it("should call saveUserSettings with consent", async () => {
+    const user = userEvent.setup();
+    const onCloseMock = vi.fn();
+    const saveUserSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
+
+    render(<AnalyticsConsentFormModal onClose={onCloseMock} />, {
+      wrapper: ({ children }) => (
+        <QueryClientProvider client={new QueryClient()}>
+          {children}
+        </QueryClientProvider>
+      ),
+    });
+
+    const confirmButton = screen.getByTestId("confirm-preferences");
+    await user.click(confirmButton);
+
+    expect(saveUserSettingsSpy).toHaveBeenCalledWith(
+      expect.objectContaining({ user_consents_to_analytics: true }),
+    );
+    await waitFor(() => expect(onCloseMock).toHaveBeenCalled());
+  });
+});

frontend/__tests__/components/features/auth-modal.test.tsx

@@ -0,0 +1,47 @@
+import { render, screen } from "@testing-library/react";
+import { it, describe, expect, vi, beforeEach, afterEach } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { AuthModal } from "#/components/features/waitlist/auth-modal";
+
+// Mock the useAuthUrl hook
+vi.mock("#/hooks/use-auth-url", () => ({
+  useAuthUrl: () => "https://gitlab.com/oauth/authorize",
+}));
+
+describe("AuthModal", () => {
+  beforeEach(() => {
+    vi.stubGlobal("location", { href: "" });
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.resetAllMocks();
+  });
+
+  it("should render the GitHub and GitLab buttons", () => {
+    render(<AuthModal githubAuthUrl="mock-url" appMode="saas" />);
+
+    const githubButton = screen.getByRole("button", {
+      name: "GITHUB$CONNECT_TO_GITHUB",
+    });
+    const gitlabButton = screen.getByRole("button", {
+      name: "GITLAB$CONNECT_TO_GITLAB",
+    });
+
+    expect(githubButton).toBeInTheDocument();
+    expect(gitlabButton).toBeInTheDocument();
+  });
+
+  it("should redirect to GitHub auth URL when GitHub button is clicked", async () => {
+    const user = userEvent.setup();
+    const mockUrl = "https://github.com/login/oauth/authorize";
+    render(<AuthModal githubAuthUrl={mockUrl} appMode="saas" />);
+
+    const githubButton = screen.getByRole("button", {
+      name: "GITHUB$CONNECT_TO_GITHUB",
+    });
+    await user.click(githubButton);
+
+    expect(window.location.href).toBe(mockUrl);
+  });
+});

frontend/__tests__/components/features/chat/path-component.test.tsx

@@ -0,0 +1,34 @@
+import { describe, expect, it } from "vitest";
+import { isLikelyDirectory } from "#/components/features/chat/path-component";
+
+describe("isLikelyDirectory", () => {
+  it("should return false for empty path", () => {
+    expect(isLikelyDirectory("")).toBe(false);
+  });
+
+  it("should return true for paths ending with forward slash", () => {
+    expect(isLikelyDirectory("/path/to/dir/")).toBe(true);
+    expect(isLikelyDirectory("dir/")).toBe(true);
+  });
+
+  it("should return true for paths ending with backslash", () => {
+    expect(isLikelyDirectory("C:\\path\\to\\dir\\")).toBe(true);
+    expect(isLikelyDirectory("dir\\")).toBe(true);
+  });
+
+  it("should return true for paths without extension", () => {
+    expect(isLikelyDirectory("/path/to/dir")).toBe(true);
+    expect(isLikelyDirectory("dir")).toBe(true);
+  });
+
+  it("should return false for paths ending with dot", () => {
+    expect(isLikelyDirectory("/path/to/dir.")).toBe(false);
+    expect(isLikelyDirectory("dir.")).toBe(false);
+  });
+
+  it("should return false for paths with file extensions", () => {
+    expect(isLikelyDirectory("/path/to/file.txt")).toBe(false);
+    expect(isLikelyDirectory("file.js")).toBe(false);
+    expect(isLikelyDirectory("script.test.ts")).toBe(false);
+  });
+});

frontend/__tests__/components/features/conversation-panel/conversation-card.test.tsx

@@ -0,0 +1,489 @@
+import { screen, within } from "@testing-library/react";
+import {
+  afterAll,
+  afterEach,
+  beforeAll,
+  describe,
+  expect,
+  it,
+  test,
+  vi,
+} from "vitest";
+import userEvent from "@testing-library/user-event";
+import { renderWithProviders } from "test-utils";
+import { formatTimeDelta } from "#/utils/format-time-delta";
+import { ConversationCard } from "#/components/features/conversation-panel/conversation-card";
+import { clickOnEditButton } from "./utils";
+
+// We'll use the actual i18next implementation but override the translation function
+import { I18nextProvider } from "react-i18next";
+import i18n from "i18next";
+
+// Mock the t function to return our custom translations
+vi.mock("react-i18next", async () => {
+  const actual = await vi.importActual("react-i18next");
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (key: string) => {
+        const translations: Record<string, string> = {
+          "CONVERSATION$CREATED": "Created",
+          "CONVERSATION$AGO": "ago",
+          "CONVERSATION$UPDATED": "Updated"
+        };
+        return translations[key] || key;
+      },
+      i18n: {
+        changeLanguage: () => new Promise(() => {}),
+      },
+    }),
+  };
+});
+
+describe("ConversationCard", () => {
+  const onClick = vi.fn();
+  const onDelete = vi.fn();
+  const onChangeTitle = vi.fn();
+
+  beforeAll(() => {
+    vi.stubGlobal("window", {
+      open: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    });
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterAll(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("should render the conversation card", () => {
+    renderWithProviders(
+      <ConversationCard
+        onDelete={onDelete}
+        onChangeTitle={onChangeTitle}
+        isActive
+        title="Conversation 1"
+        selectedRepository={null}
+        lastUpdatedAt="2021-10-01T12:00:00Z"
+      />,
+    );
+
+    const card = screen.getByTestId("conversation-card");
+
+    within(card).getByText("Conversation 1");
+
+    // Just check that the card contains the expected text content
+    expect(card).toHaveTextContent("Created");
+    expect(card).toHaveTextContent("ago");
+
+    // Use a regex to match the time part since it might have whitespace
+    const timeRegex = new RegExp(formatTimeDelta(new Date("2021-10-01T12:00:00Z")));
+    expect(card).toHaveTextContent(timeRegex);
+  });
+
+  it("should render the selectedRepository if available", () => {
+    const { rerender } = renderWithProviders(
+      <ConversationCard
+        onDelete={onDelete}
+        onChangeTitle={onChangeTitle}
+        isActive
+        title="Conversation 1"
+        selectedRepository={null}
+        lastUpdatedAt="2021-10-01T12:00:00Z"
+      />,
+    );
+
+    expect(
+      screen.queryByTestId("conversation-card-selected-repository"),
+    ).not.toBeInTheDocument();
+
+    rerender(
+      <ConversationCard
+        onDelete={onDelete}
+        onChangeTitle={onChangeTitle}
+        isActive
+        title="Conversation 1"
+        selectedRepository="org/selectedRepository"
+        lastUpdatedAt="2021-10-01T12:00:00Z"
+      />,
+    );
+
+    screen.getByTestId("conversation-card-selected-repository");
+  });
+
+  it("should toggle a context menu when clicking the ellipsis button", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(
+      <ConversationCard
+        onDelete={onDelete}
+        onChangeTitle={onChangeTitle}
+        isActive
+        title="Conversation 1"
+        selectedRepository={null}
+        lastUpdatedAt="2021-10-01T12:00:00Z"
+      />,
+    );
+
+    expect(screen.queryByTestId("context-menu")).not.toBeInTheDocument();
+
+    const ellipsisButton = screen.getByTestId("ellipsis-button");
+    await user.click(ellipsisButton);
+
+    screen.getByTestId("context-menu");
+
+    await user.click(ellipsisButton);
+
+    expect(screen.queryByTestId("context-menu")).not.toBeInTheDocument();
+  });
+
+  it("should call onDelete when the delete button is clicked", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(
+      <ConversationCard
+        onDelete={onDelete}
+        isActive
+        onChangeTitle={onChangeTitle}
+        title="Conversation 1"
+        selectedRepository={null}
+        lastUpdatedAt="2021-10-01T12:00:00Z"
+      />,
+    );
+
+    const ellipsisButton = screen.getByTestId("ellipsis-button");
+    await user.click(ellipsisButton);
+
+    const menu = screen.getByTestId("context-menu");
+    const deleteButton = within(menu).getByTestId("delete-button");
+
+    await user.click(deleteButton);
+
+    expect(onDelete).toHaveBeenCalled();
+  });
+
+  test("clicking the selectedRepository should not trigger the onClick handler", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(
+      <ConversationCard
+        onDelete={onDelete}
+        isActive
+        onChangeTitle={onChangeTitle}
+        title="Conversation 1"
+        selectedRepository="org/selectedRepository"
+        lastUpdatedAt="2021-10-01T12:00:00Z"
+      />,
+    );
+
+    const selectedRepository = screen.getByTestId(
+      "conversation-card-selected-repository",
+    );
+    await user.click(selectedRepository);
+
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  test("conversation title should call onChangeTitle when changed and blurred", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(
+      <ConversationCard
+        onDelete={onDelete}
+        isActive
+        title="Conversation 1"
+        selectedRepository={null}
+        lastUpdatedAt="2021-10-01T12:00:00Z"
+        onChangeTitle={onChangeTitle}
+      />,
+    );
+
+    await clickOnEditButton(user);
+    const title = screen.getByTestId("conversation-card-title");
+
+    expect(title).toBeEnabled();
+    expect(screen.queryByTestId("context-menu")).not.toBeInTheDocument();
+    // expect to be focused
+    expect(document.activeElement).toBe(title);
+
+    await user.clear(title);
+    await user.type(title, "New Conversation Name   ");
+    await user.tab();
+
+    expect(onChangeTitle).toHaveBeenCalledWith("New Conversation Name");
+    expect(title).toHaveValue("New Conversation Name");
+  });
+
+  it("should reset title and not call onChangeTitle when the title is empty", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(
+      <ConversationCard
+        onDelete={onDelete}
+        isActive
+        onChangeTitle={onChangeTitle}
+        title="Conversation 1"
+        selectedRepository={null}
+        lastUpdatedAt="2021-10-01T12:00:00Z"
+      />,
+    );
+
+    await clickOnEditButton(user);
+
+    const title = screen.getByTestId("conversation-card-title");
+
+    await user.clear(title);
+    await user.tab();
+
+    expect(onChangeTitle).not.toHaveBeenCalled();
+    expect(title).toHaveValue("Conversation 1");
+  });
+
+  test("clicking the title should trigger the onClick handler", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(
+      <ConversationCard
+        onClick={onClick}
+        onDelete={onDelete}
+        isActive
+        onChangeTitle={onChangeTitle}
+        title="Conversation 1"
+        selectedRepository={null}
+        lastUpdatedAt="2021-10-01T12:00:00Z"
+      />,
+    );
+
+    const title = screen.getByTestId("conversation-card-title");
+    await user.click(title);
+
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  test("clicking the title should not trigger the onClick handler if edit mode", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(
+      <ConversationCard
+        onDelete={onDelete}
+        isActive
+        onChangeTitle={onChangeTitle}
+        title="Conversation 1"
+        selectedRepository={null}
+        lastUpdatedAt="2021-10-01T12:00:00Z"
+      />,
+    );
+
+    await clickOnEditButton(user);
+
+    const title = screen.getByTestId("conversation-card-title");
+    await user.click(title);
+
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  test("clicking the delete button should not trigger the onClick handler", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(
+      <ConversationCard
+        onDelete={onDelete}
+        isActive
+        onChangeTitle={onChangeTitle}
+        title="Conversation 1"
+        selectedRepository={null}
+        lastUpdatedAt="2021-10-01T12:00:00Z"
+      />,
+    );
+
+    const ellipsisButton = screen.getByTestId("ellipsis-button");
+    await user.click(ellipsisButton);
+
+    const menu = screen.getByTestId("context-menu");
+    const deleteButton = within(menu).getByTestId("delete-button");
+
+    await user.click(deleteButton);
+
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it("should show display cost button only when showOptions is true", async () => {
+    const user = userEvent.setup();
+    const { rerender } = renderWithProviders(
+      <ConversationCard
+        onDelete={onDelete}
+        onChangeTitle={onChangeTitle}
+        isActive
+        title="Conversation 1"
+        selectedRepository={null}
+        lastUpdatedAt="2021-10-01T12:00:00Z"
+      />,
+    );
+
+    const ellipsisButton = screen.getByTestId("ellipsis-button");
+    await user.click(ellipsisButton);
+
+    // Wait for context menu to appear
+    const menu = await screen.findByTestId("context-menu");
+    expect(
+      within(menu).queryByTestId("display-cost-button"),
+    ).not.toBeInTheDocument();
+
+    // Close menu
+    await user.click(ellipsisButton);
+
+    rerender(
+      <ConversationCard
+        onDelete={onDelete}
+        onChangeTitle={onChangeTitle}
+        showOptions
+        isActive
+        title="Conversation 1"
+        selectedRepository={null}
+        lastUpdatedAt="2021-10-01T12:00:00Z"
+      />,
+    );
+
+    // Open menu again
+    await user.click(ellipsisButton);
+
+    // Wait for context menu to appear and check for display cost button
+    const newMenu = await screen.findByTestId("context-menu");
+    within(newMenu).getByTestId("display-cost-button");
+  });
+
+  it("should show metrics modal when clicking the display cost button", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(
+      <ConversationCard
+        onDelete={onDelete}
+        isActive
+        onChangeTitle={onChangeTitle}
+        title="Conversation 1"
+        selectedRepository={null}
+        lastUpdatedAt="2021-10-01T12:00:00Z"
+        showOptions
+      />,
+    );
+
+    const ellipsisButton = screen.getByTestId("ellipsis-button");
+    await user.click(ellipsisButton);
+
+    const menu = screen.getByTestId("context-menu");
+    const displayCostButton = within(menu).getByTestId("display-cost-button");
+
+    await user.click(displayCostButton);
+
+    // Verify if metrics modal is displayed by checking for the modal content
+    expect(screen.getByTestId("metrics-modal")).toBeInTheDocument();
+  });
+
+  it("should not display the edit or delete options if the handler is not provided", async () => {
+    const user = userEvent.setup();
+    const { rerender } = renderWithProviders(
+      <ConversationCard
+        onClick={onClick}
+        onChangeTitle={onChangeTitle}
+        title="Conversation 1"
+        selectedRepository={null}
+        lastUpdatedAt="2021-10-01T12:00:00Z"
+      />,
+    );
+
+    const ellipsisButton = screen.getByTestId("ellipsis-button");
+    await user.click(ellipsisButton);
+
+    const menu = await screen.findByTestId("context-menu");
+    expect(within(menu).queryByTestId("edit-button")).toBeInTheDocument();
+    expect(within(menu).queryByTestId("delete-button")).not.toBeInTheDocument();
+
+    // toggle to hide the context menu
+    await user.click(ellipsisButton);
+
+    rerender(
+      <ConversationCard
+        onClick={onClick}
+        onDelete={onDelete}
+        title="Conversation 1"
+        selectedRepository={null}
+        lastUpdatedAt="2021-10-01T12:00:00Z"
+      />,
+    );
+
+    await user.click(ellipsisButton);
+    const newMenu = await screen.findByTestId("context-menu");
+    expect(
+      within(newMenu).queryByTestId("edit-button"),
+    ).not.toBeInTheDocument();
+    expect(within(newMenu).queryByTestId("delete-button")).toBeInTheDocument();
+  });
+
+  it("should not render the ellipsis button if there are no actions", () => {
+    const { rerender } = renderWithProviders(
+      <ConversationCard
+        onClick={onClick}
+        onDelete={onDelete}
+        onChangeTitle={onChangeTitle}
+        title="Conversation 1"
+        selectedRepository={null}
+        lastUpdatedAt="2021-10-01T12:00:00Z"
+      />,
+    );
+
+    expect(screen.getByTestId("ellipsis-button")).toBeInTheDocument();
+
+    rerender(
+      <ConversationCard
+        onClick={onClick}
+        onDelete={onDelete}
+        title="Conversation 1"
+        selectedRepository={null}
+        lastUpdatedAt="2021-10-01T12:00:00Z"
+      />,
+    );
+
+    expect(screen.getByTestId("ellipsis-button")).toBeInTheDocument();
+
+    rerender(
+      <ConversationCard
+        onClick={onClick}
+        title="Conversation 1"
+        selectedRepository={null}
+        lastUpdatedAt="2021-10-01T12:00:00Z"
+      />,
+    );
+
+    expect(screen.queryByTestId("ellipsis-button")).not.toBeInTheDocument();
+  });
+
+  describe("state indicator", () => {
+    it("should render the 'STOPPED' indicator by default", () => {
+      renderWithProviders(
+        <ConversationCard
+          onDelete={onDelete}
+          isActive
+          onChangeTitle={onChangeTitle}
+          title="Conversation 1"
+          selectedRepository={null}
+          lastUpdatedAt="2021-10-01T12:00:00Z"
+        />,
+      );
+
+      screen.getByTestId("STOPPED-indicator");
+    });
+
+    it("should render the other indicators when provided", () => {
+      renderWithProviders(
+        <ConversationCard
+          onDelete={onDelete}
+          isActive
+          onChangeTitle={onChangeTitle}
+          title="Conversation 1"
+          selectedRepository={null}
+          lastUpdatedAt="2021-10-01T12:00:00Z"
+          status="RUNNING"
+        />,
+      );
+
+      expect(screen.queryByTestId("STOPPED-indicator")).not.toBeInTheDocument();
+      screen.getByTestId("RUNNING-indicator");
+    });
+  });
+});

frontend/__tests__/components/features/conversation-panel/conversation-panel.test.tsx

@@ -0,0 +1,290 @@
+import { screen, waitFor, within } from "@testing-library/react";
+import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+import { QueryClientConfig } from "@tanstack/react-query";
+import userEvent from "@testing-library/user-event";
+import { createRoutesStub } from "react-router";
+import React from "react";
+import { renderWithProviders } from "test-utils";
+import { ConversationPanel } from "#/components/features/conversation-panel/conversation-panel";
+import OpenHands from "#/api/open-hands";
+import { Conversation } from "#/api/open-hands.types";
+
+describe("ConversationPanel", () => {
+  const onCloseMock = vi.fn();
+  const RouterStub = createRoutesStub([
+    {
+      Component: () => <ConversationPanel onClose={onCloseMock} />,
+      path: "/",
+    },
+  ]);
+
+  const renderConversationPanel = (config?: QueryClientConfig) =>
+    renderWithProviders(<RouterStub />, {
+      preloadedState: {
+        metrics: {
+          cost: null,
+          usage: null,
+        },
+      },
+    });
+
+  beforeAll(() => {
+    vi.mock("react-router", async (importOriginal) => ({
+      ...(await importOriginal<typeof import("react-router")>()),
+      Link: ({ children }: React.PropsWithChildren) => children,
+      useNavigate: vi.fn(() => vi.fn()),
+      useLocation: vi.fn(() => ({ pathname: "/conversation" })),
+      useParams: vi.fn(() => ({ conversationId: "2" })),
+    }));
+  });
+
+  const mockConversations: Conversation[] = [
+    {
+      conversation_id: "1",
+      title: "Conversation 1",
+      selected_repository: null,
+      git_provider: null,
+      selected_branch: null,
+      last_updated_at: "2021-10-01T12:00:00Z",
+      created_at: "2021-10-01T12:00:00Z",
+      status: "STOPPED" as const,
+      url: null,
+      session_api_key: null,
+    },
+    {
+      conversation_id: "2",
+      title: "Conversation 2",
+      selected_repository: null,
+      git_provider: null,
+      selected_branch: null,
+      last_updated_at: "2021-10-02T12:00:00Z",
+      created_at: "2021-10-02T12:00:00Z",
+      status: "STOPPED" as const,
+      url: null,
+      session_api_key: null,
+    },
+    {
+      conversation_id: "3",
+      title: "Conversation 3",
+      selected_repository: null,
+      git_provider: null,
+      selected_branch: null,
+      last_updated_at: "2021-10-03T12:00:00Z",
+      created_at: "2021-10-03T12:00:00Z",
+      status: "STOPPED" as const,
+      url: null,
+      session_api_key: null,
+    },
+  ];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.restoreAllMocks();
+    // Setup default mock for getUserConversations
+    vi.spyOn(OpenHands, "getUserConversations").mockResolvedValue([
+      ...mockConversations,
+    ]);
+  });
+
+  it("should render the conversations", async () => {
+    renderConversationPanel();
+    const cards = await screen.findAllByTestId("conversation-card");
+
+    // NOTE that we filter out conversations that don't have a created_at property
+    // (mock data has 4 conversations, but only 3 have a created_at property)
+    expect(cards).toHaveLength(3);
+  });
+
+  it("should display an empty state when there are no conversations", async () => {
+    const getUserConversationsSpy = vi.spyOn(OpenHands, "getUserConversations");
+    getUserConversationsSpy.mockResolvedValue([]);
+
+    renderConversationPanel();
+
+    const emptyState = await screen.findByText("CONVERSATION$NO_CONVERSATIONS");
+    expect(emptyState).toBeInTheDocument();
+  });
+
+  it("should handle an error when fetching conversations", async () => {
+    const getUserConversationsSpy = vi.spyOn(OpenHands, "getUserConversations");
+    getUserConversationsSpy.mockRejectedValue(
+      new Error("Failed to fetch conversations"),
+    );
+
+    renderConversationPanel();
+
+    const error = await screen.findByText("Failed to fetch conversations");
+    expect(error).toBeInTheDocument();
+  });
+
+  it("should cancel deleting a conversation", async () => {
+    const user = userEvent.setup();
+    renderConversationPanel();
+
+    let cards = await screen.findAllByTestId("conversation-card");
+    expect(
+      within(cards[0]).queryByTestId("delete-button"),
+    ).not.toBeInTheDocument();
+
+    const ellipsisButton = within(cards[0]).getByTestId("ellipsis-button");
+    await user.click(ellipsisButton);
+    const deleteButton = screen.getByTestId("delete-button");
+
+    // Click the first delete button
+    await user.click(deleteButton);
+
+    // Cancel the deletion
+    const cancelButton = screen.getByRole("button", { name: /cancel/i });
+    await user.click(cancelButton);
+
+    expect(
+      screen.queryByRole("button", { name: /cancel/i }),
+    ).not.toBeInTheDocument();
+
+    // Ensure the conversation is not deleted
+    cards = await screen.findAllByTestId("conversation-card");
+    expect(cards).toHaveLength(3);
+  });
+
+  it("should delete a conversation", async () => {
+    const user = userEvent.setup();
+    const mockData: Conversation[] = [
+      {
+        conversation_id: "1",
+        title: "Conversation 1",
+        selected_repository: null,
+        git_provider: null,
+        selected_branch: null,
+        last_updated_at: "2021-10-01T12:00:00Z",
+        created_at: "2021-10-01T12:00:00Z",
+        status: "STOPPED" as const,
+        url: null,
+        session_api_key: null,
+      },
+      {
+        conversation_id: "2",
+        title: "Conversation 2",
+        selected_repository: null,
+        git_provider: null,
+        selected_branch: null,
+        last_updated_at: "2021-10-02T12:00:00Z",
+        created_at: "2021-10-02T12:00:00Z",
+        status: "STOPPED" as const,
+        url: null,
+        session_api_key: null,
+      },
+      {
+        conversation_id: "3",
+        title: "Conversation 3",
+        selected_repository: null,
+        git_provider: null,
+        selected_branch: null,
+        last_updated_at: "2021-10-03T12:00:00Z",
+        created_at: "2021-10-03T12:00:00Z",
+        status: "STOPPED" as const,
+        url: null,
+        session_api_key: null,
+      },
+    ];
+
+    const getUserConversationsSpy = vi.spyOn(OpenHands, "getUserConversations");
+    getUserConversationsSpy.mockImplementation(async () => mockData);
+
+    const deleteUserConversationSpy = vi.spyOn(
+      OpenHands,
+      "deleteUserConversation",
+    );
+    deleteUserConversationSpy.mockImplementation(async (id: string) => {
+      const index = mockData.findIndex((conv) => conv.conversation_id === id);
+      if (index !== -1) {
+        mockData.splice(index, 1);
+      }
+    });
+
+    renderConversationPanel();
+
+    const cards = await screen.findAllByTestId("conversation-card");
+    expect(cards).toHaveLength(3);
+
+    const ellipsisButton = within(cards[0]).getByTestId("ellipsis-button");
+    await user.click(ellipsisButton);
+    const deleteButton = screen.getByTestId("delete-button");
+
+    // Click the first delete button
+    await user.click(deleteButton);
+
+    // Confirm the deletion
+    const confirmButton = screen.getByRole("button", { name: /confirm/i });
+    await user.click(confirmButton);
+
+    expect(
+      screen.queryByRole("button", { name: /confirm/i }),
+    ).not.toBeInTheDocument();
+
+    // Wait for the cards to update
+    await waitFor(() => {
+      const updatedCards = screen.getAllByTestId("conversation-card");
+      expect(updatedCards).toHaveLength(2);
+    });
+  });
+
+  it("should call onClose after clicking a card", async () => {
+    const user = userEvent.setup();
+    renderConversationPanel();
+    const cards = await screen.findAllByTestId("conversation-card");
+    const firstCard = cards[1];
+
+    await user.click(firstCard);
+
+    expect(onCloseMock).toHaveBeenCalledOnce();
+  });
+
+  it("should refetch data on rerenders", async () => {
+    const user = userEvent.setup();
+    const getUserConversationsSpy = vi.spyOn(OpenHands, "getUserConversations");
+    getUserConversationsSpy.mockResolvedValue([...mockConversations]);
+
+    function PanelWithToggle() {
+      const [isOpen, setIsOpen] = React.useState(true);
+      return (
+        <>
+          <button type="button" onClick={() => setIsOpen((prev) => !prev)}>
+            Toggle
+          </button>
+          {isOpen && <ConversationPanel onClose={onCloseMock} />}
+        </>
+      );
+    }
+
+    const MyRouterStub = createRoutesStub([
+      {
+        Component: PanelWithToggle,
+        path: "/",
+      },
+    ]);
+
+    renderWithProviders(<MyRouterStub />, {
+      preloadedState: {
+        metrics: {
+          cost: null,
+          usage: null,
+        },
+      },
+    });
+
+    const toggleButton = screen.getByText("Toggle");
+
+    // Initial render
+    const cards = await screen.findAllByTestId("conversation-card");
+    expect(cards).toHaveLength(3);
+
+    // Toggle off
+    await user.click(toggleButton);
+    expect(screen.queryByTestId("conversation-card")).not.toBeInTheDocument();
+
+    // Toggle on
+    await user.click(toggleButton);
+    const newCards = await screen.findAllByTestId("conversation-card");
+    expect(newCards).toHaveLength(3);
+  });
+});

frontend/__tests__/components/features/conversation-panel/utils.ts

@@ -0,0 +1,17 @@
+import { screen, within } from "@testing-library/react";
+import { UserEvent } from "@testing-library/user-event";
+
+export const clickOnEditButton = async (
+  user: UserEvent,
+  container?: HTMLElement,
+) => {
+  const wrapper = container ? within(container) : screen;
+
+  const ellipsisButton = wrapper.getByTestId("ellipsis-button");
+  await user.click(ellipsisButton);
+
+  const menu = wrapper.getByTestId("context-menu");
+  const editButton = within(menu).getByTestId("edit-button");
+
+  await user.click(editButton);
+};

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

@@ -0,0 +1,93 @@
+import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
+import { render, screen } from "@testing-library/react";
+import { Provider } from "react-redux";
+import { createRoutesStub } from "react-router";
+import { setupStore } from "test-utils";
+import { describe, expect, it, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { HomeHeader } from "#/components/features/home/home-header";
+import OpenHands from "#/api/open-hands";
+
+// Mock the translation function
+vi.mock("react-i18next", async () => {
+  const actual = await vi.importActual("react-i18next");
+  return {
+    ...actual,
+    useTranslation: () => ({
+      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"
+        };
+        return translations[key] || key;
+      },
+      i18n: { language: "en" },
+    }),
+  };
+});
+
+const renderHomeHeader = () => {
+  const RouterStub = createRoutesStub([
+    {
+      Component: HomeHeader,
+      path: "/",
+    },
+    {
+      Component: () => <div data-testid="conversation-screen" />,
+      path: "/conversations/:conversationId",
+    },
+  ]);
+
+  return render(<RouterStub />, {
+    wrapper: ({ children }) => (
+      <Provider store={setupStore()}>
+        <QueryClientProvider client={new QueryClient()}>
+          {children}
+        </QueryClientProvider>
+      </Provider>
+    ),
+  });
+};
+
+describe("HomeHeader", () => {
+  it("should create an empty conversation and redirect when pressing the launch from scratch button", async () => {
+    const createConversationSpy = vi.spyOn(OpenHands, "createConversation");
+
+    renderHomeHeader();
+
+    const launchButton = screen.getByRole("button", {
+      name: /Launch from Scratch/i,
+    });
+    await userEvent.click(launchButton);
+
+    expect(createConversationSpy).toHaveBeenCalledExactlyOnceWith(
+      undefined,
+      undefined,
+      undefined,
+      [],
+      undefined,
+      undefined,
+      undefined,
+    );
+
+    // expect to be redirected to /conversations/:conversationId
+    await screen.findByTestId("conversation-screen");
+  });
+
+  it("should change the launch button text to 'Loading...' when creating a conversation", async () => {
+    renderHomeHeader();
+
+    const launchButton = screen.getByRole("button", {
+      name: /Launch from Scratch/i,
+    });
+    await userEvent.click(launchButton);
+
+    expect(launchButton).toHaveTextContent(/Loading.../i);
+    expect(launchButton).toBeDisabled();
+  });
+});

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

@@ -0,0 +1,241 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
+import { setupStore } from "test-utils";
+import { Provider } from "react-redux";
+import { createRoutesStub, Outlet } from "react-router";
+import OpenHands from "#/api/open-hands";
+import { GitRepository } from "#/types/git";
+import { RepoConnector } from "#/components/features/home/repo-connector";
+import { MOCK_DEFAULT_USER_SETTINGS } from "#/mocks/handlers";
+
+const renderRepoConnector = () => {
+  const mockRepoSelection = vi.fn();
+  const RouterStub = createRoutesStub([
+    {
+      Component: () => <RepoConnector onRepoSelection={mockRepoSelection} />,
+      path: "/",
+    },
+    {
+      Component: () => <div data-testid="conversation-screen" />,
+      path: "/conversations/:conversationId",
+    },
+    {
+      Component: () => <Outlet />,
+      path: "/settings",
+      children: [
+        {
+          Component: () => <div data-testid="settings-screen" />,
+          path: "/settings",
+        },
+        {
+          Component: () => <div data-testid="git-settings-screen" />,
+          path: "/settings/git",
+        },
+      ],
+    },
+  ]);
+
+  return render(<RouterStub />, {
+    wrapper: ({ children }) => (
+      <Provider store={setupStore()}>
+        <QueryClientProvider client={new QueryClient()}>
+          {children}
+        </QueryClientProvider>
+      </Provider>
+    ),
+  });
+};
+
+const MOCK_RESPOSITORIES: GitRepository[] = [
+  {
+    id: 1,
+    full_name: "rbren/polaris",
+    git_provider: "github",
+    is_public: true,
+  },
+  {
+    id: 2,
+    full_name: "All-Hands-AI/OpenHands",
+    git_provider: "github",
+    is_public: true,
+  },
+];
+
+beforeEach(() => {
+  const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
+  getSettingsSpy.mockResolvedValue({
+    ...MOCK_DEFAULT_USER_SETTINGS,
+    provider_tokens_set: {
+      github: "some-token",
+      gitlab: null,
+    },
+  });
+});
+
+describe("RepoConnector", () => {
+  it("should render the repository connector section", () => {
+    renderRepoConnector();
+    screen.getByTestId("repo-connector");
+  });
+
+  it("should render the available repositories in the dropdown", async () => {
+    const retrieveUserGitRepositoriesSpy = vi.spyOn(
+      OpenHands,
+      "retrieveUserGitRepositories",
+    );
+    retrieveUserGitRepositoriesSpy.mockResolvedValue(MOCK_RESPOSITORIES);
+
+    renderRepoConnector();
+
+    // Wait for the loading state to be replaced with the dropdown
+    const dropdown = await waitFor(() => screen.getByTestId("repo-dropdown"));
+    await userEvent.click(dropdown);
+
+    await waitFor(() => {
+      screen.getByText("rbren/polaris");
+      screen.getByText("All-Hands-AI/OpenHands");
+    });
+  });
+
+  it("should only enable the launch button if a repo is selected", async () => {
+    const retrieveUserGitRepositoriesSpy = vi.spyOn(
+      OpenHands,
+      "retrieveUserGitRepositories",
+    );
+    retrieveUserGitRepositoriesSpy.mockResolvedValue(MOCK_RESPOSITORIES);
+
+    renderRepoConnector();
+
+    const launchButton = await screen.findByTestId("repo-launch-button");
+    expect(launchButton).toBeDisabled();
+
+    // Wait for the loading state to be replaced with the dropdown
+    const dropdown = await waitFor(() => screen.getByTestId("repo-dropdown"));
+    await userEvent.click(dropdown);
+    await userEvent.click(screen.getByText("rbren/polaris"));
+
+    expect(launchButton).toBeEnabled();
+  });
+
+  it("should render the 'add git(hub|lab) repos' links if saas mode", async () => {
+    const getConfiSpy = vi.spyOn(OpenHands, "getConfig");
+    // @ts-expect-error - only return the APP_MODE
+    getConfiSpy.mockResolvedValue({
+      APP_MODE: "saas",
+    });
+
+    renderRepoConnector();
+
+    await screen.findByText("Add GitHub repos");
+  });
+
+  it("should not render the 'add git(hub|lab) repos' links if oss mode", async () => {
+    const getConfiSpy = vi.spyOn(OpenHands, "getConfig");
+    // @ts-expect-error - only return the APP_MODE
+    getConfiSpy.mockResolvedValue({
+      APP_MODE: "oss",
+    });
+
+    renderRepoConnector();
+
+    expect(screen.queryByText("Add GitHub repos")).not.toBeInTheDocument();
+    expect(screen.queryByText("Add GitLab repos")).not.toBeInTheDocument();
+  });
+
+  it("should create a conversation and redirect with the selected repo when pressing the launch button", async () => {
+    const createConversationSpy = vi.spyOn(OpenHands, "createConversation");
+    const retrieveUserGitRepositoriesSpy = vi.spyOn(
+      OpenHands,
+      "retrieveUserGitRepositories",
+    );
+    retrieveUserGitRepositoriesSpy.mockResolvedValue(MOCK_RESPOSITORIES);
+
+    renderRepoConnector();
+
+    const repoConnector = screen.getByTestId("repo-connector");
+    const launchButton =
+      await within(repoConnector).findByTestId("repo-launch-button");
+    await userEvent.click(launchButton);
+
+    // repo not selected yet
+    expect(createConversationSpy).not.toHaveBeenCalled();
+
+    // select a repository from the dropdown
+    const dropdown = await waitFor(() =>
+      within(repoConnector).getByTestId("repo-dropdown"),
+    );
+    await userEvent.click(dropdown);
+
+    const repoOption = screen.getByText("rbren/polaris");
+    await userEvent.click(repoOption);
+    await userEvent.click(launchButton);
+
+    expect(createConversationSpy).toHaveBeenCalledExactlyOnceWith(
+      "rbren/polaris",
+      "github",
+      undefined,
+      [],
+      undefined,
+      undefined,
+      undefined,
+    );
+  });
+
+  it("should change the launch button text to 'Loading...' when creating a conversation", async () => {
+    const retrieveUserGitRepositoriesSpy = vi.spyOn(
+      OpenHands,
+      "retrieveUserGitRepositories",
+    );
+    retrieveUserGitRepositoriesSpy.mockResolvedValue(MOCK_RESPOSITORIES);
+
+    renderRepoConnector();
+
+    const launchButton = await screen.findByTestId("repo-launch-button");
+
+    // Wait for the loading state to be replaced with the dropdown
+    const dropdown = await waitFor(() => screen.getByTestId("repo-dropdown"));
+    await userEvent.click(dropdown);
+    await userEvent.click(screen.getByText("rbren/polaris"));
+
+    await userEvent.click(launchButton);
+    expect(launchButton).toBeDisabled();
+    expect(launchButton).toHaveTextContent(/Loading/i);
+  });
+
+  it("should not display a button to settings if the user is signed in with their git provider", async () => {
+    renderRepoConnector();
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId("navigate-to-settings-button"),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  it("should display a button to settings if the user needs to sign in with their git provider", async () => {
+    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
+    getSettingsSpy.mockResolvedValue({
+      ...MOCK_DEFAULT_USER_SETTINGS,
+      provider_tokens_set: {},
+    });
+    renderRepoConnector();
+
+    const goToSettingsButton = await screen.findByTestId(
+      "navigate-to-settings-button",
+    );
+    const dropdown = screen.queryByTestId("repo-dropdown");
+    const launchButton = screen.queryByTestId("repo-launch-button");
+    const providerLinks = screen.queryAllByText(/add git(hub|lab) repos/i);
+
+    expect(dropdown).not.toBeInTheDocument();
+    expect(launchButton).not.toBeInTheDocument();
+    expect(providerLinks.length).toBe(0);
+
+    expect(goToSettingsButton).toBeInTheDocument();
+
+    await userEvent.click(goToSettingsButton);
+    await screen.findByTestId("git-settings-screen");
+  });
+});

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

@@ -0,0 +1,259 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, vi, beforeEach, it } from "vitest";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import userEvent from "@testing-library/user-event";
+import { RepositorySelectionForm } from "../../../../src/components/features/home/repo-selection-form";
+import OpenHands from "#/api/open-hands";
+import { GitRepository } from "#/types/git";
+
+// Create mock functions
+const mockUseUserRepositories = 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,
+});
+
+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(),
+});
+
+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(),
+}));
+
+vi.mock("#/hooks/use-debounce", () => ({
+  useDebounce: (value: string) => value,
+}));
+
+const mockOnRepoSelection = vi.fn();
+const renderForm = () =>
+  render(<RepositorySelectionForm onRepoSelection={mockOnRepoSelection} />, {
+    wrapper: ({ children }) => (
+      <QueryClientProvider
+        client={
+          new QueryClient({
+            defaultOptions: {
+              queries: {
+                retry: false,
+              },
+            },
+          })
+        }
+      >
+        {children}
+      </QueryClientProvider>
+    ),
+  });
+
+describe("RepositorySelectionForm", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("shows loading indicator when repositories are being fetched", () => {
+    const MOCK_REPOS: GitRepository[] = [
+      {
+        id: 1,
+        full_name: "user/repo1",
+        git_provider: "github",
+        is_public: true,
+      },
+      {
+        id: 2,
+        full_name: "user/repo2",
+        git_provider: "github",
+        is_public: true,
+      },
+    ];
+    const retrieveUserGitRepositoriesSpy = vi.spyOn(
+      OpenHands,
+      "retrieveUserGitRepositories",
+    );
+    retrieveUserGitRepositoriesSpy.mockResolvedValue(MOCK_REPOS);
+
+    renderForm();
+
+    // Check if loading indicator is displayed
+    expect(screen.getByTestId("repo-dropdown-loading")).toBeInTheDocument();
+    expect(screen.getByText("HOME$LOADING_REPOSITORIES")).toBeInTheDocument();
+  });
+
+  it("shows dropdown when repositories are loaded", async () => {
+    const MOCK_REPOS: GitRepository[] = [
+      {
+        id: 1,
+        full_name: "user/repo1",
+        git_provider: "github",
+        is_public: true,
+      },
+      {
+        id: 2,
+        full_name: "user/repo2",
+        git_provider: "github",
+        is_public: true,
+      },
+    ];
+    const retrieveUserGitRepositoriesSpy = vi.spyOn(
+      OpenHands,
+      "retrieveUserGitRepositories",
+    );
+    retrieveUserGitRepositoriesSpy.mockResolvedValue(MOCK_REPOS);
+
+    renderForm();
+    expect(await screen.findByTestId("repo-dropdown")).toBeInTheDocument();
+  });
+
+  it("shows error message when repository fetch fails", async () => {
+    const retrieveUserGitRepositoriesSpy = vi.spyOn(
+      OpenHands,
+      "retrieveUserGitRepositories",
+    );
+    retrieveUserGitRepositoriesSpy.mockRejectedValue(
+      new Error("Failed to load"),
+    );
+
+    renderForm();
+
+    expect(
+      await screen.findByTestId("repo-dropdown-error"),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText("HOME$FAILED_TO_LOAD_REPOSITORIES"),
+    ).toBeInTheDocument();
+  });
+
+  it("should call the search repos API when searching a URL", async () => {
+    const MOCK_REPOS: GitRepository[] = [
+      {
+        id: 1,
+        full_name: "user/repo1",
+        git_provider: "github",
+        is_public: true,
+      },
+      {
+        id: 2,
+        full_name: "user/repo2",
+        git_provider: "github",
+        is_public: true,
+      },
+    ];
+
+    const MOCK_SEARCH_REPOS: GitRepository[] = [
+      {
+        id: 3,
+        full_name: "kubernetes/kubernetes",
+        git_provider: "github",
+        is_public: true,
+      },
+    ];
+
+    const searchGitReposSpy = vi.spyOn(OpenHands, "searchGitRepositories");
+    const retrieveUserGitRepositoriesSpy = vi.spyOn(
+      OpenHands,
+      "retrieveUserGitRepositories",
+    );
+
+    searchGitReposSpy.mockResolvedValue(MOCK_SEARCH_REPOS);
+    retrieveUserGitRepositoriesSpy.mockResolvedValue(MOCK_REPOS);
+
+    renderForm();
+
+    const input = await screen.findByTestId("repo-dropdown");
+    await userEvent.click(input);
+
+    for (const repo of MOCK_REPOS) {
+      expect(screen.getByText(repo.full_name)).toBeInTheDocument();
+    }
+    expect(
+      screen.queryByText(MOCK_SEARCH_REPOS[0].full_name),
+    ).not.toBeInTheDocument();
+
+    expect(searchGitReposSpy).not.toHaveBeenCalled();
+
+    await userEvent.type(input, "https://github.com/kubernetes/kubernetes");
+    expect(searchGitReposSpy).toHaveBeenLastCalledWith(
+      "kubernetes/kubernetes",
+      3,
+    );
+
+    expect(
+      screen.getByText(MOCK_SEARCH_REPOS[0].full_name),
+    ).toBeInTheDocument();
+    for (const repo of MOCK_REPOS) {
+      expect(screen.queryByText(repo.full_name)).not.toBeInTheDocument();
+    }
+  });
+
+  it("should call onRepoSelection when a searched repository is selected", async () => {
+    const MOCK_SEARCH_REPOS: GitRepository[] = [
+      {
+        id: 3,
+        full_name: "kubernetes/kubernetes",
+        git_provider: "github",
+        is_public: true,
+      },
+    ];
+
+    const searchGitReposSpy = vi.spyOn(OpenHands, "searchGitRepositories");
+    searchGitReposSpy.mockResolvedValue(MOCK_SEARCH_REPOS);
+
+    renderForm();
+
+    const input = await screen.findByTestId("repo-dropdown");
+
+    await userEvent.type(input, "https://github.com/kubernetes/kubernetes");
+    expect(searchGitReposSpy).toHaveBeenLastCalledWith(
+      "kubernetes/kubernetes",
+      3,
+    );
+
+    const searchedRepo = screen.getByText(MOCK_SEARCH_REPOS[0].full_name);
+    expect(searchedRepo).toBeInTheDocument();
+
+    await userEvent.click(searchedRepo);
+    expect(mockOnRepoSelection).toHaveBeenCalledWith(
+      MOCK_SEARCH_REPOS[0].full_name,
+    );
+  });
+});

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

@@ -0,0 +1,108 @@
+import { render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import userEvent from "@testing-library/user-event";
+import { Provider } from "react-redux";
+import { createRoutesStub } from "react-router";
+import { setupStore } from "test-utils";
+import { SuggestedTask } from "#/components/features/home/tasks/task.types";
+import OpenHands from "#/api/open-hands";
+import { TaskCard } from "#/components/features/home/tasks/task-card";
+import { GitRepository } from "#/types/git";
+
+const MOCK_TASK_1: SuggestedTask = {
+  issue_number: 123,
+  repo: "repo1",
+  title: "Task 1",
+  task_type: "MERGE_CONFLICTS",
+  git_provider: "github",
+};
+
+const MOCK_RESPOSITORIES: GitRepository[] = [
+  { id: 1, full_name: "repo1", git_provider: "github", is_public: true },
+  { id: 2, full_name: "repo2", git_provider: "github", is_public: true },
+  { id: 3, full_name: "repo3", git_provider: "gitlab", is_public: true },
+  { id: 4, full_name: "repo4", git_provider: "gitlab", is_public: true },
+];
+
+const renderTaskCard = (task = MOCK_TASK_1) => {
+  const RouterStub = createRoutesStub([
+    {
+      Component: () => <TaskCard task={task} />,
+      path: "/",
+    },
+    {
+      Component: () => <div data-testid="conversation-screen" />,
+      path: "/conversations/:conversationId",
+    },
+  ]);
+
+  return render(<RouterStub />, {
+    wrapper: ({ children }) => (
+      <Provider store={setupStore()}>
+        <QueryClientProvider client={new QueryClient()}>
+          {children}
+        </QueryClientProvider>
+      </Provider>
+    ),
+  });
+};
+
+describe("TaskCard", () => {
+  it("format the issue id", async () => {
+    renderTaskCard();
+
+    const taskId = screen.getByTestId("task-id");
+    expect(taskId).toHaveTextContent(/#123/i);
+  });
+
+  it("should call createConversation when clicking the launch button", async () => {
+    const createConversationSpy = vi.spyOn(OpenHands, "createConversation");
+
+    renderTaskCard();
+
+    const launchButton = screen.getByTestId("task-launch-button");
+    await userEvent.click(launchButton);
+
+    expect(createConversationSpy).toHaveBeenCalled();
+  });
+
+  describe("creating suggested task conversation", () => {
+    beforeEach(() => {
+      const retrieveUserGitRepositoriesSpy = vi.spyOn(
+        OpenHands,
+        "retrieveUserGitRepositories",
+      );
+      retrieveUserGitRepositoriesSpy.mockResolvedValue(MOCK_RESPOSITORIES);
+    });
+
+    it("should call create conversation with suggest task trigger and selected suggested task", async () => {
+      const createConversationSpy = vi.spyOn(OpenHands, "createConversation");
+
+      renderTaskCard(MOCK_TASK_1);
+
+      const launchButton = screen.getByTestId("task-launch-button");
+      await userEvent.click(launchButton);
+
+      expect(createConversationSpy).toHaveBeenCalledWith(
+        MOCK_RESPOSITORIES[0].full_name,
+        MOCK_RESPOSITORIES[0].git_provider,
+        undefined,
+        [],
+        undefined,
+        MOCK_TASK_1,
+        undefined,
+      );
+    });
+  });
+
+  it("should disable the launch button and update text content when creating a conversation", async () => {
+    renderTaskCard();
+
+    const launchButton = screen.getByTestId("task-launch-button");
+    await userEvent.click(launchButton);
+
+    expect(launchButton).toHaveTextContent(/Loading/i);
+    expect(launchButton).toBeDisabled();
+  });
+});

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

@@ -0,0 +1,96 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Provider } from "react-redux";
+import { createRoutesStub } from "react-router";
+import { setupStore } from "test-utils";
+import { TaskSuggestions } from "#/components/features/home/tasks/task-suggestions";
+import { SuggestionsService } from "#/api/suggestions-service/suggestions-service.api";
+import { MOCK_TASKS } from "#/mocks/task-suggestions-handlers";
+
+const renderTaskSuggestions = () => {
+  const RouterStub = createRoutesStub([
+    {
+      Component: () => <TaskSuggestions />,
+      path: "/",
+    },
+    {
+      Component: () => <div data-testid="conversation-screen" />,
+      path: "/conversations/:conversationId",
+    },
+    {
+      Component: () => <div data-testid="settings-screen" />,
+      path: "/settings",
+    },
+  ]);
+
+  return render(<RouterStub />, {
+    wrapper: ({ children }) => (
+      <Provider store={setupStore()}>
+        <QueryClientProvider client={new QueryClient()}>
+          {children}
+        </QueryClientProvider>
+      </Provider>
+    ),
+  });
+};
+
+describe("TaskSuggestions", () => {
+  const getSuggestedTasksSpy = vi.spyOn(
+    SuggestionsService,
+    "getSuggestedTasks",
+  );
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should render the task suggestions section", () => {
+    renderTaskSuggestions();
+    screen.getByTestId("task-suggestions");
+  });
+
+  it("should render an empty message if there are no tasks", async () => {
+    getSuggestedTasksSpy.mockResolvedValue([]);
+    renderTaskSuggestions();
+    await screen.findByText(/No tasks available/i);
+  });
+
+  it("should render the task groups with the correct titles", async () => {
+    getSuggestedTasksSpy.mockResolvedValue(MOCK_TASKS);
+    renderTaskSuggestions();
+
+    await waitFor(() => {
+      MOCK_TASKS.forEach((taskGroup) => {
+        screen.getByText(taskGroup.title);
+      });
+    });
+  });
+
+  it("should render the task cards with the correct task details", async () => {
+    getSuggestedTasksSpy.mockResolvedValue(MOCK_TASKS);
+    renderTaskSuggestions();
+
+    await waitFor(() => {
+      MOCK_TASKS.forEach((task) => {
+        screen.getByText(task.title);
+      });
+    });
+  });
+
+  it("should render skeletons when loading", async () => {
+    getSuggestedTasksSpy.mockResolvedValue(MOCK_TASKS);
+    renderTaskSuggestions();
+
+    const skeletons = await screen.findAllByTestId("task-group-skeleton");
+    expect(skeletons.length).toBeGreaterThan(0);
+
+    await waitFor(() => {
+      MOCK_TASKS.forEach((taskGroup) => {
+        screen.getByText(taskGroup.title);
+      });
+    });
+
+    expect(screen.queryByTestId("task-group-skeleton")).not.toBeInTheDocument();
+  });
+});

frontend/__tests__/components/features/payment/payment-form.test.tsx

@@ -0,0 +1,180 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeEach, describe, expect, it, test, vi } from "vitest";
+import OpenHands from "#/api/open-hands";
+import { PaymentForm } from "#/components/features/payment/payment-form";
+
+describe("PaymentForm", () => {
+  const getBalanceSpy = vi.spyOn(OpenHands, "getBalance");
+  const createCheckoutSessionSpy = vi.spyOn(OpenHands, "createCheckoutSession");
+  const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
+
+  const renderPaymentForm = () =>
+    render(<PaymentForm />, {
+      wrapper: ({ children }) => (
+        <QueryClientProvider client={new QueryClient()}>
+          {children}
+        </QueryClientProvider>
+      ),
+    });
+
+  beforeEach(() => {
+    // useBalance hook will return the balance only if the APP_MODE is "saas" and the billing feature is enabled
+    getConfigSpy.mockResolvedValue({
+      APP_MODE: "saas",
+      GITHUB_CLIENT_ID: "123",
+      POSTHOG_CLIENT_KEY: "456",
+      FEATURE_FLAGS: {
+        ENABLE_BILLING: true,
+        HIDE_LLM_SETTINGS: false,
+      },
+    });
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should render the users current balance", async () => {
+    getBalanceSpy.mockResolvedValue("100.50");
+    renderPaymentForm();
+
+    await waitFor(() => {
+      const balance = screen.getByTestId("user-balance");
+      expect(balance).toHaveTextContent("$100.50");
+    });
+  });
+
+  it("should render the users current balance to two decimal places", async () => {
+    getBalanceSpy.mockResolvedValue("100");
+    renderPaymentForm();
+
+    await waitFor(() => {
+      const balance = screen.getByTestId("user-balance");
+      expect(balance).toHaveTextContent("$100.00");
+    });
+  });
+
+  test("the user can top-up a specific amount", async () => {
+    const user = userEvent.setup();
+    renderPaymentForm();
+
+    const topUpInput = await screen.findByTestId("top-up-input");
+    await user.type(topUpInput, "50");
+
+    const topUpButton = screen.getByText("PAYMENT$ADD_CREDIT");
+    await user.click(topUpButton);
+
+    expect(createCheckoutSessionSpy).toHaveBeenCalledWith(50);
+  });
+
+  it("should only accept integer values", async () => {
+    const user = userEvent.setup();
+    renderPaymentForm();
+
+    const topUpInput = await screen.findByTestId("top-up-input");
+    await user.type(topUpInput, "50");
+
+    const topUpButton = screen.getByText("PAYMENT$ADD_CREDIT");
+    await user.click(topUpButton);
+
+    expect(createCheckoutSessionSpy).toHaveBeenCalledWith(50);
+  });
+
+  it("should disable the top-up button if the user enters an invalid amount", async () => {
+    const user = userEvent.setup();
+    renderPaymentForm();
+
+    const topUpButton = screen.getByText("PAYMENT$ADD_CREDIT");
+    expect(topUpButton).toBeDisabled();
+
+    const topUpInput = await screen.findByTestId("top-up-input");
+    await user.type(topUpInput, "  ");
+
+    expect(topUpButton).toBeDisabled();
+  });
+
+  it("should disable the top-up button after submission", async () => {
+    const user = userEvent.setup();
+    renderPaymentForm();
+
+    const topUpInput = await screen.findByTestId("top-up-input");
+    await user.type(topUpInput, "50");
+
+    const topUpButton = screen.getByText("PAYMENT$ADD_CREDIT");
+    await user.click(topUpButton);
+
+    expect(topUpButton).toBeDisabled();
+  });
+
+  describe("prevent submission if", () => {
+    test("user enters a negative amount", async () => {
+      const user = userEvent.setup();
+      renderPaymentForm();
+
+      const topUpInput = await screen.findByTestId("top-up-input");
+      await user.type(topUpInput, "-50");
+
+      const topUpButton = screen.getByText("PAYMENT$ADD_CREDIT");
+      await user.click(topUpButton);
+
+      expect(createCheckoutSessionSpy).not.toHaveBeenCalled();
+    });
+
+    test("user enters an empty string", async () => {
+      const user = userEvent.setup();
+      renderPaymentForm();
+
+      const topUpInput = await screen.findByTestId("top-up-input");
+      await user.type(topUpInput, "     ");
+
+      const topUpButton = screen.getByText("PAYMENT$ADD_CREDIT");
+      await user.click(topUpButton);
+
+      expect(createCheckoutSessionSpy).not.toHaveBeenCalled();
+    });
+
+    test("user enters a non-numeric value", async () => {
+      const user = userEvent.setup();
+      renderPaymentForm();
+
+      // With type="number", the browser would prevent non-numeric input,
+      // but we'll test the validation logic anyway
+      const topUpInput = await screen.findByTestId("top-up-input");
+      await user.type(topUpInput, "abc");
+
+      const topUpButton = screen.getByText("PAYMENT$ADD_CREDIT");
+      await user.click(topUpButton);
+
+      expect(createCheckoutSessionSpy).not.toHaveBeenCalled();
+    });
+
+    test("user enters less than the minimum amount", async () => {
+      const user = userEvent.setup();
+      renderPaymentForm();
+
+      const topUpInput = await screen.findByTestId("top-up-input");
+      await user.type(topUpInput, "9"); // test assumes the minimum is 10
+
+      const topUpButton = screen.getByText("PAYMENT$ADD_CREDIT");
+      await user.click(topUpButton);
+
+      expect(createCheckoutSessionSpy).not.toHaveBeenCalled();
+    });
+
+    test("user enters a decimal value", async () => {
+      const user = userEvent.setup();
+      renderPaymentForm();
+
+      // With step="1", the browser would validate this, but we'll test our validation logic
+      const topUpInput = await screen.findByTestId("top-up-input");
+      await user.type(topUpInput, "50.5");
+
+      const topUpButton = screen.getByText("PAYMENT$ADD_CREDIT");
+      await user.click(topUpButton);
+
+      expect(createCheckoutSessionSpy).not.toHaveBeenCalled();
+    });
+  });
+});

frontend/__tests__/components/features/settings/api-keys-manager.test.tsx

@@ -0,0 +1,59 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ApiKeysManager } from "#/components/features/settings/api-keys-manager";
+
+// Mock the react-i18next
+vi.mock("react-i18next", async () => {
+  const actual = await vi.importActual<typeof import("react-i18next")>("react-i18next");
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (key: string) => key,
+    }),
+    Trans: ({ i18nKey, components }: { i18nKey: string; components: Record<string, React.ReactNode> }) => {
+      // Simplified Trans component that renders the link
+      if (i18nKey === "SETTINGS$API_KEYS_DESCRIPTION") {
+        return (
+          <span>
+            API keys allow you to authenticate with the OpenHands API programmatically. 
+            Keep your API keys secure; anyone with your API key can access your account. 
+            For more information on how to use the API, see our {components.a}
+          </span>
+        );
+      }
+      return <span>{i18nKey}</span>;
+    },
+  };
+});
+
+// Mock the API keys hook
+vi.mock("#/hooks/query/use-api-keys", () => ({
+  useApiKeys: () => ({
+    data: [],
+    isLoading: false,
+    error: null,
+  }),
+}));
+
+describe("ApiKeysManager", () => {
+  const renderComponent = () => {
+    const queryClient = new QueryClient();
+    return render(
+      <QueryClientProvider client={queryClient}>
+        <ApiKeysManager />
+      </QueryClientProvider>
+    );
+  };
+
+  it("should render the API documentation link", () => {
+    renderComponent();
+    
+    // Find the link to the API documentation
+    const link = screen.getByRole("link");
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute("href", "https://docs.all-hands.dev/usage/cloud/cloud-api");
+    expect(link).toHaveAttribute("target", "_blank");
+    expect(link).toHaveAttribute("rel", "noopener noreferrer");
+  });
+});

frontend/__tests__/components/features/sidebar/sidebar.test.tsx

@@ -0,0 +1,32 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "test-utils";
+import { createRoutesStub } from "react-router";
+import { waitFor } from "@testing-library/react";
+import { Sidebar } from "#/components/features/sidebar/sidebar";
+import OpenHands from "#/api/open-hands";
+
+// These tests will now fail because the conversation panel is rendered through a portal
+// and technically not a child of the Sidebar component.
+
+const RouterStub = createRoutesStub([
+  {
+    path: "/conversation/:conversationId",
+    Component: () => <Sidebar />,
+  },
+]);
+
+const renderSidebar = () =>
+  renderWithProviders(<RouterStub initialEntries={["/conversation/123"]} />);
+
+describe("Sidebar", () => {
+  const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should fetch settings data on mount", async () => {
+    renderSidebar();
+    await waitFor(() => expect(getSettingsSpy).toHaveBeenCalled());
+  });
+});

frontend/__tests__/components/feedback-actions.test.tsx

@@ -0,0 +1,76 @@
+import { screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "test-utils";
+import { TrajectoryActions } from "#/components/features/trajectory/trajectory-actions";
+
+describe("TrajectoryActions", () => {
+  const user = userEvent.setup();
+  const onPositiveFeedback = vi.fn();
+  const onNegativeFeedback = vi.fn();
+  const onExportTrajectory = vi.fn();
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should render correctly", () => {
+    renderWithProviders(
+      <TrajectoryActions
+        onPositiveFeedback={onPositiveFeedback}
+        onNegativeFeedback={onNegativeFeedback}
+        onExportTrajectory={onExportTrajectory}
+      />,
+    );
+
+    const actions = screen.getByTestId("feedback-actions");
+    within(actions).getByTestId("positive-feedback");
+    within(actions).getByTestId("negative-feedback");
+    within(actions).getByTestId("export-trajectory");
+  });
+
+  it("should call onPositiveFeedback when positive feedback is clicked", async () => {
+    renderWithProviders(
+      <TrajectoryActions
+        onPositiveFeedback={onPositiveFeedback}
+        onNegativeFeedback={onNegativeFeedback}
+        onExportTrajectory={onExportTrajectory}
+      />,
+    );
+
+    const positiveFeedback = screen.getByTestId("positive-feedback");
+    await user.click(positiveFeedback);
+
+    expect(onPositiveFeedback).toHaveBeenCalled();
+  });
+
+  it("should call onNegativeFeedback when negative feedback is clicked", async () => {
+    renderWithProviders(
+      <TrajectoryActions
+        onPositiveFeedback={onPositiveFeedback}
+        onNegativeFeedback={onNegativeFeedback}
+        onExportTrajectory={onExportTrajectory}
+      />,
+    );
+
+    const negativeFeedback = screen.getByTestId("negative-feedback");
+    await user.click(negativeFeedback);
+
+    expect(onNegativeFeedback).toHaveBeenCalled();
+  });
+
+  it("should call onExportTrajectory when export button is clicked", async () => {
+    renderWithProviders(
+      <TrajectoryActions
+        onPositiveFeedback={onPositiveFeedback}
+        onNegativeFeedback={onNegativeFeedback}
+        onExportTrajectory={onExportTrajectory}
+      />,
+    );
+
+    const exportButton = screen.getByTestId("export-trajectory");
+    await user.click(exportButton);
+
+    expect(onExportTrajectory).toHaveBeenCalled();
+  });
+});

frontend/__tests__/components/feedback-form.test.tsx

@@ -0,0 +1,68 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+// Mock useParams before importing components
+vi.mock("react-router", async () => {
+  const actual = await vi.importActual("react-router");
+  return {
+    ...(actual as object),
+    useParams: () => ({ conversationId: "test-conversation-id" }),
+  };
+});
+
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { renderWithProviders } from "test-utils";
+import { FeedbackForm } from "#/components/features/feedback/feedback-form";
+import { I18nKey } from "#/i18n/declaration";
+
+describe("FeedbackForm", () => {
+  const user = userEvent.setup();
+  const onCloseMock = vi.fn();
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should render correctly", () => {
+    renderWithProviders(
+      <FeedbackForm polarity="positive" onClose={onCloseMock} />,
+    );
+
+    screen.getByLabelText(I18nKey.FEEDBACK$EMAIL_LABEL);
+    screen.getByLabelText(I18nKey.FEEDBACK$PRIVATE_LABEL);
+    screen.getByLabelText(I18nKey.FEEDBACK$PUBLIC_LABEL);
+
+    screen.getByRole("button", { name: I18nKey.FEEDBACK$SHARE_LABEL });
+    screen.getByRole("button", { name: I18nKey.FEEDBACK$CANCEL_LABEL });
+  });
+
+  it("should switch between private and public permissions", async () => {
+    renderWithProviders(
+      <FeedbackForm polarity="positive" onClose={onCloseMock} />,
+    );
+    const privateRadio = screen.getByLabelText(I18nKey.FEEDBACK$PRIVATE_LABEL);
+    const publicRadio = screen.getByLabelText(I18nKey.FEEDBACK$PUBLIC_LABEL);
+
+    expect(privateRadio).toBeChecked(); // private is the default value
+    expect(publicRadio).not.toBeChecked();
+
+    await user.click(publicRadio);
+    expect(publicRadio).toBeChecked();
+    expect(privateRadio).not.toBeChecked();
+
+    await user.click(privateRadio);
+    expect(privateRadio).toBeChecked();
+    expect(publicRadio).not.toBeChecked();
+  });
+
+  it("should call onClose when the close button is clicked", async () => {
+    renderWithProviders(
+      <FeedbackForm polarity="positive" onClose={onCloseMock} />,
+    );
+    await user.click(
+      screen.getByRole("button", { name: I18nKey.FEEDBACK$CANCEL_LABEL }),
+    );
+
+    expect(onCloseMock).toHaveBeenCalled();
+  });
+});

frontend/__tests__/components/file-operations.test.tsx

@@ -0,0 +1,11 @@
+import { describe, it } from "vitest";
+
+describe("File Operations Messages", () => {
+  it.todo("should show success indicator for successful file read operation");
+
+  it.todo("should show failure indicator for failed file read operation");
+
+  it.todo("should show success indicator for successful file edit operation");
+
+  it.todo("should show failure indicator for failed file edit operation");
+});

frontend/__tests__/components/image-preview.test.tsx

@@ -0,0 +1,37 @@
+import { ImagePreview } from "#/components/features/images/image-preview";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+describe("ImagePreview", () => {
+  it("should render an image", () => {
+    render(
+      <ImagePreview src="https://example.com/image.jpg" onRemove={vi.fn} />,
+    );
+    const img = screen.getByRole("img");
+
+    expect(screen.getByTestId("image-preview")).toBeInTheDocument();
+    expect(img).toHaveAttribute("src", "https://example.com/image.jpg");
+  });
+
+  it("should call onRemove when the close button is clicked", async () => {
+    const user = userEvent.setup();
+    const onRemoveMock = vi.fn();
+    render(
+      <ImagePreview
+        src="https://example.com/image.jpg"
+        onRemove={onRemoveMock}
+      />,
+    );
+
+    const closeButton = screen.getByRole("button");
+    await user.click(closeButton);
+
+    expect(onRemoveMock).toHaveBeenCalledOnce();
+  });
+
+  it("shoud not display the close button when onRemove is not provided", () => {
+    render(<ImagePreview src="https://example.com/image.jpg" />);
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,190 @@
+import { render, screen, within, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { InteractiveChatBox } from "#/components/features/chat/interactive-chat-box";
+
+describe("InteractiveChatBox", () => {
+  const onSubmitMock = vi.fn();
+  const onStopMock = vi.fn();
+
+  beforeAll(() => {
+    global.URL.createObjectURL = vi
+      .fn()
+      .mockReturnValue("blob:http://example.com");
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should render", () => {
+    render(<InteractiveChatBox onSubmit={onSubmitMock} onStop={onStopMock} />);
+
+    const chatBox = screen.getByTestId("interactive-chat-box");
+    within(chatBox).getByTestId("chat-input");
+    within(chatBox).getByTestId("upload-image-input");
+  });
+
+  it.fails("should set custom values", () => {
+    render(
+      <InteractiveChatBox
+        onSubmit={onSubmitMock}
+        onStop={onStopMock}
+        value="Hello, world!"
+      />,
+    );
+
+    const chatBox = screen.getByTestId("interactive-chat-box");
+    const chatInput = within(chatBox).getByTestId("chat-input");
+
+    expect(chatInput).toHaveValue("Hello, world!");
+  });
+
+  it("should display the image previews when images are uploaded", async () => {
+    const user = userEvent.setup();
+    render(<InteractiveChatBox onSubmit={onSubmitMock} onStop={onStopMock} />);
+
+    const file = new File(["(⌐□_□)"], "chucknorris.png", { type: "image/png" });
+    const input = screen.getByTestId("upload-image-input");
+
+    expect(screen.queryAllByTestId("image-preview")).toHaveLength(0);
+
+    await user.upload(input, file);
+    expect(screen.queryAllByTestId("image-preview")).toHaveLength(1);
+
+    const files = [
+      new File(["(⌐□_□)"], "chucknorris2.png", { type: "image/png" }),
+      new File(["(⌐□_□)"], "chucknorris3.png", { type: "image/png" }),
+    ];
+
+    await user.upload(input, files);
+    expect(screen.queryAllByTestId("image-preview")).toHaveLength(3);
+  });
+
+  it("should remove the image preview when the close button is clicked", async () => {
+    const user = userEvent.setup();
+    render(<InteractiveChatBox onSubmit={onSubmitMock} onStop={onStopMock} />);
+
+    const file = new File(["(⌐□_□)"], "chucknorris.png", { type: "image/png" });
+    const input = screen.getByTestId("upload-image-input");
+
+    await user.upload(input, file);
+    expect(screen.queryAllByTestId("image-preview")).toHaveLength(1);
+
+    const imagePreview = screen.getByTestId("image-preview");
+    const closeButton = within(imagePreview).getByRole("button");
+    await user.click(closeButton);
+
+    expect(screen.queryAllByTestId("image-preview")).toHaveLength(0);
+  });
+
+  it("should call onSubmit with the message and images", async () => {
+    const user = userEvent.setup();
+    render(<InteractiveChatBox onSubmit={onSubmitMock} onStop={onStopMock} />);
+
+    const textarea = within(screen.getByTestId("chat-input")).getByRole(
+      "textbox",
+    );
+    const input = screen.getByTestId("upload-image-input");
+    const file = new File(["(⌐□_□)"], "chucknorris.png", { type: "image/png" });
+
+    await user.upload(input, file);
+    await user.type(textarea, "Hello, world!");
+    await user.keyboard("{Enter}");
+
+    expect(onSubmitMock).toHaveBeenCalledWith("Hello, world!", [file]);
+
+    // clear images after submission
+    expect(screen.queryAllByTestId("image-preview")).toHaveLength(0);
+  });
+
+  it("should disable the submit button", async () => {
+    const user = userEvent.setup();
+    render(
+      <InteractiveChatBox
+        isDisabled
+        onSubmit={onSubmitMock}
+        onStop={onStopMock}
+      />,
+    );
+
+    const button = screen.getByRole("button");
+    expect(button).toBeDisabled();
+
+    await user.click(button);
+    expect(onSubmitMock).not.toHaveBeenCalled();
+  });
+
+  it("should display the stop button if set and call onStop when clicked", async () => {
+    const user = userEvent.setup();
+    render(
+      <InteractiveChatBox
+        mode="stop"
+        onSubmit={onSubmitMock}
+        onStop={onStopMock}
+      />,
+    );
+
+    const stopButton = screen.getByTestId("stop-button");
+    expect(stopButton).toBeInTheDocument();
+
+    await user.click(stopButton);
+    expect(onStopMock).toHaveBeenCalledOnce();
+  });
+
+  it("should handle image upload and message submission correctly", async () => {
+    const user = userEvent.setup();
+    const onSubmit = vi.fn();
+    const onStop = vi.fn();
+    const onChange = vi.fn();
+
+    const { rerender } = render(
+      <InteractiveChatBox
+        onSubmit={onSubmit}
+        onStop={onStop}
+        onChange={onChange}
+        value="test message"
+      />
+    );
+
+    // Upload an image via the upload button - this should NOT clear the text input
+    const file = new File(["dummy content"], "test.png", { type: "image/png" });
+    const input = screen.getByTestId("upload-image-input");
+    await user.upload(input, file);
+
+    // Verify text input was not cleared
+    expect(screen.getByRole("textbox")).toHaveValue("test message");
+    expect(onChange).not.toHaveBeenCalledWith("");
+
+    // Submit the message with image
+    const submitButton = screen.getByRole("button", { name: "BUTTON$SEND" });
+    await user.click(submitButton);
+
+    // Verify onSubmit was called with the message and image
+    expect(onSubmit).toHaveBeenCalledWith("test message", [file]);
+
+    // Verify onChange was called to clear the text input
+    expect(onChange).toHaveBeenCalledWith("");
+
+    // Simulate parent component updating the value prop
+    rerender(
+      <InteractiveChatBox
+        onSubmit={onSubmit}
+        onStop={onStop}
+        onChange={onChange}
+        value=""
+      />
+    );
+
+    // Verify the text input was cleared
+    expect(screen.getByRole("textbox")).toHaveValue("");
+
+    // Upload another image - this should NOT clear the text input
+    onChange.mockClear();
+    await user.upload(input, file);
+
+    // Verify text input is still empty and onChange was not called
+    expect(screen.getByRole("textbox")).toHaveValue("");
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});

frontend/__tests__/components/jupyter/jupyter.test.tsx

@@ -0,0 +1,45 @@
+import { render, screen } from "@testing-library/react";
+import { Provider } from "react-redux";
+import { configureStore } from "@reduxjs/toolkit";
+import { JupyterEditor } from "#/components/features/jupyter/jupyter";
+import { jupyterReducer } from "#/state/jupyter-slice";
+import { vi, describe, it, expect } from "vitest";
+
+describe("JupyterEditor", () => {
+  const mockStore = configureStore({
+    reducer: {
+      fileState: () => ({}),
+      initalQuery: () => ({}),
+      browser: () => ({}),
+      chat: () => ({}),
+      code: () => ({}),
+      cmd: () => ({}),
+      agent: () => ({}),
+      jupyter: jupyterReducer,
+      securityAnalyzer: () => ({}),
+      status: () => ({}),
+    },
+    preloadedState: {
+      jupyter: {
+        cells: Array(20).fill({
+          content: "Test cell content",
+          type: "input",
+          output: "Test output",
+        }),
+      },
+    },
+  });
+
+  it("should have a scrollable container", () => {
+    render(
+      <Provider store={mockStore}>
+        <div style={{ height: "100vh" }}>
+          <JupyterEditor maxWidth={800} />
+        </div>
+      </Provider>
+    );
+
+    const container = screen.getByTestId("jupyter-container");
+    expect(container).toHaveClass("flex-1 overflow-y-auto");
+  });
+});

frontend/__tests__/components/landing-translations.test.tsx

@@ -0,0 +1,190 @@
+import { render, screen } from "@testing-library/react";
+import { test, expect, describe, vi } from "vitest";
+import { useTranslation } from "react-i18next";
+import translations from "../../src/i18n/translation.json";
+import { UserAvatar } from "../../src/components/features/sidebar/user-avatar";
+
+vi.mock("@heroui/react", () => ({
+  Tooltip: ({ content, children }: { content: string; children: React.ReactNode }) => (
+    <div>
+      {children}
+      <div>{content}</div>
+    </div>
+  ),
+}));
+
+const supportedLanguages = ['en', 'ja', 'zh-CN', 'zh-TW', 'ko-KR', 'de', 'no', 'it', 'pt', 'es', 'ar', 'fr', 'tr'];
+
+// Helper function to check if a translation exists for all supported languages
+function checkTranslationExists(key: string) {
+  const missingTranslations: string[] = [];
+
+  const translationEntry = (translations as Record<string, Record<string, string>>)[key];
+  if (!translationEntry) {
+    throw new Error(`Translation key "${key}" does not exist in translation.json`);
+  }
+
+  for (const lang of supportedLanguages) {
+    if (!translationEntry[lang]) {
+      missingTranslations.push(lang);
+    }
+  }
+
+  return missingTranslations;
+}
+
+// Helper function to find duplicate translation keys
+function findDuplicateKeys(obj: Record<string, any>) {
+  const seen = new Set<string>();
+  const duplicates = new Set<string>();
+
+  // Only check top-level keys as these are our translation keys
+  for (const key in obj) {
+    if (seen.has(key)) {
+      duplicates.add(key);
+    } else {
+      seen.add(key);
+    }
+  }
+
+  return Array.from(duplicates);
+}
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translationEntry = (translations as Record<string, Record<string, string>>)[key];
+      return translationEntry?.ja || key;
+    },
+  }),
+}));
+
+describe("Landing page translations", () => {
+  test("should render Japanese translations correctly", () => {
+    // Mock a simple component that uses the translations
+    const TestComponent = () => {
+      const { t } = useTranslation();
+      return (
+        <div>
+          <UserAvatar onClick={() => {}} />
+          <div data-testid="main-content">
+            <h1>{t("LANDING$TITLE")}</h1>
+            <button>{t("VSCODE$OPEN")}</button>
+            <button>{t("SUGGESTIONS$INCREASE_TEST_COVERAGE")}</button>
+            <button>{t("SUGGESTIONS$AUTO_MERGE_PRS")}</button>
+            <button>{t("SUGGESTIONS$FIX_README")}</button>
+            <button>{t("SUGGESTIONS$CLEAN_DEPENDENCIES")}</button>
+          </div>
+          <div data-testid="tabs">
+            <span>{t("WORKSPACE$TERMINAL_TAB_LABEL")}</span>
+            <span>{t("WORKSPACE$BROWSER_TAB_LABEL")}</span>
+            <span>{t("WORKSPACE$JUPYTER_TAB_LABEL")}</span>
+            <span>{t("WORKSPACE$CODE_EDITOR_TAB_LABEL")}</span>
+          </div>
+          <div data-testid="workspace-label">{t("WORKSPACE$TITLE")}</div>
+          <button data-testid="new-project">{t("PROJECT$NEW_PROJECT")}</button>
+          <div data-testid="status">
+            <span>{t("TERMINAL$WAITING_FOR_CLIENT")}</span>
+            <span>{t("STATUS$CONNECTED")}</span>
+            <span>{t("STATUS$CONNECTED_TO_SERVER")}</span>
+          </div>
+          <div data-testid="time">
+            <span>{`5 ${t("TIME$MINUTES_AGO")}`}</span>
+            <span>{`2 ${t("TIME$HOURS_AGO")}`}</span>
+            <span>{`3 ${t("TIME$DAYS_AGO")}`}</span>
+          </div>
+        </div>
+      );
+    };
+
+    render(<TestComponent />);
+
+    // Check main content translations
+    expect(screen.getByText("開発を始めましょう！")).toBeInTheDocument();
+    expect(screen.getByText("VS Codeで開く")).toBeInTheDocument();
+    expect(screen.getByText("テストカバレッジを向上させる")).toBeInTheDocument();
+    expect(screen.getByText("Dependabot PRを自動マージ")).toBeInTheDocument();
+    expect(screen.getByText("READMEを改善")).toBeInTheDocument();
+    expect(screen.getByText("依存関係を整理")).toBeInTheDocument();
+
+    // Check user avatar tooltip
+    const userAvatar = screen.getByTestId("user-avatar");
+    userAvatar.focus();
+    expect(screen.getByText("アカウント設定")).toBeInTheDocument();
+
+    // Check tab labels
+    const tabs = screen.getByTestId("tabs");
+    expect(tabs).toHaveTextContent("ターミナル");
+    expect(tabs).toHaveTextContent("ブラウザ");
+    expect(tabs).toHaveTextContent("Jupyter");
+    expect(tabs).toHaveTextContent("コードエディタ");
+
+    // Check workspace label and new project button
+    expect(screen.getByTestId("workspace-label")).toHaveTextContent("ワークスペース");
+    expect(screen.getByTestId("new-project")).toHaveTextContent("新規プロジェクト");
+
+    // Check status messages
+    const status = screen.getByTestId("status");
+    expect(status).toHaveTextContent("クライアントの準備を待機中");
+    expect(status).toHaveTextContent("接続済み");
+    expect(status).toHaveTextContent("サー��ーに接続済み");
+
+    // Check account settings menu
+    expect(screen.getByText("アカウント設定")).toBeInTheDocument();
+
+    // Check time-related translations
+    const time = screen.getByTestId("time");
+    expect(time).toHaveTextContent("5 分前");
+    expect(time).toHaveTextContent("2 時間前");
+    expect(time).toHaveTextContent("3 日前");
+  });
+
+  test("all translation keys should have translations for all supported languages", () => {
+    // Test all translation keys used in the component
+    const translationKeys = [
+      "LANDING$TITLE",
+      "VSCODE$OPEN",
+      "SUGGESTIONS$INCREASE_TEST_COVERAGE",
+      "SUGGESTIONS$AUTO_MERGE_PRS",
+      "SUGGESTIONS$FIX_README",
+      "SUGGESTIONS$CLEAN_DEPENDENCIES",
+      "WORKSPACE$TERMINAL_TAB_LABEL",
+      "WORKSPACE$BROWSER_TAB_LABEL",
+      "WORKSPACE$JUPYTER_TAB_LABEL",
+      "WORKSPACE$CODE_EDITOR_TAB_LABEL",
+      "WORKSPACE$TITLE",
+      "PROJECT$NEW_PROJECT",
+      "TERMINAL$WAITING_FOR_CLIENT",
+      "STATUS$CONNECTED",
+      "STATUS$CONNECTED_TO_SERVER",
+      "TIME$MINUTES_AGO",
+      "TIME$HOURS_AGO",
+      "TIME$DAYS_AGO"
+    ];
+
+    // Check all keys and collect missing translations
+    const missingTranslationsMap = new Map<string, string[]>();
+    translationKeys.forEach(key => {
+      const missing = checkTranslationExists(key);
+      if (missing.length > 0) {
+        missingTranslationsMap.set(key, missing);
+      }
+    });
+
+    // If any translations are missing, throw an error with all missing translations
+    if (missingTranslationsMap.size > 0) {
+      const errorMessage = Array.from(missingTranslationsMap.entries())
+        .map(([key, langs]) => `\n- "${key}" is missing translations for: ${langs.join(', ')}`)
+        .join('');
+      throw new Error(`Missing translations:${errorMessage}`);
+    }
+  });
+
+  test("translation file should not have duplicate keys", () => {
+    const duplicates = findDuplicateKeys(translations);
+
+    if (duplicates.length > 0) {
+      throw new Error(`Found duplicate translation keys: ${duplicates.join(', ')}`);
+    }
+  });
+});

frontend/__tests__/components/modals/base-modal/base-modal.test.tsx

@@ -0,0 +1,151 @@
+import { render, screen, act } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, vi, expect } from "vitest";
+import { BaseModal } from "#/components/shared/modals/base-modal/base-modal";
+
+describe("BaseModal", () => {
+  const onOpenChangeMock = vi.fn();
+
+  it("should render if the modal is open", () => {
+    const { rerender } = render(
+      <BaseModal
+        isOpen={false}
+        onOpenChange={onOpenChangeMock}
+        title="Settings"
+      />,
+    );
+    expect(screen.queryByText("Settings")).not.toBeInTheDocument();
+
+    rerender(
+      <BaseModal title="Settings" onOpenChange={onOpenChangeMock} isOpen />,
+    );
+    expect(screen.getByText("Settings")).toBeInTheDocument();
+  });
+
+  it("should render an optional subtitle", () => {
+    render(
+      <BaseModal
+        isOpen
+        onOpenChange={onOpenChangeMock}
+        title="Settings"
+        subtitle="Subtitle"
+      />,
+    );
+    expect(screen.getByText("Subtitle")).toBeInTheDocument();
+  });
+
+  it("should render actions", async () => {
+    const onPrimaryClickMock = vi.fn();
+    const onSecondaryClickMock = vi.fn();
+
+    const primaryAction = {
+      action: onPrimaryClickMock,
+      label: "Save",
+    };
+
+    const secondaryAction = {
+      action: onSecondaryClickMock,
+      label: "Cancel",
+    };
+
+    render(
+      <BaseModal
+        isOpen
+        onOpenChange={onOpenChangeMock}
+        title="Settings"
+        actions={[primaryAction, secondaryAction]}
+      />,
+    );
+
+    expect(screen.getByText("Save")).toBeInTheDocument();
+    expect(screen.getByText("Cancel")).toBeInTheDocument();
+
+    await userEvent.click(screen.getByText("Save"));
+    expect(onPrimaryClickMock).toHaveBeenCalledTimes(1);
+
+    await userEvent.click(screen.getByText("Cancel"));
+    expect(onSecondaryClickMock).toHaveBeenCalledTimes(1);
+  });
+
+  it("should close the modal after an action is performed", async () => {
+    render(
+      <BaseModal
+        isOpen
+        onOpenChange={onOpenChangeMock}
+        title="Settings"
+        actions={[
+          {
+            label: "Save",
+            action: () => {},
+            closeAfterAction: true,
+          },
+        ]}
+      />,
+    );
+
+    await userEvent.click(screen.getByText("Save"));
+    expect(onOpenChangeMock).toHaveBeenCalledTimes(1);
+  });
+
+  it("should render children", () => {
+    render(
+      <BaseModal isOpen onOpenChange={onOpenChangeMock} title="Settings">
+        <div>Children</div>
+      </BaseModal>,
+    );
+    expect(screen.getByText("Children")).toBeInTheDocument();
+  });
+
+  it("should disable the action given the condition", () => {
+    const { rerender } = render(
+      <BaseModal
+        isOpen
+        onOpenChange={onOpenChangeMock}
+        title="Settings"
+        actions={[
+          {
+            label: "Save",
+            action: () => {},
+            isDisabled: true,
+          },
+        ]}
+      />,
+    );
+
+    expect(screen.getByText("Save")).toBeDisabled();
+
+    rerender(
+      <BaseModal
+        isOpen
+        onOpenChange={onOpenChangeMock}
+        title="Settings"
+        actions={[
+          {
+            label: "Save",
+            action: () => {},
+            isDisabled: false,
+          },
+        ]}
+      />,
+    );
+
+    expect(screen.getByText("Save")).not.toBeDisabled();
+  });
+
+  it.skip("should not close if the backdrop or escape key is pressed", () => {
+    render(
+      <BaseModal
+        isOpen
+        onOpenChange={onOpenChangeMock}
+        title="Settings"
+        isDismissable={false}
+      />,
+    );
+
+    act(() => {
+      userEvent.keyboard("{esc}");
+    });
+    // fails because the nextui component wraps the modal content in an aria-hidden div
+    expect(screen.getByRole("dialog")).toBeVisible();
+  });
+});

frontend/__tests__/components/modals/settings/model-selector.test.tsx

@@ -0,0 +1,136 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { ModelSelector } from "#/components/shared/modals/settings/model-selector";
+
+// Mock react-i18next
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: { [key: string]: string } = {
+        LLM$PROVIDER: "LLM Provider",
+        LLM$MODEL: "LLM Model",
+        LLM$SELECT_PROVIDER_PLACEHOLDER: "Select a provider",
+        LLM$SELECT_MODEL_PLACEHOLDER: "Select a model",
+      };
+      return translations[key] || key;
+    },
+  }),
+}));
+
+describe("ModelSelector", () => {
+  const models = {
+    openai: {
+      separator: "/",
+      models: ["gpt-4o", "gpt-4o-mini"],
+    },
+    azure: {
+      separator: "/",
+      models: ["ada", "gpt-35-turbo"],
+    },
+    vertex_ai: {
+      separator: "/",
+      models: ["chat-bison", "chat-bison-32k"],
+    },
+    cohere: {
+      separator: ".",
+      models: ["command-r-v1:0"],
+    },
+  };
+
+  it("should display the provider selector", async () => {
+    const user = userEvent.setup();
+    render(<ModelSelector models={models} />);
+
+    const selector = screen.getByLabelText("LLM Provider");
+    expect(selector).toBeInTheDocument();
+
+    await user.click(selector);
+
+    expect(screen.getByText("OpenAI")).toBeInTheDocument();
+    expect(screen.getByText("Azure")).toBeInTheDocument();
+    expect(screen.getByText("VertexAI")).toBeInTheDocument();
+    expect(screen.getByText("cohere")).toBeInTheDocument();
+  });
+
+  it("should disable the model selector if the provider is not selected", async () => {
+    const user = userEvent.setup();
+    render(<ModelSelector models={models} />);
+
+    const modelSelector = screen.getByLabelText("LLM Model");
+    expect(modelSelector).toBeDisabled();
+
+    const providerSelector = screen.getByLabelText("LLM Provider");
+    await user.click(providerSelector);
+
+    const vertexAI = screen.getByText("VertexAI");
+    await user.click(vertexAI);
+
+    expect(modelSelector).not.toBeDisabled();
+  });
+
+  it("should display the model selector", async () => {
+    const user = userEvent.setup();
+    render(<ModelSelector models={models} />);
+
+    const providerSelector = screen.getByLabelText("LLM Provider");
+    await user.click(providerSelector);
+
+    const azureProvider = screen.getByText("Azure");
+    await user.click(azureProvider);
+
+    const modelSelector = screen.getByLabelText("LLM Model");
+    await user.click(modelSelector);
+
+    expect(screen.getByText("ada")).toBeInTheDocument();
+    expect(screen.getByText("gpt-35-turbo")).toBeInTheDocument();
+
+    await user.click(providerSelector);
+    const vertexProvider = screen.getByText("VertexAI");
+    await user.click(vertexProvider);
+
+    await user.click(modelSelector);
+
+    // Test fails when expecting these values to be present.
+    // My hypothesis is that it has something to do with NextUI's
+    // list virtualization
+
+    // expect(screen.getByText("chat-bison")).toBeInTheDocument();
+    // expect(screen.getByText("chat-bison-32k")).toBeInTheDocument();
+  });
+
+  it("should call onModelChange when the model is changed", async () => {
+    const user = userEvent.setup();
+    render(<ModelSelector models={models} />);
+
+    const providerSelector = screen.getByLabelText("LLM Provider");
+    const modelSelector = screen.getByLabelText("LLM Model");
+
+    await user.click(providerSelector);
+    await user.click(screen.getByText("Azure"));
+
+    await user.click(modelSelector);
+    await user.click(screen.getByText("ada"));
+
+    await user.click(modelSelector);
+    await user.click(screen.getByText("gpt-35-turbo"));
+
+    await user.click(providerSelector);
+    await user.click(screen.getByText("cohere"));
+
+    await user.click(modelSelector);
+
+    // Test fails when expecting this values to be present.
+    // My hypothesis is that it has something to do with NextUI's
+    // list virtualization
+
+    // await user.click(screen.getByText("command-r-v1:0"));
+  });
+
+  it("should have a default value if passed", async () => {
+    render(<ModelSelector models={models} currentModel="azure/ada" />);
+
+    expect(screen.getByLabelText("LLM Provider")).toHaveValue("Azure");
+    expect(screen.getByLabelText("LLM Model")).toHaveValue("ada");
+  });
+});

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

@@ -0,0 +1,109 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { SettingsInput } from "#/components/features/settings/settings-input";
+
+describe("SettingsInput", () => {
+  it("should render an optional tag if showOptionalTag is true", async () => {
+    const { rerender } = render(
+      <SettingsInput testId="test-input" label="Test Input" type="text" />,
+    );
+
+    expect(screen.queryByText(/optional/i)).not.toBeInTheDocument();
+
+    rerender(
+      <SettingsInput
+        testId="test-input"
+        showOptionalTag
+        label="Test Input"
+        type="text"
+      />,
+    );
+
+    expect(screen.getByText(/optional/i)).toBeInTheDocument();
+  });
+
+  it("should disable the input if isDisabled is true", async () => {
+    const { rerender } = render(
+      <SettingsInput testId="test-input" label="Test Input" type="text" />,
+    );
+
+    expect(screen.getByTestId("test-input")).toBeEnabled();
+
+    rerender(
+      <SettingsInput
+        testId="test-input"
+        label="Test Input"
+        type="text"
+        isDisabled
+      />,
+    );
+
+    expect(screen.getByTestId("test-input")).toBeDisabled();
+  });
+
+  it("should set a placeholder on the input", async () => {
+    render(
+      <SettingsInput
+        testId="test-input"
+        label="Test Input"
+        type="text"
+        placeholder="Test Placeholder"
+      />,
+    );
+
+    expect(screen.getByTestId("test-input")).toHaveAttribute(
+      "placeholder",
+      "Test Placeholder",
+    );
+  });
+
+  it("should set a default value on the input", async () => {
+    render(
+      <SettingsInput
+        testId="test-input"
+        label="Test Input"
+        type="text"
+        defaultValue="Test Value"
+      />,
+    );
+
+    expect(screen.getByTestId("test-input")).toHaveValue("Test Value");
+  });
+
+  it("should render start content", async () => {
+    const startContent = <div>Start Content</div>;
+
+    render(
+      <SettingsInput
+        testId="test-input"
+        label="Test Input"
+        type="text"
+        defaultValue="Test Value"
+        startContent={startContent}
+      />,
+    );
+
+    expect(screen.getByText("Start Content")).toBeInTheDocument();
+  });
+
+  it("should call onChange with the input value", async () => {
+    const onChangeMock = vi.fn();
+    const user = userEvent.setup();
+
+    render(
+      <SettingsInput
+        testId="test-input"
+        label="Test Input"
+        type="text"
+        onChange={onChangeMock}
+      />,
+    );
+
+    const input = screen.getByTestId("test-input");
+    await user.type(input, "Test");
+
+    expect(onChangeMock).toHaveBeenCalledTimes(4);
+    expect(onChangeMock).toHaveBeenNthCalledWith(4, "Test");
+  });
+});

frontend/__tests__/components/settings/settings-switch.test.tsx

@@ -0,0 +1,64 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { SettingsSwitch } from "#/components/features/settings/settings-switch";
+
+describe("SettingsSwitch", () => {
+  it("should call the onChange handler when the input is clicked", async () => {
+    const user = userEvent.setup();
+    const onToggleMock = vi.fn();
+    render(
+      <SettingsSwitch testId="test-switch" onToggle={onToggleMock}>
+        Test Switch
+      </SettingsSwitch>,
+    );
+
+    const switchInput = screen.getByTestId("test-switch");
+
+    await user.click(switchInput);
+    expect(onToggleMock).toHaveBeenCalledWith(true);
+
+    await user.click(switchInput);
+    expect(onToggleMock).toHaveBeenCalledWith(false);
+  });
+
+  it("should render a beta tag if isBeta is true", () => {
+    const { rerender } = render(
+      <SettingsSwitch testId="test-switch" onToggle={vi.fn()} isBeta={false}>
+        Test Switch
+      </SettingsSwitch>,
+    );
+
+    expect(screen.queryByText(/beta/i)).not.toBeInTheDocument();
+
+    rerender(
+      <SettingsSwitch testId="test-switch" onToggle={vi.fn()} isBeta>
+        Test Switch
+      </SettingsSwitch>,
+    );
+
+    expect(screen.getByText(/beta/i)).toBeInTheDocument();
+  });
+
+  it("should be able to set a default toggle state", async () => {
+    const user = userEvent.setup();
+    const onToggleMock = vi.fn();
+    render(
+      <SettingsSwitch
+        testId="test-switch"
+        onToggle={onToggleMock}
+        defaultIsToggled
+      >
+        Test Switch
+      </SettingsSwitch>,
+    );
+
+    expect(screen.getByTestId("test-switch")).toBeChecked();
+
+    const switchInput = screen.getByTestId("test-switch");
+    await user.click(switchInput);
+    expect(onToggleMock).toHaveBeenCalledWith(false);
+
+    expect(screen.getByTestId("test-switch")).not.toBeChecked();
+  });
+});

frontend/__tests__/components/shared/brand-button.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { BrandButton } from "#/components/features/settings/brand-button";
+
+describe("BrandButton", () => {
+  const onClickMock = vi.fn();
+
+  it("should set a test id", () => {
+    render(
+      <BrandButton testId="brand-button" type="button" variant="primary">
+        Test Button
+      </BrandButton>,
+    );
+
+    expect(screen.getByTestId("brand-button")).toBeInTheDocument();
+  });
+
+  it("should call onClick when clicked", async () => {
+    const user = userEvent.setup();
+    render(
+      <BrandButton type="button" variant="primary" onClick={onClickMock}>
+        Test Button
+      </BrandButton>,
+    );
+
+    await user.click(screen.getByText("Test Button"));
+  });
+
+  it("should be disabled if isDisabled is true", () => {
+    render(
+      <BrandButton type="button" variant="primary" isDisabled>
+        Test Button
+      </BrandButton>,
+    );
+
+    expect(screen.getByText("Test Button")).toBeDisabled();
+  });
+
+  it("should pass a start content", () => {
+    render(
+      <BrandButton
+        type="button"
+        variant="primary"
+        startContent={
+          <div data-testid="custom-start-content">Start Content</div>
+        }
+      >
+        Test Button
+      </BrandButton>,
+    );
+
+    screen.getByTestId("custom-start-content");
+  });
+});

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

@@ -0,0 +1,40 @@
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "test-utils";
+import { createRoutesStub } from "react-router";
+import { screen } from "@testing-library/react";
+import OpenHands from "#/api/open-hands";
+import { SettingsForm } from "#/components/shared/modals/settings/settings-form";
+import { DEFAULT_SETTINGS } from "#/services/settings";
+
+describe("SettingsForm", () => {
+  const onCloseMock = vi.fn();
+  const saveSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
+
+  const RouteStub = createRoutesStub([
+    {
+      Component: () => (
+        <SettingsForm
+          settings={DEFAULT_SETTINGS}
+          models={[DEFAULT_SETTINGS.LLM_MODEL]}
+          onClose={onCloseMock}
+        />
+      ),
+      path: "/",
+    },
+  ]);
+
+  it("should save the user settings and close the modal when the form is submitted", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<RouteStub />);
+
+    const saveButton = screen.getByRole("button", { name: /save/i });
+    await user.click(saveButton);
+
+    expect(saveSettingsSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        llm_model: DEFAULT_SETTINGS.LLM_MODEL,
+      }),
+    );
+  });
+});

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

@@ -0,0 +1,58 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { SuggestionItem } from "#/components/features/suggestions/suggestion-item";
+import { I18nKey } from "#/i18n/declaration";
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        SUGGESTIONS$TODO_APP: "ToDoリストアプリを開発する",
+        LANDING$BUILD_APP_BUTTON: "プルリクエストを表示するアプリを開発する",
+        SUGGESTIONS$HACKER_NEWS:
+          "Hacker Newsのトップ記事を表示するbashスクリプトを作成する",
+      };
+      return translations[key] || key;
+    },
+  }),
+}));
+
+describe("SuggestionItem", () => {
+  const suggestionItem = { label: "suggestion1", value: "a long text value" };
+  const onClick = vi.fn();
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should render a suggestion", () => {
+    render(<SuggestionItem suggestion={suggestionItem} onClick={onClick} />);
+
+    expect(screen.getByTestId("suggestion")).toBeInTheDocument();
+    expect(screen.getByText(/suggestion1/i)).toBeInTheDocument();
+  });
+
+  it("should render a translated suggestion when using I18nKey", async () => {
+    const translatedSuggestion = {
+      label: I18nKey.SUGGESTIONS$TODO_APP,
+      value: "todo app value",
+    };
+
+    render(
+      <SuggestionItem suggestion={translatedSuggestion} onClick={onClick} />,
+    );
+
+    expect(screen.getByText("ToDoリストアプリを開発する")).toBeInTheDocument();
+  });
+
+  it("should call onClick when clicking a suggestion", async () => {
+    const user = userEvent.setup();
+    render(<SuggestionItem suggestion={suggestionItem} onClick={onClick} />);
+
+    const suggestion = screen.getByTestId("suggestion");
+    await user.click(suggestion);
+
+    expect(onClick).toHaveBeenCalledWith("a long text value");
+  });
+});

frontend/__tests__/components/suggestions.test.tsx

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

frontend/__tests__/components/terminal/terminal.test.tsx

@@ -0,0 +1,132 @@
+import { act, screen } from "@testing-library/react";
+import { renderWithProviders } from "test-utils";
+import { vi, describe, afterEach, it, expect } from "vitest";
+import { Command, appendInput, appendOutput } from "#/state/command-slice";
+import Terminal from "#/components/features/terminal/terminal";
+
+const renderTerminal = (commands: Command[] = []) =>
+  renderWithProviders(<Terminal />, {
+    preloadedState: {
+      cmd: {
+        commands,
+      },
+    },
+  });
+
+describe.skip("Terminal", () => {
+  global.ResizeObserver = vi.fn().mockImplementation(() => ({
+    observe: vi.fn(),
+    disconnect: vi.fn(),
+  }));
+
+  const mockTerminal = {
+    open: vi.fn(),
+    write: vi.fn(),
+    writeln: vi.fn(),
+    dispose: vi.fn(),
+    onKey: vi.fn(),
+    attachCustomKeyEventHandler: vi.fn(),
+    loadAddon: vi.fn(),
+  };
+
+  vi.mock("@xterm/xterm", async (importOriginal) => ({
+    ...(await importOriginal<typeof import("@xterm/xterm")>()),
+    Terminal: vi.fn().mockImplementation(() => mockTerminal),
+  }));
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should render a terminal", () => {
+    renderTerminal();
+
+    expect(screen.getByText("Terminal")).toBeInTheDocument();
+    expect(mockTerminal.open).toHaveBeenCalledTimes(1);
+
+    expect(mockTerminal.write).toHaveBeenCalledWith("$ ");
+  });
+
+  it("should load commands to the terminal", () => {
+    renderTerminal([
+      { type: "input", content: "INPUT" },
+      { type: "output", content: "OUTPUT" },
+    ]);
+
+    expect(mockTerminal.writeln).toHaveBeenNthCalledWith(1, "INPUT");
+    expect(mockTerminal.writeln).toHaveBeenNthCalledWith(2, "OUTPUT");
+  });
+
+  it("should write commands to the terminal", () => {
+    const { store } = renderTerminal();
+
+    act(() => {
+      store.dispatch(appendInput("echo Hello"));
+      store.dispatch(appendOutput("Hello"));
+    });
+
+    expect(mockTerminal.writeln).toHaveBeenNthCalledWith(1, "echo Hello");
+    expect(mockTerminal.writeln).toHaveBeenNthCalledWith(2, "Hello");
+
+    act(() => {
+      store.dispatch(appendInput("echo World"));
+    });
+
+    expect(mockTerminal.writeln).toHaveBeenNthCalledWith(3, "echo World");
+  });
+
+  it("should load and write commands to the terminal", () => {
+    const { store } = renderTerminal([
+      { type: "input", content: "echo Hello" },
+      { type: "output", content: "Hello" },
+    ]);
+
+    expect(mockTerminal.writeln).toHaveBeenNthCalledWith(1, "echo Hello");
+    expect(mockTerminal.writeln).toHaveBeenNthCalledWith(2, "Hello");
+
+    act(() => {
+      store.dispatch(appendInput("echo Hello"));
+    });
+
+    expect(mockTerminal.writeln).toHaveBeenNthCalledWith(3, "echo Hello");
+  });
+
+  it("should end the line with a dollar sign after writing a command", () => {
+    const { store } = renderTerminal();
+
+    act(() => {
+      store.dispatch(appendInput("echo Hello"));
+    });
+
+    expect(mockTerminal.writeln).toHaveBeenCalledWith("echo Hello");
+    expect(mockTerminal.write).toHaveBeenCalledWith("$ ");
+  });
+
+  it("should display a custom symbol if output contains a custom symbol", () => {
+    renderTerminal([
+      { type: "input", content: "echo Hello" },
+      {
+        type: "output",
+        content:
+          "Hello\r\n\r\n[Python Interpreter: /openhands/poetry/openhands-5O4_aCHf-py3.12/bin/python]\nopenhands@659478cb008c:/workspace $ ",
+      },
+    ]);
+
+    expect(mockTerminal.writeln).toHaveBeenNthCalledWith(1, "echo Hello");
+    expect(mockTerminal.writeln).toHaveBeenNthCalledWith(2, "Hello");
+    expect(mockTerminal.write).toHaveBeenCalledWith(
+      "\nopenhands@659478cb008c:/workspace $ ",
+    );
+  });
+
+  // This test fails because it expects `disposeMock` to have been called before the component is unmounted.
+  it.skip("should dispose the terminal on unmount", () => {
+    const { unmount } = renderWithProviders(<Terminal />);
+
+    expect(mockTerminal.dispose).not.toHaveBeenCalled();
+
+    unmount();
+
+    expect(mockTerminal.dispose).toHaveBeenCalledTimes(1);
+  });
+});

frontend/__tests__/components/upload-image-input.test.tsx

@@ -0,0 +1,71 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { UploadImageInput } from "#/components/features/images/upload-image-input";
+
+describe("UploadImageInput", () => {
+  const user = userEvent.setup();
+  const onUploadMock = vi.fn();
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should render an input", () => {
+    render(<UploadImageInput onUpload={onUploadMock} />);
+    expect(screen.getByTestId("upload-image-input")).toBeInTheDocument();
+  });
+
+  it("should call onUpload when a file is selected", async () => {
+    render(<UploadImageInput onUpload={onUploadMock} />);
+
+    const file = new File(["(⌐□_□)"], "chucknorris.png", { type: "image/png" });
+    const input = screen.getByTestId("upload-image-input");
+
+    await user.upload(input, file);
+
+    expect(onUploadMock).toHaveBeenNthCalledWith(1, [file]);
+  });
+
+  it("should call onUpload when multiple files are selected", async () => {
+    render(<UploadImageInput onUpload={onUploadMock} />);
+
+    const files = [
+      new File(["(⌐□_□)"], "chucknorris.png", { type: "image/png" }),
+      new File(["(⌐□_□)"], "chucknorris2.png", { type: "image/png" }),
+    ];
+    const input = screen.getByTestId("upload-image-input");
+
+    await user.upload(input, files);
+
+    expect(onUploadMock).toHaveBeenNthCalledWith(1, files);
+  });
+
+  it("should not upload any file that is not an image", async () => {
+    render(<UploadImageInput onUpload={onUploadMock} />);
+
+    const file = new File(["(⌐□_□)"], "chucknorris.txt", {
+      type: "text/plain",
+    });
+    const input = screen.getByTestId("upload-image-input");
+
+    await user.upload(input, file);
+
+    expect(onUploadMock).not.toHaveBeenCalled();
+  });
+
+  it("should render custom labels", () => {
+    const { rerender } = render(<UploadImageInput onUpload={onUploadMock} />);
+    expect(screen.getByTestId("default-label")).toBeInTheDocument();
+
+    function CustomLabel() {
+      return <span>Custom label</span>;
+    }
+    rerender(
+      <UploadImageInput onUpload={onUploadMock} label={<CustomLabel />} />,
+    );
+
+    expect(screen.getByText("Custom label")).toBeInTheDocument();
+    expect(screen.queryByTestId("default-label")).not.toBeInTheDocument();
+  });
+});

frontend/__tests__/components/user-actions.test.tsx

@@ -0,0 +1,71 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, test, vi, afterEach } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { UserActions } from "#/components/features/sidebar/user-actions";
+
+describe("UserActions", () => {
+  const user = userEvent.setup();
+  const onClickAccountSettingsMock = vi.fn();
+  const onLogoutMock = vi.fn();
+
+  afterEach(() => {
+    onClickAccountSettingsMock.mockClear();
+    onLogoutMock.mockClear();
+  });
+
+  it("should render", () => {
+    render(<UserActions onLogout={onLogoutMock} />);
+
+    expect(screen.getByTestId("user-actions")).toBeInTheDocument();
+    expect(screen.getByTestId("user-avatar")).toBeInTheDocument();
+  });
+
+  it("should toggle the user menu when the user avatar is clicked", async () => {
+    render(<UserActions onLogout={onLogoutMock} />);
+
+    const userAvatar = screen.getByTestId("user-avatar");
+    await user.click(userAvatar);
+
+    expect(
+      screen.getByTestId("account-settings-context-menu"),
+    ).toBeInTheDocument();
+
+    await user.click(userAvatar);
+
+    expect(
+      screen.queryByTestId("account-settings-context-menu"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("should call onLogout and close the menu when the logout option is clicked", async () => {
+    render(
+      <UserActions
+        onLogout={onLogoutMock}
+        user={{ avatar_url: "https://example.com/avatar.png" }}
+      />,
+    );
+
+    const userAvatar = screen.getByTestId("user-avatar");
+    await user.click(userAvatar);
+
+    const logoutOption = screen.getByText("ACCOUNT_SETTINGS$LOGOUT");
+    await user.click(logoutOption);
+
+    expect(onLogoutMock).toHaveBeenCalledOnce();
+    expect(
+      screen.queryByTestId("account-settings-context-menu"),
+    ).not.toBeInTheDocument();
+  });
+
+  test("logout button is always enabled", async () => {
+    render(<UserActions onLogout={onLogoutMock} />);
+
+    const userAvatar = screen.getByTestId("user-avatar");
+    await user.click(userAvatar);
+
+    const logoutOption = screen.getByText("ACCOUNT_SETTINGS$LOGOUT");
+    await user.click(logoutOption);
+
+    expect(onLogoutMock).toHaveBeenCalledOnce();
+  });
+});

frontend/__tests__/components/user-avatar.test.tsx

@@ -0,0 +1,68 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { UserAvatar } from "#/components/features/sidebar/user-avatar";
+
+describe("UserAvatar", () => {
+  const onClickMock = vi.fn();
+
+  afterEach(() => {
+    onClickMock.mockClear();
+  });
+
+  it("(default) should render the placeholder avatar when the user is logged out", () => {
+    render(<UserAvatar onClick={onClickMock} />);
+    expect(screen.getByTestId("user-avatar")).toBeInTheDocument();
+    expect(
+      screen.getByLabelText("USER$AVATAR_PLACEHOLDER"),
+    ).toBeInTheDocument();
+  });
+
+  it("should call onClick when clicked", async () => {
+    const user = userEvent.setup();
+    render(<UserAvatar onClick={onClickMock} />);
+
+    const userAvatarContainer = screen.getByTestId("user-avatar");
+    await user.click(userAvatarContainer);
+
+    expect(onClickMock).toHaveBeenCalledOnce();
+  });
+
+  it("should display the user's avatar when available", () => {
+    render(
+      <UserAvatar
+        onClick={onClickMock}
+        avatarUrl="https://example.com/avatar.png"
+      />,
+    );
+
+    expect(screen.getByAltText("AVATAR$ALT_TEXT")).toBeInTheDocument();
+    expect(
+      screen.queryByLabelText("USER$AVATAR_PLACEHOLDER"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("should display a loading spinner instead of an avatar when isLoading is true", () => {
+    const { rerender } = render(<UserAvatar onClick={onClickMock} />);
+    expect(screen.queryByTestId("loading-spinner")).not.toBeInTheDocument();
+    expect(
+      screen.getByLabelText("USER$AVATAR_PLACEHOLDER"),
+    ).toBeInTheDocument();
+
+    rerender(<UserAvatar onClick={onClickMock} isLoading />);
+    expect(screen.getByTestId("loading-spinner")).toBeInTheDocument();
+    expect(
+      screen.queryByLabelText("USER$AVATAR_PLACEHOLDER"),
+    ).not.toBeInTheDocument();
+
+    rerender(
+      <UserAvatar
+        onClick={onClickMock}
+        avatarUrl="https://example.com/avatar.png"
+        isLoading
+      />,
+    );
+    expect(screen.getByTestId("loading-spinner")).toBeInTheDocument();
+    expect(screen.queryByAltText("AVATAR$ALT_TEXT")).not.toBeInTheDocument();
+  });
+});

frontend/__tests__/context/ws-client-provider.test.tsx

@@ -0,0 +1,98 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, waitFor } from "@testing-library/react";
+import React from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  updateStatusWhenErrorMessagePresent,
+  WsClientProvider,
+  useWsClient,
+} from "#/context/ws-client-provider";
+
+describe("Propagate error message", () => {
+  it("should do nothing when no message was passed from server", () => {
+    updateStatusWhenErrorMessagePresent(null);
+    updateStatusWhenErrorMessagePresent(undefined);
+    updateStatusWhenErrorMessagePresent({});
+    updateStatusWhenErrorMessagePresent({ message: null });
+  });
+
+  it.todo("should display error to user when present");
+
+  it.todo("should display error including translation id when present");
+});
+
+// Create a mock for socket.io-client
+const mockEmit = vi.fn();
+const mockOn = vi.fn();
+const mockOff = vi.fn();
+const mockDisconnect = vi.fn();
+
+vi.mock("socket.io-client", () => ({
+  io: vi.fn(() => ({
+    emit: mockEmit,
+    on: mockOn,
+    off: mockOff,
+    disconnect: mockDisconnect,
+    io: {
+      opts: {
+        query: {},
+      },
+    },
+  })),
+}));
+
+// Mock component to test the hook
+function TestComponent() {
+  const { send } = useWsClient();
+
+  React.useEffect(() => {
+    // Send a test event
+    send({ type: "test_event" });
+  }, [send]);
+
+  return <div>Test Component</div>;
+}
+
+describe("WsClientProvider", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mock("#/hooks/query/use-active-conversation", () => ({
+      useActiveConversation: () => {
+        return { data: {
+        conversation_id: "1",
+        title: "Conversation 1",
+        selected_repository: null,
+        last_updated_at: "2021-10-01T12:00:00Z",
+        created_at: "2021-10-01T12:00:00Z",
+        status: "RUNNING" as const,
+        url: null,
+        session_api_key: null,
+      }}},
+    }));
+  });
+
+  it("should emit oh_user_action event when send is called", async () => {
+    const { getByText } = render(<TestComponent />, {
+      wrapper: ({ children }) => (
+        <QueryClientProvider client={new QueryClient()}>
+          <WsClientProvider conversationId="test-conversation-id">
+            {children}
+          </WsClientProvider>
+        </QueryClientProvider>
+      ),
+    });
+
+    // Assert
+    expect(getByText("Test Component")).toBeInTheDocument();
+
+    // Wait for the emit call to happen (useEffect needs time to run)
+    await waitFor(
+      () => {
+        expect(mockEmit).toHaveBeenCalledWith("oh_user_action", {
+          type: "test_event",
+        });
+      },
+      { timeout: 1000 },
+    );
+  });
+});

frontend/__tests__/hooks/mutation/use-save-settings.test.tsx

@@ -0,0 +1,36 @@
+import { renderHook, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import OpenHands from "#/api/open-hands";
+import { useSaveSettings } from "#/hooks/mutation/use-save-settings";
+
+describe("useSaveSettings", () => {
+  it("should send an empty string for llm_api_key if an empty string is passed, otherwise undefined", async () => {
+    const saveSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
+    const { result } = renderHook(() => useSaveSettings(), {
+      wrapper: ({ children }) => (
+        <QueryClientProvider client={new QueryClient()}>
+          {children}
+        </QueryClientProvider>
+      ),
+    });
+
+    result.current.mutate({ llm_api_key: "" });
+    await waitFor(() => {
+      expect(saveSettingsSpy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          llm_api_key: "",
+        }),
+      );
+    });
+
+    result.current.mutate({ llm_api_key: null });
+    await waitFor(() => {
+      expect(saveSettingsSpy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          llm_api_key: undefined,
+        }),
+      );
+    });
+  });
+});

frontend/__tests__/hooks/use-click-outside-element.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { expect, test, vi } from "vitest";
+import { useClickOutsideElement } from "#/hooks/use-click-outside-element";
+
+interface ClickOutsideTestComponentProps {
+  callback: () => void;
+}
+
+function ClickOutsideTestComponent({
+  callback,
+}: ClickOutsideTestComponentProps) {
+  const ref = useClickOutsideElement<HTMLDivElement>(callback);
+
+  return (
+    <div>
+      <div data-testid="inside-element" ref={ref} />
+      <div data-testid="outside-element" />
+    </div>
+  );
+}
+
+test("call the callback when the element is clicked outside", async () => {
+  const user = userEvent.setup();
+  const callback = vi.fn();
+  render(<ClickOutsideTestComponent callback={callback} />);
+
+  const insideElement = screen.getByTestId("inside-element");
+  const outsideElement = screen.getByTestId("outside-element");
+
+  await user.click(insideElement);
+  expect(callback).not.toHaveBeenCalled();
+
+  await user.click(outsideElement);
+  expect(callback).toHaveBeenCalled();
+});

frontend/__tests__/hooks/use-rate.test.ts

@@ -0,0 +1,93 @@
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useRate } from "#/hooks/use-rate";
+
+describe("useRate", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("should initialize", () => {
+    const { result } = renderHook(() => useRate());
+
+    expect(result.current.items).toHaveLength(0);
+    expect(result.current.rate).toBeNull();
+    expect(result.current.lastUpdated).toBeNull();
+    expect(result.current.isUnderThreshold).toBe(true);
+  });
+
+  it("should handle the case of a single element", () => {
+    const { result } = renderHook(() => useRate());
+
+    act(() => {
+      result.current.record(123);
+    });
+
+    expect(result.current.items).toHaveLength(1);
+    expect(result.current.lastUpdated).not.toBeNull();
+  });
+
+  it("should return the difference between the last two elements", () => {
+    const { result } = renderHook(() => useRate());
+
+    vi.setSystemTime(500);
+    act(() => {
+      result.current.record(4);
+    });
+
+    vi.advanceTimersByTime(500);
+    act(() => {
+      result.current.record(9);
+    });
+
+    expect(result.current.items).toHaveLength(2);
+    expect(result.current.rate).toBe(5);
+    expect(result.current.lastUpdated).toBe(1000);
+  });
+
+  it("should update isUnderThreshold after [threshold]ms of no activity", () => {
+    const { result } = renderHook(() => useRate({ threshold: 500 }));
+
+    expect(result.current.isUnderThreshold).toBe(true);
+
+    act(() => {
+      // not sure if fake timers is buggy with intervals,
+      // but I need to call it twice to register
+      vi.advanceTimersToNextTimer();
+      vi.advanceTimersToNextTimer();
+    });
+
+    expect(result.current.isUnderThreshold).toBe(false);
+  });
+
+  it("should return an isUnderThreshold boolean", () => {
+    const { result } = renderHook(() => useRate({ threshold: 500 }));
+
+    vi.setSystemTime(500);
+    act(() => {
+      result.current.record(400);
+    });
+    act(() => {
+      result.current.record(1000);
+    });
+
+    expect(result.current.isUnderThreshold).toBe(false);
+
+    act(() => {
+      result.current.record(1500);
+    });
+
+    expect(result.current.isUnderThreshold).toBe(true);
+
+    act(() => {
+      vi.advanceTimersToNextTimer();
+      vi.advanceTimersToNextTimer();
+    });
+
+    expect(result.current.isUnderThreshold).toBe(false);
+  });
+});

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

@@ -0,0 +1,111 @@
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { afterEach } from "node:test";
+import { useTerminal } from "#/hooks/use-terminal";
+import { Command } from "#/state/command-slice";
+import { AgentState } from "#/types/agent-state";
+import { renderWithProviders } from "../../test-utils";
+
+// Mock the WsClient context
+vi.mock("#/context/ws-client-provider", () => ({
+  useWsClient: () => ({
+    send: vi.fn(),
+    status: "CONNECTED",
+    isLoadingMessages: false,
+    events: [],
+  }),
+}));
+
+interface TestTerminalComponentProps {
+  commands: Command[];
+}
+
+function TestTerminalComponent({
+  commands,
+}: TestTerminalComponentProps) {
+  const ref = useTerminal({ commands });
+  return <div ref={ref} />;
+}
+
+describe("useTerminal", () => {
+  const mockTerminal = vi.hoisted(() => ({
+    loadAddon: vi.fn(),
+    open: vi.fn(),
+    write: vi.fn(),
+    writeln: vi.fn(),
+    onKey: vi.fn(),
+    attachCustomKeyEventHandler: vi.fn(),
+    dispose: vi.fn(),
+  }));
+
+  beforeAll(() => {
+    // mock ResizeObserver
+    window.ResizeObserver = vi.fn().mockImplementation(() => ({
+      observe: vi.fn(),
+      unobserve: vi.fn(),
+      disconnect: vi.fn(),
+    }));
+
+    // mock Terminal
+    vi.mock("@xterm/xterm", async (importOriginal) => ({
+      ...(await importOriginal<typeof import("@xterm/xterm")>()),
+      Terminal: vi.fn().mockImplementation(() => mockTerminal),
+    }));
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should render", () => {
+    renderWithProviders(<TestTerminalComponent commands={[]} />, {
+      preloadedState: {
+        agent: { curAgentState: AgentState.RUNNING },
+        cmd: { commands: [] },
+      },
+    });
+  });
+
+  it("should render the commands in the terminal", () => {
+    const commands: Command[] = [
+      { content: "echo hello", type: "input" },
+      { content: "hello", type: "output" },
+    ];
+
+    renderWithProviders(<TestTerminalComponent commands={commands} />, {
+      preloadedState: {
+        agent: { curAgentState: AgentState.RUNNING },
+        cmd: { commands },
+      },
+    });
+
+    expect(mockTerminal.writeln).toHaveBeenNthCalledWith(1, "echo hello");
+    expect(mockTerminal.writeln).toHaveBeenNthCalledWith(2, "hello");
+  });
+
+  // This test is no longer relevant as secrets filtering has been removed
+  it.skip("should hide secrets in the terminal", () => {
+    const secret = "super_secret_github_token";
+    const anotherSecret = "super_secret_another_token";
+    const commands: Command[] = [
+      {
+        content: `export GITHUB_TOKEN=${secret},${anotherSecret},${secret}`,
+        type: "input",
+      },
+      { content: secret, type: "output" },
+    ];
+
+    renderWithProviders(
+      <TestTerminalComponent
+        commands={commands}
+      />,
+      {
+        preloadedState: {
+          agent: { curAgentState: AgentState.RUNNING },
+          cmd: { commands },
+        },
+      },
+    );
+
+    // This test is no longer relevant as secrets filtering has been removed
+  });
+});