chore(frontend): Fix react-doctor warnings + add CI job

.github/workflows/platform-frontend-ci.yml

@@ -83,6 +83,65 @@ jobs:
       - name: Run lint
         run: pnpm lint
 
+  react-doctor:
+    runs-on: ubuntu-latest
+    needs: setup
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+        with:
+          fetch-depth: 0
+
+      - name: Enable corepack
+        run: corepack enable
+
+      - name: Set up Node
+        uses: actions/setup-node@v6
+        with:
+          node-version: "22.18.0"
+          cache: "pnpm"
+          cache-dependency-path: autogpt_platform/frontend/pnpm-lock.yaml
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Run React Doctor
+        id: react-doctor
+        continue-on-error: true
+        run: |
+          OUTPUT=$(pnpm react-doctor:diff 2>&1) || true
+          echo "$OUTPUT"
+          SCORE=$(echo "$OUTPUT" | grep -oP '\d+(?= / 100)' | head -1)
+          echo "score=${SCORE:-0}" >> "$GITHUB_OUTPUT"
+
+      - name: Check React Doctor score
+        env:
+          RD_SCORE: ${{ steps.react-doctor.outputs.score }}
+          MIN_SCORE: "90"
+        run: |
+          echo "React Doctor score: ${RD_SCORE}/100 (minimum: ${MIN_SCORE})"
+          if [ "${RD_SCORE}" -lt "${MIN_SCORE}" ]; then
+            echo "::error::React Doctor score ${RD_SCORE} is below the minimum threshold of ${MIN_SCORE}."
+            echo ""
+            echo "=========================================="
+            echo "  React Doctor score too low!"
+            echo "=========================================="
+            echo ""
+            echo "To fix these issues, run Claude Code locally:"
+            echo ""
+            echo "  cd autogpt_platform/frontend"
+            echo "  claude"
+            echo ""
+            echo "Then ask Claude to run react-doctor and fix the issues."
+            echo "You can also run it manually:"
+            echo ""
+            echo "  pnpm react-doctor       # scan all files"
+            echo "  pnpm react-doctor:diff  # scan only changed files"
+            echo ""
+            exit 1
+          fi
+
   chromatic:
     runs-on: ubuntu-latest
     needs: setup

autogpt_platform/frontend/package.json

@@ -23,6 +23,8 @@
     "build-storybook": "storybook build",
     "test-storybook": "test-storybook",
     "test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm run build-storybook -- --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && pnpm run test-storybook\"",
+    "react-doctor": "npx -y react-doctor@latest . --verbose",
+    "react-doctor:diff": "npx -y react-doctor@latest . --verbose --diff",
     "generate:api": "npx --yes tsx ./scripts/generate-api-queries.ts && orval --config ./orval.config.ts",
     "generate:api:force": "npx --yes tsx ./scripts/generate-api-queries.ts --force && orval --config ./orval.config.ts"
   },

autogpt_platform/frontend/src/app/(platform)/build/BuilderContent.tsx

@@ -0,0 +1,13 @@
+"use client";
+import { ReactFlowProvider } from "@xyflow/react";
+import { Flow } from "./components/FlowEditor/Flow/Flow";
+
+export function BuilderContent() {
+  return (
+    <div className="relative h-full w-full">
+      <ReactFlowProvider>
+        <Flow />
+      </ReactFlowProvider>
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeHeader.tsx

@@ -7,7 +7,7 @@ import {
   TooltipTrigger,
 } from "@/components/atoms/Tooltip/BaseTooltip";
 import { beautifyString, cn } from "@/lib/utils";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { CustomNodeData } from "../CustomNode";
 import { NodeBadges } from "./NodeBadges";
 import { NodeContextMenu } from "./NodeContextMenu";
@@ -25,6 +25,9 @@ export const NodeHeader = ({ data, nodeId }: Props) => {
 
   const [isEditingTitle, setIsEditingTitle] = useState(false);
   const [editedTitle, setEditedTitle] = useState(title);
+  const titleInputRef = useCallback((node: HTMLInputElement | null) => {
+    node?.focus();
+  }, []);
 
   const handleTitleEdit = () => {
     updateNodeData(nodeId, {
@@ -52,10 +55,10 @@ export const NodeHeader = ({ data, nodeId }: Props) => {
           >
             {isEditingTitle ? (
               <input
+                ref={titleInputRef}
                 id="node-title-input"
                 value={editedTitle}
                 onChange={(e) => setEditedTitle(e.target.value)}
-                autoFocus
                 className={cn(
                   "m-0 h-fit w-full border-none bg-transparent p-0 focus:outline-none focus:ring-0",
                   "font-sans text-[1rem] font-semibold leading-[1.5rem] text-zinc-800",

autogpt_platform/frontend/src/app/(platform)/build/components/MCPToolDialog.tsx

@@ -300,7 +300,6 @@ export function MCPToolDialog({
                 value={serverUrl}
                 onChange={(e) => setServerUrl(e.target.value)}
                 onKeyDown={(e) => e.key === "Enter" && handleDiscoverTools()}
-                autoFocus
               />
             </div>
 
@@ -327,7 +326,6 @@ export function MCPToolDialog({
                   value={manualToken}
                   onChange={(e) => setManualToken(e.target.value)}
                   onKeyDown={(e) => e.key === "Enter" && handleDiscoverTools()}
-                  autoFocus
                 />
               </div>
             )}

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/HorizontalScroll.tsx

@@ -52,7 +52,7 @@ export const HorizontalScroll: React.FC<HorizontalScrollAreaProps> = ({
       return;
     }
     const handleScroll = () => updateScrollState();
-    element.addEventListener("scroll", handleScroll);
+    element.addEventListener("scroll", handleScroll, { passive: true });
     window.addEventListener("resize", handleScroll);
     return () => {
       element.removeEventListener("scroll", handleScroll);

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewSearchGraph/GraphMenuContent/GraphContent.tsx

@@ -85,12 +85,20 @@ export const GraphSearchContent: React.FC<GraphSearchContentProps> = ({
                   <Tooltip delayDuration={300}>
                     <TooltipTrigger asChild>
                       <div
+                        role="button"
+                        tabIndex={0}
                         className={`mx-4 my-2 flex h-20 cursor-pointer rounded-lg border border-zinc-200 bg-white ${
                           index === selectedIndex
                             ? "border-zinc-400 shadow-md"
                             : "hover:border-zinc-300 hover:shadow-sm"
                         }`}
                         onClick={() => onNodeSelect(node.id)}
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            onNodeSelect(node.id);
+                          }
+                        }}
                         onMouseEnter={() => {
                           setSelectedIndex(index);
                           onNodeHover?.(node.id);

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/agent-run-draft-view.tsx

@@ -140,10 +140,7 @@ export function AgentRunDraftView({
       ),
     [agentInputSchema],
   );
-  const agentCredentialsInputFields = useMemo(
-    () => graph.credentials_input_schema.properties,
-    [graph],
-  );
+  const agentCredentialsInputFields = graph.credentials_input_schema.properties;
   const credentialFields = useMemo(
     function getCredentialFields() {
       return Object.entries(agentCredentialsInputFields);

autogpt_platform/frontend/src/app/(platform)/build/page.tsx

@@ -1,13 +1,11 @@
-"use client";
-import { ReactFlowProvider } from "@xyflow/react";
-import { Flow } from "./components/FlowEditor/Flow/Flow";
+import type { Metadata } from "next";
+import { BuilderContent } from "./BuilderContent";
+
+export const metadata: Metadata = {
+  title: "Build",
+  description: "Build your agent",
+};
 
 export default function BuilderPage() {
-  return (
-    <div className="relative h-full w-full">
-      <ReactFlowProvider>
-        <Flow />
-      </ReactFlowProvider>
-    </div>
-  );
+  return <BuilderContent />;
 }

autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatContainer/ChatContainer.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { ChatInput } from "@/app/(platform)/copilot/components/ChatInput/ChatInput";
 import { UIDataTypes, UIMessage, UITools } from "ai";
-import { LayoutGroup, motion } from "framer-motion";
+import { LayoutGroup, LazyMotion, domAnimation, m } from "framer-motion";
 import { ReactNode } from "react";
 import { ChatMessagesContainer } from "../ChatMessagesContainer/ChatMessagesContainer";
 import { CopilotChatActionsProvider } from "../CopilotChatActionsProvider/CopilotChatActionsProvider";
@@ -38,45 +38,47 @@ export const ChatContainer = ({
   const inputLayoutId = "copilot-2-chat-input";
 
   return (
-    <CopilotChatActionsProvider onSend={onSend}>
-      <LayoutGroup id="copilot-2-chat-layout">
-        <div className="flex h-full min-h-0 w-full flex-col bg-[#f8f8f9] px-2 lg:px-0">
-          {sessionId ? (
-            <div className="mx-auto flex h-full min-h-0 w-full max-w-3xl flex-col">
-              <ChatMessagesContainer
-                messages={messages}
-                status={status}
-                error={error}
-                isLoading={isLoadingSession}
-                headerSlot={headerSlot}
-              />
-              <motion.div
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                transition={{ duration: 0.3 }}
-                className="relative px-3 pb-2 pt-2"
-              >
-                <div className="pointer-events-none absolute left-0 right-0 top-[-18px] z-10 h-6 bg-gradient-to-b from-transparent to-[#f8f8f9]" />
-                <ChatInput
-                  inputId="chat-input-session"
-                  onSend={onSend}
-                  disabled={isBusy}
-                  isStreaming={isBusy}
-                  onStop={onStop}
-                  placeholder="What else can I help with?"
+    <LazyMotion features={domAnimation}>
+      <CopilotChatActionsProvider onSend={onSend}>
+        <LayoutGroup id="copilot-2-chat-layout">
+          <div className="flex h-full min-h-0 w-full flex-col bg-[#f8f8f9] px-2 lg:px-0">
+            {sessionId ? (
+              <div className="mx-auto flex h-full min-h-0 w-full max-w-3xl flex-col">
+                <ChatMessagesContainer
+                  messages={messages}
+                  status={status}
+                  error={error}
+                  isLoading={isLoadingSession}
+                  headerSlot={headerSlot}
                 />
-              </motion.div>
-            </div>
-          ) : (
-            <EmptySession
-              inputLayoutId={inputLayoutId}
-              isCreatingSession={isCreatingSession}
-              onCreateSession={onCreateSession}
-              onSend={onSend}
-            />
-          )}
-        </div>
-      </LayoutGroup>
-    </CopilotChatActionsProvider>
+                <m.div
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{ duration: 0.3 }}
+                  className="relative px-3 pb-2 pt-2"
+                >
+                  <div className="pointer-events-none absolute left-0 right-0 top-[-18px] z-10 h-6 bg-gradient-to-b from-transparent to-[#f8f8f9]" />
+                  <ChatInput
+                    inputId="chat-input-session"
+                    onSend={onSend}
+                    disabled={isBusy}
+                    isStreaming={isBusy}
+                    onStop={onStop}
+                    placeholder="What else can I help with?"
+                  />
+                </m.div>
+              </div>
+            ) : (
+              <EmptySession
+                inputLayoutId={inputLayoutId}
+                isCreatingSession={isCreatingSession}
+                onCreateSession={onCreateSession}
+                onSend={onSend}
+              />
+            )}
+          </div>
+        </LayoutGroup>
+      </CopilotChatActionsProvider>
+    </LazyMotion>
   );
 };

autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/AudioWaveform.tsx

@@ -117,6 +117,7 @@ export function AudioWaveform({
       {bars.map((height, i) => {
         const barHeight = Math.max(minBarHeight, height);
         return (
+          // eslint-disable-next-line react/no-array-index-key
           <div
             key={i}
             className="relative"