Improve i18n support and add missing translations

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

@@ -61,7 +61,7 @@ describe("ConversationPanel", () => {
 
     renderConversationPanel();
 
-    const emptyState = await screen.findByText("No conversations found");
+    const emptyState = await screen.findByText("CONVERSATION$NO_CONVERSATIONS");
     expect(emptyState).toBeInTheDocument();
   });
 

frontend/__tests__/components/features/github/github-repo-selector.test.tsx

@@ -20,7 +20,7 @@ describe("GitHubRepositorySelector", () => {
     );
 
     expect(
-      screen.getByPlaceholderText("Select a GitHub project"),
+      screen.getByPlaceholderText("LANDING$SELECT_REPO"),
     ).toBeInTheDocument();
   });
 

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

@@ -157,7 +157,7 @@ describe("InteractiveChatBox", () => {
     expect(onChange).not.toHaveBeenCalledWith("");
 
     // Submit the message with image
-    const submitButton = screen.getByRole("button", { name: "Send" });
+    const submitButton = screen.getByRole("button", { name: "BUTTON$SEND" });
     await user.click(submitButton);
 
     // Verify onSubmit was called with the message and image

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

@@ -14,7 +14,7 @@ describe("UserAvatar", () => {
     render(<UserAvatar onClick={onClickMock} />);
     expect(screen.getByTestId("user-avatar")).toBeInTheDocument();
     expect(
-      screen.getByLabelText("user avatar placeholder"),
+      screen.getByLabelText("USER$AVATAR_PLACEHOLDER"),
     ).toBeInTheDocument();
   });
 
@@ -38,21 +38,21 @@ describe("UserAvatar", () => {
 
     expect(screen.getByAltText("user avatar")).toBeInTheDocument();
     expect(
-      screen.queryByLabelText("user avatar placeholder"),
+      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"),
+      screen.getByLabelText("USER$AVATAR_PLACEHOLDER"),
     ).toBeInTheDocument();
 
     rerender(<UserAvatar onClick={onClickMock} isLoading />);
     expect(screen.getByTestId("loading-spinner")).toBeInTheDocument();
     expect(
-      screen.queryByLabelText("user avatar placeholder"),
+      screen.queryByLabelText("USER$AVATAR_PLACEHOLDER"),
     ).not.toBeInTheDocument();
 
     rerender(

frontend/src/components/features/controls/agent-control-bar.tsx

@@ -1,4 +1,6 @@
 import { useSelector } from "react-redux";
+import { useTranslation } from "react-i18next";
+import { I18nKey } from "#/i18n/declaration";
 import PauseIcon from "#/assets/pause";
 import PlayIcon from "#/assets/play";
 import { generateAgentStateChangeEvent } from "#/services/agent-state-service";
@@ -9,6 +11,7 @@ import { IGNORE_TASK_STATE_MAP } from "#/ignore-task-state-map.constant";
 import { ActionButton } from "#/components/shared/buttons/action-button";
 
 export function AgentControlBar() {
+  const { t } = useTranslation();
   const { send } = useWsClient();
   const { curAgentState } = useSelector((state: RootState) => state.agent);
 
@@ -27,8 +30,8 @@ export function AgentControlBar() {
         }
         content={
           curAgentState === AgentState.PAUSED
-            ? "Resume the agent task"
-            : "Pause the current task"
+            ? t(I18nKey.AGENT$RESUME_TASK)
+            : t(I18nKey.AGENT$PAUSE_TASK)
         }
         action={
           curAgentState === AgentState.PAUSED

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

@@ -1,5 +1,7 @@
 import React from "react";
 import { useLocation, useNavigate, useParams } from "react-router";
+import { useTranslation } from "react-i18next";
+import { I18nKey } from "#/i18n/declaration";
 import { ConversationCard } from "./conversation-card";
 import { useUserConversations } from "#/hooks/query/use-user-conversations";
 import { useDeleteConversation } from "#/hooks/mutation/use-delete-conversation";
@@ -15,6 +17,7 @@ interface ConversationPanelProps {
 }
 
 export function ConversationPanel({ onClose }: ConversationPanelProps) {
+  const { t } = useTranslation();
   const { conversationId: cid } = useParams();
   const navigate = useNavigate();
   const location = useLocation();
@@ -89,7 +92,9 @@ export function ConversationPanel({ onClose }: ConversationPanelProps) {
       )}
       {conversations?.length === 0 && (
         <div className="flex flex-col items-center justify-center h-full">
-          <p className="text-neutral-400">No conversations found</p>
+          <p className="text-neutral-400">
+            {t(I18nKey.CONVERSATION$NO_CONVERSATIONS)}
+          </p>
         </div>
       )}
       {conversations?.map((project) => (

frontend/src/components/features/github/github-repo-selector.tsx

@@ -1,11 +1,13 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 import {
   Autocomplete,
   AutocompleteItem,
   AutocompleteSection,
 } from "@nextui-org/react";
 import { useDispatch } from "react-redux";
 import posthog from "posthog-js";
+import { I18nKey } from "#/i18n/declaration";
 import { setSelectedRepository } from "#/state/initial-query-slice";
 import { useConfig } from "#/hooks/query/use-config";
 import { sanitizeQuery } from "#/utils/sanitize-query";
@@ -23,6 +25,7 @@ export function GitHubRepositorySelector({
   userRepositories,
   publicRepositories,
 }: GitHubRepositorySelectorProps) {
+  const { t } = useTranslation();
   const { data: config } = useConfig();
   const [selectedKey, setSelectedKey] = React.useState<string | null>(null);
 
@@ -49,14 +52,14 @@ export function GitHubRepositorySelector({
     dispatch(setSelectedRepository(null));
   };
 
-  const emptyContent = "No results found.";
+  const emptyContent = t(I18nKey.GITHUB$NO_RESULTS);
 
   return (
     <Autocomplete
       data-testid="github-repo-selector"
       name="repo"
       aria-label="GitHub Repository"
-      placeholder="Select a GitHub project"
+      placeholder={t(I18nKey.LANDING$SELECT_REPO)}
       isVirtualized={false}
       selectedKey={selectedKey}
       inputProps={{
@@ -86,12 +89,12 @@ export function GitHubRepositorySelector({
               rel="noreferrer noopener"
               onClick={(e) => e.stopPropagation()}
             >
-              Add more repositories...
+              {t(I18nKey.GITHUB$ADD_MORE_REPOS)}
             </a>
           </AutocompleteItem> // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ) as any)}
       {userRepositories.length > 0 && (
-        <AutocompleteSection showDivider title="Your Repos">
+        <AutocompleteSection showDivider title={t(I18nKey.GITHUB$YOUR_REPOS)}>
           {userRepositories.map((repo) => (
             <AutocompleteItem
               data-testid="github-repo-item"
@@ -106,7 +109,7 @@ export function GitHubRepositorySelector({
         </AutocompleteSection>
       )}
       {publicRepositories.length > 0 && (
-        <AutocompleteSection showDivider title="Public Repos">
+        <AutocompleteSection showDivider title={t(I18nKey.GITHUB$PUBLIC_REPOS)}>
           {publicRepositories.map((repo) => (
             <AutocompleteItem
               data-testid="github-repo-item"

frontend/src/components/features/github/github-repositories-suggestion-box.tsx

@@ -1,4 +1,6 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
+import { I18nKey } from "#/i18n/declaration";
 import { SuggestionBox } from "#/components/features/suggestions/suggestion-box";
 import GitHubLogo from "#/assets/branding/github-logo.svg?react";
 import { GitHubRepositorySelector } from "./github-repo-selector";
@@ -23,6 +25,7 @@ export function GitHubRepositoriesSuggestionBox({
   gitHubAuthUrl,
   user,
 }: GitHubRepositoriesSuggestionBoxProps) {
+  const { t } = useTranslation();
   const [connectToGitHubModalOpen, setConnectToGitHubModalOpen] =
     React.useState(false);
   const [searchQuery, setSearchQuery] = React.useState<string>("");
@@ -53,7 +56,7 @@ export function GitHubRepositoriesSuggestionBox({
   return (
     <>
       <SuggestionBox
-        title="Open a Repo"
+        title={t(I18nKey.LANDING$OPEN_REPO)}
         content={
           isLoggedIn ? (
             <GitHubRepositorySelector
@@ -64,7 +67,7 @@ export function GitHubRepositoriesSuggestionBox({
             />
           ) : (
             <ModalButton
-              text="Connect to GitHub"
+              text={t(I18nKey.GITHUB$CONNECT)}
               icon={<GitHubLogo width={20} height={20} />}
               className="bg-[#791B80] w-full"
               onClick={handleConnectToGitHub}

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

@@ -1,10 +1,13 @@
+import { useTranslation } from "react-i18next";
+import { I18nKey } from "#/i18n/declaration";
 import Clip from "#/icons/clip.svg?react";
 
 export function AttachImageLabel() {
+  const { t } = useTranslation();
   return (
     <div className="flex self-start items-center text-[#A3A3A3] text-xs leading-[18px] -tracking-[0.08px] cursor-pointer">
       <Clip width={16} height={16} />
-      Attach images
+      {t(I18nKey.LANDING$ATTACH_IMAGES)}
     </div>
   );
 }

frontend/src/components/features/jupyter/jupyter-cell-output.tsx

@@ -1,16 +1,21 @@
 import Markdown from "react-markdown";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
+import { useTranslation } from "react-i18next";
+import { I18nKey } from "#/i18n/declaration";
 import { JupyterLine } from "#/utils/parse-cell-content";
 
 interface JupyterCellOutputProps {
   lines: JupyterLine[];
 }
 
 export function JupyterCellOutput({ lines }: JupyterCellOutputProps) {
+  const { t } = useTranslation();
   return (
     <div className="rounded-lg bg-gray-800 dark:bg-gray-900 p-2 text-xs">
-      <div className="mb-1 text-gray-400">STDOUT/STDERR</div>
+      <div className="mb-1 text-gray-400">
+        {t(I18nKey.JUPYTER$OUTPUT_LABEL)}
+      </div>
       <pre
         className="scrollbar-custom scrollbar-thumb-gray-500 hover:scrollbar-thumb-gray-400 dark:scrollbar-thumb-white/10 dark:hover:scrollbar-thumb-white/20 overflow-auto px-5 max-h-[60vh] bg-gray-800"
         style={{ padding: 0, marginBottom: 0, fontSize: "0.75rem" }}

frontend/src/components/features/sidebar/user-avatar.tsx

@@ -1,4 +1,6 @@
 import { Tooltip } from "@nextui-org/react";
+import { useTranslation } from "react-i18next";
+import { I18nKey } from "#/i18n/declaration";
 import { LoadingSpinner } from "#/components/shared/loading-spinner";
 import DefaultUserAvatar from "#/icons/default-user.svg?react";
 import { cn } from "#/utils/utils";
@@ -11,6 +13,7 @@ interface UserAvatarProps {
 }
 
 export function UserAvatar({ onClick, avatarUrl, isLoading }: UserAvatarProps) {
+  const { t } = useTranslation();
   const buttonContent = (
     <button
       data-testid="user-avatar"
@@ -24,7 +27,7 @@ export function UserAvatar({ onClick, avatarUrl, isLoading }: UserAvatarProps) {
       {!isLoading && avatarUrl && <Avatar src={avatarUrl} />}
       {!isLoading && !avatarUrl && (
         <DefaultUserAvatar
-          aria-label="user avatar placeholder"
+          aria-label={t(I18nKey.USER$AVATAR_PLACEHOLDER)}
           width={20}
           height={20}
         />
@@ -34,7 +37,7 @@ export function UserAvatar({ onClick, avatarUrl, isLoading }: UserAvatarProps) {
   );
 
   return (
-    <Tooltip content="Account settings" closeDelay={100}>
+    <Tooltip content={t(I18nKey.USER$ACCOUNT_SETTINGS)} closeDelay={100}>
       {buttonContent}
     </Tooltip>
   );

frontend/src/components/features/suggestions/import-project-suggestion-box.tsx

@@ -1,3 +1,5 @@
+import { useTranslation } from "react-i18next";
+import { I18nKey } from "#/i18n/declaration";
 import { SuggestionBox } from "./suggestion-box";
 
 interface ImportProjectSuggestionBoxProps {
@@ -7,13 +9,14 @@ interface ImportProjectSuggestionBoxProps {
 export function ImportProjectSuggestionBox({
   onChange,
 }: ImportProjectSuggestionBoxProps) {
+  const { t } = useTranslation();
   return (
     <SuggestionBox
-      title="+ Import Project"
+      title={t(I18nKey.LANDING$IMPORT_PROJECT)}
       content={
         <label htmlFor="import-project" className="w-full flex justify-center">
           <span className="border-2 border-dashed border-neutral-600 rounded px-2 py-1 cursor-pointer">
-            Upload a .zip
+            {t(I18nKey.LANDING$UPLOAD_ZIP)}
           </span>
           <input
             hidden

frontend/src/components/features/waitlist/tos-checkbox.tsx

@@ -1,20 +1,24 @@
+import { useTranslation } from "react-i18next";
+import { I18nKey } from "#/i18n/declaration";
+
 interface TOSCheckboxProps {
   onChange: () => void;
 }
 
 export function TOSCheckbox({ onChange }: TOSCheckboxProps) {
+  const { t } = useTranslation();
   return (
     <label className="flex items-center gap-2">
       <input type="checkbox" onChange={onChange} />
       <span>
-        I accept the{" "}
+        {t(I18nKey.TOS$ACCEPT)}{" "}
         <a
           href="https://www.all-hands.dev/tos"
           target="_blank"
           rel="noopener noreferrer"
           className="underline underline-offset-2 text-blue-500 hover:text-blue-700"
         >
-          terms of service
+          {t(I18nKey.TOS$TERMS)}
         </a>
       </span>
     </label>

frontend/src/components/layout/beta-badge.tsx

@@ -1,7 +1,11 @@
+import { useTranslation } from "react-i18next";
+import { I18nKey } from "#/i18n/declaration";
+
 export function BetaBadge() {
+  const { t } = useTranslation();
   return (
     <span className="text-[11px] leading-5 text-root-primary bg-neutral-400 px-1 rounded-xl">
-      Beta
+      {t(I18nKey.BADGE$BETA)}
     </span>
   );
 }

frontend/src/components/shared/action-tooltip.tsx

@@ -22,7 +22,11 @@ export function ActionTooltip({ type, onClick }: ActionTooltipProps) {
       <button
         data-testid={`action-${type}-button`}
         type="button"
-        aria-label={type === "confirm" ? "Confirm action" : "Reject action"}
+        aria-label={
+          type === "confirm"
+            ? t(I18nKey.ACTION$CONFIRM)
+            : t(I18nKey.ACTION$REJECT)
+        }
         className="bg-neutral-700 rounded-full p-1 hover:bg-neutral-800"
         onClick={onClick}
       >

frontend/src/components/shared/buttons/stop-button.tsx

@@ -1,13 +1,17 @@
+import { useTranslation } from "react-i18next";
+import { I18nKey } from "#/i18n/declaration";
+
 interface StopButtonProps {
   isDisabled?: boolean;
   onClick?: () => void;
 }
 
 export function StopButton({ isDisabled, onClick }: StopButtonProps) {
+  const { t } = useTranslation();
   return (
     <button
       data-testid="stop-button"
-      aria-label="Stop"
+      aria-label={t(I18nKey.BUTTON$STOP)}
       disabled={isDisabled}
       onClick={onClick}
       type="button"

frontend/src/components/shared/buttons/submit-button.tsx

@@ -1,14 +1,17 @@
+import { useTranslation } from "react-i18next";
 import ArrowSendIcon from "#/icons/arrow-send.svg?react";
+import { I18nKey } from "#/i18n/declaration";
 
 interface SubmitButtonProps {
   isDisabled?: boolean;
   onClick: () => void;
 }
 
 export function SubmitButton({ isDisabled, onClick }: SubmitButtonProps) {
+  const { t } = useTranslation();
   return (
     <button
-      aria-label="Send"
+      aria-label={t(I18nKey.BUTTON$SEND)}
       disabled={isDisabled}
       onClick={onClick}
       type="submit"