Merge branch 'main' into kevin

.github/dependabot.yml

@@ -20,6 +20,9 @@ updates:
       docusaurus:
         patterns:
           - "*docusaurus*"
+      eslint:
+        patterns:
+          - "*eslint*"
 
   - package-ecosystem: "npm"
     directory: "/docs"
@@ -30,3 +33,6 @@ updates:
       docusaurus:
         patterns:
           - "*docusaurus*"
+      eslint:
+        patterns:
+          - "*eslint*"

config.template.toml

@@ -182,6 +182,17 @@ llm_config = 'gpt3'
 # Enable auto linting after editing
 #enable_auto_lint = false
 
+#################################### Security ###################################
+# Configuration for security features
+##############################################################################
+[security]
+
+# Enable confirmation mode
+#confirmation_mode = true
+
+# The security analyzer to use
+#security_analyzer = ""
+
 #################################### Eval ####################################
 # Configuration for the evaluation, please refer to the specific evaluation
 # plugin for the available options

docs/package.json

@@ -24,7 +24,7 @@
     "prism-react-renderer": "^2.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-icons": "^5.2.1",
+    "react-icons": "^5.3.0",
     "react-use": "^17.5.1"
   },
   "devDependencies": {

frontend/package.json

@@ -16,7 +16,7 @@
     "@xterm/xterm": "^5.4.0",
     "clsx": "^2.1.1",
     "eslint-config-airbnb-typescript": "^18.0.0",
-    "i18next": "^23.12.2",
+    "i18next": "^23.12.3",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^2.5.2",
     "jose": "^5.6.3",
@@ -26,11 +26,11 @@
     "react-highlight": "^0.15.0",
     "react-hot-toast": "^2.4.1",
     "react-i18next": "^15.0.1",
-    "react-icons": "^5.2.1",
+    "react-icons": "^5.3.0",
     "react-markdown": "^9.0.1",
     "react-redux": "^9.1.2",
     "react-syntax-highlighter": "^15.5.0",
-    "tailwind-merge": "^2.5.1",
+    "tailwind-merge": "^2.5.2",
     "vite": "^5.4.0",
     "web-vitals": "^3.5.2"
   },
@@ -83,7 +83,7 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "husky": "^9.1.4",
     "jsdom": "^24.1.1",
-    "lint-staged": "^15.2.8",
+    "lint-staged": "^15.2.9",
     "postcss": "^8.4.41",
     "prettier": "^3.3.3",
     "tailwindcss": "^3.4.9",

frontend/src/App.tsx

@@ -1,6 +1,7 @@
 import { useDisclosure } from "@nextui-org/react";
 import React, { useEffect } from "react";
 import { Toaster } from "react-hot-toast";
+import { IoLockClosed } from "react-icons/io5";
 import CogTooth from "#/assets/cog-tooth";
 import ChatInterface from "#/components/chat/ChatInterface";
 import Errors from "#/components/Errors";
@@ -15,13 +16,20 @@ import VolumeIcon from "./components/VolumeIcon";
 import Terminal from "./components/terminal/Terminal";
 import Session from "#/services/session";
 import { getToken } from "#/services/auth";
-import { settingsAreUpToDate } from "#/services/settings";
+import { getSettings, settingsAreUpToDate } from "#/services/settings";
+import Security from "./components/modals/security/Security";
 
 interface Props {
   setSettingOpen: (isOpen: boolean) => void;
+  setSecurityOpen: (isOpen: boolean) => void;
+  showSecurityLock: boolean;
 }
 
-function Controls({ setSettingOpen }: Props): JSX.Element {
+function Controls({
+  setSettingOpen,
+  setSecurityOpen,
+  showSecurityLock,
+}: Props): JSX.Element {
   return (
     <div className="flex w-full p-4 bg-neutral-900 items-center shrink-0 justify-between">
       <div className="flex items-center gap-4">
@@ -33,6 +41,15 @@ function Controls({ setSettingOpen }: Props): JSX.Element {
         <div style={{ marginRight: "8px" }}>
           <VolumeIcon />
         </div>
+        {showSecurityLock && (
+          <div
+            className="cursor-pointer hover:opacity-80 transition-all"
+            style={{ marginRight: "8px" }}
+            onClick={() => setSecurityOpen(true)}
+          >
+            <IoLockClosed size={20} />
+          </div>
+        )}
         <div
           className="cursor-pointer hover:opacity-80 transition-all"
           onClick={() => setSettingOpen(true)}
@@ -60,6 +77,14 @@ function App(): JSX.Element {
     onOpenChange: onLoadPreviousSessionModalOpenChange,
   } = useDisclosure();
 
+  const {
+    isOpen: securityModalIsOpen,
+    onOpen: onSecurityModalOpen,
+    onOpenChange: onSecurityModalOpenChange,
+  } = useDisclosure();
+
+  const { SECURITY_ANALYZER } = getSettings();
+
   useEffect(() => {
     if (initOnce) return;
     initOnce = true;
@@ -98,11 +123,19 @@ function App(): JSX.Element {
           secondClassName="flex flex-col overflow-hidden"
         />
       </div>
-      <Controls setSettingOpen={onSettingsModalOpen} />
+      <Controls
+        setSettingOpen={onSettingsModalOpen}
+        setSecurityOpen={onSecurityModalOpen}
+        showSecurityLock={!!SECURITY_ANALYZER}
+      />
       <SettingsModal
         isOpen={settingsModalIsOpen}
         onOpenChange={onSettingsModalOpenChange}
       />
+      <Security
+        isOpen={securityModalIsOpen}
+        onOpenChange={onSecurityModalOpenChange}
+      />
       <LoadPreviousSessionModal
         isOpen={loadPreviousSessionModalIsOpen}
         onOpenChange={onLoadPreviousSessionModalOpenChange}

frontend/src/components/AgentControlBar.tsx

@@ -83,15 +83,16 @@ function AgentControlBar() {
       return;
     }
 
+
+    setDesiredState(action);
+    changeAgentState(action);
+
     if (action === AgentState.STOPPED) {
       Session._history = [];
       store.dispatch(clearMessages());
     } else {
       setIsLoading(true);
     }
-
-    setDesiredState(action);
-    changeAgentState(action);
   };
 
   useEffect(() => {

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

@@ -13,6 +13,8 @@ interface BaseModalProps {
   isOpen: boolean;
   onOpenChange: (isOpen: boolean) => void;
   title: string;
+  contentClassName?: string;
+  bodyClassName?: string;
   isDismissable?: boolean;
   subtitle?: string;
   actions?: Action[];
@@ -24,6 +26,8 @@ function BaseModal({
   isOpen,
   onOpenChange,
   title,
+  contentClassName = "max-w-[30rem] p-[40px]",
+  bodyClassName = "px-0 py-[20px]",
   isDismissable = true,
   subtitle = undefined,
   actions = [],
@@ -42,14 +46,16 @@ function BaseModal({
       size="sm"
       className="bg-neutral-900 rounded-lg"
     >
-      <ModalContent className="max-w-[30rem] p-[40px]">
+      <ModalContent className={contentClassName}>
         {(closeModal) => (
           <>
-            <ModalHeader className="flex flex-col p-0">
-              <HeaderContent title={title} subtitle={subtitle} />
-            </ModalHeader>
+            {title && (
+              <ModalHeader className="flex flex-col p-0">
+                <HeaderContent title={title} subtitle={subtitle} />
+              </ModalHeader>
+            )}
 
-            <ModalBody className="px-0 py-[20px]">{children}</ModalBody>
+            <ModalBody className={bodyClassName}>{children}</ModalBody>
 
             {actions && actions.length > 0 && (
               <ModalFooter className="flex-col flex justify-start p-0">

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

@@ -0,0 +1,40 @@
+import React from "react";
+import SecurityInvariant from "./invariant/Invariant";
+import BaseModal from "../base-modal/BaseModal";
+import { getSettings } from "#/services/settings";
+
+interface SecurityProps {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+}
+
+enum SecurityAnalyzerOption {
+  INVARIANT = "invariant",
+}
+
+const SecurityAnalyzers: Record<SecurityAnalyzerOption, React.ElementType> = {
+  [SecurityAnalyzerOption.INVARIANT]: SecurityInvariant,
+};
+
+function Security({ isOpen, onOpenChange }: SecurityProps): JSX.Element {
+  const { SECURITY_ANALYZER } = getSettings();
+  const AnalyzerComponent =
+    SECURITY_ANALYZER &&
+    SecurityAnalyzers[SECURITY_ANALYZER as SecurityAnalyzerOption]
+      ? SecurityAnalyzers[SECURITY_ANALYZER as SecurityAnalyzerOption]
+      : () => <div>Unknown security analyzer chosen</div>;
+
+  return (
+    <BaseModal
+      isOpen={isOpen && !!SECURITY_ANALYZER}
+      contentClassName="max-w-[80%] h-[80%]"
+      bodyClassName="px-0 py-0 max-h-[100%]"
+      onOpenChange={onOpenChange}
+      title=""
+    >
+      <AnalyzerComponent />
+    </BaseModal>
+  );
+}
+
+export default Security;