From d9d24dcfe6ecf9b15bd440a1003d7fb0a58165a2 Mon Sep 17 00:00:00 2001
From: Lluis Agusti <hi@llu.lu>
Date: Thu, 19 Feb 2026 22:14:37 +0800
Subject: [PATCH 1/5] chore: wip

---
 .../app/(platform)/build/BuilderContent.tsx   |  13 +
 .../CustomNode/components/NodeHeader.tsx      |   1 -
 .../build/components/MCPToolDialog.tsx        |   2 -
 .../NewBlockMenu/HorizontalScroll.tsx         |   2 +-
 .../legacy-builder/BlocksControl.tsx          |   9 +
 .../legacy-builder/CustomNode/CustomNode.tsx  |   1 -
 .../components/legacy-builder/DataTable.tsx   |   2 +
 .../components/legacy-builder/Flow/Flow.tsx   |  14 +-
 .../components/legacy-builder/NodeOutputs.tsx |   2 +
 .../legacy-builder/agent-run-draft-view.tsx   |   5 +-
 .../src/app/(platform)/build/page.tsx         |  18 +-
 .../ChatContainer/ChatContainer.tsx           |  82 +++----
 .../ChatInput/components/AudioWaveform.tsx    |   1 +
 .../ChatMessagesContainer.tsx                 |  40 ++--
 .../components/ChatSidebar/ChatSidebar.tsx    |  22 +-
 .../components/EmptySession/EmptySession.tsx  | 116 ++++-----
 .../MorphingTextAnimation.tsx                 |  84 +++----
 .../ToolAccordion/ToolAccordion.tsx           | 121 +++++-----
 .../src/app/(platform)/copilot/layout.tsx     |  14 ++
 .../(platform)/copilot/styleguide/layout.tsx  |  14 ++
 .../components/ClarificationQuestionsCard.tsx |   2 +-
 .../copilot/tools/GenericTool/GenericTool.tsx |   4 +-
 .../AgentDetailsCard/AgentDetailsCard.tsx     | 145 ++++++------
 .../BlockOutputCard/BlockOutputCard.tsx       |   1 +
 .../SetupRequirementsCard.tsx                 | 223 +++++++++---------
 .../tools/ViewAgentOutput/ViewAgentOutput.tsx |   1 +
 .../components/SidebarItemCard.tsx            |   8 +
 .../components/FlowRunsTimeline.tsx           | 189 +--------------
 .../components/FlowRunsTimelineChart.tsx      | 189 +++++++++++++++
 autogpt_platform/frontend/src/app/page.tsx    |  19 +-
 .../src/components/__legacy__/ui/render.tsx   |  20 +-
 .../APIKeyCredentialsModal.tsx                |   2 +-
 .../HotScopedCredentialsModal.tsx             |  22 +-
 .../CronScheduler/cron-scheduler-dialog.tsx   |  30 ++-
 .../CronScheduler/cron-scheduler.tsx          |   2 +-
 .../renderers/MarkdownRenderer.tsx            |  18 +-
 .../ActivityDropdown/ActivityDropdown.tsx     |   1 -
 37 files changed, 769 insertions(+), 670 deletions(-)
 create mode 100644 autogpt_platform/frontend/src/app/(platform)/build/BuilderContent.tsx
 create mode 100644 autogpt_platform/frontend/src/app/(platform)/copilot/layout.tsx
 create mode 100644 autogpt_platform/frontend/src/app/(platform)/copilot/styleguide/layout.tsx
 create mode 100644 autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunsTimelineChart.tsx

diff --git a/autogpt_platform/frontend/src/app/(platform)/build/BuilderContent.tsx b/autogpt_platform/frontend/src/app/(platform)/build/BuilderContent.tsx
new file mode 100644
index 000000000000..9dfd77197d15
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeHeader.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeHeader.tsx
index 9a3add62b617..4226fcb9ca54 100644
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeHeader.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeHeader.tsx
@@ -55,7 +55,6 @@ export const NodeHeader = ({ data, nodeId }: Props) => {
                 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",
diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/MCPToolDialog.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/MCPToolDialog.tsx
index e01fb3a4b853..8161587f7a3c 100644
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/MCPToolDialog.tsx
+++ b/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>
             )}
diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/HorizontalScroll.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/HorizontalScroll.tsx
index bee0b85721b8..c79950cd81eb 100644
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/HorizontalScroll.tsx
+++ b/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);
diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/BlocksControl.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/BlocksControl.tsx
index 99b66fe1dc4e..bfd9dfa40e38 100644
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/BlocksControl.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/BlocksControl.tsx
@@ -298,12 +298,21 @@ export function BlocksControl({
                     key={category}
                     data-testid="blocks-category"
                     role="button"
+                    tabIndex={0}
                     className={`cursor-pointer rounded-xl border px-2 py-2 text-xs font-medium dark:border-slate-700 dark:text-white ${colorClass}`}
                     onClick={() =>
                       setSelectedCategory(
                         selectedCategory === category ? null : category,
                       )
                     }
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        setSelectedCategory(
+                          selectedCategory === category ? null : category,
+                        );
+                      }
+                    }}
                   >
                     {beautifyString((category || "All").toLowerCase())}
                   </div>
diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/CustomNode/CustomNode.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/CustomNode/CustomNode.tsx
index 834603cc4aad..bb57e9f26ba7 100644
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/CustomNode/CustomNode.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/CustomNode/CustomNode.tsx
@@ -940,7 +940,6 @@ export const CustomNode = React.memo(
         className={`${blockClasses} ${errorClass} ${statusClass}`}
         data-id={`custom-node-${id}`}
         id={data.block_id}
-        z-index={1}
         data-testid={data.block_id}
         data-blockid={data.block_id}
         data-blockname={data.title}
diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/DataTable.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/DataTable.tsx
index c58bdac64249..7a467e93010d 100644
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/DataTable.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/DataTable.tsx
@@ -125,6 +125,7 @@ export default function DataTable({
                     if (enableEnhancedOutputHandling && renderer) {
                       const metadata: OutputMetadata = {};
                       return (
+                        // eslint-disable-next-line react/no-array-index-key
                         <React.Fragment key={index}>
                           <OutputItem
                             value={item}
@@ -136,6 +137,7 @@ export default function DataTable({
                       );
                     }
                     return (
+                      // eslint-disable-next-line react/no-array-index-key
                       <React.Fragment key={index}>
                         <ContentRenderer
                           value={item}
diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/Flow/Flow.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/Flow/Flow.tsx
index babe10b912f7..dd3d5813ed6f 100644
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/Flow/Flow.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/Flow/Flow.tsx
@@ -176,7 +176,7 @@ const FlowEditor: React.FC<{
   );
   const [immediateNodePositions, setImmediateNodePositions] = useState<
     Record<string, { x: number; y: number }>
-  >(Object.fromEntries(nodes.map((node) => [node.id, node.position])));
+  >(() => Object.fromEntries(nodes.map((node) => [node.id, node.position])));
 
   // Add realtime execution status tracking for FloatingReviewsPanel
   useFlowRealtime();
@@ -619,9 +619,13 @@ const FlowEditor: React.FC<{
     return () => cancelAnimationFrame(rafId);
   }, [fitView, hasAutoFramed, nodes.length]);
 
-  useEffect(() => {
+  // Reset auto-frame when flow changes (render-time sync instead of useEffect)
+  const prevFlowKeyRef = useRef(`${flowID}-${flowVersion}`);
+  const flowKey = `${flowID}-${flowVersion}`;
+  if (flowKey !== prevFlowKeyRef.current) {
+    prevFlowKeyRef.current = flowKey;
     setHasAutoFramed(false);
-  }, [flowID, flowVersion]);
+  }
 
   const navigateToNode = useCallback(
     (nodeId: string) => {
@@ -1186,7 +1190,9 @@ const FlowEditor: React.FC<{
 
 const WrappedFlowEditor: typeof FlowEditor = (props) => (
   <ReactFlowProvider>
-    <FlowEditor {...props} />
+    <Suspense fallback={null}>
+      <FlowEditor {...props} />
+    </Suspense>
   </ReactFlowProvider>
 );
 
diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/NodeOutputs.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/NodeOutputs.tsx
index 2111db7d996a..967f94dadfd0 100644
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/NodeOutputs.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/NodeOutputs.tsx
@@ -110,6 +110,7 @@ export default function NodeOutputs({
                 if (enableEnhancedOutputHandling && renderer) {
                   const metadata: OutputMetadata = {};
                   return (
+                    // eslint-disable-next-line react/no-array-index-key
                     <React.Fragment key={index}>
                       <OutputItem
                         value={item}
@@ -121,6 +122,7 @@ export default function NodeOutputs({
                   );
                 }
                 return (
+                  // eslint-disable-next-line react/no-array-index-key
                   <React.Fragment key={index}>
                     <ContentRenderer
                       value={item}
diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/agent-run-draft-view.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/agent-run-draft-view.tsx
index 372d47929954..82c796b3e034 100644
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/agent-run-draft-view.tsx
+++ b/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);
diff --git a/autogpt_platform/frontend/src/app/(platform)/build/page.tsx b/autogpt_platform/frontend/src/app/(platform)/build/page.tsx
index a8ed8a5e8e31..66182812e2ab 100644
--- a/autogpt_platform/frontend/src/app/(platform)/build/page.tsx
+++ b/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 />;
 }
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatContainer/ChatContainer.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatContainer/ChatContainer.tsx
index 8dcce72bae19..2fd5d73a4afc 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatContainer/ChatContainer.tsx
+++ b/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>
   );
 };
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/AudioWaveform.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/AudioWaveform.tsx
index 50414adc89b0..9c55ce861994 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/AudioWaveform.tsx
+++ b/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"
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatMessagesContainer/ChatMessagesContainer.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatMessagesContainer/ChatMessagesContainer.tsx
index b1eb35af6641..d214df087bf0 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatMessagesContainer/ChatMessagesContainer.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatMessagesContainer/ChatMessagesContainer.tsx
@@ -12,6 +12,7 @@ import {
 import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
 import { toast } from "@/components/molecules/Toast/use-toast";
 import { ToolUIPart, UIDataTypes, UIMessage, UITools } from "ai";
+import Image from "next/image";
 import { useEffect, useRef, useState } from "react";
 import { CreateAgentTool } from "../../tools/CreateAgent/CreateAgent";
 import { EditAgentTool } from "../../tools/EditAgent/EditAgent";
@@ -57,7 +58,7 @@ function resolveWorkspaceUrls(text: string): string {
  * Falls back to <video> when an <img> fails to load for workspace files.
  */
 function WorkspaceMediaImage(props: React.JSX.IntrinsicElements["img"]) {
-  const { src, alt, ...rest } = props;
+  const { src, alt } = props;
   const [imgFailed, setImgFailed] = useState(false);
   const isWorkspace = src?.includes("/workspace/files/") ?? false;
 
@@ -79,16 +80,17 @@ function WorkspaceMediaImage(props: React.JSX.IntrinsicElements["img"]) {
   }
 
   return (
-    // eslint-disable-next-line @next/next/no-img-element
-    <img
+    <Image
       src={src}
       alt={alt || "Image"}
-      className="h-auto max-w-full rounded-md border border-zinc-200"
-      loading="lazy"
+      width={0}
+      height={0}
+      sizes="100vw"
+      className="h-auto w-full rounded-md border border-zinc-200"
+      unoptimized
       onError={() => {
         if (isWorkspace) setImgFailed(true);
       }}
-      {...rest}
     />
   );
 }
@@ -195,12 +197,12 @@ export const ChatMessagesContainer = ({
                   "group-[.is-assistant]:bg-transparent group-[.is-assistant]:text-slate-900"
                 }
               >
-                {message.parts.map((part, i) => {
+                {message.parts.map((part) => {
                   switch (part.type) {
                     case "text":
                       return (
                         <MessageResponse
-                          key={`${message.id}-${i}`}
+                          key={`${message.id}-text`}
                           components={STREAMDOWN_COMPONENTS}
                         >
                           {resolveWorkspaceUrls(part.text)}
@@ -209,7 +211,7 @@ export const ChatMessagesContainer = ({
                     case "tool-find_block":
                       return (
                         <FindBlocksTool
-                          key={`${message.id}-${i}`}
+                          key={(part as ToolUIPart).toolCallId}
                           part={part as ToolUIPart}
                         />
                       );
@@ -217,7 +219,7 @@ export const ChatMessagesContainer = ({
                     case "tool-find_library_agent":
                       return (
                         <FindAgentsTool
-                          key={`${message.id}-${i}`}
+                          key={(part as ToolUIPart).toolCallId}
                           part={part as ToolUIPart}
                         />
                       );
@@ -225,14 +227,14 @@ export const ChatMessagesContainer = ({
                     case "tool-get_doc_page":
                       return (
                         <SearchDocsTool
-                          key={`${message.id}-${i}`}
+                          key={(part as ToolUIPart).toolCallId}
                           part={part as ToolUIPart}
                         />
                       );
                     case "tool-run_block":
                       return (
                         <RunBlockTool
-                          key={`${message.id}-${i}`}
+                          key={(part as ToolUIPart).toolCallId}
                           part={part as ToolUIPart}
                         />
                       );
@@ -240,42 +242,42 @@ export const ChatMessagesContainer = ({
                     case "tool-schedule_agent":
                       return (
                         <RunAgentTool
-                          key={`${message.id}-${i}`}
+                          key={(part as ToolUIPart).toolCallId}
                           part={part as ToolUIPart}
                         />
                       );
                     case "tool-create_agent":
                       return (
                         <CreateAgentTool
-                          key={`${message.id}-${i}`}
+                          key={(part as ToolUIPart).toolCallId}
                           part={part as ToolUIPart}
                         />
                       );
                     case "tool-edit_agent":
                       return (
                         <EditAgentTool
-                          key={`${message.id}-${i}`}
+                          key={(part as ToolUIPart).toolCallId}
                           part={part as ToolUIPart}
                         />
                       );
                     case "tool-view_agent_output":
                       return (
                         <ViewAgentOutputTool
-                          key={`${message.id}-${i}`}
+                          key={(part as ToolUIPart).toolCallId}
                           part={part as ToolUIPart}
                         />
                       );
                     case "tool-search_feature_requests":
                       return (
                         <SearchFeatureRequestsTool
-                          key={`${message.id}-${i}`}
+                          key={(part as ToolUIPart).toolCallId}
                           part={part as ToolUIPart}
                         />
                       );
                     case "tool-create_feature_request":
                       return (
                         <CreateFeatureRequestTool
-                          key={`${message.id}-${i}`}
+                          key={(part as ToolUIPart).toolCallId}
                           part={part as ToolUIPart}
                         />
                       );
@@ -285,7 +287,7 @@ export const ChatMessagesContainer = ({
                       if (part.type.startsWith("tool-")) {
                         return (
                           <GenericTool
-                            key={`${message.id}-${i}`}
+                            key={(part as ToolUIPart).toolCallId}
                             part={part as ToolUIPart}
                           />
                         );
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatSidebar/ChatSidebar.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatSidebar/ChatSidebar.tsx
index 8fc9c3f438b6..0b3490473e2e 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatSidebar/ChatSidebar.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatSidebar/ChatSidebar.tsx
@@ -25,7 +25,7 @@ import {
 import { cn } from "@/lib/utils";
 import { DotsThree, PlusCircleIcon, PlusIcon } from "@phosphor-icons/react";
 import { useQueryClient } from "@tanstack/react-query";
-import { motion } from "framer-motion";
+import { LazyMotion, domAnimation, m } from "framer-motion";
 import { parseAsString, useQueryState } from "nuqs";
 import { useState } from "react";
 import { DeleteChatDialog } from "../DeleteChatDialog/DeleteChatDialog";
@@ -129,7 +129,7 @@ export function ChatSidebar() {
   }
 
   return (
-    <>
+    <LazyMotion features={domAnimation}>
       <Sidebar
         variant="inset"
         collapsible="icon"
@@ -144,7 +144,7 @@ export function ChatSidebar() {
                 : "flex-row items-center justify-between",
             )}
           >
-            <motion.div
+            <m.div
               key={isCollapsed ? "header-collapsed" : "header-expanded"}
               className="flex flex-col items-center gap-3 pt-4"
               initial={{ opacity: 0, filter: "blur(3px)" }}
@@ -162,12 +162,12 @@ export function ChatSidebar() {
                   <span className="sr-only">New Chat</span>
                 </Button>
               </div>
-            </motion.div>
+            </m.div>
           </SidebarHeader>
         )}
         <SidebarContent className="gap-4 overflow-y-auto px-4 py-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
           {!isCollapsed && (
-            <motion.div
+            <m.div
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               transition={{ duration: 0.2, delay: 0.1 }}
@@ -179,11 +179,11 @@ export function ChatSidebar() {
               <div className="relative left-6">
                 <SidebarTrigger />
               </div>
-            </motion.div>
+            </m.div>
           )}
 
           {!isCollapsed && (
-            <motion.div
+            <m.div
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               transition={{ duration: 0.2, delay: 0.15 }}
@@ -256,12 +256,12 @@ export function ChatSidebar() {
                   </div>
                 ))
               )}
-            </motion.div>
+            </m.div>
           )}
         </SidebarContent>
         {!isCollapsed && sessionId && (
           <SidebarFooter className="shrink-0 bg-zinc-50 p-3 pb-1 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
-            <motion.div
+            <m.div
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               transition={{ duration: 0.2, delay: 0.2 }}
@@ -275,7 +275,7 @@ export function ChatSidebar() {
               >
                 New Chat
               </Button>
-            </motion.div>
+            </m.div>
           </SidebarFooter>
         )}
       </Sidebar>
@@ -286,6 +286,6 @@ export function ChatSidebar() {
         onConfirm={handleConfirmDelete}
         onCancel={handleCancelDelete}
       />
-    </>
+    </LazyMotion>
   );
 }
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/components/EmptySession/EmptySession.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/components/EmptySession/EmptySession.tsx
index cbbe6c570e51..3e8f4a6273ec 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/components/EmptySession/EmptySession.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/components/EmptySession/EmptySession.tsx
@@ -5,7 +5,7 @@ import { Button } from "@/components/atoms/Button/Button";
 import { Text } from "@/components/atoms/Text/Text";
 import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
 import { SpinnerGapIcon } from "@phosphor-icons/react";
-import { motion } from "framer-motion";
+import { LazyMotion, domAnimation, m } from "framer-motion";
 import { useEffect, useState } from "react";
 import {
   getGreetingName,
@@ -29,7 +29,7 @@ export function EmptySession({
   const greetingName = getGreetingName(user);
   const quickActions = getQuickActions();
   const [loadingAction, setLoadingAction] = useState<string | null>(null);
-  const [inputPlaceholder, setInputPlaceholder] = useState(
+  const [inputPlaceholder, setInputPlaceholder] = useState(() =>
     getInputPlaceholder(),
   );
 
@@ -49,63 +49,65 @@ export function EmptySession({
   }
 
   return (
-    <div className="flex h-full flex-1 items-center justify-center overflow-y-auto bg-[#f8f8f9] px-0 py-5 md:px-6 md:py-10">
-      <motion.div
-        className="w-full max-w-3xl text-center"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 0.3 }}
-      >
-        <div className="mx-auto max-w-3xl">
-          <Text variant="h3" className="mb-1 !text-[1.375rem] text-zinc-700">
-            Hey, <span className="text-violet-600">{greetingName}</span>
-          </Text>
-          <Text variant="h3" className="mb-8 !font-normal">
-            Tell me about your work — I&apos;ll find what to automate.
-          </Text>
+    <LazyMotion features={domAnimation}>
+      <div className="flex h-full flex-1 items-center justify-center overflow-y-auto bg-[#f8f8f9] px-0 py-5 md:px-6 md:py-10">
+        <m.div
+          className="w-full max-w-3xl text-center"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.3 }}
+        >
+          <div className="mx-auto max-w-3xl">
+            <Text variant="h3" className="mb-1 !text-[1.375rem] text-zinc-700">
+              Hey, <span className="text-violet-600">{greetingName}</span>
+            </Text>
+            <Text variant="h3" className="mb-8 !font-normal">
+              Tell me about your work — I&apos;ll find what to automate.
+            </Text>
 
-          <div className="mb-6">
-            <motion.div
-              layoutId={inputLayoutId}
-              transition={{ type: "spring", bounce: 0.2, duration: 0.65 }}
-              className="w-full px-2"
-            >
-              <ChatInput
-                inputId="chat-input-empty"
-                onSend={onSend}
-                disabled={isCreatingSession}
-                placeholder={inputPlaceholder}
-                className="w-full"
-              />
-            </motion.div>
+            <div className="mb-6">
+              <m.div
+                layoutId={inputLayoutId}
+                transition={{ type: "spring", bounce: 0.2, duration: 0.65 }}
+                className="w-full px-2"
+              >
+                <ChatInput
+                  inputId="chat-input-empty"
+                  onSend={onSend}
+                  disabled={isCreatingSession}
+                  placeholder={inputPlaceholder}
+                  className="w-full"
+                />
+              </m.div>
+            </div>
           </div>
-        </div>
 
-        <div className="flex flex-wrap items-center justify-center gap-3 overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-          {quickActions.map((action) => (
-            <Button
-              key={action}
-              type="button"
-              variant="outline"
-              size="small"
-              onClick={() => void handleQuickActionClick(action)}
-              disabled={isCreatingSession || loadingAction !== null}
-              aria-busy={loadingAction === action}
-              leftIcon={
-                loadingAction === action ? (
-                  <SpinnerGapIcon
-                    className="h-4 w-4 animate-spin"
-                    weight="bold"
-                  />
-                ) : null
-              }
-              className="h-auto shrink-0 border-zinc-300 px-3 py-2 text-[.9rem] text-zinc-600"
-            >
-              {action}
-            </Button>
-          ))}
-        </div>
-      </motion.div>
-    </div>
+          <div className="flex flex-wrap items-center justify-center gap-3 overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+            {quickActions.map((action) => (
+              <Button
+                key={action}
+                type="button"
+                variant="outline"
+                size="small"
+                onClick={() => void handleQuickActionClick(action)}
+                disabled={isCreatingSession || loadingAction !== null}
+                aria-busy={loadingAction === action}
+                leftIcon={
+                  loadingAction === action ? (
+                    <SpinnerGapIcon
+                      className="h-4 w-4 animate-spin"
+                      weight="bold"
+                    />
+                  ) : null
+                }
+                className="h-auto shrink-0 border-zinc-300 px-3 py-2 text-[.9rem] text-zinc-600"
+              >
+                {action}
+              </Button>
+            ))}
+          </div>
+        </m.div>
+      </div>
+    </LazyMotion>
   );
 }
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/components/MorphingTextAnimation/MorphingTextAnimation.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/components/MorphingTextAnimation/MorphingTextAnimation.tsx
index aac615bb2bbb..fab39b437b4b 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/components/MorphingTextAnimation/MorphingTextAnimation.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/components/MorphingTextAnimation/MorphingTextAnimation.tsx
@@ -1,5 +1,5 @@
 import { cn } from "@/lib/utils";
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, LazyMotion, domAnimation, m } from "framer-motion";
 
 interface Props {
   text: string;
@@ -10,45 +10,47 @@ export function MorphingTextAnimation({ text, className }: Props) {
   const letters = text.split("");
 
   return (
-    <div className={cn(className)}>
-      <AnimatePresence mode="popLayout" initial={false}>
-        <motion.div key={text} className="whitespace-nowrap">
-          <motion.span className="inline-flex overflow-hidden">
-            {letters.map((char, index) => (
-              <motion.span
-                key={`${text}-${index}`}
-                initial={{
-                  opacity: 0,
-                  y: 8,
-                  rotateX: "80deg",
-                  filter: "blur(6px)",
-                }}
-                animate={{
-                  opacity: 1,
-                  y: 0,
-                  rotateX: "0deg",
-                  filter: "blur(0px)",
-                }}
-                exit={{
-                  opacity: 0,
-                  y: -8,
-                  rotateX: "-80deg",
-                  filter: "blur(6px)",
-                }}
-                style={{ willChange: "transform" }}
-                transition={{
-                  delay: 0.015 * index,
-                  type: "spring",
-                  bounce: 0.5,
-                }}
-                className="inline-block"
-              >
-                {char === " " ? "\u00A0" : char}
-              </motion.span>
-            ))}
-          </motion.span>
-        </motion.div>
-      </AnimatePresence>
-    </div>
+    <LazyMotion features={domAnimation}>
+      <div className={cn(className)}>
+        <AnimatePresence mode="popLayout" initial={false}>
+          <m.div key={text} className="whitespace-nowrap">
+            <m.span className="inline-flex overflow-hidden">
+              {letters.map((char, index) => (
+                // eslint-disable-next-line react/no-array-index-key
+                <m.span
+                  key={`${text}-${index}`}
+                  initial={{
+                    opacity: 0,
+                    y: 8,
+                    rotateX: "80deg",
+                    filter: "blur(6px)",
+                  }}
+                  animate={{
+                    opacity: 1,
+                    y: 0,
+                    rotateX: "0deg",
+                    filter: "blur(0px)",
+                  }}
+                  exit={{
+                    opacity: 0,
+                    y: -8,
+                    rotateX: "-80deg",
+                    filter: "blur(6px)",
+                  }}
+                  transition={{
+                    delay: 0.015 * index,
+                    type: "spring",
+                    bounce: 0.5,
+                  }}
+                  className="inline-block"
+                >
+                  {char === " " ? "\u00A0" : char}
+                </m.span>
+              ))}
+            </m.span>
+          </m.div>
+        </AnimatePresence>
+      </div>
+    </LazyMotion>
   );
 }
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/components/ToolAccordion/ToolAccordion.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/components/ToolAccordion/ToolAccordion.tsx
index e53df15e6c5e..efab3c78acf1 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/components/ToolAccordion/ToolAccordion.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/components/ToolAccordion/ToolAccordion.tsx
@@ -2,7 +2,13 @@
 
 import { cn } from "@/lib/utils";
 import { CaretDownIcon } from "@phosphor-icons/react";
-import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import {
+  AnimatePresence,
+  LazyMotion,
+  domAnimation,
+  m,
+  useReducedMotion,
+} from "framer-motion";
 import { useId } from "react";
 import { useToolAccordion } from "./useToolAccordion";
 
@@ -38,65 +44,66 @@ export function ToolAccordion({
   });
 
   return (
-    <div
-      className={cn(
-        "mt-2 w-full rounded-lg border border-slate-200 bg-slate-100 px-3 py-2",
-        className,
-      )}
-    >
-      <button
-        type="button"
-        aria-expanded={isExpanded}
-        aria-controls={contentId}
-        onClick={toggle}
-        className="flex w-full items-center justify-between gap-3 py-1 text-left"
+    <LazyMotion features={domAnimation}>
+      <div
+        className={cn(
+          "mt-2 w-full rounded-lg border border-slate-200 bg-slate-100 px-3 py-2",
+          className,
+        )}
       >
-        <div className="flex min-w-0 items-center gap-3">
-          <span className="flex shrink-0 items-center text-gray-800">
-            {icon}
-          </span>
-          <div className="min-w-0">
-            <p
-              className={cn(
-                "truncate text-sm font-medium text-gray-800",
-                titleClassName,
+        <button
+          type="button"
+          aria-expanded={isExpanded}
+          aria-controls={contentId}
+          onClick={toggle}
+          className="flex w-full items-center justify-between gap-3 py-1 text-left"
+        >
+          <div className="flex min-w-0 items-center gap-3">
+            <span className="flex shrink-0 items-center text-gray-800">
+              {icon}
+            </span>
+            <div className="min-w-0">
+              <p
+                className={cn(
+                  "truncate text-sm font-medium text-gray-800",
+                  titleClassName,
+                )}
+              >
+                {title}
+              </p>
+              {description && (
+                <p className="truncate text-xs text-slate-800">{description}</p>
               )}
-            >
-              {title}
-            </p>
-            {description && (
-              <p className="truncate text-xs text-slate-800">{description}</p>
-            )}
+            </div>
           </div>
-        </div>
-        <CaretDownIcon
-          className={cn(
-            "h-4 w-4 shrink-0 text-slate-500 transition-transform",
-            isExpanded && "rotate-180",
-          )}
-          weight="bold"
-        />
-      </button>
+          <CaretDownIcon
+            className={cn(
+              "h-4 w-4 shrink-0 text-slate-500 transition-transform",
+              isExpanded && "rotate-180",
+            )}
+            weight="bold"
+          />
+        </button>
 
-      <AnimatePresence initial={false}>
-        {isExpanded && (
-          <motion.div
-            id={contentId}
-            initial={{ height: 0, opacity: 0, filter: "blur(10px)" }}
-            animate={{ height: "auto", opacity: 1, filter: "blur(0px)" }}
-            exit={{ height: 0, opacity: 0, filter: "blur(10px)" }}
-            transition={
-              shouldReduceMotion
-                ? { duration: 0 }
-                : { type: "spring", bounce: 0.35, duration: 0.55 }
-            }
-            className="overflow-hidden"
-            style={{ willChange: "height, opacity, filter" }}
-          >
-            <div className="pb-2 pt-3">{children}</div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
+        <AnimatePresence initial={false}>
+          {isExpanded && (
+            <m.div
+              id={contentId}
+              initial={{ height: 0, opacity: 0, filter: "blur(10px)" }}
+              animate={{ height: "auto", opacity: 1, filter: "blur(0px)" }}
+              exit={{ height: 0, opacity: 0, filter: "blur(10px)" }}
+              transition={
+                shouldReduceMotion
+                  ? { duration: 0 }
+                  : { type: "spring", bounce: 0.35, duration: 0.55 }
+              }
+              className="overflow-hidden"
+            >
+              <div className="pb-2 pt-3">{children}</div>
+            </m.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </LazyMotion>
   );
 }
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/layout.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/layout.tsx
new file mode 100644
index 000000000000..9550212ccbbc
--- /dev/null
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/layout.tsx
@@ -0,0 +1,14 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Copilot",
+  description: "Chat with your AI copilot",
+};
+
+export default function CopilotLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return children;
+}
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/styleguide/layout.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/styleguide/layout.tsx
new file mode 100644
index 000000000000..1f07f930b3a7
--- /dev/null
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/styleguide/layout.tsx
@@ -0,0 +1,14 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Copilot Styleguide",
+  description: "Copilot UI component styleguide",
+};
+
+export default function StyleguideLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return children;
+}
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/CreateAgent/components/ClarificationQuestionsCard.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/CreateAgent/components/ClarificationQuestionsCard.tsx
index abcb04731ead..3925f24fa95b 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/CreateAgent/components/ClarificationQuestionsCard.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/CreateAgent/components/ClarificationQuestionsCard.tsx
@@ -161,7 +161,7 @@ export function ClarificationQuestionsCard({
 
                 return (
                   <div
-                    key={`${q.keyword}-${index}`}
+                    key={q.keyword}
                     className={cn(
                       "relative rounded-lg border p-3",
                       isAnswered
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/GenericTool/GenericTool.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/GenericTool/GenericTool.tsx
index 1450535bf0ce..3922e7dc15f9 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/GenericTool/GenericTool.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/GenericTool/GenericTool.tsx
@@ -557,8 +557,8 @@ function getTodoAccordionData(input: unknown): AccordionData {
     description: `${completed}/${total} completed`,
     content: (
       <div className="space-y-1 py-1">
-        {todos.map((todo, i) => (
-          <div key={i} className="flex items-start gap-2 text-xs">
+        {todos.map((todo) => (
+          <div key={todo.content} className="flex items-start gap-2 text-xs">
             <span className="mt-0.5 flex-shrink-0">
               {todo.status === "completed" ? (
                 <CheckCircleIcon
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunAgent/components/AgentDetailsCard/AgentDetailsCard.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunAgent/components/AgentDetailsCard/AgentDetailsCard.tsx
index f18568faecf9..1a9d655a8303 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunAgent/components/AgentDetailsCard/AgentDetailsCard.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunAgent/components/AgentDetailsCard/AgentDetailsCard.tsx
@@ -4,7 +4,7 @@ import type { AgentDetailsResponse } from "@/app/api/__generated__/models/agentD
 import { Button } from "@/components/atoms/Button/Button";
 import { Text } from "@/components/atoms/Text/Text";
 import { FormRenderer } from "@/components/renderers/InputRenderer/FormRenderer";
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, LazyMotion, domAnimation, m } from "framer-motion";
 import { useState } from "react";
 import { useCopilotChatActions } from "../../../../components/CopilotChatActionsProvider/useCopilotChatActions";
 import { ContentMessage } from "../../../../components/ToolAccordion/AccordionContent";
@@ -39,78 +39,83 @@ export function AgentDetailsCard({ output }: Props) {
   }
 
   return (
-    <div className="grid gap-2">
-      <ContentMessage>
-        Run this agent with example values or your own inputs.
-      </ContentMessage>
+    <LazyMotion features={domAnimation}>
+      <div className="grid gap-2">
+        <ContentMessage>
+          Run this agent with example values or your own inputs.
+        </ContentMessage>
 
-      <div className="flex gap-2 pt-4">
-        <Button size="small" className="w-fit" onClick={handleRunWithExamples}>
-          Run with example values
-        </Button>
-        <Button
-          variant="outline"
-          size="small"
-          className="w-fit"
-          onClick={() => setShowInputForm((prev) => !prev)}
-        >
-          Run with my inputs
-        </Button>
-      </div>
-
-      <AnimatePresence initial={false}>
-        {showInputForm && buildInputSchema(output.agent.inputs) && (
-          <motion.div
-            initial={{ height: 0, opacity: 0, filter: "blur(6px)" }}
-            animate={{ height: "auto", opacity: 1, filter: "blur(0px)" }}
-            exit={{ height: 0, opacity: 0, filter: "blur(6px)" }}
-            transition={{
-              height: { type: "spring", bounce: 0.15, duration: 0.5 },
-              opacity: { duration: 0.25 },
-              filter: { duration: 0.2 },
-            }}
-            className="overflow-hidden"
-            style={{ willChange: "height, opacity, filter" }}
+        <div className="flex gap-2 pt-4">
+          <Button
+            size="small"
+            className="w-fit"
+            onClick={handleRunWithExamples}
+          >
+            Run with example values
+          </Button>
+          <Button
+            variant="outline"
+            size="small"
+            className="w-fit"
+            onClick={() => setShowInputForm((prev) => !prev)}
           >
-            <div className="mt-4 rounded-2xl border bg-background p-3 pt-4">
-              <Text variant="body-medium">Enter your inputs</Text>
-              <FormRenderer
-                jsonSchema={buildInputSchema(output.agent.inputs)!}
-                handleChange={(v) => setInputValues(v.formData ?? {})}
-                uiSchema={{
-                  "ui:submitButtonOptions": { norender: true },
-                }}
-                initialValues={inputValues}
-                formContext={{
-                  showHandles: false,
-                  size: "small",
-                }}
-              />
-              <div className="-mt-8 flex gap-2">
-                <Button
-                  variant="primary"
-                  size="small"
-                  className="w-fit"
-                  onClick={handleRunWithInputs}
-                >
-                  Run
-                </Button>
-                <Button
-                  variant="secondary"
-                  size="small"
-                  className="w-fit"
-                  onClick={() => {
-                    setShowInputForm(false);
-                    setInputValues({});
+            Run with my inputs
+          </Button>
+        </div>
+
+        <AnimatePresence initial={false}>
+          {showInputForm && buildInputSchema(output.agent.inputs) && (
+            <m.div
+              initial={{ height: 0, opacity: 0, filter: "blur(6px)" }}
+              animate={{ height: "auto", opacity: 1, filter: "blur(0px)" }}
+              exit={{ height: 0, opacity: 0, filter: "blur(6px)" }}
+              transition={{
+                height: { type: "spring", bounce: 0.15, duration: 0.5 },
+                opacity: { duration: 0.25 },
+                filter: { duration: 0.2 },
+              }}
+              className="overflow-hidden"
+            >
+              <div className="mt-4 rounded-2xl border bg-background p-3 pt-4">
+                <Text variant="body-medium">Enter your inputs</Text>
+                <FormRenderer
+                  jsonSchema={buildInputSchema(output.agent.inputs)!}
+                  handleChange={(v) => setInputValues(v.formData ?? {})}
+                  uiSchema={{
+                    "ui:submitButtonOptions": { norender: true },
+                  }}
+                  initialValues={inputValues}
+                  formContext={{
+                    showHandles: false,
+                    size: "small",
                   }}
-                >
-                  Cancel
-                </Button>
+                />
+                <div className="-mt-8 flex gap-2">
+                  <Button
+                    variant="primary"
+                    size="small"
+                    className="w-fit"
+                    onClick={handleRunWithInputs}
+                  >
+                    Run
+                  </Button>
+                  <Button
+                    variant="secondary"
+                    size="small"
+                    className="w-fit"
+                    onClick={() => {
+                      setShowInputForm(false);
+                      setInputValues({});
+                    }}
+                  >
+                    Cancel
+                  </Button>
+                </div>
               </div>
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
+            </m.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </LazyMotion>
   );
 }
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/BlockOutputCard/BlockOutputCard.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/BlockOutputCard/BlockOutputCard.tsx
index 4051927653e1..bd412bc534b1 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/BlockOutputCard/BlockOutputCard.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/BlockOutputCard/BlockOutputCard.tsx
@@ -103,6 +103,7 @@ function OutputKeySection({
       </div>
       <div className="mt-2">
         {visibleItems.map((item, i) => (
+          // eslint-disable-next-line react/no-array-index-key
           <RenderOutputValue key={i} value={item} />
         ))}
       </div>
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/SetupRequirementsCard/SetupRequirementsCard.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/SetupRequirementsCard/SetupRequirementsCard.tsx
index e98fea28504a..db2b7816c407 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/SetupRequirementsCard/SetupRequirementsCard.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/SetupRequirementsCard/SetupRequirementsCard.tsx
@@ -6,7 +6,7 @@ import { Text } from "@/components/atoms/Text/Text";
 import { CredentialsGroupedView } from "@/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView";
 import { FormRenderer } from "@/components/renderers/InputRenderer/FormRenderer";
 import type { CredentialsMetaInput } from "@/lib/autogpt-server-api/types";
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, LazyMotion, domAnimation, m } from "framer-motion";
 import { useState } from "react";
 import { useCopilotChatActions } from "../../../../components/CopilotChatActionsProvider/useCopilotChatActions";
 import {
@@ -75,123 +75,124 @@ export function SetupRequirementsCard({ output }: Props) {
   }
 
   return (
-    <div className="grid gap-2">
-      <ContentMessage>{output.message}</ContentMessage>
-
-      {credentialFields.length > 0 && (
-        <div className="rounded-2xl border bg-background p-3">
-          <CredentialsGroupedView
-            credentialFields={credentialFields}
-            requiredCredentials={requiredCredentials}
-            inputCredentials={inputCredentials}
-            inputValues={{}}
-            onCredentialChange={handleCredentialChange}
-          />
-          {isAllCredentialsComplete && !hasSentCredentials && (
+    <LazyMotion features={domAnimation}>
+      <div className="grid gap-2">
+        <ContentMessage>{output.message}</ContentMessage>
+
+        {credentialFields.length > 0 && (
+          <div className="rounded-2xl border bg-background p-3">
+            <CredentialsGroupedView
+              credentialFields={credentialFields}
+              requiredCredentials={requiredCredentials}
+              inputCredentials={inputCredentials}
+              inputValues={{}}
+              onCredentialChange={handleCredentialChange}
+            />
+            {isAllCredentialsComplete && !hasSentCredentials && (
+              <Button
+                variant="primary"
+                size="small"
+                className="mt-3 w-full"
+                onClick={handleProceedCredentials}
+              >
+                Proceed
+              </Button>
+            )}
+          </div>
+        )}
+
+        {inputSchema && (
+          <div className="flex gap-2 pt-2">
             <Button
-              variant="primary"
+              variant="outline"
               size="small"
-              className="mt-3 w-full"
-              onClick={handleProceedCredentials}
+              className="w-fit"
+              onClick={() => setShowInputForm((prev) => !prev)}
             >
-              Proceed
+              {showInputForm ? "Hide inputs" : "Fill in inputs"}
             </Button>
-          )}
-        </div>
-      )}
-
-      {inputSchema && (
-        <div className="flex gap-2 pt-2">
-          <Button
-            variant="outline"
-            size="small"
-            className="w-fit"
-            onClick={() => setShowInputForm((prev) => !prev)}
-          >
-            {showInputForm ? "Hide inputs" : "Fill in inputs"}
-          </Button>
-        </div>
-      )}
-
-      <AnimatePresence initial={false}>
-        {showInputForm && inputSchema && (
-          <motion.div
-            initial={{ height: 0, opacity: 0, filter: "blur(6px)" }}
-            animate={{ height: "auto", opacity: 1, filter: "blur(0px)" }}
-            exit={{ height: 0, opacity: 0, filter: "blur(6px)" }}
-            transition={{
-              height: { type: "spring", bounce: 0.15, duration: 0.5 },
-              opacity: { duration: 0.25 },
-              filter: { duration: 0.2 },
-            }}
-            className="overflow-hidden"
-            style={{ willChange: "height, opacity, filter" }}
-          >
-            <div className="rounded-2xl border bg-background p-3 pt-4">
-              <Text variant="body-medium">Block inputs</Text>
-              <FormRenderer
-                jsonSchema={inputSchema}
-                handleChange={(v) => setInputValues(v.formData ?? {})}
-                uiSchema={{
-                  "ui:submitButtonOptions": { norender: true },
-                }}
-                initialValues={inputValues}
-                formContext={{
-                  showHandles: false,
-                  size: "small",
-                }}
-              />
-              <div className="-mt-8 flex gap-2">
-                <Button
-                  variant="primary"
-                  size="small"
-                  className="w-fit"
-                  onClick={handleRunWithInputs}
-                >
-                  Run
-                </Button>
-                <Button
-                  variant="secondary"
-                  size="small"
-                  className="w-fit"
-                  onClick={() => {
-                    setShowInputForm(false);
-                    setInputValues({});
-                  }}
-                >
-                  Cancel
-                </Button>
-              </div>
-            </div>
-          </motion.div>
+          </div>
         )}
-      </AnimatePresence>
-
-      {expectedInputs.length > 0 && !inputSchema && (
-        <div className="rounded-2xl border bg-background p-3">
-          <ContentCardTitle className="text-xs">
-            Expected inputs
-          </ContentCardTitle>
-          <div className="mt-2 grid gap-2">
-            {expectedInputs.map((input) => (
-              <div key={input.name} className="rounded-xl border p-2">
-                <div className="flex items-center justify-between gap-2">
-                  <ContentCardTitle className="text-xs">
-                    {input.title}
-                  </ContentCardTitle>
-                  <ContentBadge>
-                    {input.required ? "Required" : "Optional"}
-                  </ContentBadge>
+
+        <AnimatePresence initial={false}>
+          {showInputForm && inputSchema && (
+            <m.div
+              initial={{ height: 0, opacity: 0, filter: "blur(6px)" }}
+              animate={{ height: "auto", opacity: 1, filter: "blur(0px)" }}
+              exit={{ height: 0, opacity: 0, filter: "blur(6px)" }}
+              transition={{
+                height: { type: "spring", bounce: 0.15, duration: 0.5 },
+                opacity: { duration: 0.25 },
+                filter: { duration: 0.2 },
+              }}
+              className="overflow-hidden"
+            >
+              <div className="rounded-2xl border bg-background p-3 pt-4">
+                <Text variant="body-medium">Block inputs</Text>
+                <FormRenderer
+                  jsonSchema={inputSchema}
+                  handleChange={(v) => setInputValues(v.formData ?? {})}
+                  uiSchema={{
+                    "ui:submitButtonOptions": { norender: true },
+                  }}
+                  initialValues={inputValues}
+                  formContext={{
+                    showHandles: false,
+                    size: "small",
+                  }}
+                />
+                <div className="-mt-8 flex gap-2">
+                  <Button
+                    variant="primary"
+                    size="small"
+                    className="w-fit"
+                    onClick={handleRunWithInputs}
+                  >
+                    Run
+                  </Button>
+                  <Button
+                    variant="secondary"
+                    size="small"
+                    className="w-fit"
+                    onClick={() => {
+                      setShowInputForm(false);
+                      setInputValues({});
+                    }}
+                  >
+                    Cancel
+                  </Button>
                 </div>
-                <ContentCardDescription className="mt-1">
-                  {input.name} &bull; {input.type}
-                  {input.description ? ` \u2022 ${input.description}` : ""}
-                </ContentCardDescription>
               </div>
-            ))}
+            </m.div>
+          )}
+        </AnimatePresence>
+
+        {expectedInputs.length > 0 && !inputSchema && (
+          <div className="rounded-2xl border bg-background p-3">
+            <ContentCardTitle className="text-xs">
+              Expected inputs
+            </ContentCardTitle>
+            <div className="mt-2 grid gap-2">
+              {expectedInputs.map((input) => (
+                <div key={input.name} className="rounded-xl border p-2">
+                  <div className="flex items-center justify-between gap-2">
+                    <ContentCardTitle className="text-xs">
+                      {input.title}
+                    </ContentCardTitle>
+                    <ContentBadge>
+                      {input.required ? "Required" : "Optional"}
+                    </ContentBadge>
+                  </div>
+                  <ContentCardDescription className="mt-1">
+                    {input.name} &bull; {input.type}
+                    {input.description ? ` \u2022 ${input.description}` : ""}
+                  </ContentCardDescription>
+                </div>
+              ))}
+            </div>
           </div>
-        </div>
-      )}
-    </div>
+        )}
+      </div>
+    </LazyMotion>
   );
 }
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/ViewAgentOutput/ViewAgentOutput.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/ViewAgentOutput/ViewAgentOutput.tsx
index e7265ac7cb78..9dcfae58a639 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/ViewAgentOutput/ViewAgentOutput.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/ViewAgentOutput/ViewAgentOutput.tsx
@@ -209,6 +209,7 @@ export function ViewAgentOutputTool({ part }: Props) {
                         </div>
                         <div className="mt-2">
                           {items.slice(0, 3).map((item, i) => (
+                            // eslint-disable-next-line react/no-array-index-key
                             <RenderOutputValue key={i} value={item} />
                           ))}
                         </div>
diff --git a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/SidebarItemCard.tsx b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/SidebarItemCard.tsx
index a438568b745e..e33a9d43b804 100644
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/SidebarItemCard.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/SidebarItemCard.tsx
@@ -25,11 +25,19 @@ export function SidebarItemCard({
 }: Props) {
   return (
     <div
+      role="button"
+      tabIndex={0}
       className={cn(
         "w-full cursor-pointer rounded-large border border-zinc-200 bg-white p-3 text-left ring-1 ring-transparent transition-all duration-150 hover:scale-[1.01] hover:bg-slate-50/50",
         selected ? "border-slate-800 ring-slate-800" : undefined,
       )}
       onClick={onClick}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick?.();
+        }
+      }}
     >
       <div className="flex min-w-0 items-center justify-start gap-3">
         {icon}
diff --git a/autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunsTimeline.tsx b/autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunsTimeline.tsx
index c54209e1dfa1..aa5323fceaf7 100644
--- a/autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunsTimeline.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunsTimeline.tsx
@@ -1,189 +1,8 @@
-import { GraphExecutionMeta, LibraryAgent } from "@/lib/autogpt-server-api";
-import {
-  ComposedChart,
-  DefaultLegendContentProps,
-  Legend,
-  Line,
-  ResponsiveContainer,
-  Scatter,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from "recharts";
-import { differenceInHours, format } from "date-fns";
-import { Card } from "@/components/__legacy__/ui/card";
-import { cn, hashString } from "@/lib/utils";
-import React from "react";
-import { FlowRunStatusBadge } from "@/app/(platform)/monitoring/components/FlowRunStatusBadge";
+import dynamic from "next/dynamic";
 
-export const FlowRunsTimeline = ({
-  flows,
-  executions,
-  dataMin,
-  className,
-}: {
-  flows: LibraryAgent[];
-  executions: GraphExecutionMeta[];
-  dataMin: "dataMin" | number;
-  className?: string;
-}) => (
-  /* TODO: make logarithmic? */
-  <ResponsiveContainer width="100%" height={120} className={className}>
-    <ComposedChart>
-      <XAxis
-        dataKey="time"
-        type="number"
-        domain={[
-          typeof dataMin == "string"
-            ? dataMin
-            : dataMin < 0
-              ? Date.now() + dataMin * 1000
-              : dataMin,
-          Date.now(),
-        ]}
-        allowDataOverflow={true}
-        tickFormatter={(unixTime) => {
-          const now = new Date();
-          const time = new Date(unixTime);
-          return differenceInHours(now, time) < 24
-            ? format(time, "HH:mm")
-            : format(time, "yyyy-MM-dd HH:mm");
-        }}
-        name="Time"
-        scale="time"
-      />
-      <YAxis
-        dataKey="_duration"
-        name="Duration (s)"
-        tickFormatter={(s) => (s > 90 ? `${Math.round(s / 60)}m` : `${s}s`)}
-      />
-      <Tooltip
-        content={({ payload }) => {
-          if (payload && payload.length) {
-            const data: GraphExecutionMeta & {
-              time: number;
-              _duration: number;
-            } = payload[0].payload;
-            const flow = flows.find((f) => f.graph_id === data.graph_id);
-            return (
-              <Card className="p-2 text-xs leading-normal">
-                <p>
-                  <strong>Agent:</strong> {flow ? flow.name : "Unknown"}
-                </p>
-                <div>
-                  <strong>Status:</strong>&nbsp;
-                  <FlowRunStatusBadge
-                    status={data.status}
-                    className="px-1.5 py-0"
-                  />
-                </div>
-                <p>
-                  <strong>Started:</strong>{" "}
-                  {data.started_at
-                    ? format(data.started_at, "yyyy-MM-dd HH:mm:ss")
-                    : "—"}
-                </p>
-                {data.stats && (
-                  <p>
-                    <strong>Duration / run time:</strong>{" "}
-                    {formatDuration(data.stats.duration)} /{" "}
-                    {formatDuration(data.stats.node_exec_time)}
-                  </p>
-                )}
-              </Card>
-            );
-          }
-          return null;
-        }}
-      />
-      {flows.map((flow) => (
-        <Scatter
-          key={flow.id}
-          data={executions
-            .filter((e) => e.graph_id == flow.graph_id && e.started_at)
-            .map((e) => ({
-              ...e,
-              time:
-                (e.started_at?.getTime() ?? 0) +
-                (e.stats?.node_exec_time ?? 0) * 1000,
-              _duration: e.stats?.node_exec_time ?? 0,
-            }))}
-          name={flow.name}
-          fill={`hsl(${(hashString(flow.id) * 137.5) % 360}, 70%, 50%)`}
-        />
-      ))}
-      {executions
-        .filter((e) => e.started_at && e.ended_at)
-        .map((execution) => (
-          <Line
-            key={execution.id}
-            type="linear"
-            dataKey="_duration"
-            data={[
-              {
-                ...execution,
-                time: execution.started_at!.getTime(),
-                _duration: 0,
-              },
-              {
-                ...execution,
-                time: execution.ended_at!.getTime(),
-                _duration: execution.stats?.node_exec_time ?? 0,
-              },
-            ]}
-            stroke={`hsl(${(hashString(execution.graph_id) * 137.5) % 360}, 70%, 50%)`}
-            strokeWidth={2}
-            dot={false}
-            legendType="none"
-          />
-        ))}
-      <Legend
-        content={<ScrollableLegend />}
-        wrapperStyle={{
-          bottom: 0,
-          left: 0,
-          right: 0,
-          width: "100%",
-          display: "flex",
-          justifyContent: "center",
-        }}
-      />
-    </ComposedChart>
-  </ResponsiveContainer>
+export const FlowRunsTimeline = dynamic(
+  () => import("./FlowRunsTimelineChart"),
+  { ssr: false },
 );
 
 export default FlowRunsTimeline;
-
-const ScrollableLegend: React.FC<
-  DefaultLegendContentProps & { className?: string }
-> = ({ payload, className }) => {
-  return (
-    <div
-      className={cn(
-        "space-x-3 overflow-x-auto whitespace-nowrap px-4 text-sm",
-        className,
-      )}
-      style={{ scrollbarWidth: "none" }}
-    >
-      {payload?.map((entry, index) => {
-        if (entry.type == "none") return;
-        return (
-          <span key={`item-${index}`} className="inline-flex items-center">
-            <span
-              className="mr-1 inline-block size-2.5 rounded-full"
-              style={{ backgroundColor: entry.color }}
-            />
-            <span>{entry.value}</span>
-          </span>
-        );
-      })}
-    </div>
-  );
-};
-
-function formatDuration(seconds: number): string {
-  return (
-    (seconds < 100 ? seconds.toPrecision(2) : Math.round(seconds)).toString() +
-    "s"
-  );
-}
diff --git a/autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunsTimelineChart.tsx b/autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunsTimelineChart.tsx
new file mode 100644
index 000000000000..dbba1a71952b
--- /dev/null
+++ b/autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunsTimelineChart.tsx
@@ -0,0 +1,189 @@
+import { GraphExecutionMeta, LibraryAgent } from "@/lib/autogpt-server-api";
+import {
+  ComposedChart,
+  DefaultLegendContentProps,
+  Legend,
+  Line,
+  ResponsiveContainer,
+  Scatter,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import { differenceInHours, format } from "date-fns";
+import { Card } from "@/components/__legacy__/ui/card";
+import { cn, hashString } from "@/lib/utils";
+import React from "react";
+import { FlowRunStatusBadge } from "@/app/(platform)/monitoring/components/FlowRunStatusBadge";
+
+const FlowRunsTimelineChart = ({
+  flows,
+  executions,
+  dataMin,
+  className,
+}: {
+  flows: LibraryAgent[];
+  executions: GraphExecutionMeta[];
+  dataMin: "dataMin" | number;
+  className?: string;
+}) => (
+  /* TODO: make logarithmic? */
+  <ResponsiveContainer width="100%" height={120} className={className}>
+    <ComposedChart>
+      <XAxis
+        dataKey="time"
+        type="number"
+        domain={[
+          typeof dataMin == "string"
+            ? dataMin
+            : dataMin < 0
+              ? Date.now() + dataMin * 1000
+              : dataMin,
+          Date.now(),
+        ]}
+        allowDataOverflow={true}
+        tickFormatter={(unixTime) => {
+          const now = new Date();
+          const time = new Date(unixTime);
+          return differenceInHours(now, time) < 24
+            ? format(time, "HH:mm")
+            : format(time, "yyyy-MM-dd HH:mm");
+        }}
+        name="Time"
+        scale="time"
+      />
+      <YAxis
+        dataKey="_duration"
+        name="Duration (s)"
+        tickFormatter={(s) => (s > 90 ? `${Math.round(s / 60)}m` : `${s}s`)}
+      />
+      <Tooltip
+        content={({ payload }) => {
+          if (payload && payload.length) {
+            const data: GraphExecutionMeta & {
+              time: number;
+              _duration: number;
+            } = payload[0].payload;
+            const flow = flows.find((f) => f.graph_id === data.graph_id);
+            return (
+              <Card className="p-2 text-xs leading-normal">
+                <p>
+                  <strong>Agent:</strong> {flow ? flow.name : "Unknown"}
+                </p>
+                <div>
+                  <strong>Status:</strong>&nbsp;
+                  <FlowRunStatusBadge
+                    status={data.status}
+                    className="px-1.5 py-0"
+                  />
+                </div>
+                <p>
+                  <strong>Started:</strong>{" "}
+                  {data.started_at
+                    ? format(data.started_at, "yyyy-MM-dd HH:mm:ss")
+                    : "---"}
+                </p>
+                {data.stats && (
+                  <p>
+                    <strong>Duration / run time:</strong>{" "}
+                    {formatDuration(data.stats.duration)} /{" "}
+                    {formatDuration(data.stats.node_exec_time)}
+                  </p>
+                )}
+              </Card>
+            );
+          }
+          return null;
+        }}
+      />
+      {flows.map((flow) => (
+        <Scatter
+          key={flow.id}
+          data={executions
+            .filter((e) => e.graph_id == flow.graph_id && e.started_at)
+            .map((e) => ({
+              ...e,
+              time:
+                (e.started_at?.getTime() ?? 0) +
+                (e.stats?.node_exec_time ?? 0) * 1000,
+              _duration: e.stats?.node_exec_time ?? 0,
+            }))}
+          name={flow.name}
+          fill={`hsl(${(hashString(flow.id) * 137.5) % 360}, 70%, 50%)`}
+        />
+      ))}
+      {executions
+        .filter((e) => e.started_at && e.ended_at)
+        .map((execution) => (
+          <Line
+            key={execution.id}
+            type="linear"
+            dataKey="_duration"
+            data={[
+              {
+                ...execution,
+                time: execution.started_at!.getTime(),
+                _duration: 0,
+              },
+              {
+                ...execution,
+                time: execution.ended_at!.getTime(),
+                _duration: execution.stats?.node_exec_time ?? 0,
+              },
+            ]}
+            stroke={`hsl(${(hashString(execution.graph_id) * 137.5) % 360}, 70%, 50%)`}
+            strokeWidth={2}
+            dot={false}
+            legendType="none"
+          />
+        ))}
+      <Legend
+        content={<ScrollableLegend />}
+        wrapperStyle={{
+          bottom: 0,
+          left: 0,
+          right: 0,
+          width: "100%",
+          display: "flex",
+          justifyContent: "center",
+        }}
+      />
+    </ComposedChart>
+  </ResponsiveContainer>
+);
+
+export default FlowRunsTimelineChart;
+
+const ScrollableLegend: React.FC<
+  DefaultLegendContentProps & { className?: string }
+> = ({ payload, className }) => {
+  return (
+    <div
+      className={cn(
+        "space-x-3 overflow-x-auto whitespace-nowrap px-4 text-sm",
+        className,
+      )}
+      style={{ scrollbarWidth: "none" }}
+    >
+      {payload?.map((entry) => {
+        if (entry.type == "none") return;
+        return (
+          <span key={String(entry.value)} className="inline-flex items-center">
+            <span
+              className="mr-1 inline-block size-2.5 rounded-full"
+              style={{ backgroundColor: entry.color }}
+            />
+            <span>{entry.value}</span>
+          </span>
+        );
+      })}
+    </div>
+  );
+};
+
+function formatDuration(seconds: number): string {
+  return (
+    (seconds < 100 ? seconds.toPrecision(2) : Math.round(seconds)).toString() +
+    "s"
+  );
+}
diff --git a/autogpt_platform/frontend/src/app/page.tsx b/autogpt_platform/frontend/src/app/page.tsx
index ce67760eda22..cdf29157071b 100644
--- a/autogpt_platform/frontend/src/app/page.tsx
+++ b/autogpt_platform/frontend/src/app/page.tsx
@@ -1,15 +1,12 @@
-"use client";
+import { redirect } from "next/navigation";
 
-import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
-import { useRouter } from "next/navigation";
-import { useEffect } from "react";
+import type { Metadata } from "next";
 
-export default function Page() {
-  const router = useRouter();
-
-  useEffect(() => {
-    router.replace("/copilot");
-  }, [router]);
+export const metadata: Metadata = {
+  title: "AutoGPT Platform",
+  description: "AutoGPT Platform",
+};
 
-  return <LoadingSpinner size="large" cover />;
+export default function Page() {
+  redirect("/copilot");
 }
diff --git a/autogpt_platform/frontend/src/components/__legacy__/ui/render.tsx b/autogpt_platform/frontend/src/components/__legacy__/ui/render.tsx
index b290c5180974..e0a0130f2b28 100644
--- a/autogpt_platform/frontend/src/components/__legacy__/ui/render.tsx
+++ b/autogpt_platform/frontend/src/components/__legacy__/ui/render.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import * as React from "react";
+import Image from "next/image";
 
 const getYouTubeVideoId = (url: string) => {
   const regExp =
@@ -76,6 +77,7 @@ const VideoRenderer: React.FC<{ videoUrl: string }> = ({ videoUrl }) => {
           width="100%"
           height="315"
           src={`https://www.youtube.com/embed/${videoId}`}
+          title="Embedded content"
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
           allowFullScreen
         ></iframe>
@@ -92,15 +94,15 @@ const VideoRenderer: React.FC<{ videoUrl: string }> = ({ videoUrl }) => {
 const ImageRenderer: React.FC<{ imageUrl: string }> = ({ imageUrl }) => {
   return (
     <div className="w-full p-2">
-      <picture>
-        <img
-          src={imageUrl}
-          alt="Image"
-          className="h-auto max-w-full"
-          width="100%"
-          height="auto"
-        />
-      </picture>
+      <Image
+        src={imageUrl}
+        alt="Image"
+        width={0}
+        height={0}
+        sizes="100vw"
+        className="h-auto w-full"
+        unoptimized
+      />
     </div>
   );
 };
diff --git a/autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/APIKeyCredentialsModal/APIKeyCredentialsModal.tsx b/autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/APIKeyCredentialsModal/APIKeyCredentialsModal.tsx
index 1c455863ddda..a6ebd923920b 100644
--- a/autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/APIKeyCredentialsModal/APIKeyCredentialsModal.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/APIKeyCredentialsModal/APIKeyCredentialsModal.tsx
@@ -93,7 +93,7 @@ export function APIKeyCredentialsModal({
                         <FormDescription>
                           Required scope(s) for this block:{" "}
                           {schema.credentials_scopes?.map((s, i, a) => (
-                            <span key={i}>
+                            <span key={s}>
                               <code className="text-xs font-bold">{s}</code>
                               {i < a.length - 1 && ", "}
                             </span>
diff --git a/autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/HotScopedCredentialsModal/HotScopedCredentialsModal.tsx b/autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/HotScopedCredentialsModal/HotScopedCredentialsModal.tsx
index 63d2ae1ac573..43f615c580e3 100644
--- a/autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/HotScopedCredentialsModal/HotScopedCredentialsModal.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/HotScopedCredentialsModal/HotScopedCredentialsModal.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useRef, useState } from "react";
 import { z } from "zod";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -66,20 +66,21 @@ export function HostScopedCredentialsModal({
   });
 
   const [headerPairs, setHeaderPairs] = useState<
-    Array<{ key: string; value: string }>
-  >([{ key: "", value: "" }]);
+    Array<{ id: string; key: string; value: string }>
+  >([{ id: crypto.randomUUID(), key: "", value: "" }]);
 
-  // Update form values when siblingInputs change
-  useEffect(() => {
+  // Update form values when siblingInputs change (render-time sync instead of useEffect)
+  const prevHostRef = useRef(currentHost);
+  if (currentHost !== prevHostRef.current) {
+    prevHostRef.current = currentHost;
     if (currentHost) {
       form.setValue("host", currentHost);
       form.setValue("title", currentHost);
     } else {
-      // Reset to empty when no current host
       form.setValue("host", "");
       form.setValue("title", "Manual Entry");
     }
-  }, [currentHost, form]);
+  }
 
   if (
     !credentials ||
@@ -92,7 +93,10 @@ export function HostScopedCredentialsModal({
   const { provider, providerName, createHostScopedCredentials } = credentials;
 
   const addHeaderPair = () => {
-    setHeaderPairs([...headerPairs, { key: "", value: "" }]);
+    setHeaderPairs([
+      ...headerPairs,
+      { id: crypto.randomUUID(), key: "", value: "" },
+    ]);
   };
 
   const removeHeaderPair = (index: number) => {
@@ -192,7 +196,7 @@ export function HostScopedCredentialsModal({
               </FormDescription>
 
               {headerPairs.map((pair, index) => (
-                <div key={index} className="flex w-full items-center gap-4">
+                <div key={pair.id} className="flex w-full items-center gap-4">
                   <Input
                     id={`header-${index}-key`}
                     label="Header Name"
diff --git a/autogpt_platform/frontend/src/components/contextual/CronScheduler/cron-scheduler-dialog.tsx b/autogpt_platform/frontend/src/components/contextual/CronScheduler/cron-scheduler-dialog.tsx
index 4da59b035855..f519e9356ed4 100644
--- a/autogpt_platform/frontend/src/components/contextual/CronScheduler/cron-scheduler-dialog.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/CronScheduler/cron-scheduler-dialog.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useRef, useState } from "react";
 import { Input } from "@/components/__legacy__/ui/input";
 import { Button } from "@/components/__legacy__/ui/button";
 import { useToast } from "@/components/molecules/Toast/use-toast";
@@ -7,6 +7,7 @@ import { Dialog } from "@/components/molecules/Dialog/Dialog";
 import { getTimezoneDisplayName } from "@/lib/timezone-utils";
 import { useUserTimezone } from "@/lib/hooks/useUserTimezone";
 import { InfoIcon } from "lucide-react";
+import Link from "next/link";
 
 // Base type for cron expression only
 type CronOnlyCallback = (cronExpression: string) => void;
@@ -53,15 +54,15 @@ export function CronSchedulerDialog(props: CronSchedulerDialogProps) {
   const userTimezone = useUserTimezone();
   const timezoneDisplay = getTimezoneDisplayName(userTimezone || "UTC");
 
-  // Reset state when dialog opens
-  useEffect(() => {
-    if (open) {
-      const defaultName =
-        props.mode === "with-name" ? props.defaultScheduleName || "" : "";
-      setScheduleName(defaultName);
-      setCronExpression(defaultCronExpression);
-    }
-  }, [open, props, defaultCronExpression]);
+  // Reset state when dialog opens (render-time sync instead of useEffect)
+  const prevOpenRef = useRef(open);
+  if (open && !prevOpenRef.current) {
+    const defaultName =
+      props.mode === "with-name" ? props.defaultScheduleName || "" : "";
+    setScheduleName(defaultName);
+    setCronExpression(defaultCronExpression);
+  }
+  prevOpenRef.current = open;
 
   const handleDone = () => {
     if (props.mode === "with-name" && !scheduleName.trim()) {
@@ -100,8 +101,11 @@ export function CronSchedulerDialog(props: CronSchedulerDialogProps) {
         <div className="flex flex-col gap-4">
           {props.mode === "with-name" && (
             <div className="flex max-w-[448px] flex-col space-y-2">
-              <label className="text-sm font-medium">Schedule Name</label>
+              <label htmlFor="schedule-name" className="text-sm font-medium">
+                Schedule Name
+              </label>
               <Input
+                id="schedule-name"
                 value={scheduleName}
                 onChange={(e) => setScheduleName(e.target.value)}
                 placeholder="Enter a name for this schedule"
@@ -121,9 +125,9 @@ export function CronSchedulerDialog(props: CronSchedulerDialogProps) {
               <InfoIcon className="h-4 w-4 text-amber-600" />
               <p className="text-sm text-amber-800">
                 No timezone set. Schedule will run in UTC.
-                <a href="/profile/settings" className="ml-1 underline">
+                <Link href="/profile/settings" className="ml-1 underline">
                   Set your timezone
-                </a>
+                </Link>
               </p>
             </div>
           ) : (
diff --git a/autogpt_platform/frontend/src/components/contextual/CronScheduler/cron-scheduler.tsx b/autogpt_platform/frontend/src/components/contextual/CronScheduler/cron-scheduler.tsx
index a0e1b9f1b316..910cf31538e1 100644
--- a/autogpt_platform/frontend/src/components/contextual/CronScheduler/cron-scheduler.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/CronScheduler/cron-scheduler.tsx
@@ -452,7 +452,7 @@ export function CronScheduler({
               const monthNumber = i + 1;
               return (
                 <Button
-                  key={i}
+                  key={month.label}
                   variant={
                     selectedMonths.includes(monthNumber) ? "default" : "outline"
                   }
diff --git a/autogpt_platform/frontend/src/components/contextual/OutputRenderers/renderers/MarkdownRenderer.tsx b/autogpt_platform/frontend/src/components/contextual/OutputRenderers/renderers/MarkdownRenderer.tsx
index 9815cea6ff36..2f0eae6a8bc4 100644
--- a/autogpt_platform/frontend/src/components/contextual/OutputRenderers/renderers/MarkdownRenderer.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/OutputRenderers/renderers/MarkdownRenderer.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React from "react";
+import Image from "next/image";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
@@ -359,20 +360,21 @@ function renderMarkdown(
             </del>
           ),
           // Image handling
-          img: ({ src, alt, ...props }) => {
+          img: ({ src, alt }) => {
             // Check if it's a video URL pattern
             if (src && isVideoUrl(src)) {
               return renderVideoEmbed(src);
             }
 
             return (
-              // eslint-disable-next-line @next/next/no-img-element
-              <img
-                src={src}
-                alt={alt}
-                className="my-4 h-auto max-w-full rounded-lg shadow-md"
-                loading="lazy"
-                {...props}
+              <Image
+                src={src || ""}
+                alt={alt || "Image"}
+                width={0}
+                height={0}
+                sizes="100vw"
+                className="my-4 h-auto w-full rounded-lg shadow-md"
+                unoptimized
               />
             );
           },
diff --git a/autogpt_platform/frontend/src/components/layout/Navbar/components/AgentActivityDropdown/components/ActivityDropdown/ActivityDropdown.tsx b/autogpt_platform/frontend/src/components/layout/Navbar/components/AgentActivityDropdown/components/ActivityDropdown/ActivityDropdown.tsx
index 885877786fc5..2a6da7899ff2 100644
--- a/autogpt_platform/frontend/src/components/layout/Navbar/components/AgentActivityDropdown/components/ActivityDropdown/ActivityDropdown.tsx
+++ b/autogpt_platform/frontend/src/components/layout/Navbar/components/AgentActivityDropdown/components/ActivityDropdown/ActivityDropdown.tsx
@@ -89,7 +89,6 @@ export function ActivityDropdown({
                   className="!focus:border-1 w-full pr-10"
                   wrapperClassName="!mb-0"
                   autoComplete="off"
-                  autoFocus
                 />
                 <button
                   onClick={handleClearSearch}

From 02a3a163e786273ff4c1a2a08cc40b26426d9f43 Mon Sep 17 00:00:00 2001
From: Lluis Agusti <hi@llu.lu>
Date: Thu, 19 Feb 2026 22:54:55 +0800
Subject: [PATCH 2/5] fix: restore autoFocus attributes

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../FlowEditor/nodes/CustomNode/components/NodeHeader.tsx       | 1 +
 .../src/app/(platform)/build/components/MCPToolDialog.tsx       | 2 ++
 .../components/ActivityDropdown/ActivityDropdown.tsx            | 1 +
 3 files changed, 4 insertions(+)

diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeHeader.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeHeader.tsx
index 4226fcb9ca54..9a3add62b617 100644
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeHeader.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeHeader.tsx
@@ -55,6 +55,7 @@ export const NodeHeader = ({ data, nodeId }: Props) => {
                 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",
diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/MCPToolDialog.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/MCPToolDialog.tsx
index 8161587f7a3c..e01fb3a4b853 100644
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/MCPToolDialog.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/MCPToolDialog.tsx
@@ -300,6 +300,7 @@ export function MCPToolDialog({
                 value={serverUrl}
                 onChange={(e) => setServerUrl(e.target.value)}
                 onKeyDown={(e) => e.key === "Enter" && handleDiscoverTools()}
+                autoFocus
               />
             </div>
 
@@ -326,6 +327,7 @@ export function MCPToolDialog({
                   value={manualToken}
                   onChange={(e) => setManualToken(e.target.value)}
                   onKeyDown={(e) => e.key === "Enter" && handleDiscoverTools()}
+                  autoFocus
                 />
               </div>
             )}
diff --git a/autogpt_platform/frontend/src/components/layout/Navbar/components/AgentActivityDropdown/components/ActivityDropdown/ActivityDropdown.tsx b/autogpt_platform/frontend/src/components/layout/Navbar/components/AgentActivityDropdown/components/ActivityDropdown/ActivityDropdown.tsx
index 2a6da7899ff2..885877786fc5 100644
--- a/autogpt_platform/frontend/src/components/layout/Navbar/components/AgentActivityDropdown/components/ActivityDropdown/ActivityDropdown.tsx
+++ b/autogpt_platform/frontend/src/components/layout/Navbar/components/AgentActivityDropdown/components/ActivityDropdown/ActivityDropdown.tsx
@@ -89,6 +89,7 @@ export function ActivityDropdown({
                   className="!focus:border-1 w-full pr-10"
                   wrapperClassName="!mb-0"
                   autoComplete="off"
+                  autoFocus
                 />
                 <button
                   onClick={handleClearSearch}

From ec06c1278a45d08045e76944842beb71ea35b251 Mon Sep 17 00:00:00 2001
From: Lluis Agusti <hi@llu.lu>
Date: Mon, 23 Feb 2026 19:33:37 +0800
Subject: [PATCH 3/5] ci(frontend): add react-doctor CI job with score
 threshold + fix remaining warnings

Add react-doctor to frontend CI pipeline with a minimum score threshold of 90.
Fix additional a11y and React pattern warnings (autoFocus removal, missing
roles/keyboard handlers) to bring score from 93 to 95.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .github/workflows/platform-frontend-ci.yml    | 59 +++++++++++++++++++
 autogpt_platform/frontend/package.json        |  2 +
 .../CustomNode/components/NodeHeader.tsx      |  7 ++-
 .../build/components/MCPToolDialog.tsx        |  2 -
 .../GraphMenuContent/GraphContent.tsx         |  8 +++
 .../components/SidebarItemCard.tsx            |  8 ++-
 .../ActivityDropdown/ActivityDropdown.tsx     |  1 -
 7 files changed, 81 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/platform-frontend-ci.yml b/.github/workflows/platform-frontend-ci.yml
index e788696f9b60..e6220ee5de2a 100644
--- a/.github/workflows/platform-frontend-ci.yml
+++ b/.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
diff --git a/autogpt_platform/frontend/package.json b/autogpt_platform/frontend/package.json
index 80fb46beff6f..ce2d8a07030d 100644
--- a/autogpt_platform/frontend/package.json
+++ b/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"
   },
diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeHeader.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeHeader.tsx
index 9a3add62b617..64c0e5a85bd5 100644
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeHeader.tsx
+++ b/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",
diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/MCPToolDialog.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/MCPToolDialog.tsx
index e01fb3a4b853..8161587f7a3c 100644
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/MCPToolDialog.tsx
+++ b/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>
             )}
diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewSearchGraph/GraphMenuContent/GraphContent.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewSearchGraph/GraphMenuContent/GraphContent.tsx
index d45b1e7534fa..b99eb4d1687f 100644
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewSearchGraph/GraphMenuContent/GraphContent.tsx
+++ b/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);
diff --git a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/SidebarItemCard.tsx b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/SidebarItemCard.tsx
index e33a9d43b804..d18655bc2c84 100644
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/SidebarItemCard.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/SidebarItemCard.tsx
@@ -57,7 +57,13 @@ export function SidebarItemCard({
           </Text>
         </div>
         {actions ? (
-          <div onClick={(e) => e.stopPropagation()}>{actions}</div>
+          <div
+            role="presentation"
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => e.stopPropagation()}
+          >
+            {actions}
+          </div>
         ) : null}
       </div>
     </div>
diff --git a/autogpt_platform/frontend/src/components/layout/Navbar/components/AgentActivityDropdown/components/ActivityDropdown/ActivityDropdown.tsx b/autogpt_platform/frontend/src/components/layout/Navbar/components/AgentActivityDropdown/components/ActivityDropdown/ActivityDropdown.tsx
index 885877786fc5..2a6da7899ff2 100644
--- a/autogpt_platform/frontend/src/components/layout/Navbar/components/AgentActivityDropdown/components/ActivityDropdown/ActivityDropdown.tsx
+++ b/autogpt_platform/frontend/src/components/layout/Navbar/components/AgentActivityDropdown/components/ActivityDropdown/ActivityDropdown.tsx
@@ -89,7 +89,6 @@ export function ActivityDropdown({
                   className="!focus:border-1 w-full pr-10"
                   wrapperClassName="!mb-0"
                   autoComplete="off"
-                  autoFocus
                 />
                 <button
                   onClick={handleClearSearch}

From a7c9a3c5ae4b5cc9c843520cc6e2ec9af6da6ac0 Mon Sep 17 00:00:00 2001
From: Lluis Agusti <hi@llu.lu>
Date: Mon, 23 Feb 2026 20:49:21 +0800
Subject: [PATCH 4/5] fix(frontend): address CodeRabbit review comments

- MarkdownRenderer: add null guard for empty image src
- GenericTool: use composite key for todo items
- ViewAgentOutput/BlockOutputCard: use parent key + index instead of bare index
- SidebarItemCard: extract onKeyDown to named function declaration

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../copilot/tools/GenericTool/GenericTool.tsx      |  7 +++++--
 .../components/BlockOutputCard/BlockOutputCard.tsx |  3 +--
 .../tools/ViewAgentOutput/ViewAgentOutput.tsx      |  6 ++++--
 .../SidebarRunsList/components/SidebarItemCard.tsx | 14 ++++++++------
 .../OutputRenderers/renderers/MarkdownRenderer.tsx |  4 +++-
 5 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/GenericTool/GenericTool.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/GenericTool/GenericTool.tsx
index 1a95e8210006..dfc609594381 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/GenericTool/GenericTool.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/GenericTool/GenericTool.tsx
@@ -557,8 +557,11 @@ function getTodoAccordionData(input: unknown): AccordionData {
     description: `${completed}/${total} completed`,
     content: (
       <div className="space-y-1 py-1">
-        {todos.map((todo) => (
-          <div key={todo.content} className="flex items-start gap-2 text-xs">
+        {todos.map((todo, idx) => (
+          <div
+            key={`${todo.status}:${todo.content}:${idx}`}
+            className="flex items-start gap-2 text-xs"
+          >
             <span className="mt-0.5 flex-shrink-0">
               {todo.status === "completed" ? (
                 <CheckCircleIcon
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/BlockOutputCard/BlockOutputCard.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/BlockOutputCard/BlockOutputCard.tsx
index bd412bc534b1..75876f7eae78 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/BlockOutputCard/BlockOutputCard.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/BlockOutputCard/BlockOutputCard.tsx
@@ -103,8 +103,7 @@ function OutputKeySection({
       </div>
       <div className="mt-2">
         {visibleItems.map((item, i) => (
-          // eslint-disable-next-line react/no-array-index-key
-          <RenderOutputValue key={i} value={item} />
+          <RenderOutputValue key={`${outputKey}-${i}`} value={item} />
         ))}
       </div>
       {hasMoreItems && (
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/ViewAgentOutput/ViewAgentOutput.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/ViewAgentOutput/ViewAgentOutput.tsx
index 9dcfae58a639..2cfc72675166 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/ViewAgentOutput/ViewAgentOutput.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/ViewAgentOutput/ViewAgentOutput.tsx
@@ -209,8 +209,10 @@ export function ViewAgentOutputTool({ part }: Props) {
                         </div>
                         <div className="mt-2">
                           {items.slice(0, 3).map((item, i) => (
-                            // eslint-disable-next-line react/no-array-index-key
-                            <RenderOutputValue key={i} value={item} />
+                            <RenderOutputValue
+                              key={`${key}-${i}`}
+                              value={item}
+                            />
                           ))}
                         </div>
                       </ContentCard>
diff --git a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/SidebarItemCard.tsx b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/SidebarItemCard.tsx
index d18655bc2c84..7541f49b6dd9 100644
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/SidebarItemCard.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/SidebarItemCard.tsx
@@ -23,6 +23,13 @@ export function SidebarItemCard({
   onClick,
   actions,
 }: Props) {
+  function handleKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onClick?.();
+    }
+  }
+
   return (
     <div
       role="button"
@@ -32,12 +39,7 @@ export function SidebarItemCard({
         selected ? "border-slate-800 ring-slate-800" : undefined,
       )}
       onClick={onClick}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onClick?.();
-        }
-      }}
+      onKeyDown={handleKeyDown}
     >
       <div className="flex min-w-0 items-center justify-start gap-3">
         {icon}
diff --git a/autogpt_platform/frontend/src/components/contextual/OutputRenderers/renderers/MarkdownRenderer.tsx b/autogpt_platform/frontend/src/components/contextual/OutputRenderers/renderers/MarkdownRenderer.tsx
index 2f0eae6a8bc4..4f1b8a9b8ac0 100644
--- a/autogpt_platform/frontend/src/components/contextual/OutputRenderers/renderers/MarkdownRenderer.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/OutputRenderers/renderers/MarkdownRenderer.tsx
@@ -366,9 +366,11 @@ function renderMarkdown(
               return renderVideoEmbed(src);
             }
 
+            if (!src) return null;
+
             return (
               <Image
-                src={src || ""}
+                src={src}
                 alt={alt || "Image"}
                 width={0}
                 height={0}

From 1090f90d957b81492367d30b580299901b98677c Mon Sep 17 00:00:00 2001
From: Lluis Agusti <hi@llu.lu>
Date: Mon, 23 Feb 2026 20:56:08 +0800
Subject: [PATCH 5/5] chore: clean ups

---
 .../components/FlowRunsTimelineChart.tsx      | 189 ------------------
 .../HotScopedCredentialsModal.tsx             |  17 +-
 2 files changed, 9 insertions(+), 197 deletions(-)
 delete mode 100644 autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunsTimelineChart.tsx

diff --git a/autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunsTimelineChart.tsx b/autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunsTimelineChart.tsx
deleted file mode 100644
index dbba1a71952b..000000000000
--- a/autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunsTimelineChart.tsx
+++ /dev/null
@@ -1,189 +0,0 @@
-import { GraphExecutionMeta, LibraryAgent } from "@/lib/autogpt-server-api";
-import {
-  ComposedChart,
-  DefaultLegendContentProps,
-  Legend,
-  Line,
-  ResponsiveContainer,
-  Scatter,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from "recharts";
-import { differenceInHours, format } from "date-fns";
-import { Card } from "@/components/__legacy__/ui/card";
-import { cn, hashString } from "@/lib/utils";
-import React from "react";
-import { FlowRunStatusBadge } from "@/app/(platform)/monitoring/components/FlowRunStatusBadge";
-
-const FlowRunsTimelineChart = ({
-  flows,
-  executions,
-  dataMin,
-  className,
-}: {
-  flows: LibraryAgent[];
-  executions: GraphExecutionMeta[];
-  dataMin: "dataMin" | number;
-  className?: string;
-}) => (
-  /* TODO: make logarithmic? */
-  <ResponsiveContainer width="100%" height={120} className={className}>
-    <ComposedChart>
-      <XAxis
-        dataKey="time"
-        type="number"
-        domain={[
-          typeof dataMin == "string"
-            ? dataMin
-            : dataMin < 0
-              ? Date.now() + dataMin * 1000
-              : dataMin,
-          Date.now(),
-        ]}
-        allowDataOverflow={true}
-        tickFormatter={(unixTime) => {
-          const now = new Date();
-          const time = new Date(unixTime);
-          return differenceInHours(now, time) < 24
-            ? format(time, "HH:mm")
-            : format(time, "yyyy-MM-dd HH:mm");
-        }}
-        name="Time"
-        scale="time"
-      />
-      <YAxis
-        dataKey="_duration"
-        name="Duration (s)"
-        tickFormatter={(s) => (s > 90 ? `${Math.round(s / 60)}m` : `${s}s`)}
-      />
-      <Tooltip
-        content={({ payload }) => {
-          if (payload && payload.length) {
-            const data: GraphExecutionMeta & {
-              time: number;
-              _duration: number;
-            } = payload[0].payload;
-            const flow = flows.find((f) => f.graph_id === data.graph_id);
-            return (
-              <Card className="p-2 text-xs leading-normal">
-                <p>
-                  <strong>Agent:</strong> {flow ? flow.name : "Unknown"}
-                </p>
-                <div>
-                  <strong>Status:</strong>&nbsp;
-                  <FlowRunStatusBadge
-                    status={data.status}
-                    className="px-1.5 py-0"
-                  />
-                </div>
-                <p>
-                  <strong>Started:</strong>{" "}
-                  {data.started_at
-                    ? format(data.started_at, "yyyy-MM-dd HH:mm:ss")
-                    : "---"}
-                </p>
-                {data.stats && (
-                  <p>
-                    <strong>Duration / run time:</strong>{" "}
-                    {formatDuration(data.stats.duration)} /{" "}
-                    {formatDuration(data.stats.node_exec_time)}
-                  </p>
-                )}
-              </Card>
-            );
-          }
-          return null;
-        }}
-      />
-      {flows.map((flow) => (
-        <Scatter
-          key={flow.id}
-          data={executions
-            .filter((e) => e.graph_id == flow.graph_id && e.started_at)
-            .map((e) => ({
-              ...e,
-              time:
-                (e.started_at?.getTime() ?? 0) +
-                (e.stats?.node_exec_time ?? 0) * 1000,
-              _duration: e.stats?.node_exec_time ?? 0,
-            }))}
-          name={flow.name}
-          fill={`hsl(${(hashString(flow.id) * 137.5) % 360}, 70%, 50%)`}
-        />
-      ))}
-      {executions
-        .filter((e) => e.started_at && e.ended_at)
-        .map((execution) => (
-          <Line
-            key={execution.id}
-            type="linear"
-            dataKey="_duration"
-            data={[
-              {
-                ...execution,
-                time: execution.started_at!.getTime(),
-                _duration: 0,
-              },
-              {
-                ...execution,
-                time: execution.ended_at!.getTime(),
-                _duration: execution.stats?.node_exec_time ?? 0,
-              },
-            ]}
-            stroke={`hsl(${(hashString(execution.graph_id) * 137.5) % 360}, 70%, 50%)`}
-            strokeWidth={2}
-            dot={false}
-            legendType="none"
-          />
-        ))}
-      <Legend
-        content={<ScrollableLegend />}
-        wrapperStyle={{
-          bottom: 0,
-          left: 0,
-          right: 0,
-          width: "100%",
-          display: "flex",
-          justifyContent: "center",
-        }}
-      />
-    </ComposedChart>
-  </ResponsiveContainer>
-);
-
-export default FlowRunsTimelineChart;
-
-const ScrollableLegend: React.FC<
-  DefaultLegendContentProps & { className?: string }
-> = ({ payload, className }) => {
-  return (
-    <div
-      className={cn(
-        "space-x-3 overflow-x-auto whitespace-nowrap px-4 text-sm",
-        className,
-      )}
-      style={{ scrollbarWidth: "none" }}
-    >
-      {payload?.map((entry) => {
-        if (entry.type == "none") return;
-        return (
-          <span key={String(entry.value)} className="inline-flex items-center">
-            <span
-              className="mr-1 inline-block size-2.5 rounded-full"
-              style={{ backgroundColor: entry.color }}
-            />
-            <span>{entry.value}</span>
-          </span>
-        );
-      })}
-    </div>
-  );
-};
-
-function formatDuration(seconds: number): string {
-  return (
-    (seconds < 100 ? seconds.toPrecision(2) : Math.round(seconds)).toString() +
-    "s"
-  );
-}
diff --git a/autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/HotScopedCredentialsModal/HotScopedCredentialsModal.tsx b/autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/HotScopedCredentialsModal/HotScopedCredentialsModal.tsx
index 43f615c580e3..592f1125238b 100644
--- a/autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/HotScopedCredentialsModal/HotScopedCredentialsModal.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/HotScopedCredentialsModal/HotScopedCredentialsModal.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { z } from "zod";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -69,9 +69,10 @@ export function HostScopedCredentialsModal({
     Array<{ id: string; key: string; value: string }>
   >([{ id: crypto.randomUUID(), key: "", value: "" }]);
 
-  // Update form values when siblingInputs change (render-time sync instead of useEffect)
+  // Update form values when siblingInputs change
   const prevHostRef = useRef(currentHost);
-  if (currentHost !== prevHostRef.current) {
+  useEffect(() => {
+    if (currentHost === prevHostRef.current) return;
     prevHostRef.current = currentHost;
     if (currentHost) {
       form.setValue("host", currentHost);
@@ -80,7 +81,7 @@ export function HostScopedCredentialsModal({
       form.setValue("host", "");
       form.setValue("title", "Manual Entry");
     }
-  }
+  }, [currentHost, form]);
 
   if (
     !credentials ||
@@ -92,12 +93,12 @@ export function HostScopedCredentialsModal({
 
   const { provider, providerName, createHostScopedCredentials } = credentials;
 
-  const addHeaderPair = () => {
-    setHeaderPairs([
-      ...headerPairs,
+  function addHeaderPair() {
+    setHeaderPairs((prev) => [
+      ...prev,
       { id: crypto.randomUUID(), key: "", value: "" },
     ]);
-  };
+  }
 
   const removeHeaderPair = (index: number) => {
     if (headerPairs.length > 1) {