chore: Convert camelCase file names to kebab-case (#5209)

Makefile

@@ -184,6 +184,10 @@ test:
 	@$(MAKE) -s test-frontend
 
 build-frontend:
+	@echo "$(YELLOW)Cleaning TypeScript build cache...$(RESET)"
+	@cd frontend && npx tsc --build --clean
+	@echo "$(YELLOW)Cleaning Git cache for casing issues...$(RESET)"
+	@cd frontend && git rm -r --cached . && git add . && git commit -m "Fix Git cache" || echo "No changes to commit"
 	@echo "$(YELLOW)Building frontend...$(RESET)"
 	@cd frontend && npm run build
 

frontend/__tests__/components/Browser.test.tsx → frontend/__tests__/components/browser.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from "@testing-library/react";
 import { describe, it, expect } from "vitest";
 import { renderWithProviders } from "../../test-utils";
-import BrowserPanel from "#/components/Browser";
+import BrowserPanel from "#/components/browser";
 
 describe("Browser", () => {
   it("renders a message if no screenshotSrc is provided", () => {

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

@@ -171,9 +171,9 @@ describe("ChatInput", () => {
     // Fire paste event with text data
     fireEvent.paste(input!, {
       clipboardData: {
-        getData: (type: string) => type === 'text/plain' ? 'test paste' : '',
-        files: []
-      }
+        getData: (type: string) => (type === "text/plain" ? "test paste" : ""),
+        files: [],
+      },
     });
   });
 
@@ -187,14 +187,16 @@ describe("ChatInput", () => {
     expect(input).toBeTruthy();
 
     // Create a paste event with an image file
-    const file = new File(["dummy content"], "image.png", { type: "image/png" });
+    const file = new File(["dummy content"], "image.png", {
+      type: "image/png",
+    });
 
     // Fire paste event with image data
     fireEvent.paste(input!, {
       clipboardData: {
-        getData: () => '',
-        files: [file]
-      }
+        getData: () => "",
+        files: [file],
+      },
     });
 
     // Verify image paste was handled

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

@@ -3,9 +3,9 @@ import { act, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { renderWithProviders } from "test-utils";
 import { ChatInterface } from "#/components/chat-interface";
-import { addUserMessage } from "#/state/chatSlice";
+import { addUserMessage } from "#/state/chat-slice";
 import { SUGGESTIONS } from "#/utils/suggestions";
-import * as ChatSlice from "#/state/chatSlice";
+import * as ChatSlice from "#/state/chat-slice";
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const renderChatInterface = (messages: (Message | ErrorMessage)[]) =>

frontend/__tests__/components/file-explorer/ExplorerTree.test.tsx → frontend/__tests__/components/file-explorer/explorer-tree.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from "@testing-library/react";
 import { renderWithProviders } from "test-utils";
 import { describe, afterEach, vi, it, expect } from "vitest";
-import ExplorerTree from "#/components/file-explorer/ExplorerTree";
+import ExplorerTree from "#/components/file-explorer/explorer-tree";
 
 const FILES = ["file-1-1.ts", "folder-1-2"];
 

frontend/__tests__/components/file-explorer/FileExplorer.test.tsx → frontend/__tests__/components/file-explorer/file-explorer.test.tsx

@@ -3,8 +3,8 @@ import userEvent from "@testing-library/user-event";
 import { renderWithProviders } from "test-utils";
 import { describe, it, expect, vi, Mock, afterEach } from "vitest";
 import toast from "#/utils/toast";
-import AgentState from "#/types/AgentState";
-import FileExplorer from "#/components/file-explorer/FileExplorer";
+import AgentState from "#/types/agent-state";
+import FileExplorer from "#/components/file-explorer/file-explorer";
 import OpenHands from "#/api/open-hands";
 
 const toastSpy = vi.spyOn(toast, "error");

frontend/__tests__/components/file-explorer/TreeNode.test.tsx → frontend/__tests__/components/file-explorer/tree-node.test.tsx

@@ -2,7 +2,7 @@ import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { renderWithProviders } from "test-utils";
 import { vi, describe, afterEach, it, expect } from "vitest";
-import TreeNode from "#/components/file-explorer/TreeNode";
+import TreeNode from "#/components/file-explorer/tree-node";
 import OpenHands from "#/api/open-hands";
 
 const getFileSpy = vi.spyOn(OpenHands, "getFile");

frontend/__tests__/components/modals/ConnectToGitHubByTokenModal.test.tsx

@@ -1,6 +0,0 @@
-import { describe, it } from "vitest";
-
-describe("ConnectToGitHubByTokenModal", () => {
-  it.todo("should render the form");
-  it.todo("should set the token in local storage");
-});

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

@@ -1,7 +1,7 @@
 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/modals/base-modal/BaseModal";
+import BaseModal from "#/components/modals/base-modal/base-modal";
 
 describe("BaseModal", () => {
   it("should render if the modal is open", () => {

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

@@ -1,7 +1,7 @@
 import { describe, it, expect } from "vitest";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { ModelSelector } from "#/components/modals/settings/ModelSelector";
+import { ModelSelector } from "#/components/modals/settings/model-selector";
 
 describe("ModelSelector", () => {
   const models = {

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

@@ -1,8 +1,8 @@
 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/commandSlice";
-import Terminal from "#/components/terminal/Terminal";
+import { Command, appendInput, appendOutput } from "#/state/command-slice";
+import Terminal from "#/components/terminal/terminal";
 
 global.ResizeObserver = vi.fn().mockImplementation(() => ({
   observe: vi.fn(),

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

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { expect, test, vi } from "vitest";
-import { useClickOutsideElement } from "#/hooks/useClickOutsideElement";
+import { useClickOutsideElement } from "#/hooks/use-click-outside-element";
 
 interface ClickOutsideTestComponentProps {
   callback: () => void;

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

@@ -55,8 +55,8 @@ describe("useRate", () => {
     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
+      // not sure if fake timers is buggy with intervals,
+      // but I need to call it twice to register
       vi.advanceTimersToNextTimer();
       vi.advanceTimersToNextTimer();
     });

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

@@ -1,10 +1,10 @@
 import { beforeAll, describe, expect, it, vi } from "vitest";
 import { render } from "@testing-library/react";
 import { afterEach } from "node:test";
-import { useTerminal } from "#/hooks/useTerminal";
-import { Command } from "#/state/commandSlice";
-import { WsClientProvider } from "#/context/ws-client-provider";
 import { ReactNode } from "react";
+import { useTerminal } from "#/hooks/use-terminal";
+import { Command } from "#/state/command-slice";
+import { WsClientProvider } from "#/context/ws-client-provider";
 
 interface TestTerminalComponentProps {
   commands: Command[];
@@ -23,11 +23,17 @@ interface WrapperProps {
   children: ReactNode;
 }
 
-
-function Wrapper({children}: WrapperProps) {
+function Wrapper({ children }: WrapperProps) {
   return (
-    <WsClientProvider enabled={true} token="NO_JWT" ghToken="NO_GITHUB" settings={null}>{children}</WsClientProvider>
-  )
+    <WsClientProvider
+      enabled
+      token="NO_JWT"
+      ghToken="NO_GITHUB"
+      settings={null}
+    >
+      {children}
+    </WsClientProvider>
+  );
 }
 
 describe("useTerminal", () => {

frontend/__tests__/initial-query.test.tsx

@@ -1,6 +1,9 @@
 import { describe, it, expect } from "vitest";
 import store from "../src/store";
-import { setInitialQuery, clearInitialQuery } from "../src/state/initial-query-slice";
+import {
+  setInitialQuery,
+  clearInitialQuery,
+} from "../src/state/initial-query-slice";
 
 describe("Initial Query Behavior", () => {
   it("should clear initial query when clearInitialQuery is dispatched", () => {

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

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { extractModelAndProvider } from "../../src/utils/extractModelAndProvider";
+import { extractModelAndProvider } from "../../src/utils/extract-model-and-provider";
 
 describe("extractModelAndProvider", () => {
   it("should work", () => {

frontend/__tests__/utils/formatMs.test.ts → frontend/__tests__/utils/format-ms.test.ts

@@ -1,5 +1,5 @@
 import { test, expect } from "vitest";
-import { formatMs } from "../../src/utils/formatMs";
+import { formatMs } from "../../src/utils/format-ms";
 
 test("formatMs", () => {
   expect(formatMs(1000)).toBe("00:01");

frontend/__tests__/utils/isNumber.test.ts → frontend/__tests__/utils/is-number.test.ts

@@ -1,5 +1,5 @@
 import { test, expect } from "vitest";
-import { isNumber } from "../../src/utils/isNumber";
+import { isNumber } from "../../src/utils/is-number";
 
 test("isNumber", () => {
   expect(isNumber(1)).toBe(true);

frontend/__tests__/utils/mapProvider.test.ts → frontend/__tests__/utils/map-provider.test.ts

@@ -1,5 +1,5 @@
 import { test, expect } from "vitest";
-import { mapProvider } from "../../src/utils/mapProvider";
+import { mapProvider } from "../../src/utils/map-provider";
 
 test("mapProvider", () => {
   expect(mapProvider("azure")).toBe("Azure");

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

@@ -1,5 +1,5 @@
 import { expect, test } from "vitest";
-import { organizeModelsAndProviders } from "../../src/utils/organizeModelsAndProviders";
+import { organizeModelsAndProviders } from "../../src/utils/organize-models-and-providers";
 
 test("organizeModelsAndProviders", () => {
   const models = [

frontend/__tests__/utils/parseGithubUrl.test.ts → frontend/__tests__/utils/parse-github-url.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "vitest";
-import { parseGithubUrl } from "../../src/utils/parseGithubUrl";
+import { parseGithubUrl } from "../../src/utils/parse-github-url";
 
 test("parseGithubUrl", () => {
   expect(

frontend/__tests__/utils/parseTerminalOutput.test.ts → frontend/__tests__/utils/parse-terminal-output.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { parseTerminalOutput } from "../../src/utils/parseTerminalOutput";
+import { parseTerminalOutput } from "../../src/utils/parse-terminal-output";
 
 describe("parseTerminalOutput", () => {
   it("should parse the command, env, and symbol", () => {

frontend/public/mockServiceWorker.js

@@ -8,8 +8,8 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.3.0-ws.rc-12'
-const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
+const PACKAGE_VERSION = '2.6.6'
+const INTEGRITY_CHECKSUM = 'ca7800994cc8bfb5eb961e037c877074'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -62,7 +62,12 @@ self.addEventListener('message', async function (event) {
 
       sendToClient(client, {
         type: 'MOCKING_ENABLED',
-        payload: true,
+        payload: {
+          client: {
+            id: client.id,
+            frameType: client.frameType,
+          },
+        },
       })
       break
     }
@@ -155,6 +160,10 @@ async function handleRequest(event, requestId) {
 async function resolveMainClient(event) {
   const client = await self.clients.get(event.clientId)
 
+  if (activeClientIds.has(event.clientId)) {
+    return client
+  }
+
   if (client?.frameType === 'top-level') {
     return client
   }
@@ -183,12 +192,14 @@ async function getResponse(event, client, requestId) {
   const requestClone = request.clone()
 
   function passthrough() {
-    const headers = Object.fromEntries(requestClone.headers.entries())
-
-    // Remove internal MSW request header so the passthrough request
-    // complies with any potential CORS preflight checks on the server.
-    // Some servers forbid unknown request headers.
-    delete headers['x-msw-intention']
+    // Cast the request headers to a new Headers instance
+    // so the headers can be manipulated with.
+    const headers = new Headers(requestClone.headers)
+
+    // Remove the "accept" header value that marked this request as passthrough.
+    // This prevents request alteration and also keeps it compliant with the
+    // user-defined CORS policies.
+    headers.delete('accept', 'msw/passthrough')
 
     return fetch(requestClone, { headers })
   }

frontend/src/components/AgentControlBar.tsx → frontend/src/components/agent-control-bar.tsx

@@ -3,9 +3,9 @@ import React from "react";
 import { useSelector } from "react-redux";
 import PauseIcon from "#/assets/pause";
 import PlayIcon from "#/assets/play";
-import { generateAgentStateChangeEvent } from "#/services/agentStateService";
+import { generateAgentStateChangeEvent } from "#/services/agent-state-service";
 import { RootState } from "#/store";
-import AgentState from "#/types/AgentState";
+import AgentState from "#/types/agent-state";
 import { useWsClient } from "#/context/ws-client-provider";
 
 const IgnoreTaskStateMap: Record<string, AgentState[]> = {

frontend/src/components/AgentStatusBar.tsx → frontend/src/components/agent-status-bar.tsx

@@ -4,7 +4,7 @@ import { useSelector } from "react-redux";
 import toast from "react-hot-toast";
 import { I18nKey } from "#/i18n/declaration";
 import { RootState } from "#/store";
-import AgentState from "#/types/AgentState";
+import AgentState from "#/types/agent-state";
 import beep from "#/utils/beep";
 
 enum IndicatorColor {

frontend/src/components/analytics-consent-form-modal.tsx

@@ -1,10 +1,10 @@
 import { ModalBackdrop } from "./modals/modal-backdrop";
-import ModalBody from "./modals/ModalBody";
-import ModalButton from "./buttons/ModalButton";
+import ModalBody from "./modals/modal-body";
+import ModalButton from "./buttons/modal-button";
 import {
   BaseModalTitle,
   BaseModalDescription,
-} from "./modals/confirmation-modals/BaseModal";
+} from "./modals/confirmation-modals/base-modal";
 import { handleCaptureConsent } from "#/utils/handle-capture-consent";
 
 interface AnalyticsConsentFormModalProps {

frontend/src/components/chat-interface.tsx

@@ -5,16 +5,16 @@ import { convertImageToBase64 } from "#/utils/convert-image-to-base-64";
 import { ChatMessage } from "./chat-message";
 import { FeedbackActions } from "./feedback-actions";
 import { ImageCarousel } from "./image-carousel";
-import { createChatMessage } from "#/services/chatService";
+import { createChatMessage } from "#/services/chat-service";
 import { InteractiveChatBox } from "./interactive-chat-box";
-import { addUserMessage } from "#/state/chatSlice";
+import { addUserMessage } from "#/state/chat-slice";
 import { RootState } from "#/store";
-import AgentState from "#/types/AgentState";
-import { generateAgentStateChangeEvent } from "#/services/agentStateService";
+import AgentState from "#/types/agent-state";
+import { generateAgentStateChangeEvent } from "#/services/agent-state-service";
 import { FeedbackModal } from "./feedback-modal";
-import { useScrollToBottom } from "#/hooks/useScrollToBottom";
-import TypingIndicator from "./chat/TypingIndicator";
-import ConfirmationButtons from "./chat/ConfirmationButtons";
+import { useScrollToBottom } from "#/hooks/use-scroll-to-bottom";
+import TypingIndicator from "./chat/typing-indicator";
+import ConfirmationButtons from "./chat/confirmation-buttons";
 import { ErrorMessage } from "./error-message";
 import { ContinueButton } from "./continue-button";
 import { ScrollToBottomButton } from "./scroll-to-bottom-button";

frontend/src/components/chat/ConfirmationButtons.tsx → frontend/src/components/chat/confirmation-buttons.tsx

@@ -3,8 +3,8 @@ import { useTranslation } from "react-i18next";
 import ConfirmIcon from "#/assets/confirm";
 import RejectIcon from "#/assets/reject";
 import { I18nKey } from "#/i18n/declaration";
-import AgentState from "#/types/AgentState";
-import { generateAgentStateChangeEvent } from "#/services/agentStateService";
+import AgentState from "#/types/agent-state";
+import { generateAgentStateChangeEvent } from "#/services/agent-state-service";
 import { useWsClient } from "#/context/ws-client-provider";
 
 interface ActionTooltipProps {

frontend/src/components/context-menu/account-settings-context-menu.tsx

@@ -1,7 +1,7 @@
 import { ContextMenu } from "./context-menu";
 import { ContextMenuListItem } from "./context-menu-list-item";
 import { ContextMenuSeparator } from "./context-menu-separator";
-import { useClickOutsideElement } from "#/hooks/useClickOutsideElement";
+import { useClickOutsideElement } from "#/hooks/use-click-outside-element";
 
 interface AccountSettingsContextMenuProps {
   onClickAccountSettings: () => void;

frontend/src/components/controls.tsx

@@ -1,8 +1,8 @@
 import { IoLockClosed } from "react-icons/io5";
 import React from "react";
 import { useSelector } from "react-redux";
-import AgentControlBar from "./AgentControlBar";
-import AgentStatusBar from "./AgentStatusBar";
+import AgentControlBar from "./agent-control-bar";
+import AgentStatusBar from "./agent-status-bar";
 import { ProjectMenuCard } from "./project-menu/ProjectMenuCard";
 import { useAuth } from "#/context/auth-context";
 import { RootState } from "#/store";

frontend/src/components/event-handler.tsx

@@ -7,11 +7,11 @@ import {
   WsClientProviderStatus,
 } from "#/context/ws-client-provider";
 import { ErrorObservation } from "#/types/core/observations";
-import { addErrorMessage, addUserMessage } from "#/state/chatSlice";
+import { addErrorMessage, addUserMessage } from "#/state/chat-slice";
 import {
   getCloneRepoCommand,
   getGitHubTokenCommand,
-} from "#/services/terminalService";
+} from "#/services/terminal-service";
 import {
   clearFiles,
   clearInitialQuery,
@@ -19,12 +19,12 @@ import {
   setImportedProjectZip,
 } from "#/state/initial-query-slice";
 import store, { RootState } from "#/store";
-import { createChatMessage } from "#/services/chatService";
+import { createChatMessage } from "#/services/chat-service";
 import { isGitHubErrorReponse } from "#/api/github";
 import { base64ToBlob } from "#/utils/base64-to-blob";
-import { setCurrentAgentState } from "#/state/agentSlice";
-import AgentState from "#/types/AgentState";
-import { generateAgentStateChangeEvent } from "#/services/agentStateService";
+import { setCurrentAgentState } from "#/state/agent-slice";
+import AgentState from "#/types/agent-state";
+import { generateAgentStateChangeEvent } from "#/services/agent-state-service";
 import { useGitHubUser } from "#/hooks/query/use-github-user";
 import { useUploadFiles } from "#/hooks/mutation/use-upload-files";
 import { useAuth } from "#/context/auth-context";

frontend/src/components/feedback-form.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import hotToast from "react-hot-toast";
-import ModalButton from "./buttons/ModalButton";
+import ModalButton from "./buttons/modal-button";
 import { Feedback } from "#/api/open-hands.types";
 import { useSubmitFeedback } from "#/hooks/mutation/use-submit-feedback";
 

frontend/src/components/feedback-modal.tsx

@@ -1,11 +1,10 @@
-import React from "react";
 import { FeedbackForm } from "./feedback-form";
 import {
   BaseModalTitle,
   BaseModalDescription,
-} from "./modals/confirmation-modals/BaseModal";
+} from "./modals/confirmation-modals/base-modal";
 import { ModalBackdrop } from "./modals/modal-backdrop";
-import ModalBody from "./modals/ModalBody";
+import ModalBody from "./modals/modal-body";
 
 interface FeedbackModalProps {
   onClose: () => void;

frontend/src/components/file-explorer/ExplorerTree.tsx → frontend/src/components/file-explorer/explorer-tree.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import TreeNode from "./TreeNode";
+import TreeNode from "./tree-node";
 import { I18nKey } from "#/i18n/declaration";
 
 interface ExplorerTreeProps {

frontend/src/components/file-explorer/FileExplorer.tsx → frontend/src/components/file-explorer/file-explorer.tsx

@@ -9,10 +9,10 @@ import { useDispatch, useSelector } from "react-redux";
 import { IoFileTray } from "react-icons/io5";
 import { useTranslation } from "react-i18next";
 import { twMerge } from "tailwind-merge";
-import AgentState from "#/types/AgentState";
-import { addAssistantMessage } from "#/state/chatSlice";
-import IconButton from "../IconButton";
-import ExplorerTree from "./ExplorerTree";
+import AgentState from "#/types/agent-state";
+import { addAssistantMessage } from "#/state/chat-slice";
+import IconButton from "../icon-button";
+import ExplorerTree from "./explorer-tree";
 import toast from "#/utils/toast";
 import { RootState } from "#/store";
 import { I18nKey } from "#/i18n/declaration";

frontend/src/components/file-explorer/TreeNode.tsx → frontend/src/components/file-explorer/tree-node.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import FolderIcon from "../FolderIcon";
-import FileIcon from "../FileIcons";
+import FolderIcon from "../folder-icon";
+import FileIcon from "../file-icons";
 import { useFiles } from "#/context/files";
 import { cn } from "#/utils/utils";
 import { useListFiles } from "#/hooks/query/use-list-files";

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

@@ -9,12 +9,12 @@ import { useTranslation } from "react-i18next";
 import clsx from "clsx";
 import React from "react";
 import posthog from "posthog-js";
-import { organizeModelsAndProviders } from "#/utils/organizeModelsAndProviders";
-import { ModelSelector } from "#/components/modals/settings/ModelSelector";
+import { organizeModelsAndProviders } from "#/utils/organize-models-and-providers";
+import { ModelSelector } from "#/components/modals/settings/model-selector";
 import { getDefaultSettings, Settings } from "#/services/settings";
 import { ModalBackdrop } from "#/components/modals/modal-backdrop";
-import { extractModelAndProvider } from "#/utils/extractModelAndProvider";
-import ModalButton from "../buttons/ModalButton";
+import { extractModelAndProvider } from "#/utils/extract-model-and-provider";
+import ModalButton from "../buttons/modal-button";
 import { DangerModal } from "../modals/confirmation-modals/danger-modal";
 import { I18nKey } from "#/i18n/declaration";
 import {

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

@@ -4,7 +4,7 @@ import { SuggestionBox } from "#/routes/_oh._index/suggestion-box";
 import { ConnectToGitHubModal } from "./modals/connect-to-github-modal";
 import { ModalBackdrop } from "./modals/modal-backdrop";
 import { GitHubRepositorySelector } from "#/routes/_oh._index/github-repo-selector";
-import ModalButton from "./buttons/ModalButton";
+import ModalButton from "./buttons/modal-button";
 import GitHubLogo from "#/assets/branding/github-logo.svg?react";
 
 interface GitHubRepositoriesSuggestionBoxProps {

frontend/src/components/Jupyter.tsx → frontend/src/components/jupyter.tsx

@@ -6,8 +6,8 @@ import { VscArrowDown } from "react-icons/vsc";
 import { useTranslation } from "react-i18next";
 import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import { RootState } from "#/store";
-import { Cell } from "#/state/jupyterSlice";
-import { useScrollToBottom } from "#/hooks/useScrollToBottom";
+import { Cell } from "#/state/jupyter-slice";
+import { useScrollToBottom } from "#/hooks/use-scroll-to-bottom";
 import { I18nKey } from "#/i18n/declaration";
 
 interface IJupyterCell {

frontend/src/components/modals/AccountSettingsModal.tsx → frontend/src/components/modals/account-settings-modal.tsx

@@ -3,10 +3,10 @@ import { useTranslation } from "react-i18next";
 import {
   BaseModalDescription,
   BaseModalTitle,
-} from "./confirmation-modals/BaseModal";
-import ModalBody from "./ModalBody";
-import ModalButton from "../buttons/ModalButton";
-import FormFieldset from "../form/FormFieldset";
+} from "./confirmation-modals/base-modal";
+import ModalBody from "./modal-body";
+import ModalButton from "../buttons/modal-button";
+import FormFieldset from "../form/form-fieldset";
 import { CustomInput } from "../form/custom-input";
 import { AvailableLanguages } from "#/i18n";
 import { I18nKey } from "#/i18n/declaration";

frontend/src/components/modals/base-modal/BaseModal.tsx → frontend/src/components/modals/base-modal/base-modal.tsx

@@ -6,8 +6,8 @@ import {
   ModalHeader,
 } from "@nextui-org/react";
 import React from "react";
-import { Action, FooterContent } from "./FooterContent";
-import { HeaderContent } from "./HeaderContent";
+import { Action, FooterContent } from "./footer-content";
+import { HeaderContent } from "./header-content";
 
 interface BaseModalProps {
   isOpen: boolean;

frontend/src/components/modals/confirmation-modals/BaseModal.tsx → frontend/src/components/modals/confirmation-modals/base-modal.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import ModalButton from "#/components/buttons/ModalButton";
-import ModalBody from "../ModalBody";
+import ModalButton from "#/components/buttons/modal-button";
+import ModalBody from "../modal-body";
 
 interface ButtonConfig {
   text: string;

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

@@ -1,4 +1,4 @@
-import BaseModal from "./BaseModal";
+import BaseModal from "./base-modal";
 
 interface DangerModalProps {
   title: string;

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

@@ -1,11 +1,11 @@
 import { useTranslation } from "react-i18next";
-import ModalBody from "./ModalBody";
+import ModalBody from "./modal-body";
 import { CustomInput } from "../form/custom-input";
-import ModalButton from "../buttons/ModalButton";
+import ModalButton from "../buttons/modal-button";
 import {
   BaseModalDescription,
   BaseModalTitle,
-} from "./confirmation-modals/BaseModal";
+} from "./confirmation-modals/base-modal";
 import { I18nKey } from "#/i18n/declaration";
 import { useAuth } from "#/context/auth-context";
 

frontend/src/components/modals/LoadingProject.tsx → frontend/src/components/modals/loading-project.tsx

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

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

@@ -9,8 +9,8 @@ import { RootState } from "#/store";
 import {
   ActionSecurityRisk,
   SecurityAnalyzerLog,
-} from "#/state/securityAnalyzerSlice";
-import { useScrollToBottom } from "#/hooks/useScrollToBottom";
+} from "#/state/security-analyzer-slice";
+import { useScrollToBottom } from "#/hooks/use-scroll-to-bottom";
 import { I18nKey } from "#/i18n/declaration";
 import { request } from "#/services/api";
 import toast from "#/utils/toast";

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import SecurityInvariant from "./invariant/Invariant";
-import BaseModal from "../base-modal/BaseModal";
+import SecurityInvariant from "./invariant/invariant";
+import BaseModal from "../base-modal/base-modal";
 import { I18nKey } from "#/i18n/declaration";
 
 interface SecurityProps {

frontend/src/components/modals/settings/ModelSelector.tsx → frontend/src/components/modals/settings/model-selector.tsx

@@ -4,9 +4,9 @@ import {
   AutocompleteSection,
 } from "@nextui-org/react";
 import React from "react";
-import { mapProvider } from "#/utils/mapProvider";
+import { mapProvider } from "#/utils/map-provider";
 import { VERIFIED_MODELS, VERIFIED_PROVIDERS } from "#/utils/verified-models";
-import { extractModelAndProvider } from "#/utils/extractModelAndProvider";
+import { extractModelAndProvider } from "#/utils/extract-model-and-provider";
 
 interface ModelSelectorProps {
   isDisabled?: boolean;

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

@@ -5,13 +5,13 @@ import posthog from "posthog-js";
 import EllipsisH from "#/icons/ellipsis-h.svg?react";
 import { ModalBackdrop } from "../modals/modal-backdrop";
 import { ConnectToGitHubModal } from "../modals/connect-to-github-modal";
-import { addUserMessage } from "#/state/chatSlice";
-import { createChatMessage } from "#/services/chatService";
+import { addUserMessage } from "#/state/chat-slice";
+import { createChatMessage } from "#/services/chat-service";
 import { ProjectMenuCardContextMenu } from "./project.menu-card-context-menu";
 import { ProjectMenuDetailsPlaceholder } from "./project-menu-details-placeholder";
 import { ProjectMenuDetails } from "./project-menu-details";
 import { downloadWorkspace } from "#/utils/download-workspace";
-import { LoadingSpinner } from "../modals/LoadingProject";
+import { LoadingSpinner } from "../modals/loading-project";
 import { useWsClient } from "#/context/ws-client-provider";
 
 interface ProjectMenuCardProps {

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

@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import { useClickOutsideElement } from "#/hooks/useClickOutsideElement";
+import { useClickOutsideElement } from "#/hooks/use-click-outside-element";
 import { ContextMenu } from "../context-menu/context-menu";
 import { ContextMenuListItem } from "../context-menu/context-menu-list-item";
 import { I18nKey } from "#/i18n/declaration";

frontend/src/components/terminal/Terminal.tsx → frontend/src/components/terminal/terminal.tsx

@@ -1,6 +1,6 @@
 import { useSelector } from "react-redux";
 import { RootState } from "#/store";
-import { useTerminal } from "../../hooks/useTerminal";
+import { useTerminal } from "../../hooks/use-terminal";
 
 import "@xterm/xterm/css/xterm.css";
 

frontend/src/components/user-avatar.tsx

@@ -1,4 +1,4 @@
-import { LoadingSpinner } from "./modals/LoadingProject";
+import { LoadingSpinner } from "./modals/loading-project";
 import DefaultUserAvatar from "#/icons/default-user.svg?react";
 import { cn } from "#/utils/utils";
 

frontend/src/components/waitlist-modal.tsx

@@ -1,8 +1,8 @@
-import ModalButton from "./buttons/ModalButton";
+import ModalButton from "./buttons/modal-button";
 import { ModalBackdrop } from "./modals/modal-backdrop";
 import GitHubLogo from "#/assets/branding/github-logo.svg?react";
 import AllHandsLogo from "#/assets/branding/all-hands-logo.svg?react";
-import ModalBody from "./modals/ModalBody";
+import ModalBody from "./modals/modal-body";
 
 interface WaitlistModalProps {
   ghToken: string | null;

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

@@ -1,9 +1,9 @@
 import posthog from "posthog-js";
 import React from "react";
 import { Settings } from "#/services/settings";
-import ActionType from "#/types/ActionType";
+import ActionType from "#/types/action-type";
 import EventLogger from "#/utils/event-logger";
-import AgentState from "#/types/AgentState";
+import AgentState from "#/types/agent-state";
 import { handleAssistantMessage } from "#/services/actions";
 import { useRate } from "#/utils/use-rate";
 

frontend/src/hooks/use-end-session.ts

@@ -5,7 +5,7 @@ import {
   initialState as browserInitialState,
   setScreenshotSrc,
   setUrl,
-} from "#/state/browserSlice";
+} from "#/state/browser-slice";
 import { clearSelectedRepository } from "#/state/initial-query-slice";
 
 export const useEndSession = () => {

frontend/src/hooks/useTerminal.ts → frontend/src/hooks/use-terminal.ts

@@ -1,9 +1,9 @@
 import { FitAddon } from "@xterm/addon-fit";
 import { Terminal } from "@xterm/xterm";
 import React from "react";
-import { Command } from "#/state/commandSlice";
-import { getTerminalCommand } from "#/services/terminalService";
-import { parseTerminalOutput } from "#/utils/parseTerminalOutput";
+import { Command } from "#/state/command-slice";
+import { getTerminalCommand } from "#/services/terminal-service";
+import { parseTerminalOutput } from "#/utils/parse-terminal-output";
 import { useWsClient } from "#/context/ws-client-provider";
 
 /*

frontend/src/mocks/handlers.ws.ts

@@ -1,5 +1,5 @@
 import { delay, WebSocketHandler, ws } from "msw";
-import AgentState from "#/types/AgentState";
+import AgentState from "#/types/agent-state";
 import {
   AgentStateChangeObservation,
   CommandObservation,

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

@@ -4,8 +4,8 @@ import { useRouteError } from "@remix-run/react";
 import { editor } from "monaco-editor";
 import { EditorProps } from "@monaco-editor/react";
 import { RootState } from "#/store";
-import AgentState from "#/types/AgentState";
-import FileExplorer from "#/components/file-explorer/FileExplorer";
+import AgentState from "#/types/agent-state";
+import FileExplorer from "#/components/file-explorer/file-explorer";
 import CodeEditorComponent from "./code-editor-component";
 import { useFiles } from "#/context/files";
 import { EditorActions } from "#/components/editor-actions";

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

@@ -1,4 +1,4 @@
-import BrowserPanel from "#/components/Browser";
+import BrowserPanel from "#/components/browser";
 
 function Browser() {
   return <BrowserPanel />;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import JupyterEditor from "#/components/Jupyter";
+import JupyterEditor from "#/components/jupyter";
 
 function Jupyter() {
   const parentRef = React.useRef<HTMLDivElement>(null);

frontend/src/routes/_oh.app.tsx

@@ -2,17 +2,17 @@ import { useDisclosure } from "@nextui-org/react";
 import React from "react";
 import { Outlet } from "@remix-run/react";
 import { useDispatch, useSelector } from "react-redux";
-import Security from "../components/modals/security/Security";
+import Security from "../components/modals/security/security";
 import { Controls } from "#/components/controls";
 import { RootState } from "#/store";
 import { Container } from "#/components/container";
-import { clearMessages } from "#/state/chatSlice";
-import { clearTerminal } from "#/state/commandSlice";
+import { clearMessages } from "#/state/chat-slice";
+import { clearTerminal } from "#/state/command-slice";
 import { useEffectOnce } from "#/utils/use-effect-once";
 import CodeIcon from "#/icons/code.svg?react";
 import GlobeIcon from "#/icons/globe.svg?react";
 import ListIcon from "#/icons/list-type-number.svg?react";
-import { clearJupyter } from "#/state/jupyterSlice";
+import { clearJupyter } from "#/state/jupyter-slice";
 import { FilesProvider } from "#/context/files";
 import { ChatInterface } from "#/components/chat-interface";
 import { WsClientProvider } from "#/context/ws-client-provider";
@@ -41,7 +41,7 @@ function App() {
   );
 
   const Terminal = React.useMemo(
-    () => React.lazy(() => import("../components/terminal/Terminal")),
+    () => React.lazy(() => import("../components/terminal/terminal")),
     [],
   );
 

frontend/src/routes/_oh.tsx

@@ -8,9 +8,9 @@ import {
 import { useDispatch } from "react-redux";
 import CogTooth from "#/assets/cog-tooth";
 import { SettingsForm } from "#/components/form/settings-form";
-import AccountSettingsModal from "#/components/modals/AccountSettingsModal";
+import AccountSettingsModal from "#/components/modals/account-settings-modal";
 import { DangerModal } from "#/components/modals/confirmation-modals/danger-modal";
-import { LoadingSpinner } from "#/components/modals/LoadingProject";
+import { LoadingSpinner } from "#/components/modals/loading-project";
 import { ModalBackdrop } from "#/components/modals/modal-backdrop";
 import { UserActions } from "#/components/user-actions";
 import i18n from "#/i18n";
@@ -19,8 +19,8 @@ import NewProjectIcon from "#/icons/new-project.svg?react";
 import DocsIcon from "#/icons/docs.svg?react";
 import { WaitlistModal } from "#/components/waitlist-modal";
 import { AnalyticsConsentFormModal } from "#/components/analytics-consent-form-modal";
-import { setCurrentAgentState } from "#/state/agentSlice";
-import AgentState from "#/types/AgentState";
+import { setCurrentAgentState } from "#/state/agent-slice";
+import AgentState from "#/types/agent-state";
 import { useConfig } from "#/hooks/query/use-config";
 import { useGitHubUser } from "#/hooks/query/use-github-user";
 import { useGitHubAuthUrl } from "#/hooks/use-github-auth-url";

frontend/src/services/actions.ts

@@ -2,21 +2,21 @@ import {
   addAssistantMessage,
   addUserMessage,
   addErrorMessage,
-} from "#/state/chatSlice";
-import { setCode, setActiveFilepath } from "#/state/codeSlice";
-import { appendJupyterInput } from "#/state/jupyterSlice";
+} from "#/state/chat-slice";
+import { setCode, setActiveFilepath } from "#/state/code-slice";
+import { appendJupyterInput } from "#/state/jupyter-slice";
 import {
   ActionSecurityRisk,
   appendSecurityAnalyzerInput,
-} from "#/state/securityAnalyzerSlice";
-import { setCurStatusMessage } from "#/state/statusSlice";
+} from "#/state/security-analyzer-slice";
+import { setCurStatusMessage } from "#/state/status-slice";
 import store from "#/store";
-import ActionType from "#/types/ActionType";
+import ActionType from "#/types/action-type";
 import {
   ActionMessage,
   ObservationMessage,
   StatusMessage,
-} from "#/types/Message";
+} from "#/types/message";
 import { handleObservationMessage } from "./observations";
 
 const messageActions = {

frontend/src/services/agentStateService.ts → frontend/src/services/agent-state-service.ts

@@ -1,5 +1,5 @@
-import ActionType from "#/types/ActionType";
-import AgentState from "#/types/AgentState";
+import ActionType from "#/types/action-type";
+import AgentState from "#/types/agent-state";
 
 export const generateAgentStateChangeEvent = (state: AgentState) => ({
   action: ActionType.CHANGE_AGENT_STATE,

frontend/src/services/chatService.ts → frontend/src/services/chat-service.ts

@@ -1,4 +1,4 @@
-import ActionType from "#/types/ActionType";
+import ActionType from "#/types/action-type";
 
 export function createChatMessage(
   message: string,

frontend/src/services/observations.ts

@@ -1,11 +1,11 @@
-import { setCurrentAgentState } from "#/state/agentSlice";
-import { setUrl, setScreenshotSrc } from "#/state/browserSlice";
+import { setCurrentAgentState } from "#/state/agent-slice";
+import { setUrl, setScreenshotSrc } from "#/state/browser-slice";
 import store from "#/store";
-import { ObservationMessage } from "#/types/Message";
-import { appendOutput } from "#/state/commandSlice";
-import { appendJupyterOutput } from "#/state/jupyterSlice";
-import ObservationType from "#/types/ObservationType";
-import { addAssistantMessage } from "#/state/chatSlice";
+import { ObservationMessage } from "#/types/message";
+import { appendOutput } from "#/state/command-slice";
+import { appendJupyterOutput } from "#/state/jupyter-slice";
+import ObservationType from "#/types/observation-type";
+import { addAssistantMessage } from "#/state/chat-slice";
 
 export function handleObservationMessage(message: ObservationMessage) {
   switch (message.observation) {

frontend/src/services/terminalService.ts → frontend/src/services/terminal-service.ts

@@ -1,4 +1,4 @@
-import ActionType from "#/types/ActionType";
+import ActionType from "#/types/action-type";
 
 export function getTerminalCommand(command: string, hidden: boolean = false) {
   const event = { action: ActionType.RUN, args: { command, hidden } };

frontend/src/state/agentSlice.tsx → frontend/src/state/agent-slice.tsx

@@ -1,5 +1,5 @@
 import { createSlice } from "@reduxjs/toolkit";
-import AgentState from "#/types/AgentState";
+import AgentState from "#/types/agent-state";
 
 export const agentSlice = createSlice({
   name: "agent",

frontend/src/state/statusSlice.ts → frontend/src/state/status-slice.ts

@@ -1,5 +1,5 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import { StatusMessage } from "#/types/Message";
+import { StatusMessage } from "#/types/message";
 
 const initialStatusMessage: StatusMessage = {
   status_update: true,

frontend/src/store.ts

@@ -1,14 +1,14 @@
 import { combineReducers, configureStore } from "@reduxjs/toolkit";
-import agentReducer from "./state/agentSlice";
-import browserReducer from "./state/browserSlice";
-import chatReducer from "./state/chatSlice";
-import codeReducer from "./state/codeSlice";
+import agentReducer from "./state/agent-slice";
+import browserReducer from "./state/browser-slice";
+import chatReducer from "./state/chat-slice";
+import codeReducer from "./state/code-slice";
 import fileStateReducer from "./state/file-state-slice";
 import initialQueryReducer from "./state/initial-query-slice";
-import commandReducer from "./state/commandSlice";
-import jupyterReducer from "./state/jupyterSlice";
-import securityAnalyzerReducer from "./state/securityAnalyzerSlice";
-import statusReducer from "./state/statusSlice";
+import commandReducer from "./state/command-slice";
+import jupyterReducer from "./state/jupyter-slice";
+import securityAnalyzerReducer from "./state/security-analyzer-slice";
+import statusReducer from "./state/status-slice";
 
 export const rootReducer = combineReducers({
   fileState: fileStateReducer,

frontend/src/types/core/observations.ts

@@ -1,4 +1,4 @@
-import AgentState from "../AgentState";
+import AgentState from "../agent-state";
 import { OpenHandsObservationEvent } from "./base";
 
 export interface AgentStateChangeObservation

frontend/src/types/ResponseType.tsx → frontend/src/types/response-type.tsx

@@ -1,4 +1,4 @@
-import { ActionMessage, ObservationMessage, StatusMessage } from "./Message";
+import { ActionMessage, ObservationMessage, StatusMessage } from "./message";
 
 type SocketMessage = ActionMessage | ObservationMessage | StatusMessage;
 

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

@@ -1,4 +1,4 @@
-import { isNumber } from "./isNumber";
+import { isNumber } from "./is-number";
 import {
   VERIFIED_ANTHROPIC_MODELS,
   VERIFIED_OPENAI_MODELS,