[Feat] Introduce linting in frontend project

.github/workflows/frontend-checks.yaml

@@ -0,0 +1,66 @@
+name: Frontend Checks
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - "frontend/**"
+  pull_request:
+    branches:
+      - main
+    paths:
+      - "frontend/**"
+
+permissions:
+  contents: read
+
+jobs:
+  frontend-lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "18"
+          cache: "yarn"
+          cache-dependency-path: "frontend/yarn.lock"
+
+      - name: Install dependencies
+        working-directory: frontend
+        run: yarn install --frozen-lockfile
+
+      - name: Run ESLint (must have 0 errors)
+        working-directory: frontend
+        run: |
+          echo "🧹 Running ESLint - checking for 0 errors..."
+
+          # Run lint and capture output
+          LINT_OUTPUT=$(yarn lint 2>&1)
+          LINT_EXIT_CODE=$?
+
+          echo "$LINT_OUTPUT"
+
+          # Parse the output to check for errors (but not warnings)
+          if [ $LINT_EXIT_CODE -ne 0 ]; then
+            echo "❌ ESLint failed with exit code $LINT_EXIT_CODE"
+            exit 1
+          else
+            echo "✅ ESLint passed with 0 errors!"
+          fi
+
+      - name: Run TypeScript check
+        working-directory: frontend
+        run: |
+          echo "🔍 Running TypeScript check..."
+          yarn typecheck
+
+          if [ $? -eq 0 ]; then
+            echo "✅ TypeScript check passed!"
+          else
+            echo "❌ TypeScript check failed"
+            exit 1
+          fi

frontend/.eslintrc.js

@@ -0,0 +1,50 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:jsx-a11y/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: [
+    'react',
+    '@typescript-eslint',
+    'react-hooks',
+    'jsx-a11y',
+  ],
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+    'react/prop-types': 'off',
+    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-explicit-any': 'warn',
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  ignorePatterns: [
+    'node_modules/',
+    'public/',
+    '.cache/',
+    'gatsby-*.js',
+    '*.config.js',
+  ],
+};

frontend/gatsby-config.ts

@@ -9,6 +9,7 @@ fs.access(envFile, fs.constants.F_OK, (err) => {
   }
 });
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 require("dotenv").config({
   path: envFile,
 });

frontend/package.json

@@ -14,6 +14,8 @@
     "build": "gatsby clean && rm -rf ../src/magentic_ui/backend/web/ui && PREFIX_PATH_VALUE='' gatsby build --prefix-paths && rsync -a --delete public/ ../src/magentic_ui/backend/web/ui/",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx --max-warnings 150",
+    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
@@ -68,5 +70,6 @@
     "prismjs": "1.30.0",
     "cookie": "0.7.0",
     "base-x": "3.0.11"
-  }
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

frontend/src/components/common/Icon.tsx

@@ -8,14 +8,12 @@ interface IconProps {
 }
 
 const IconWrapper: React.FC<IconProps & { children: React.ReactNode }> = ({
-  className = "",
-  size = 16,
   tooltip,
   children
 }) => {
   const uniqueId = useId();
   const groupClass = `tooltip-group-${uniqueId.replace(/:/g, '')}`;
-  
+
   return (
     <div className={`relative ${groupClass} inline-flex`}>
       {children}

frontend/src/components/common/filerenderer.tsx

@@ -98,7 +98,7 @@ const FileModal: React.FC<FileModalProps> = ({
   file,
   content,
 }) => {
-  const [isFullScreen, setIsFullScreen] = useState<boolean>(false);
+  const [isFullScreen] = useState<boolean>(false);
   const modalRef = React.useRef<HTMLDivElement>(null);
   const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState<boolean>(false);
@@ -171,9 +171,9 @@ const FileModal: React.FC<FileModalProps> = ({
 
   if (!isOpen || !file) return null;
 
-  const toggleFullScreen = (): void => {
-    setIsFullScreen(!isFullScreen);
-  };
+  // const toggleFullScreen = (): void => {
+  //   setIsFullScreen(!isFullScreen);
+  // };
 
   // Handle click outside the modal content
   const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
@@ -254,12 +254,22 @@ const FileModal: React.FC<FileModalProps> = ({
     <div
       className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
       onClick={handleBackdropClick}
+      onKeyDown={(e) => {
+        if (e.key === 'Escape') {
+          onClose();
+        }
+      }}
+      role="presentation"
+      aria-label="File modal"
+      tabIndex={-1}
     >
       <div
         ref={modalRef}
         className={`bg-white rounded-lg shadow-lg overflow-hidden ${
           isFullScreen ? "fixed inset-0" : "max-w-4xl w-full max-h-[85vh]"
         }`}
+        role="dialog"
+        aria-modal="true"
       >
         {/* Header */}
         <div className="flex justify-between items-center p-4 border-b">
@@ -406,6 +416,10 @@ const FileCard = memo<FileCardProps>(({ file, onFileClick }) => {
       <div
         className="group relative flex flex-col overflow-hidden rounded-lg border border-gray-200 hover:border-blue-500 shadow-sm hover:shadow-md cursor-pointer transition-all"
         onClick={() => onFileClick(file)}
+        onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && onFileClick(file)}
+        role="button"
+        tabIndex={0}
+        aria-label={`View ${file.name}`}
       >
         <ImageThumbnail file={file} />
         <div className="p-2 bg-white border-t w-full">
@@ -422,6 +436,10 @@ const FileCard = memo<FileCardProps>(({ file, onFileClick }) => {
     <div
       className="group relative flex flex-col items-center p-3 rounded-lg border border-gray-200 hover:border-blue-500 cursor-pointer transition-colors shadow-sm hover:shadow-md"
       onClick={() => onFileClick(file)}
+      onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && onFileClick(file)}
+      role="button" 
+      tabIndex={0}
+      aria-label={`View ${file.name}`}
     >
       <IconComponent className="w-8 h-8 mb-2 text-blue-500" />
       <span className="text-xs text-center truncate w-full" title={file.name}>

frontend/src/components/common/markdownrender.tsx

@@ -222,7 +222,7 @@ const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
               {children}
             </a>
           ),
-          code: ({ node, className, children, ...props }) => {
+          code: ({ className, children, ...props }) => {
             const match = /language-(\w+)/.exec(className || "");
             const language = match ? match[1] : "";
             const inline = !language;

frontend/src/components/contentheader.tsx

@@ -77,6 +77,10 @@ const ContentHeader = ({
               <div
                 className="flex items-center space-x-2 cursor-pointer"
                 onClick={() => setIsEmailModalOpen(true)}
+                onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && setIsEmailModalOpen(true)}
+                role="button"
+                tabIndex={0}
+                aria-label="View or update your profile"
               >
                 {user.avatar_url ? (
                   <img

frontend/src/components/features/Plans/LearnPlanButton.tsx

@@ -19,7 +19,7 @@ export const LearnPlanButton: React.FC<LearnPlanButtonProps> = ({
 }) => {
   const [isLearning, setIsLearning] = useState(false);
   const [isLearned, setIsLearned] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  const [, setError] = useState<string | null>(null);
   const { user, darkMode } = useContext(appContext);
   const planAPI = new PlanAPI();
 

frontend/src/components/features/Plans/PlanCard.tsx

@@ -268,10 +268,11 @@ const PlanCard: React.FC<PlanCardProps> = ({
         {isModalOpen && (
           <div>
             <div className="mb-4">
-              <label className="block text-sm font-medium mb-1">
+              <label htmlFor="plan-title" className="block text-sm font-medium mb-1">
                 Plan Title
               </label>
               <Input
+                id="plan-title"
                 type="text"
                 value={localTask}
                 onChange={(e) => setLocalTask(e.target.value)}

frontend/src/components/features/Plans/PlanList.tsx

@@ -34,12 +34,12 @@ const normalizePlanData = (
     task: planData.task || defaultTask,
     steps: Array.isArray(planData.steps)
       ? planData.steps.map((step: any) => ({
-          title: step.title || "Untitled Step",
-          details: step.details || "",
-          enabled: step.enabled !== false,
-          open: step.open || false,
-          agent_name: step.agent_name || "",
-        }))
+        title: step.title || "Untitled Step",
+        details: step.details || "",
+        enabled: step.enabled !== false,
+        open: step.open || false,
+        agent_name: step.agent_name || "",
+      }))
       : [],
     user_id: planData.user_id || userId,
     session_id: planData.session_id || null,
@@ -48,7 +48,6 @@ const normalizePlanData = (
 
 const PlanList: React.FC<PlanListProps> = ({
   onTabChange,
-  onSelectSession,
   onCreateSessionFromPlan,
 }) => {
   const [plans, setPlans] = useState<IPlan[]>([]);
@@ -57,7 +56,7 @@ const PlanList: React.FC<PlanListProps> = ({
   const { user } = useContext(appContext);
   const planAPI = new PlanAPI();
   const sessionAPI = new SessionAPI();
-  const [isCreatingPlan, setIsCreatingPlan] = useState<boolean>(false);
+  const [, setIsCreatingPlan] = useState<boolean>(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [isDragging, setIsDragging] = useState<boolean>(false);
   const [searchTerm, setSearchTerm] = useState<string>("");
@@ -157,8 +156,7 @@ const PlanList: React.FC<PlanListProps> = ({
     } catch (err) {
       console.error("Error creating new plan:", err);
       message.error(
-        `Failed to create plan: ${
-          err instanceof Error ? err.message : String(err)
+        `Failed to create plan: ${err instanceof Error ? err.message : String(err)
         }`
       );
     } finally {
@@ -202,9 +200,8 @@ const PlanList: React.FC<PlanListProps> = ({
     } catch (err) {
       console.error("Error importing plan:", err);
       message.error({
-        content: `Failed to import plan: ${
-          err instanceof Error ? err.message : String(err)
-        }`,
+        content: `Failed to import plan: ${err instanceof Error ? err.message : String(err)
+          }`,
         duration: 5,
       });
     }
@@ -365,7 +362,7 @@ const PlanList: React.FC<PlanListProps> = ({
             <SearchOutlined
               style={{ fontSize: "48px", marginBottom: "16px" }}
             />
-            <p>No plans found matching "{searchTerm}"</p>
+            <p>No plans found matching &quot;{searchTerm}&quot;</p>
             <Button
               type="link"
               onClick={() => setSearchTerm("")}

frontend/src/components/layout.tsx

@@ -21,18 +21,13 @@ type Props = {
 };
 
 const MagenticUILayout = ({
-  meta,
-  title,
   link,
-  showHeader = true,
   restricted = false,
-  activeTab,
-  onTabChange,
 }: Props) => {
   const { darkMode, user, setUser } = React.useContext(appContext);
   const { sidebar } = useConfigStore();
   const { isExpanded } = sidebar;
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
+  const [, setIsMobileMenuOpen] = React.useState(false);
 
   // Mimic sign-in: if no user or user.email, set default user and localStorage
   React.useEffect(() => {
@@ -51,9 +46,8 @@ const MagenticUILayout = ({
   }, [link]);
 
   React.useEffect(() => {
-    document.getElementsByTagName("html")[0].className = `${
-      darkMode === "dark" ? "dark bg-primary" : "light bg-primary"
-    }`;
+    document.getElementsByTagName("html")[0].className = `${darkMode === "dark" ? "dark bg-primary" : "light bg-primary"
+      }`;
   }, [darkMode]);
 
   const layoutContent = (

frontend/src/components/settings.tsx

@@ -16,15 +16,12 @@ import {
   Tooltip,
   Select,
   Tabs,
-  Input as AntInput,
   Upload,
   message,
 } from "antd";
 import { InfoCircleOutlined, UploadOutlined } from "@ant-design/icons";
 import { Plus } from "lucide-react";
 
-const { TextArea } = AntInput;
-
 interface SettingsMenuProps {
   isOpen: boolean;
   onClose: () => void;
@@ -229,7 +226,7 @@ action_guard_client: *client
     if (!hasAllClients) {
       message.error(
         "YAML must include all required model clients: " +
-          requiredClients.join(", ")
+        requiredClients.join(", ")
       );
       return false;
     }