Merge branch 'dev' into ntindle/waitlist

autogpt_platform/backend/backend/blocks/test/test_blocks_dos_vulnerability.py

@@ -196,6 +196,15 @@ class TestXMLParserBlockSecurity:
             async for _ in block.run(XMLParserBlock.Input(input_xml=large_xml)):
                 pass
 
+    async def test_rejects_text_outside_root(self):
+        """Ensure parser surfaces readable errors for invalid root text."""
+        block = XMLParserBlock()
+        invalid_xml = "<root><child>value</child></root> trailing"
+
+        with pytest.raises(ValueError, match="text outside the root element"):
+            async for _ in block.run(XMLParserBlock.Input(input_xml=invalid_xml)):
+                pass
+
 
 class TestStoreMediaFileSecurity:
     """Test file storage security limits."""

autogpt_platform/backend/backend/blocks/xml_parser.py

@@ -1,5 +1,5 @@
 from gravitasml.parser import Parser
-from gravitasml.token import tokenize
+from gravitasml.token import Token, tokenize
 
 from backend.data.block import Block, BlockOutput, BlockSchemaInput, BlockSchemaOutput
 from backend.data.model import SchemaField
@@ -25,6 +25,38 @@ class XMLParserBlock(Block):
             ],
         )
 
+    @staticmethod
+    def _validate_tokens(tokens: list[Token]) -> None:
+        """Ensure the XML has a single root element and no stray text."""
+        if not tokens:
+            raise ValueError("XML input is empty.")
+
+        depth = 0
+        root_seen = False
+
+        for token in tokens:
+            if token.type == "TAG_OPEN":
+                if depth == 0 and root_seen:
+                    raise ValueError("XML must have a single root element.")
+                depth += 1
+                if depth == 1:
+                    root_seen = True
+            elif token.type == "TAG_CLOSE":
+                depth -= 1
+                if depth < 0:
+                    raise SyntaxError("Unexpected closing tag in XML input.")
+            elif token.type in {"TEXT", "ESCAPE"}:
+                if depth == 0 and token.value:
+                    raise ValueError(
+                        "XML contains text outside the root element; "
+                        "wrap content in a single root tag."
+                    )
+
+        if depth != 0:
+            raise SyntaxError("Unclosed tag detected in XML input.")
+        if not root_seen:
+            raise ValueError("XML must include a root element.")
+
     async def run(self, input_data: Input, **kwargs) -> BlockOutput:
         # Security fix: Add size limits to prevent XML bomb attacks
         MAX_XML_SIZE = 10 * 1024 * 1024  # 10MB limit for XML input
@@ -35,7 +67,9 @@ class XMLParserBlock(Block):
             )
 
         try:
-            tokens = tokenize(input_data.input_xml)
+            tokens = list(tokenize(input_data.input_xml))
+            self._validate_tokens(tokens)
+
             parser = Parser(tokens)
             parsed_result = parser.parse()
             yield "parsed_xml", parsed_result

autogpt_platform/backend/poetry.lock

@@ -1924,14 +1924,14 @@ google = ["google-api-python-client (>=2.0.0)", "google-auth (>=2.0.0)"]
 
 [[package]]
 name = "gravitasml"
-version = "0.1.3"
+version = "0.1.4"
 description = ""
 optional = false
 python-versions = "<4.0,>=3.10"
 groups = ["main"]
 files = [
-    {file = "gravitasml-0.1.3-py3-none-any.whl", hash = "sha256:51ff98b4564b7a61f7796f18d5f2558b919d30b3722579296089645b7bc18b85"},
-    {file = "gravitasml-0.1.3.tar.gz", hash = "sha256:04d240b9fa35878252d57a36032130b6516487468847fcdced1022c032a20f57"},
+    {file = "gravitasml-0.1.4-py3-none-any.whl", hash = "sha256:671a18b11d3d8a0e270c6a80c72cd058458b18d5ef7560d00010e962ab1bca74"},
+    {file = "gravitasml-0.1.4.tar.gz", hash = "sha256:35d0d9fec7431817482d53d9c976e375557c3e041d1eb6928e809324a8c866e3"},
 ]
 
 [package.dependencies]
@@ -7295,4 +7295,4 @@ cffi = ["cffi (>=1.11)"]
 [metadata]
 lock-version = "2.1"
 python-versions = ">=3.10,<3.14"
-content-hash = "b762806d5d58fcf811220890c4705a16dc62b33387af43e3a29399c62a641098"
+content-hash = "a93ba0cea3b465cb6ec3e3f258b383b09f84ea352ccfdbfa112902cde5653fc6"

autogpt_platform/backend/pyproject.toml

@@ -27,7 +27,7 @@ google-api-python-client = "^2.177.0"
 google-auth-oauthlib = "^1.2.2"
 google-cloud-storage = "^3.2.0"
 googlemaps = "^4.10.0"
-gravitasml = "^0.1.3"
+gravitasml = "^0.1.4"
 groq = "^0.30.0"
 html2text = "^2024.2.26"
 jinja2 = "^3.1.6"

autogpt_platform/cloudflare_worker.js

@@ -0,0 +1,146 @@
+/**
+ * Cloudflare Workers Script for docs.agpt.co → agpt.co/docs migration
+ * 
+ * Deploy this script to handle all redirects with a single JavaScript file.
+ * No rule limits, easy to maintain, handles all edge cases.
+ */
+
+// URL mapping for special cases that don't follow patterns
+const SPECIAL_MAPPINGS = {
+  // Root page
+  '/': '/docs/platform',
+  
+  // Special cases that don't follow standard patterns
+  '/platform/d_id/': '/docs/integrations/block-integrations/d-id',
+  '/platform/blocks/blocks/': '/docs/integrations',
+  '/platform/blocks/decoder_block/': '/docs/integrations/block-integrations/text-decoder',
+  '/platform/blocks/http': '/docs/integrations/block-integrations/send-web-request',
+  '/platform/blocks/llm/': '/docs/integrations/block-integrations/ai-and-llm',
+  '/platform/blocks/time_blocks': '/docs/integrations/block-integrations/time-and-date',
+  '/platform/blocks/text_to_speech_block': '/docs/integrations/block-integrations/text-to-speech',
+  '/platform/blocks/ai_shortform_video_block': '/docs/integrations/block-integrations/ai-shortform-video',
+  '/platform/blocks/replicate_flux_advanced': '/docs/integrations/block-integrations/replicate-flux-advanced',
+  '/platform/blocks/flux_kontext': '/docs/integrations/block-integrations/flux-kontext',
+  '/platform/blocks/ai_condition/': '/docs/integrations/block-integrations/ai-condition',
+  '/platform/blocks/email_block': '/docs/integrations/block-integrations/email',
+  '/platform/blocks/google_maps': '/docs/integrations/block-integrations/google-maps',
+  '/platform/blocks/google/gmail': '/docs/integrations/block-integrations/gmail',
+  '/platform/blocks/github/issues/': '/docs/integrations/block-integrations/github-issues',
+  '/platform/blocks/github/repo/': '/docs/integrations/block-integrations/github-repo',
+  '/platform/blocks/github/pull_requests': '/docs/integrations/block-integrations/github-pull-requests',
+  '/platform/blocks/twitter/twitter': '/docs/integrations/block-integrations/twitter',
+  '/classic/setup/': '/docs/classic/setup/setting-up-autogpt-classic',
+  '/code-of-conduct/': '/docs/classic/help-us-improve-autogpt/code-of-conduct',
+  '/contributing/': '/docs/classic/contributing',
+  '/contribute/': '/docs/contribute',
+  '/forge/components/introduction/': '/docs/classic/forge/introduction'
+};
+
+/**
+ * Transform path by replacing underscores with hyphens and removing trailing slashes
+ */
+function transformPath(path) {
+  return path.replace(/_/g, '-').replace(/\/$/, '');
+}
+
+/**
+ * Handle docs.agpt.co redirects
+ */
+function handleDocsRedirect(url) {
+  const pathname = url.pathname;
+  
+  // Check special mappings first
+  if (SPECIAL_MAPPINGS[pathname]) {
+    return `https://agpt.co${SPECIAL_MAPPINGS[pathname]}`;
+  }
+  
+  // Pattern-based redirects
+  
+  // Platform blocks: /platform/blocks/* → /docs/integrations/block-integrations/*
+  if (pathname.startsWith('/platform/blocks/')) {
+    const blockName = pathname.substring('/platform/blocks/'.length);
+    const transformedName = transformPath(blockName);
+    return `https://agpt.co/docs/integrations/block-integrations/${transformedName}`;
+  }
+  
+  // Platform contributing: /platform/contributing/* → /docs/platform/contributing/*
+  if (pathname.startsWith('/platform/contributing/')) {
+    const subPath = pathname.substring('/platform/contributing/'.length);
+    return `https://agpt.co/docs/platform/contributing/${subPath}`;
+  }
+  
+  // Platform general: /platform/* → /docs/platform/* (with underscore→hyphen)
+  if (pathname.startsWith('/platform/')) {
+    const subPath = pathname.substring('/platform/'.length);
+    const transformedPath = transformPath(subPath);
+    return `https://agpt.co/docs/platform/${transformedPath}`;
+  }
+  
+  // Forge components: /forge/components/* → /docs/classic/forge/introduction/*
+  if (pathname.startsWith('/forge/components/')) {
+    const subPath = pathname.substring('/forge/components/'.length);
+    return `https://agpt.co/docs/classic/forge/introduction/${subPath}`;
+  }
+  
+  // Forge general: /forge/* → /docs/classic/forge/*
+  if (pathname.startsWith('/forge/')) {
+    const subPath = pathname.substring('/forge/'.length);
+    return `https://agpt.co/docs/classic/forge/${subPath}`;
+  }
+  
+  // Classic: /classic/* → /docs/classic/*
+  if (pathname.startsWith('/classic/')) {
+    const subPath = pathname.substring('/classic/'.length);
+    return `https://agpt.co/docs/classic/${subPath}`;
+  }
+  
+  // Default fallback
+  return 'https://agpt.co/docs/';
+}
+
+/**
+ * Main Worker function
+ */
+export default {
+  async fetch(request, env, ctx) {
+    const url = new URL(request.url);
+    
+    // Only handle docs.agpt.co requests
+    if (url.hostname === 'docs.agpt.co') {
+      const redirectUrl = handleDocsRedirect(url);
+      
+      return new Response(null, {
+        status: 301,
+        headers: {
+          'Location': redirectUrl,
+          'Cache-Control': 'max-age=300' // Cache redirects for 5 minutes
+        }
+      });
+    }
+    
+    // For non-docs requests, pass through or return 404
+    return new Response('Not Found', { status: 404 });
+  }
+};
+
+// Test function for local development
+export function testRedirects() {
+  const testCases = [
+    'https://docs.agpt.co/',
+    'https://docs.agpt.co/platform/getting-started/',
+    'https://docs.agpt.co/platform/advanced_setup/',
+    'https://docs.agpt.co/platform/blocks/basic/',
+    'https://docs.agpt.co/platform/blocks/ai_condition/',
+    'https://docs.agpt.co/classic/setup/',
+    'https://docs.agpt.co/forge/components/agents/',
+    'https://docs.agpt.co/contributing/',
+    'https://docs.agpt.co/unknown-page'
+  ];
+  
+  console.log('Testing redirects:');
+  testCases.forEach(testUrl => {
+    const url = new URL(testUrl);
+    const result = handleDocsRedirect(url);
+    console.log(`${testUrl} → ${result}`);
+  });
+}

autogpt_platform/frontend/package.json

@@ -46,14 +46,15 @@
     "@radix-ui/react-scroll-area": "1.2.10",
     "@radix-ui/react-select": "2.2.6",
     "@radix-ui/react-separator": "1.1.7",
+    "@radix-ui/react-slider": "1.3.6",
     "@radix-ui/react-slot": "1.2.3",
     "@radix-ui/react-switch": "1.2.6",
     "@radix-ui/react-tabs": "1.1.13",
     "@radix-ui/react-toast": "1.2.15",
     "@radix-ui/react-tooltip": "1.2.8",
-    "@rjsf/core": "5.24.13",
-    "@rjsf/utils": "5.24.13",
-    "@rjsf/validator-ajv8": "5.24.13",
+    "@rjsf/core": "6.1.2",
+    "@rjsf/utils": "6.1.2",
+    "@rjsf/validator-ajv8": "6.1.2",
     "@sentry/nextjs": "10.27.0",
     "@supabase/ssr": "0.7.0",
     "@supabase/supabase-js": "2.78.0",
@@ -91,7 +92,6 @@
     "react-currency-input-field": "4.0.3",
     "react-day-picker": "9.11.1",
     "react-dom": "18.3.1",
-    "react-drag-drop-files": "2.4.0",
     "react-hook-form": "7.66.0",
     "react-icons": "5.5.0",
     "react-markdown": "9.0.3",

autogpt_platform/frontend/src/app/(platform)/auth/integrations/oauth_callback/route.ts

@@ -1,4 +1,4 @@
-import { OAuthPopupResultMessage } from "@/components/renderers/input-renderer/fields/CredentialField/models/OAuthCredentialModal/useOAuthCredentialModal";
+import { OAuthPopupResultMessage } from "./types";
 import { NextResponse } from "next/server";
 
 // This route is intended to be used as the callback for integration OAuth flows,

autogpt_platform/frontend/src/app/(platform)/auth/integrations/oauth_callback/types.ts

@@ -0,0 +1,11 @@
+export type OAuthPopupResultMessage = { message_type: "oauth_popup_result" } & (
+  | {
+      success: true;
+      code: string;
+      state: string;
+    }
+  | {
+      success: false;
+      message: string;
+    }
+);

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

@@ -5,7 +5,7 @@ import { useGraphStore } from "@/app/(platform)/build/stores/graphStore";
 import { Button } from "@/components/atoms/Button/Button";
 import { ClockIcon, PlayIcon } from "@phosphor-icons/react";
 import { Text } from "@/components/atoms/Text/Text";
-import { FormRenderer } from "@/components/renderers/input-renderer/FormRenderer";
+import { FormRenderer } from "@/components/renderers/InputRenderer/FormRenderer";
 import { useRunInputDialog } from "./useRunInputDialog";
 import { CronSchedulerDialog } from "../CronSchedulerDialog/CronSchedulerDialog";
 

autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.ts

@@ -8,7 +8,7 @@ import {
 import { parseAsInteger, parseAsString, useQueryStates } from "nuqs";
 import { useMemo, useState } from "react";
 import { uiSchema } from "../../../FlowEditor/nodes/uiSchema";
-import { isCredentialFieldSchema } from "@/components/renderers/input-renderer/fields/CredentialField/helpers";
+import { isCredentialFieldSchema } from "@/components/renderers/InputRenderer/custom/CredentialField/helpers";
 
 export const useRunInputDialog = ({
   setIsOpen,

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

@@ -12,16 +12,59 @@ import {
 import { useDraftRecoveryPopup } from "./useDraftRecoveryPopup";
 import { Text } from "@/components/atoms/Text/Text";
 import { AnimatePresence, motion } from "framer-motion";
+import { DraftDiff } from "@/lib/dexie/draft-utils";
 
 interface DraftRecoveryPopupProps {
   isInitialLoadComplete: boolean;
 }
 
+function formatDiffSummary(diff: DraftDiff | null): string {
+  if (!diff) return "";
+
+  const parts: string[] = [];
+
+  // Node changes
+  const nodeChanges: string[] = [];
+  if (diff.nodes.added > 0) nodeChanges.push(`+${diff.nodes.added}`);
+  if (diff.nodes.removed > 0) nodeChanges.push(`-${diff.nodes.removed}`);
+  if (diff.nodes.modified > 0) nodeChanges.push(`~${diff.nodes.modified}`);
+
+  if (nodeChanges.length > 0) {
+    parts.push(
+      `${nodeChanges.join("/")} block${diff.nodes.added + diff.nodes.removed + diff.nodes.modified !== 1 ? "s" : ""}`,
+    );
+  }
+
+  // Edge changes
+  const edgeChanges: string[] = [];
+  if (diff.edges.added > 0) edgeChanges.push(`+${diff.edges.added}`);
+  if (diff.edges.removed > 0) edgeChanges.push(`-${diff.edges.removed}`);
+  if (diff.edges.modified > 0) edgeChanges.push(`~${diff.edges.modified}`);
+
+  if (edgeChanges.length > 0) {
+    parts.push(
+      `${edgeChanges.join("/")} connection${diff.edges.added + diff.edges.removed + diff.edges.modified !== 1 ? "s" : ""}`,
+    );
+  }
+
+  return parts.join(", ");
+}
+
 export function DraftRecoveryPopup({
   isInitialLoadComplete,
 }: DraftRecoveryPopupProps) {
-  const { isOpen, popupRef, nodeCount, edgeCount, savedAt, onLoad, onDiscard } =
-    useDraftRecoveryPopup(isInitialLoadComplete);
+  const {
+    isOpen,
+    popupRef,
+    nodeCount,
+    edgeCount,
+    diff,
+    savedAt,
+    onLoad,
+    onDiscard,
+  } = useDraftRecoveryPopup(isInitialLoadComplete);
+
+  const diffSummary = formatDiffSummary(diff);
 
   return (
     <AnimatePresence>
@@ -72,10 +115,9 @@ export function DraftRecoveryPopup({
                 variant="small"
                 className="text-amber-700 dark:text-amber-400"
               >
-                {nodeCount} block{nodeCount !== 1 ? "s" : ""}, {edgeCount}{" "}
-                connection
-                {edgeCount !== 1 ? "s" : ""} •{" "}
-                {formatTimeAgo(new Date(savedAt).toISOString())}
+                {diffSummary ||
+                  `${nodeCount} block${nodeCount !== 1 ? "s" : ""}, ${edgeCount} connection${edgeCount !== 1 ? "s" : ""}`}{" "}
+                • {formatTimeAgo(new Date(savedAt).toISOString())}
               </Text>
             </div>
 

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

@@ -9,6 +9,7 @@ export const useDraftRecoveryPopup = (isInitialLoadComplete: boolean) => {
     savedAt,
     nodeCount,
     edgeCount,
+    diff,
     loadDraft: onLoad,
     discardDraft: onDiscard,
   } = useDraftManager(isInitialLoadComplete);
@@ -54,6 +55,7 @@ export const useDraftRecoveryPopup = (isInitialLoadComplete: boolean) => {
     isOpen,
     nodeCount,
     edgeCount,
+    diff,
     savedAt,
     onLoad,
     onDiscard,

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

@@ -97,6 +97,9 @@ export const Flow = () => {
           onConnect={onConnect}
           onEdgesChange={onEdgesChange}
           onNodeDragStop={onNodeDragStop}
+          onNodeContextMenu={(event) => {
+            event.preventDefault();
+          }}
           maxZoom={2}
           minZoom={0.1}
           onDragOver={onDragOver}

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/helpers/resolve-collision.ts

@@ -48,8 +48,6 @@ export const resolveCollisions: CollisionAlgorithm = (
     const width = (node.width ?? node.measured?.width ?? 0) + margin * 2;
     const height = (node.height ?? node.measured?.height ?? 0) + margin * 2;
 
-    console.log("width", width);
-    console.log("height", height);
     const x = node.position.x - margin;
     const y = node.position.y - margin;
 

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useDraftManager.ts

@@ -7,7 +7,12 @@ import {
   DraftData,
 } from "@/services/builder-draft/draft-service";
 import { BuilderDraft } from "@/lib/dexie/db";
-import { cleanNodes, cleanEdges } from "@/lib/dexie/draft-utils";
+import {
+  cleanNodes,
+  cleanEdges,
+  calculateDraftDiff,
+  DraftDiff,
+} from "@/lib/dexie/draft-utils";
 import { useNodeStore } from "../../../stores/nodeStore";
 import { useEdgeStore } from "../../../stores/edgeStore";
 import { useGraphStore } from "../../../stores/graphStore";
@@ -19,6 +24,7 @@ const AUTO_SAVE_INTERVAL_MS = 15000; // 15 seconds
 interface DraftRecoveryState {
   isOpen: boolean;
   draft: BuilderDraft | null;
+  diff: DraftDiff | null;
 }
 
 /**
@@ -31,6 +37,7 @@ export function useDraftManager(isInitialLoadComplete: boolean) {
   const [state, setState] = useState<DraftRecoveryState>({
     isOpen: false,
     draft: null,
+    diff: null,
   });
 
   const [{ flowID, flowVersion }] = useQueryStates({
@@ -207,9 +214,16 @@ export function useDraftManager(isInitialLoadComplete: boolean) {
       );
 
       if (isDifferent && (draft.nodes.length > 0 || draft.edges.length > 0)) {
+        const diff = calculateDraftDiff(
+          draft.nodes,
+          draft.edges,
+          currentNodes,
+          currentEdges,
+        );
         setState({
           isOpen: true,
           draft,
+          diff,
         });
       } else {
         await draftService.deleteDraft(effectiveFlowId);
@@ -231,6 +245,7 @@ export function useDraftManager(isInitialLoadComplete: boolean) {
     setState({
       isOpen: false,
       draft: null,
+      diff: null,
     });
   }, [flowID]);
 
@@ -242,8 +257,10 @@ export function useDraftManager(isInitialLoadComplete: boolean) {
     try {
       useNodeStore.getState().setNodes(draft.nodes);
       useEdgeStore.getState().setEdges(draft.edges);
+      draft.nodes.forEach((node) => {
+        useNodeStore.getState().syncHardcodedValuesWithHandleIds(node.id);
+      });
 
-      // Restore nodeCounter to prevent ID conflicts when adding new nodes
       if (draft.nodeCounter !== undefined) {
         useNodeStore.setState({ nodeCounter: draft.nodeCounter });
       }
@@ -267,6 +284,7 @@ export function useDraftManager(isInitialLoadComplete: boolean) {
       setState({
         isOpen: false,
         draft: null,
+        diff: null,
       });
     } catch (error) {
       console.error("[DraftRecovery] Failed to load draft:", error);
@@ -275,7 +293,7 @@ export function useDraftManager(isInitialLoadComplete: boolean) {
 
   const discardDraft = useCallback(async () => {
     if (!state.draft) {
-      setState({ isOpen: false, draft: null });
+      setState({ isOpen: false, draft: null, diff: null });
       return;
     }
 
@@ -285,7 +303,7 @@ export function useDraftManager(isInitialLoadComplete: boolean) {
       console.error("[DraftRecovery] Failed to discard draft:", error);
     }
 
-    setState({ isOpen: false, draft: null });
+    setState({ isOpen: false, draft: null, diff: null });
   }, [state.draft]);
 
   return {
@@ -294,6 +312,7 @@ export function useDraftManager(isInitialLoadComplete: boolean) {
     savedAt: state.draft?.savedAt ?? 0,
     nodeCount: state.draft?.nodes.length ?? 0,
     edgeCount: state.draft?.edges.length ?? 0,
+    diff: state.diff,
     loadDraft,
     discardDraft,
   };

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlow.ts

@@ -121,6 +121,14 @@ export const useFlow = () => {
     if (customNodes.length > 0) {
       useNodeStore.getState().setNodes([]);
       addNodes(customNodes);
+
+      // Sync hardcoded values with handle IDs.
+      // If a key–value field has a key without a value, the backend omits it from hardcoded values.
+      // But if a handleId exists for that key, it causes inconsistency.
+      // This ensures hardcoded values stay in sync with handle IDs.
+      customNodes.forEach((node) => {
+        useNodeStore.getState().syncHardcodedValuesWithHandleIds(node.id);
+      });
     }
   }, [customNodes, addNodes]);
 

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/edges/useCustomEdge.ts

@@ -1,12 +1,17 @@
-import { Connection as RFConnection, EdgeChange } from "@xyflow/react";
+import {
+  Connection as RFConnection,
+  EdgeChange,
+  applyEdgeChanges,
+} from "@xyflow/react";
 import { useEdgeStore } from "@/app/(platform)/build/stores/edgeStore";
 import { useCallback } from "react";
 import { useNodeStore } from "../../../stores/nodeStore";
+import { CustomEdge } from "./CustomEdge";
 
 export const useCustomEdge = () => {
   const edges = useEdgeStore((s) => s.edges);
   const addEdge = useEdgeStore((s) => s.addEdge);
-  const removeEdge = useEdgeStore((s) => s.removeEdge);
+  const setEdges = useEdgeStore((s) => s.setEdges);
 
   const onConnect = useCallback(
     (conn: RFConnection) => {
@@ -45,14 +50,10 @@ export const useCustomEdge = () => {
   );
 
   const onEdgesChange = useCallback(
-    (changes: EdgeChange[]) => {
-      changes.forEach((change) => {
-        if (change.type === "remove") {
-          removeEdge(change.id);
-        }
-      });
+    (changes: EdgeChange<CustomEdge>[]) => {
+      setEdges(applyEdgeChanges(changes, edges));
     },
-    [removeEdge],
+    [edges, setEdges],
   );
 
   return { edges, onConnect, onEdgesChange };

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/handlers/NodeHandle.tsx

@@ -1,26 +1,32 @@
 import { CircleIcon } from "@phosphor-icons/react";
 import { Handle, Position } from "@xyflow/react";
+import { useEdgeStore } from "../../../stores/edgeStore";
+import { cleanUpHandleId } from "@/components/renderers/InputRenderer/helpers";
+import { cn } from "@/lib/utils";
 
-const NodeHandle = ({
+const InputNodeHandle = ({
   handleId,
-  isConnected,
-  side,
+  nodeId,
 }: {
   handleId: string;
-  isConnected: boolean;
-  side: "left" | "right";
+  nodeId: string;
 }) => {
+  const cleanedHandleId = cleanUpHandleId(handleId);
+  const isInputConnected = useEdgeStore((state) =>
+    state.isInputConnected(nodeId ?? "", cleanedHandleId),
+  );
+
   return (
     <Handle
-      type={side === "left" ? "target" : "source"}
-      position={side === "left" ? Position.Left : Position.Right}
-      id={handleId}
-      className={side === "left" ? "-ml-4 mr-2" : "-mr-2 ml-2"}
+      type={"target"}
+      position={Position.Left}
+      id={cleanedHandleId}
+      className={"-ml-6 mr-2"}
     >
       <div className="pointer-events-none">
         <CircleIcon
           size={16}
-          weight={isConnected ? "fill" : "duotone"}
+          weight={isInputConnected ? "fill" : "duotone"}
           className={"text-gray-400 opacity-100"}
         />
       </div>
@@ -28,4 +34,35 @@ const NodeHandle = ({
   );
 };
 
-export default NodeHandle;
+const OutputNodeHandle = ({
+  field_name,
+  nodeId,
+  hexColor,
+}: {
+  field_name: string;
+  nodeId: string;
+  hexColor: string;
+}) => {
+  const isOutputConnected = useEdgeStore((state) =>
+    state.isOutputConnected(nodeId, field_name),
+  );
+  return (
+    <Handle
+      type={"source"}
+      position={Position.Right}
+      id={field_name}
+      className={"-mr-2 ml-2"}
+    >
+      <div className="pointer-events-none">
+        <CircleIcon
+          size={16}
+          weight={"duotone"}
+          color={isOutputConnected ? hexColor : "gray"}
+          className={cn("text-gray-400 opacity-100")}
+        />
+      </div>
+    </Handle>
+  );
+};
+
+export { InputNodeHandle, OutputNodeHandle };

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/handlers/helpers.ts

@@ -1,31 +1,4 @@
-/**
- * Handle ID Types for different input structures
- *
- * Examples:
- * SIMPLE: "message"
- * NESTED: "config.api_key"
- * ARRAY: "items_$_0", "items_$_1"
- * KEY_VALUE: "headers_#_Authorization", "params_#_limit"
- *
- * Note: All handle IDs are sanitized to remove spaces and special characters.
- * Spaces become underscores, and special characters are removed.
- * Example: "user name" becomes "user_name", "email@domain.com" becomes "emaildomaincom"
- */
-export enum HandleIdType {
-  SIMPLE = "SIMPLE",
-  NESTED = "NESTED",
-  ARRAY = "ARRAY",
-  KEY_VALUE = "KEY_VALUE",
-}
-
-const fromRjsfId = (id: string): string => {
-  if (!id) return "";
-  const parts = id.split("_");
-  const filtered = parts.filter(
-    (p) => p !== "root" && p !== "properties" && p.length > 0,
-  );
-  return filtered.join("_") || "";
-};
+// Here we are handling single level of nesting, if need more in future then i will update it
 
 const sanitizeForHandleId = (str: string): string => {
   if (!str) return "";
@@ -38,51 +11,53 @@ const sanitizeForHandleId = (str: string): string => {
     .replace(/^_|_$/g, ""); // Remove leading/trailing underscores
 };
 
-export const generateHandleId = (
+const cleanTitleId = (id: string): string => {
+  if (!id) return "";
+
+  if (id.endsWith("_title")) {
+    id = id.slice(0, -6);
+  }
+  const parts = id.split("_");
+  const filtered = parts.filter(
+    (p) => p !== "root" && p !== "properties" && p.length > 0,
+  );
+  const filtered_id = filtered.join("_") || "";
+  return filtered_id;
+};
+
+export const generateHandleIdFromTitleId = (
   fieldKey: string,
-  nestedValues: string[] = [],
-  type: HandleIdType = HandleIdType.SIMPLE,
+  {
+    isObjectProperty,
+    isAdditionalProperty,
+    isArrayItem,
+  }: {
+    isArrayItem?: boolean;
+    isObjectProperty?: boolean;
+    isAdditionalProperty?: boolean;
+  } = {
+    isArrayItem: false,
+    isObjectProperty: false,
+    isAdditionalProperty: false,
+  },
 ): string => {
   if (!fieldKey) return "";
 
-  fieldKey = fromRjsfId(fieldKey);
-  fieldKey = sanitizeForHandleId(fieldKey);
+  const filteredKey = cleanTitleId(fieldKey);
+  if (isAdditionalProperty || isArrayItem) {
+    return filteredKey;
+  }
+  const cleanedKey = sanitizeForHandleId(filteredKey);
 
-  if (type === HandleIdType.SIMPLE || nestedValues.length === 0) {
-    return fieldKey;
+  if (isObjectProperty) {
+    // "config_api_key" -> "config.api_key"
+    const parts = cleanedKey.split("_");
+    if (parts.length >= 2) {
+      const baseName = parts[0];
+      const propertyName = parts.slice(1).join("_");
+      return `${baseName}.${propertyName}`;
+    }
   }
 
-  const sanitizedNestedValues = nestedValues.map((value) =>
-    sanitizeForHandleId(value),
-  );
-
-  switch (type) {
-    case HandleIdType.NESTED:
-      return [fieldKey, ...sanitizedNestedValues].join(".");
-
-    case HandleIdType.ARRAY:
-      return [fieldKey, ...sanitizedNestedValues].join("_$_");
-
-    case HandleIdType.KEY_VALUE:
-      return [fieldKey, ...sanitizedNestedValues].join("_#_");
-
-    default:
-      return fieldKey;
-  }
-};
-
-export const parseKeyValueHandleId = (
-  handleId: string,
-  type: HandleIdType,
-): string => {
-  if (type === HandleIdType.KEY_VALUE) {
-    return handleId.split("_#_")[1];
-  } else if (type === HandleIdType.ARRAY) {
-    return handleId.split("_$_")[1];
-  } else if (type === HandleIdType.NESTED) {
-    return handleId.split(".")[1];
-  } else if (type === HandleIdType.SIMPLE) {
-    return handleId.split("_")[1];
-  }
-  return "";
+  return cleanedKey;
 };

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

@@ -1,24 +1,25 @@
-import React from "react";
-import { Node as XYNode, NodeProps } from "@xyflow/react";
-import { RJSFSchema } from "@rjsf/utils";
-import { BlockUIType } from "../../../types";
-import { StickyNoteBlock } from "./components/StickyNoteBlock";
-import { BlockInfoCategoriesItem } from "@/app/api/__generated__/models/blockInfoCategoriesItem";
-import { BlockCost } from "@/app/api/__generated__/models/blockCost";
 import { AgentExecutionStatus } from "@/app/api/__generated__/models/agentExecutionStatus";
+import { BlockCost } from "@/app/api/__generated__/models/blockCost";
+import { BlockInfoCategoriesItem } from "@/app/api/__generated__/models/blockInfoCategoriesItem";
 import { NodeExecutionResult } from "@/app/api/__generated__/models/nodeExecutionResult";
-import { NodeContainer } from "./components/NodeContainer";
-import { NodeHeader } from "./components/NodeHeader";
-import { FormCreator } from "../FormCreator";
-import { preprocessInputSchema } from "@/components/renderers/input-renderer/utils/input-schema-pre-processor";
-import { OutputHandler } from "../OutputHandler";
-import { NodeAdvancedToggle } from "./components/NodeAdvancedToggle";
-import { NodeDataRenderer } from "./components/NodeOutput/NodeOutput";
-import { NodeExecutionBadge } from "./components/NodeExecutionBadge";
-import { cn } from "@/lib/utils";
-import { WebhookDisclaimer } from "./components/WebhookDisclaimer";
-import { AyrshareConnectButton } from "./components/AyrshareConnectButton";
 import { NodeModelMetadata } from "@/app/api/__generated__/models/nodeModelMetadata";
+import { preprocessInputSchema } from "@/components/renderers/InputRenderer/utils/input-schema-pre-processor";
+import { cn } from "@/lib/utils";
+import { RJSFSchema } from "@rjsf/utils";
+import { NodeProps, Node as XYNode } from "@xyflow/react";
+import React from "react";
+import { BlockUIType } from "../../../types";
+import { FormCreator } from "../FormCreator";
+import { OutputHandler } from "../OutputHandler";
+import { AyrshareConnectButton } from "./components/AyrshareConnectButton";
+import { NodeAdvancedToggle } from "./components/NodeAdvancedToggle";
+import { NodeContainer } from "./components/NodeContainer";
+import { NodeExecutionBadge } from "./components/NodeExecutionBadge";
+import { NodeHeader } from "./components/NodeHeader";
+import { NodeDataRenderer } from "./components/NodeOutput/NodeOutput";
+import { NodeRightClickMenu } from "./components/NodeRightClickMenu";
+import { StickyNoteBlock } from "./components/StickyNoteBlock";
+import { WebhookDisclaimer } from "./components/WebhookDisclaimer";
 
 export type CustomNodeData = {
   hardcodedValues: {
@@ -88,7 +89,7 @@ export const CustomNode: React.FC<NodeProps<CustomNode>> = React.memo(
 
     // Currently all blockTypes design are similar - that's why i am using the same component for all of them
     // If in future - if we need some drastic change in some blockTypes design - we can create separate components for them
-    return (
+    const node = (
       <NodeContainer selected={selected} nodeId={nodeId} hasErrors={hasErrors}>
         <div className="rounded-xlarge bg-white">
           <NodeHeader data={data} nodeId={nodeId} />
@@ -99,7 +100,7 @@ export const CustomNode: React.FC<NodeProps<CustomNode>> = React.memo(
             nodeId={nodeId}
             uiType={data.uiType}
             className={cn(
-              "bg-white pr-6",
+              "bg-white px-4",
               isWebhook && "pointer-events-none opacity-50",
             )}
             showHandles={showHandles}
@@ -117,6 +118,15 @@ export const CustomNode: React.FC<NodeProps<CustomNode>> = React.memo(
         <NodeExecutionBadge nodeId={nodeId} />
       </NodeContainer>
     );
+
+    return (
+      <NodeRightClickMenu
+        nodeId={nodeId}
+        subGraphID={data.hardcodedValues?.graph_id}
+      >
+        {node}
+      </NodeRightClickMenu>
+    );
   },
 );
 

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

@@ -8,7 +8,7 @@ export const NodeAdvancedToggle = ({ nodeId }: { nodeId: string }) => {
   );
   const setShowAdvanced = useNodeStore((state) => state.setShowAdvanced);
   return (
-    <div className="flex items-center justify-between gap-2 rounded-b-xlarge border-t border-slate-200/50 bg-white px-5 py-3.5">
+    <div className="flex items-center justify-between gap-2 rounded-b-xlarge border-t border-zinc-200 bg-white px-5 py-3.5">
       <Text variant="body" className="font-medium text-slate-700">
         Advanced
       </Text>

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

@@ -22,7 +22,7 @@ export const NodeContainer = ({
   return (
     <div
       className={cn(
-        "z-12 max-w-[370px] rounded-xlarge ring-1 ring-slate-200/60",
+        "z-12 w-[350px] rounded-xlarge ring-1 ring-slate-200/60",
         selected && "shadow-lg ring-2 ring-slate-200",
         status && nodeStyleBasedOnStatus[status],
         hasErrors ? nodeStyleBasedOnStatus[AgentExecutionStatus.FAILED] : "",

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

@@ -1,26 +1,31 @@
-import { Separator } from "@/components/__legacy__/ui/separator";
+import { useCopyPasteStore } from "@/app/(platform)/build/stores/copyPasteStore";
+import { useNodeStore } from "@/app/(platform)/build/stores/nodeStore";
 import {
   DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/molecules/DropdownMenu/DropdownMenu";
-import { DotsThreeOutlineVerticalIcon } from "@phosphor-icons/react";
-import { Copy, Trash2, ExternalLink } from "lucide-react";
-import { useNodeStore } from "@/app/(platform)/build/stores/nodeStore";
-import { useCopyPasteStore } from "@/app/(platform)/build/stores/copyPasteStore";
+import {
+  SecondaryDropdownMenuContent,
+  SecondaryDropdownMenuItem,
+  SecondaryDropdownMenuSeparator,
+} from "@/components/molecules/SecondaryMenu/SecondaryMenu";
+import {
+  ArrowSquareOutIcon,
+  CopyIcon,
+  DotsThreeOutlineVerticalIcon,
+  TrashIcon,
+} from "@phosphor-icons/react";
 import { useReactFlow } from "@xyflow/react";
 
-export const NodeContextMenu = ({
-  nodeId,
-  subGraphID,
-}: {
+type Props = {
   nodeId: string;
   subGraphID?: string;
-}) => {
+};
+
+export const NodeContextMenu = ({ nodeId, subGraphID }: Props) => {
   const { deleteElements } = useReactFlow();
 
-  const handleCopy = () => {
+  function handleCopy() {
     useNodeStore.setState((state) => ({
       nodes: state.nodes.map((node) => ({
         ...node,
@@ -30,47 +35,47 @@ export const NodeContextMenu = ({
 
     useCopyPasteStore.getState().copySelectedNodes();
     useCopyPasteStore.getState().pasteNodes();
-  };
+  }
 
-  const handleDelete = () => {
+  function handleDelete() {
     deleteElements({ nodes: [{ id: nodeId }] });
-  };
+  }
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger className="py-2">
         <DotsThreeOutlineVerticalIcon size={16} weight="fill" />
       </DropdownMenuTrigger>
-      <DropdownMenuContent
-        side="right"
-        align="start"
-        className="rounded-xlarge"
-      >
-        <DropdownMenuItem onClick={handleCopy} className="hover:rounded-xlarge">
-          <Copy className="mr-2 h-4 w-4" />
-          Copy Node
-        </DropdownMenuItem>
+      <SecondaryDropdownMenuContent side="right" align="start">
+        <SecondaryDropdownMenuItem onClick={handleCopy}>
+          <CopyIcon size={20} className="mr-2 dark:text-gray-100" />
+          <span className="dark:text-gray-100">Copy</span>
+        </SecondaryDropdownMenuItem>
+        <SecondaryDropdownMenuSeparator />
 
         {subGraphID && (
-          <DropdownMenuItem
-            onClick={() => window.open(`/build?flowID=${subGraphID}`)}
-            className="hover:rounded-xlarge"
-          >
-            <ExternalLink className="mr-2 h-4 w-4" />
-            Open Agent
-          </DropdownMenuItem>
+          <>
+            <SecondaryDropdownMenuItem
+              onClick={() => window.open(`/build?flowID=${subGraphID}`)}
+            >
+              <ArrowSquareOutIcon
+                size={20}
+                className="mr-2 dark:text-gray-100"
+              />
+              <span className="dark:text-gray-100">Open agent</span>
+            </SecondaryDropdownMenuItem>
+            <SecondaryDropdownMenuSeparator />
+          </>
         )}
 
-        <Separator className="my-2" />
-
-        <DropdownMenuItem
-          onClick={handleDelete}
-          className="text-red-600 hover:rounded-xlarge"
-        >
-          <Trash2 className="mr-2 h-4 w-4" />
-          Delete
-        </DropdownMenuItem>
-      </DropdownMenuContent>
+        <SecondaryDropdownMenuItem variant="destructive" onClick={handleDelete}>
+          <TrashIcon
+            size={20}
+            className="mr-2 text-red-500 dark:text-red-400"
+          />
+          <span className="dark:text-red-400">Delete</span>
+        </SecondaryDropdownMenuItem>
+      </SecondaryDropdownMenuContent>
     </DropdownMenu>
   );
 };

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

@@ -1,29 +1,30 @@
-import { Text } from "@/components/atoms/Text/Text";
-import { beautifyString, cn } from "@/lib/utils";
-import { NodeCost } from "./NodeCost";
-import { NodeBadges } from "./NodeBadges";
-import { NodeContextMenu } from "./NodeContextMenu";
-import { CustomNodeData } from "../CustomNode";
 import { useNodeStore } from "@/app/(platform)/build/stores/nodeStore";
-import { useState } from "react";
+import { Text } from "@/components/atoms/Text/Text";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/atoms/Tooltip/BaseTooltip";
+import { beautifyString, cn } from "@/lib/utils";
+import { useState } from "react";
+import { CustomNodeData } from "../CustomNode";
+import { NodeBadges } from "./NodeBadges";
+import { NodeContextMenu } from "./NodeContextMenu";
+import { NodeCost } from "./NodeCost";
 
-export const NodeHeader = ({
-  data,
-  nodeId,
-}: {
+type Props = {
   data: CustomNodeData;
   nodeId: string;
-}) => {
+};
+
+export const NodeHeader = ({ data, nodeId }: Props) => {
   const updateNodeData = useNodeStore((state) => state.updateNodeData);
   const title = (data.metadata?.customized_name as string) || data.title;
   const [isEditingTitle, setIsEditingTitle] = useState(false);
-  const [editedTitle, setEditedTitle] = useState(title);
+  const [editedTitle, setEditedTitle] = useState(
+    beautifyString(title).replace("Block", "").trim(),
+  );
 
   const handleTitleEdit = () => {
     updateNodeData(nodeId, {
@@ -41,7 +42,7 @@ export const NodeHeader = ({
   };
 
   return (
-    <div className="flex h-auto flex-col gap-1 rounded-xlarge border-b border-slate-200/50 bg-gradient-to-r from-slate-50/80 to-white/90 px-4 py-4 pt-3">
+    <div className="flex h-auto flex-col gap-1 rounded-xlarge border-b border-zinc-200 bg-gradient-to-r from-slate-50/80 to-white/90 px-4 py-4 pt-3">
       {/* Title row with context menu */}
       <div className="flex items-start justify-between gap-2">
         <div className="flex min-w-0 flex-1 items-center gap-2">
@@ -68,12 +69,12 @@ export const NodeHeader = ({
                   <TooltipTrigger asChild>
                     <div>
                       <Text variant="large-semibold" className="line-clamp-1">
-                        {beautifyString(title)}
+                        {beautifyString(title).replace("Block", "").trim()}
                       </Text>
                     </div>
                   </TooltipTrigger>
                   <TooltipContent>
-                    <p>{beautifyString(title)}</p>
+                    <p>{beautifyString(title).replace("Block", "").trim()}</p>
                   </TooltipContent>
                 </Tooltip>
               </TooltipProvider>

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

@@ -23,7 +23,7 @@ export const NodeDataRenderer = ({ nodeId }: { nodeId: string }) => {
   }
 
   return (
-    <div className="flex flex-col gap-3 rounded-b-xl border-t border-slate-200/50 px-4 py-4">
+    <div className="flex flex-col gap-3 rounded-b-xl border-t border-zinc-200 px-4 py-4">
       <div className="flex items-center justify-between">
         <Text variant="body-medium" className="!font-semibold text-slate-700">
           Node Output

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

@@ -0,0 +1,104 @@
+import { useCopyPasteStore } from "@/app/(platform)/build/stores/copyPasteStore";
+import { useNodeStore } from "@/app/(platform)/build/stores/nodeStore";
+import {
+  SecondaryMenuContent,
+  SecondaryMenuItem,
+  SecondaryMenuSeparator,
+} from "@/components/molecules/SecondaryMenu/SecondaryMenu";
+import { ArrowSquareOutIcon, CopyIcon, TrashIcon } from "@phosphor-icons/react";
+import * as ContextMenu from "@radix-ui/react-context-menu";
+import { useReactFlow } from "@xyflow/react";
+import { useEffect, useRef } from "react";
+import { CustomNode } from "../CustomNode";
+
+type Props = {
+  nodeId: string;
+  subGraphID?: string;
+  children: React.ReactNode;
+};
+
+const DOUBLE_CLICK_TIMEOUT = 300;
+
+export function NodeRightClickMenu({ nodeId, subGraphID, children }: Props) {
+  const { deleteElements } = useReactFlow<CustomNode>();
+  const lastRightClickTime = useRef<number>(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  function copyNode() {
+    useNodeStore.setState((state) => ({
+      nodes: state.nodes.map((node) => ({
+        ...node,
+        selected: node.id === nodeId,
+      })),
+    }));
+
+    useCopyPasteStore.getState().copySelectedNodes();
+    useCopyPasteStore.getState().pasteNodes();
+  }
+
+  function deleteNode() {
+    deleteElements({ nodes: [{ id: nodeId }] });
+  }
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    function handleContextMenu(e: MouseEvent) {
+      const now = Date.now();
+      const timeSinceLastClick = now - lastRightClickTime.current;
+
+      if (timeSinceLastClick < DOUBLE_CLICK_TIMEOUT) {
+        e.stopImmediatePropagation();
+        lastRightClickTime.current = 0;
+        return;
+      }
+
+      lastRightClickTime.current = now;
+    }
+
+    container.addEventListener("contextmenu", handleContextMenu, true);
+
+    return () => {
+      container.removeEventListener("contextmenu", handleContextMenu, true);
+    };
+  }, []);
+
+  return (
+    <ContextMenu.Root>
+      <ContextMenu.Trigger asChild>
+        <div ref={containerRef}>{children}</div>
+      </ContextMenu.Trigger>
+      <SecondaryMenuContent>
+        <SecondaryMenuItem onSelect={copyNode}>
+          <CopyIcon size={20} className="mr-2 dark:text-gray-100" />
+          <span className="dark:text-gray-100">Copy</span>
+        </SecondaryMenuItem>
+        <SecondaryMenuSeparator />
+
+        {subGraphID && (
+          <>
+            <SecondaryMenuItem
+              onClick={() => window.open(`/build?flowID=${subGraphID}`)}
+            >
+              <ArrowSquareOutIcon
+                size={20}
+                className="mr-2 dark:text-gray-100"
+              />
+              <span className="dark:text-gray-100">Open agent</span>
+            </SecondaryMenuItem>
+            <SecondaryMenuSeparator />
+          </>
+        )}
+
+        <SecondaryMenuItem variant="destructive" onSelect={deleteNode}>
+          <TrashIcon
+            size={20}
+            className="mr-2 text-red-500 dark:text-red-400"
+          />
+          <span className="dark:text-red-400">Delete</span>
+        </SecondaryMenuItem>
+      </SecondaryMenuContent>
+    </ContextMenu.Root>
+  );
+}

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

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { FormCreator } from "../../FormCreator";
-import { preprocessInputSchema } from "@/components/renderers/input-renderer/utils/input-schema-pre-processor";
+import { preprocessInputSchema } from "@/components/renderers/InputRenderer/utils/input-schema-pre-processor";
 import { CustomNodeData } from "../CustomNode";
 import { Text } from "@/components/atoms/Text/Text";
 import { cn } from "@/lib/utils";

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

@@ -3,7 +3,7 @@ import React from "react";
 import { uiSchema } from "./uiSchema";
 import { useNodeStore } from "../../../stores/nodeStore";
 import { BlockUIType } from "../../types";
-import { FormRenderer } from "@/components/renderers/input-renderer/FormRenderer";
+import { FormRenderer } from "@/components/renderers/InputRenderer/FormRenderer";
 
 export const FormCreator = React.memo(
   ({

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

@@ -4,7 +4,7 @@ import { CaretDownIcon, InfoIcon } from "@phosphor-icons/react";
 import { RJSFSchema } from "@rjsf/utils";
 import { useState } from "react";
 
-import NodeHandle from "../handlers/NodeHandle";
+import { OutputNodeHandle } from "../handlers/NodeHandle";
 import {
   Tooltip,
   TooltipContent,
@@ -13,7 +13,6 @@ import {
 } from "@/components/atoms/Tooltip/BaseTooltip";
 import { useEdgeStore } from "@/app/(platform)/build/stores/edgeStore";
 import { getTypeDisplayInfo } from "./helpers";
-import { generateHandleId } from "../handlers/helpers";
 import { BlockUIType } from "../../types";
 
 export const OutputHandler = ({
@@ -29,8 +28,73 @@ export const OutputHandler = ({
   const properties = outputSchema?.properties || {};
   const [isOutputVisible, setIsOutputVisible] = useState(true);
 
+  const showHandles = uiType !== BlockUIType.OUTPUT;
+
+  const renderOutputHandles = (
+    schema: RJSFSchema,
+    keyPrefix: string = "",
+    titlePrefix: string = "",
+  ): React.ReactNode[] => {
+    return Object.entries(schema).map(
+      ([key, fieldSchema]: [string, RJSFSchema]) => {
+        const fullKey = keyPrefix ? `${keyPrefix}_#_${key}` : key;
+        const fieldTitle = titlePrefix + (fieldSchema?.title || key);
+
+        const isConnected = isOutputConnected(nodeId, fullKey);
+        const shouldShow = isConnected || isOutputVisible;
+        const { displayType, colorClass, hexColor } =
+          getTypeDisplayInfo(fieldSchema);
+
+        return shouldShow ? (
+          <div key={fullKey} className="flex flex-col items-end gap-2">
+            <div className="relative flex items-center gap-2">
+              {fieldSchema?.description && (
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <span
+                        style={{ marginLeft: 6, cursor: "pointer" }}
+                        aria-label="info"
+                        tabIndex={0}
+                      >
+                        <InfoIcon />
+                      </span>
+                    </TooltipTrigger>
+                    <TooltipContent>{fieldSchema?.description}</TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              )}
+              <Text variant="body" className="text-slate-700">
+                {fieldTitle}
+              </Text>
+              <Text variant="small" as="span" className={colorClass}>
+                ({displayType})
+              </Text>
+
+              {showHandles && (
+                <OutputNodeHandle
+                  field_name={fullKey}
+                  nodeId={nodeId}
+                  hexColor={hexColor}
+                />
+              )}
+            </div>
+
+            {/* Recursively render nested properties */}
+            {fieldSchema?.properties &&
+              renderOutputHandles(
+                fieldSchema.properties,
+                fullKey,
+                `${fieldTitle}.`,
+              )}
+          </div>
+        ) : null;
+      },
+    );
+  };
+
   return (
-    <div className="flex flex-col items-end justify-between gap-2 rounded-b-xlarge border-t border-slate-200/50 bg-white py-3.5">
+    <div className="flex flex-col items-end justify-between gap-2 rounded-b-xlarge border-t border-zinc-200 bg-white py-3.5">
       <Button
         variant="ghost"
         className="mr-4 h-fit min-w-0 p-0 hover:border-transparent hover:bg-transparent"
@@ -49,50 +113,9 @@ export const OutputHandler = ({
         </Text>
       </Button>
 
-      {
-        <div className="flex flex-col items-end gap-2">
-          {Object.entries(properties).map(([key, property]: [string, any]) => {
-            const isConnected = isOutputConnected(nodeId, key);
-            const shouldShow = isConnected || isOutputVisible;
-            const { displayType, colorClass } = getTypeDisplayInfo(property);
-
-            return shouldShow ? (
-              <div key={key} className="relative flex items-center gap-2">
-                {property?.description && (
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <span
-                          style={{ marginLeft: 6, cursor: "pointer" }}
-                          aria-label="info"
-                          tabIndex={0}
-                        >
-                          <InfoIcon />
-                        </span>
-                      </TooltipTrigger>
-                      <TooltipContent>{property?.description}</TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-                )}
-                <Text variant="body" className="text-slate-700">
-                  {property?.title || key}{" "}
-                </Text>
-                <Text variant="small" as="span" className={colorClass}>
-                  ({displayType})
-                </Text>
-
-                <NodeHandle
-                  handleId={
-                    uiType === BlockUIType.AGENT ? key : generateHandleId(key)
-                  }
-                  isConnected={isConnected}
-                  side="right"
-                />
-              </div>
-            ) : null;
-          })}
-        </div>
-      }
+      <div className="flex flex-col items-end gap-2">
+        {renderOutputHandles(properties)}
+      </div>
     </div>
   );
 };

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/helpers.ts

@@ -92,14 +92,38 @@ export const getTypeDisplayInfo = (schema: any) => {
   if (schema?.type === "string" && schema?.format) {
     const formatMap: Record<
       string,
-      { displayType: string; colorClass: string }
+      { displayType: string; colorClass: string; hexColor: string }
     > = {
-      file: { displayType: "file", colorClass: "!text-green-500" },
-      date: { displayType: "date", colorClass: "!text-blue-500" },
-      time: { displayType: "time", colorClass: "!text-blue-500" },
-      "date-time": { displayType: "datetime", colorClass: "!text-blue-500" },
-      "long-text": { displayType: "text", colorClass: "!text-green-500" },
-      "short-text": { displayType: "text", colorClass: "!text-green-500" },
+      file: {
+        displayType: "file",
+        colorClass: "!text-green-500",
+        hexColor: "#22c55e",
+      },
+      date: {
+        displayType: "date",
+        colorClass: "!text-blue-500",
+        hexColor: "#3b82f6",
+      },
+      time: {
+        displayType: "time",
+        colorClass: "!text-blue-500",
+        hexColor: "#3b82f6",
+      },
+      "date-time": {
+        displayType: "datetime",
+        colorClass: "!text-blue-500",
+        hexColor: "#3b82f6",
+      },
+      "long-text": {
+        displayType: "text",
+        colorClass: "!text-green-500",
+        hexColor: "#22c55e",
+      },
+      "short-text": {
+        displayType: "text",
+        colorClass: "!text-green-500",
+        hexColor: "#22c55e",
+      },
     };
 
     const formatInfo = formatMap[schema.format];
@@ -131,10 +155,23 @@ export const getTypeDisplayInfo = (schema: any) => {
     any: "!text-gray-500",
   };
 
+  const hexColorMap: Record<string, string> = {
+    string: "#22c55e",
+    number: "#3b82f6",
+    integer: "#3b82f6",
+    boolean: "#eab308",
+    object: "#a855f7",
+    array: "#6366f1",
+    null: "#6b7280",
+    any: "#6b7280",
+  };
+
   const colorClass = colorMap[schema?.type] || "!text-gray-500";
+  const hexColor = hexColorMap[schema?.type] || "#6b7280";
 
   return {
     displayType,
     colorClass,
+    hexColor,
   };
 };

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

@@ -0,0 +1,57 @@
+import { useBlockMenuStore } from "@/app/(platform)/build/stores/blockMenuStore";
+import { FilterChip } from "../FilterChip";
+import { categories } from "./constants";
+import { FilterSheet } from "../FilterSheet/FilterSheet";
+import { GetV2BuilderSearchFilterAnyOfItem } from "@/app/api/__generated__/models/getV2BuilderSearchFilterAnyOfItem";
+
+export const BlockMenuFilters = () => {
+  const {
+    filters,
+    addFilter,
+    removeFilter,
+    categoryCounts,
+    creators,
+    addCreator,
+    removeCreator,
+  } = useBlockMenuStore();
+
+  const handleFilterClick = (filter: GetV2BuilderSearchFilterAnyOfItem) => {
+    if (filters.includes(filter)) {
+      removeFilter(filter);
+    } else {
+      addFilter(filter);
+    }
+  };
+
+  const handleCreatorClick = (creator: string) => {
+    if (creators.includes(creator)) {
+      removeCreator(creator);
+    } else {
+      addCreator(creator);
+    }
+  };
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      <FilterSheet categories={categories} />
+      {creators.length > 0 &&
+        creators.map((creator) => (
+          <FilterChip
+            key={creator}
+            name={"Created by " + creator.slice(0, 10) + "..."}
+            selected={creators.includes(creator)}
+            onClick={() => handleCreatorClick(creator)}
+          />
+        ))}
+      {categories.map((category) => (
+        <FilterChip
+          key={category.key}
+          name={category.name}
+          selected={filters.includes(category.key)}
+          onClick={() => handleFilterClick(category.key)}
+          number={categoryCounts[category.key] ?? 0}
+        />
+      ))}
+    </div>
+  );
+};

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/BlockMenuFilters/constants.ts

@@ -0,0 +1,15 @@
+import { GetV2BuilderSearchFilterAnyOfItem } from "@/app/api/__generated__/models/getV2BuilderSearchFilterAnyOfItem";
+import { CategoryKey } from "./types";
+
+export const categories: Array<{ key: CategoryKey; name: string }> = [
+  { key: GetV2BuilderSearchFilterAnyOfItem.blocks, name: "Blocks" },
+  {
+    key: GetV2BuilderSearchFilterAnyOfItem.integrations,
+    name: "Integrations",
+  },
+  {
+    key: GetV2BuilderSearchFilterAnyOfItem.marketplace_agents,
+    name: "Marketplace agents",
+  },
+  { key: GetV2BuilderSearchFilterAnyOfItem.my_agents, name: "My agents" },
+];

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/BlockMenuFilters/types.ts

@@ -0,0 +1,26 @@
+import { GetV2BuilderSearchFilterAnyOfItem } from "@/app/api/__generated__/models/getV2BuilderSearchFilterAnyOfItem";
+
+export type DefaultStateType =
+  | "suggestion"
+  | "all_blocks"
+  | "input_blocks"
+  | "action_blocks"
+  | "output_blocks"
+  | "integrations"
+  | "marketplace_agents"
+  | "my_agents";
+
+export type CategoryKey = GetV2BuilderSearchFilterAnyOfItem;
+
+export interface Filters {
+  categories: {
+    blocks: boolean;
+    integrations: boolean;
+    marketplace_agents: boolean;
+    my_agents: boolean;
+    providers: boolean;
+  };
+  createdBy: string[];
+}
+
+export type CategoryCounts = Record<CategoryKey, number>;

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

@@ -1,111 +1,14 @@
 import { Text } from "@/components/atoms/Text/Text";
-import { useBlockMenuSearch } from "./useBlockMenuSearch";
-import { InfiniteScroll } from "@/components/contextual/InfiniteScroll/InfiniteScroll";
-import { LoadingSpinner } from "@/components/__legacy__/ui/loading";
-import { SearchResponseItemsItem } from "@/app/api/__generated__/models/searchResponseItemsItem";
-import { MarketplaceAgentBlock } from "../MarketplaceAgentBlock";
-import { Block } from "../Block";
-import { UGCAgentBlock } from "../UGCAgentBlock";
-import { getSearchItemType } from "./helper";
-import { useBlockMenuStore } from "../../../../stores/blockMenuStore";
 import { blockMenuContainerStyle } from "../style";
-import { cn } from "@/lib/utils";
-import { NoSearchResult } from "../NoSearchResult";
+import { BlockMenuFilters } from "../BlockMenuFilters/BlockMenuFilters";
+import { BlockMenuSearchContent } from "../BlockMenuSearchContent/BlockMenuSearchContent";
 
 export const BlockMenuSearch = () => {
-  const {
-    searchResults,
-    isFetchingNextPage,
-    fetchNextPage,
-    hasNextPage,
-    searchLoading,
-    handleAddLibraryAgent,
-    handleAddMarketplaceAgent,
-    addingLibraryAgentId,
-    addingMarketplaceAgentSlug,
-  } = useBlockMenuSearch();
-  const { searchQuery } = useBlockMenuStore();
-
-  if (searchLoading) {
-    return (
-      <div
-        className={cn(
-          blockMenuContainerStyle,
-          "flex items-center justify-center",
-        )}
-      >
-        <LoadingSpinner className="size-13" />
-      </div>
-    );
-  }
-
-  if (searchResults.length === 0) {
-    return <NoSearchResult />;
-  }
-
   return (
     <div className={blockMenuContainerStyle}>
+      <BlockMenuFilters />
       <Text variant="body-medium">Search results</Text>
-      <InfiniteScroll
-        isFetchingNextPage={isFetchingNextPage}
-        fetchNextPage={fetchNextPage}
-        hasNextPage={hasNextPage}
-        loader={<LoadingSpinner className="size-13" />}
-        className="space-y-2.5"
-      >
-        {searchResults.map((item: SearchResponseItemsItem, index: number) => {
-          const { type, data } = getSearchItemType(item);
-          // backend give support to these 3 types only [right now] - we need to give support to integration and ai agent types in follow up PRs
-          switch (type) {
-            case "store_agent":
-              return (
-                <MarketplaceAgentBlock
-                  key={index}
-                  slug={data.slug}
-                  highlightedText={searchQuery}
-                  title={data.agent_name}
-                  image_url={data.agent_image}
-                  creator_name={data.creator}
-                  number_of_runs={data.runs}
-                  loading={addingMarketplaceAgentSlug === data.slug}
-                  onClick={() =>
-                    handleAddMarketplaceAgent({
-                      creator_name: data.creator,
-                      slug: data.slug,
-                    })
-                  }
-                />
-              );
-            case "block":
-              return (
-                <Block
-                  key={index}
-                  title={data.name}
-                  highlightedText={searchQuery}
-                  description={data.description}
-                  blockData={data}
-                />
-              );
-
-            case "library_agent":
-              return (
-                <UGCAgentBlock
-                  key={index}
-                  title={data.name}
-                  highlightedText={searchQuery}
-                  image_url={data.image_url}
-                  version={data.graph_version}
-                  edited_time={data.updated_at}
-                  isLoading={addingLibraryAgentId === data.id}
-                  onClick={() => handleAddLibraryAgent(data)}
-                />
-              );
-
-            default:
-              return null;
-          }
-        })}
-      </InfiniteScroll>
+      <BlockMenuSearchContent />
     </div>
   );
 };

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

@@ -0,0 +1,108 @@
+import { SearchResponseItemsItem } from "@/app/api/__generated__/models/searchResponseItemsItem";
+import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
+import { InfiniteScroll } from "@/components/contextual/InfiniteScroll/InfiniteScroll";
+import { getSearchItemType } from "./helper";
+import { MarketplaceAgentBlock } from "../MarketplaceAgentBlock";
+import { Block } from "../Block";
+import { UGCAgentBlock } from "../UGCAgentBlock";
+import { useBlockMenuSearchContent } from "./useBlockMenuSearchContent";
+import { useBlockMenuStore } from "@/app/(platform)/build/stores/blockMenuStore";
+import { cn } from "@/lib/utils";
+import { blockMenuContainerStyle } from "../style";
+import { NoSearchResult } from "../NoSearchResult";
+
+export const BlockMenuSearchContent = () => {
+  const {
+    searchResults,
+    isFetchingNextPage,
+    fetchNextPage,
+    hasNextPage,
+    searchLoading,
+    handleAddLibraryAgent,
+    handleAddMarketplaceAgent,
+    addingLibraryAgentId,
+    addingMarketplaceAgentSlug,
+  } = useBlockMenuSearchContent();
+
+  const { searchQuery } = useBlockMenuStore();
+
+  if (searchLoading) {
+    return (
+      <div
+        className={cn(
+          blockMenuContainerStyle,
+          "flex items-center justify-center",
+        )}
+      >
+        <LoadingSpinner className="size-13" />
+      </div>
+    );
+  }
+
+  if (searchResults.length === 0) {
+    return <NoSearchResult />;
+  }
+
+  return (
+    <InfiniteScroll
+      isFetchingNextPage={isFetchingNextPage}
+      fetchNextPage={fetchNextPage}
+      hasNextPage={hasNextPage}
+      loader={<LoadingSpinner className="size-13" />}
+      className="space-y-2.5"
+    >
+      {searchResults.map((item: SearchResponseItemsItem, index: number) => {
+        const { type, data } = getSearchItemType(item);
+        // backend give support to these 3 types only [right now] - we need to give support to integration and ai agent types in follow up PRs
+        switch (type) {
+          case "store_agent":
+            return (
+              <MarketplaceAgentBlock
+                key={index}
+                slug={data.slug}
+                highlightedText={searchQuery}
+                title={data.agent_name}
+                image_url={data.agent_image}
+                creator_name={data.creator}
+                number_of_runs={data.runs}
+                loading={addingMarketplaceAgentSlug === data.slug}
+                onClick={() =>
+                  handleAddMarketplaceAgent({
+                    creator_name: data.creator,
+                    slug: data.slug,
+                  })
+                }
+              />
+            );
+          case "block":
+            return (
+              <Block
+                key={index}
+                title={data.name}
+                highlightedText={searchQuery}
+                description={data.description}
+                blockData={data}
+              />
+            );
+
+          case "library_agent":
+            return (
+              <UGCAgentBlock
+                key={index}
+                title={data.name}
+                highlightedText={searchQuery}
+                image_url={data.image_url}
+                version={data.graph_version}
+                edited_time={data.updated_at}
+                isLoading={addingLibraryAgentId === data.id}
+                onClick={() => handleAddLibraryAgent(data)}
+              />
+            );
+
+          default:
+            return null;
+        }
+      })}
+    </InfiniteScroll>
+  );
+};

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

@@ -23,9 +23,19 @@ import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
 import { getQueryClient } from "@/lib/react-query/queryClient";
 import { useToast } from "@/components/molecules/Toast/use-toast";
 import * as Sentry from "@sentry/nextjs";
+import { GetV2BuilderSearchFilterAnyOfItem } from "@/app/api/__generated__/models/getV2BuilderSearchFilterAnyOfItem";
+
+export const useBlockMenuSearchContent = () => {
+  const {
+    searchQuery,
+    searchId,
+    setSearchId,
+    filters,
+    setCreatorsList,
+    creators,
+    setCategoryCounts,
+  } = useBlockMenuStore();
 
-export const useBlockMenuSearch = () => {
-  const { searchQuery, searchId, setSearchId } = useBlockMenuStore();
   const { toast } = useToast();
   const { addAgentToBuilder, addLibraryAgentToBuilder } =
     useAddAgentToBuilder();
@@ -57,6 +67,8 @@ export const useBlockMenuSearch = () => {
       page_size: 8,
       search_query: searchQuery,
       search_id: searchId,
+      filter: filters.length > 0 ? filters : undefined,
+      by_creator: creators.length > 0 ? creators : undefined,
     },
     {
       query: { getNextPageParam: getPaginationNextPageNumber },
@@ -98,6 +110,26 @@ export const useBlockMenuSearch = () => {
     }
   }, [searchQueryData, searchId, setSearchId]);
 
+  // from all the results, we need to get all the unique creators
+  useEffect(() => {
+    if (!searchQueryData?.pages?.length) {
+      return;
+    }
+    const latestData = okData(searchQueryData.pages.at(-1));
+    setCategoryCounts(
+      (latestData?.total_items as Record<
+        GetV2BuilderSearchFilterAnyOfItem,
+        number
+      >) || {
+        blocks: 0,
+        integrations: 0,
+        marketplace_agents: 0,
+        my_agents: 0,
+      },
+    );
+    setCreatorsList(latestData?.items || []);
+  }, [searchQueryData]);
+
   useEffect(() => {
     if (searchId && !searchQuery) {
       resetSearchSession();

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

@@ -1,7 +1,9 @@
 import { Button } from "@/components/__legacy__/ui/button";
 import { cn } from "@/lib/utils";
-import { X } from "lucide-react";
-import React, { ButtonHTMLAttributes } from "react";
+import { XIcon } from "@phosphor-icons/react";
+import { AnimatePresence, motion } from "framer-motion";
+
+import React, { ButtonHTMLAttributes, useState } from "react";
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   selected?: boolean;
@@ -16,39 +18,51 @@ export const FilterChip: React.FC<Props> = ({
   className,
   ...rest
 }) => {
+  const [isHovered, setIsHovered] = useState(false);
   return (
-    <Button
-      className={cn(
-        "group w-fit space-x-1 rounded-[1.5rem] border border-zinc-300 bg-transparent px-[0.625rem] py-[0.375rem] shadow-none transition-transform duration-300 ease-in-out",
-        "hover:border-violet-500 hover:bg-transparent focus:ring-0 disabled:cursor-not-allowed",
-        selected && "border-0 bg-violet-700 hover:border",
-        className,
-      )}
-      {...rest}
-    >
-      <span
+    <AnimatePresence mode="wait">
+      <Button
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
         className={cn(
-          "font-sans text-sm font-medium leading-[1.375rem] text-zinc-600 group-hover:text-zinc-600 group-disabled:text-zinc-400",
-          selected && "text-zinc-50",
+          "group w-fit space-x-1 rounded-[1.5rem] border border-zinc-300 bg-transparent px-[0.625rem] py-[0.375rem] shadow-none",
+          "hover:border-violet-500 hover:bg-transparent focus:ring-0 disabled:cursor-not-allowed",
+          selected && "border-0 bg-violet-700 hover:border",
+          className,
         )}
+        {...rest}
       >
-        {name}
-      </span>
-      {selected && (
-        <>
-          <span className="flex h-4 w-4 items-center justify-center rounded-full bg-zinc-50 transition-all duration-300 ease-in-out group-hover:hidden">
-            <X
-              className="h-3 w-3 rounded-full text-violet-700"
-              strokeWidth={2}
-            />
-          </span>
-          {number !== undefined && (
-            <span className="hidden h-[1.375rem] items-center rounded-[1.25rem] bg-violet-700 p-[0.375rem] text-zinc-50 transition-all duration-300 ease-in-out animate-in fade-in zoom-in group-hover:flex">
-              {number > 100 ? "100+" : number}
-            </span>
+        <span
+          className={cn(
+            "font-sans text-sm font-medium leading-[1.375rem] text-zinc-600 group-hover:text-zinc-600 group-disabled:text-zinc-400",
+            selected && "text-zinc-50",
           )}
-        </>
-      )}
-    </Button>
+        >
+          {name}
+        </span>
+        {selected && !isHovered && (
+          <motion.span
+            initial={{ opacity: 0.5, scale: 0.5, filter: "blur(20px)" }}
+            animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
+            exit={{ opacity: 0.5, scale: 0.5, filter: "blur(20px)" }}
+            transition={{ duration: 0.3, type: "spring", bounce: 0.2 }}
+            className="flex h-4 w-4 items-center justify-center rounded-full bg-zinc-50"
+          >
+            <XIcon size={12} weight="bold" className="text-violet-700" />
+          </motion.span>
+        )}
+        {number !== undefined && isHovered && (
+          <motion.span
+            initial={{ opacity: 0.5, scale: 0.5, filter: "blur(10px)" }}
+            animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
+            exit={{ opacity: 0.5, scale: 0.5, filter: "blur(10px)" }}
+            transition={{ duration: 0.3, type: "spring", bounce: 0.2 }}
+            className="flex h-[1.375rem] items-center rounded-[1.25rem] bg-violet-700 p-[0.375rem] text-zinc-50"
+          >
+            {number > 100 ? "100+" : number}
+          </motion.span>
+        )}
+      </Button>
+    </AnimatePresence>
   );
 };

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

@@ -0,0 +1,156 @@
+import { FilterChip } from "../FilterChip";
+import { cn } from "@/lib/utils";
+import { CategoryKey } from "../BlockMenuFilters/types";
+import { AnimatePresence, motion } from "framer-motion";
+import { XIcon } from "@phosphor-icons/react";
+import { Button } from "@/components/atoms/Button/Button";
+import { Text } from "@/components/atoms/Text/Text";
+import { Separator } from "@/components/__legacy__/ui/separator";
+import { Checkbox } from "@/components/__legacy__/ui/checkbox";
+import { useFilterSheet } from "./useFilterSheet";
+import { INITIAL_CREATORS_TO_SHOW } from "./constant";
+
+export function FilterSheet({
+  categories,
+}: {
+  categories: Array<{ key: CategoryKey; name: string }>;
+}) {
+  const {
+    isOpen,
+    localCategories,
+    localCreators,
+    displayedCreatorsCount,
+    handleLocalCategoryChange,
+    handleToggleShowMoreCreators,
+    handleLocalCreatorChange,
+    handleClearFilters,
+    handleCloseButton,
+    handleApplyFilters,
+    hasLocalActiveFilters,
+    visibleCreators,
+    creators,
+    handleOpenFilters,
+    hasActiveFilters,
+  } = useFilterSheet();
+
+  return (
+    <div className="m-0 inline w-fit p-0">
+      <FilterChip
+        name={hasActiveFilters() ? "Edit filters" : "All filters"}
+        onClick={handleOpenFilters}
+      />
+
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            className={cn(
+              "absolute bottom-2 left-2 top-2 z-20 w-3/4 max-w-[22.5rem] space-y-4 overflow-hidden rounded-[0.75rem] bg-white pb-4 shadow-[0_4px_12px_2px_rgba(0,0,0,0.1)]",
+            )}
+            initial={{ x: "-100%", filter: "blur(10px)" }}
+            animate={{ x: 0, filter: "blur(0px)" }}
+            exit={{ x: "-110%", filter: "blur(10px)" }}
+            transition={{ duration: 0.4, type: "spring", bounce: 0.2 }}
+          >
+            {/* Top section */}
+            <div className="flex items-center justify-between px-5 pt-4">
+              <Text variant="body">Filters</Text>
+              <Button
+                className="p-0"
+                variant="ghost"
+                size="icon"
+                onClick={handleCloseButton}
+              >
+                <XIcon size={20} />
+              </Button>
+            </div>
+
+            <Separator className="h-[1px] w-full text-zinc-300" />
+
+            {/* Category section */}
+            <div className="space-y-4 px-5">
+              <Text variant="large">Categories</Text>
+              <div className="space-y-2">
+                {categories.map((category) => (
+                  <div
+                    key={category.key}
+                    className="flex items-center space-x-2"
+                  >
+                    <Checkbox
+                      id={category.key}
+                      checked={localCategories.includes(category.key)}
+                      onCheckedChange={() =>
+                        handleLocalCategoryChange(category.key)
+                      }
+                      className="border border-[#D4D4D4] shadow-none data-[state=checked]:border-none data-[state=checked]:bg-violet-700 data-[state=checked]:text-white"
+                    />
+                    <label
+                      htmlFor={category.key}
+                      className="font-sans text-sm leading-[1.375rem] text-zinc-600"
+                    >
+                      {category.name}
+                    </label>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Created by section */}
+            <div className="space-y-4 px-5">
+              <p className="font-sans text-base font-medium text-zinc-800">
+                Created by
+              </p>
+              <div className="space-y-2">
+                {visibleCreators.map((creator, i) => (
+                  <div key={i} className="flex items-center space-x-2">
+                    <Checkbox
+                      id={`creator-${creator}`}
+                      checked={localCreators.includes(creator)}
+                      onCheckedChange={() => handleLocalCreatorChange(creator)}
+                      className="border border-[#D4D4D4] shadow-none data-[state=checked]:border-none data-[state=checked]:bg-violet-700 data-[state=checked]:text-white"
+                    />
+                    <label
+                      htmlFor={`creator-${creator}`}
+                      className="font-sans text-sm leading-[1.375rem] text-zinc-600"
+                    >
+                      {creator}
+                    </label>
+                  </div>
+                ))}
+              </div>
+              {creators.length > INITIAL_CREATORS_TO_SHOW && (
+                <Button
+                  variant={"link"}
+                  className="m-0 p-0 font-sans text-sm font-medium leading-[1.375rem] text-zinc-800 underline hover:text-zinc-600"
+                  onClick={handleToggleShowMoreCreators}
+                >
+                  {displayedCreatorsCount < creators.length ? "More" : "Less"}
+                </Button>
+              )}
+            </div>
+
+            {/* Footer section */}
+            <div className="fixed bottom-0 flex w-full justify-between gap-3 border-t border-zinc-200 bg-white px-5 py-3">
+              <Button
+                size="small"
+                variant={"outline"}
+                onClick={handleClearFilters}
+                className="rounded-[8px] px-2 py-1.5"
+              >
+                Clear
+              </Button>
+
+              <Button
+                size="small"
+                onClick={handleApplyFilters}
+                disabled={!hasLocalActiveFilters()}
+                className="rounded-[8px] px-2 py-1.5"
+              >
+                Apply filters
+              </Button>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/FilterSheet/constant.ts

@@ -0,0 +1 @@
+export const INITIAL_CREATORS_TO_SHOW = 5;

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/FilterSheet/useFilterSheet.ts

@@ -0,0 +1,100 @@
+import { useBlockMenuStore } from "@/app/(platform)/build/stores/blockMenuStore";
+import { useState } from "react";
+import { INITIAL_CREATORS_TO_SHOW } from "./constant";
+import { GetV2BuilderSearchFilterAnyOfItem } from "@/app/api/__generated__/models/getV2BuilderSearchFilterAnyOfItem";
+
+export const useFilterSheet = () => {
+  const { filters, creators_list, creators, setFilters, setCreators } =
+    useBlockMenuStore();
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [localCategories, setLocalCategories] =
+    useState<GetV2BuilderSearchFilterAnyOfItem[]>(filters);
+  const [localCreators, setLocalCreators] = useState<string[]>(creators);
+  const [displayedCreatorsCount, setDisplayedCreatorsCount] = useState(
+    INITIAL_CREATORS_TO_SHOW,
+  );
+
+  const handleLocalCategoryChange = (
+    category: GetV2BuilderSearchFilterAnyOfItem,
+  ) => {
+    setLocalCategories((prev) => {
+      if (prev.includes(category)) {
+        return prev.filter((c) => c !== category);
+      }
+      return [...prev, category];
+    });
+  };
+
+  const hasActiveFilters = () => {
+    return filters.length > 0 || creators.length > 0;
+  };
+
+  const handleToggleShowMoreCreators = () => {
+    if (displayedCreatorsCount < creators.length) {
+      setDisplayedCreatorsCount(creators.length);
+    } else {
+      setDisplayedCreatorsCount(INITIAL_CREATORS_TO_SHOW);
+    }
+  };
+
+  const handleLocalCreatorChange = (creator: string) => {
+    setLocalCreators((prev) => {
+      if (prev.includes(creator)) {
+        return prev.filter((c) => c !== creator);
+      }
+      return [...prev, creator];
+    });
+  };
+
+  const handleClearFilters = () => {
+    setLocalCategories([]);
+    setLocalCreators([]);
+    setDisplayedCreatorsCount(INITIAL_CREATORS_TO_SHOW);
+  };
+
+  const handleCloseButton = () => {
+    setIsOpen(false);
+    setLocalCategories(filters);
+    setLocalCreators(creators);
+    setDisplayedCreatorsCount(INITIAL_CREATORS_TO_SHOW);
+  };
+
+  const handleApplyFilters = () => {
+    setFilters(localCategories);
+    setCreators(localCreators);
+    setIsOpen(false);
+  };
+
+  const handleOpenFilters = () => {
+    setIsOpen(true);
+    setLocalCategories(filters);
+    setLocalCreators(creators);
+  };
+
+  const hasLocalActiveFilters = () => {
+    return localCategories.length > 0 || localCreators.length > 0;
+  };
+
+  const visibleCreators = creators_list.slice(0, displayedCreatorsCount);
+
+  return {
+    creators,
+    isOpen,
+    setIsOpen,
+    localCategories,
+    localCreators,
+    displayedCreatorsCount,
+    setDisplayedCreatorsCount,
+    handleLocalCategoryChange,
+    handleToggleShowMoreCreators,
+    handleLocalCreatorChange,
+    handleClearFilters,
+    handleCloseButton,
+    handleOpenFilters,
+    handleApplyFilters,
+    hasLocalActiveFilters,
+    visibleCreators,
+    hasActiveFilters,
+  };
+};

autogpt_platform/frontend/src/app/(platform)/build/stores/blockMenuStore.ts

@@ -1,12 +1,30 @@
 import { create } from "zustand";
 import { DefaultStateType } from "../components/NewControlPanel/NewBlockMenu/types";
+import { SearchResponseItemsItem } from "@/app/api/__generated__/models/searchResponseItemsItem";
+import { getSearchItemType } from "../components/NewControlPanel/NewBlockMenu/BlockMenuSearchContent/helper";
+import { StoreAgent } from "@/app/api/__generated__/models/storeAgent";
+import { GetV2BuilderSearchFilterAnyOfItem } from "@/app/api/__generated__/models/getV2BuilderSearchFilterAnyOfItem";
 
 type BlockMenuStore = {
   searchQuery: string;
   searchId: string | undefined;
   defaultState: DefaultStateType;
   integration: string | undefined;
+  filters: GetV2BuilderSearchFilterAnyOfItem[];
+  creators: string[];
+  creators_list: string[];
+  categoryCounts: Record<GetV2BuilderSearchFilterAnyOfItem, number>;
 
+  setCategoryCounts: (
+    counts: Record<GetV2BuilderSearchFilterAnyOfItem, number>,
+  ) => void;
+  setCreatorsList: (searchData: SearchResponseItemsItem[]) => void;
+  addCreator: (creator: string) => void;
+  setCreators: (creators: string[]) => void;
+  removeCreator: (creator: string) => void;
+  addFilter: (filter: GetV2BuilderSearchFilterAnyOfItem) => void;
+  setFilters: (filters: GetV2BuilderSearchFilterAnyOfItem[]) => void;
+  removeFilter: (filter: GetV2BuilderSearchFilterAnyOfItem) => void;
   setSearchQuery: (query: string) => void;
   setSearchId: (id: string | undefined) => void;
   setDefaultState: (state: DefaultStateType) => void;
@@ -19,11 +37,44 @@ export const useBlockMenuStore = create<BlockMenuStore>((set) => ({
   searchId: undefined,
   defaultState: DefaultStateType.SUGGESTION,
   integration: undefined,
+  filters: [],
+  creators: [], // creator filters that are applied to the search results
+  creators_list: [], // all creators that are available to filter by
+  categoryCounts: {
+    blocks: 0,
+    integrations: 0,
+    marketplace_agents: 0,
+    my_agents: 0,
+  },
 
+  setCategoryCounts: (counts) => set({ categoryCounts: counts }),
+  setCreatorsList: (searchData) => {
+    const marketplaceAgents = searchData.filter((item) => {
+      return getSearchItemType(item).type === "store_agent";
+    }) as StoreAgent[];
+
+    const newCreators = marketplaceAgents.map((agent) => agent.creator);
+
+    set((state) => ({
+      creators_list: Array.from(
+        new Set([...state.creators_list, ...newCreators]),
+      ),
+    }));
+  },
+  setCreators: (creators) => set({ creators }),
+  setFilters: (filters) => set({ filters }),
   setSearchQuery: (query) => set({ searchQuery: query }),
   setSearchId: (id) => set({ searchId: id }),
   setDefaultState: (state) => set({ defaultState: state }),
   setIntegration: (integration) => set({ integration }),
+  addFilter: (filter) =>
+    set((state) => ({ filters: [...state.filters, filter] })),
+  removeFilter: (filter) =>
+    set((state) => ({ filters: state.filters.filter((f) => f !== filter) })),
+  addCreator: (creator) =>
+    set((state) => ({ creators: [...state.creators, creator] })),
+  removeCreator: (creator) =>
+    set((state) => ({ creators: state.creators.filter((c) => c !== creator) })),
   reset: () =>
     set({
       searchQuery: "",

autogpt_platform/frontend/src/app/(platform)/build/stores/edgeStore.ts

@@ -4,6 +4,7 @@ import { CustomEdge } from "../components/FlowEditor/edges/CustomEdge";
 import { customEdgeToLink, linkToCustomEdge } from "../components/helper";
 import { MarkerType } from "@xyflow/react";
 import { NodeExecutionResult } from "@/app/api/__generated__/models/nodeExecutionResult";
+import { cleanUpHandleId } from "@/components/renderers/InputRenderer/helpers";
 
 type EdgeStore = {
   edges: CustomEdge[];
@@ -13,6 +14,8 @@ type EdgeStore = {
   removeEdge: (edgeId: string) => void;
   upsertMany: (edges: CustomEdge[]) => void;
 
+  removeEdgesByHandlePrefix: (nodeId: string, handlePrefix: string) => void;
+
   getNodeEdges: (nodeId: string) => CustomEdge[];
   isInputConnected: (nodeId: string, handle: string) => boolean;
   isOutputConnected: (nodeId: string, handle: string) => boolean;
@@ -79,11 +82,27 @@ export const useEdgeStore = create<EdgeStore>((set, get) => ({
       return { edges: Array.from(byKey.values()) };
     }),
 
+  removeEdgesByHandlePrefix: (nodeId, handlePrefix) =>
+    set((state) => ({
+      edges: state.edges.filter(
+        (e) =>
+          !(
+            e.target === nodeId &&
+            e.targetHandle &&
+            e.targetHandle.startsWith(handlePrefix)
+          ),
+      ),
+    })),
+
   getNodeEdges: (nodeId) =>
     get().edges.filter((e) => e.source === nodeId || e.target === nodeId),
 
-  isInputConnected: (nodeId, handle) =>
-    get().edges.some((e) => e.target === nodeId && e.targetHandle === handle),
+  isInputConnected: (nodeId, handle) => {
+    const cleanedHandle = cleanUpHandleId(handle);
+    return get().edges.some(
+      (e) => e.target === nodeId && e.targetHandle === cleanedHandle,
+    );
+  },
 
   isOutputConnected: (nodeId, handle) =>
     get().edges.some((e) => e.source === nodeId && e.sourceHandle === handle),
@@ -105,15 +124,15 @@ export const useEdgeStore = create<EdgeStore>((set, get) => ({
     targetNodeId: string,
     executionResult: NodeExecutionResult,
   ) => {
-    set((state) => ({
-      edges: state.edges.map((edge) => {
+    set((state) => {
+      let hasChanges = false;
+
+      const newEdges = state.edges.map((edge) => {
         if (edge.target !== targetNodeId) {
           return edge;
         }
 
-        const beadData =
-          edge.data?.beadData ??
-          new Map<string, NodeExecutionResult["status"]>();
+        const beadData = new Map(edge.data?.beadData ?? new Map());
 
         const inputValue = edge.targetHandle
           ? executionResult.input_data[edge.targetHandle]
@@ -137,6 +156,11 @@ export const useEdgeStore = create<EdgeStore>((set, get) => ({
           beadUp = beadDown + 1;
         }
 
+        if (edge.data?.beadUp === beadUp && edge.data?.beadDown === beadDown) {
+          return edge;
+        }
+
+        hasChanges = true;
         return {
           ...edge,
           data: {
@@ -146,8 +170,10 @@ export const useEdgeStore = create<EdgeStore>((set, get) => ({
             beadData,
           },
         };
-      }),
-    }));
+      });
+
+      return hasChanges ? { edges: newEdges } : state;
+    });
   },
 
   resetEdgeBeads: () => {

autogpt_platform/frontend/src/app/(platform)/build/stores/nodeStore.ts

@@ -13,6 +13,10 @@ import { useHistoryStore } from "./historyStore";
 import { useEdgeStore } from "./edgeStore";
 import { BlockUIType } from "../components/types";
 import { pruneEmptyValues } from "@/lib/utils";
+import {
+  ensurePathExists,
+  parseHandleIdToPath,
+} from "@/components/renderers/InputRenderer/helpers";
 
 // Minimum movement (in pixels) required before logging position change to history
 // Prevents spamming history with small movements when clicking on inputs inside blocks
@@ -62,6 +66,8 @@ type NodeStore = {
     errors: { [key: string]: string },
   ) => void;
   clearAllNodeErrors: () => void; // Add this
+
+  syncHardcodedValuesWithHandleIds: (nodeId: string) => void;
 };
 
 export const useNodeStore = create<NodeStore>((set, get) => ({
@@ -305,4 +311,35 @@ export const useNodeStore = create<NodeStore>((set, get) => ({
       })),
     }));
   },
+
+  syncHardcodedValuesWithHandleIds: (nodeId: string) => {
+    const node = get().nodes.find((n) => n.id === nodeId);
+    if (!node) return;
+
+    const handleIds = useEdgeStore.getState().getAllHandleIdsOfANode(nodeId);
+    const additionalHandles = handleIds.filter((h) => h.includes("_#_"));
+
+    if (additionalHandles.length === 0) return;
+
+    const hardcodedValues = JSON.parse(
+      JSON.stringify(node.data.hardcodedValues || {}),
+    );
+
+    let modified = false;
+
+    additionalHandles.forEach((handleId) => {
+      const segments = parseHandleIdToPath(handleId);
+      if (ensurePathExists(hardcodedValues, segments)) {
+        modified = true;
+      }
+    });
+
+    if (modified) {
+      set((state) => ({
+        nodes: state.nodes.map((n) =>
+          n.id === nodeId ? { ...n, data: { ...n.data, hardcodedValues } } : n,
+        ),
+      }));
+    }
+  },
 }));

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/CredentialsInputs.tsx

@@ -143,6 +143,7 @@ export function CredentialsInput({
               size="small"
               onClick={handleActionButtonClick}
               className="w-fit"
+              type="button"
             >
               {actionButtonText}
             </Button>
@@ -155,6 +156,7 @@ export function CredentialsInput({
             size="small"
             onClick={handleActionButtonClick}
             className="w-fit"
+            type="button"
           >
             {actionButtonText}
           </Button>

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/EmptyTasks.tsx

@@ -1,17 +1,25 @@
 "use client";
 
 import { getV1GetGraphVersion } from "@/app/api/__generated__/endpoints/graphs/graphs";
+import {
+  getGetV2ListLibraryAgentsQueryKey,
+  useDeleteV2DeleteLibraryAgent,
+} from "@/app/api/__generated__/endpoints/library/library";
 import { GraphExecutionJobInfo } from "@/app/api/__generated__/models/graphExecutionJobInfo";
 import { GraphExecutionMeta } from "@/app/api/__generated__/models/graphExecutionMeta";
 import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
 import { LibraryAgentPreset } from "@/app/api/__generated__/models/libraryAgentPreset";
 import { Button } from "@/components/atoms/Button/Button";
 import { Text } from "@/components/atoms/Text/Text";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
 import { ShowMoreText } from "@/components/molecules/ShowMoreText/ShowMoreText";
 import { useToast } from "@/components/molecules/Toast/use-toast";
 import { exportAsJSONFile } from "@/lib/utils";
 import { formatDate } from "@/lib/utils/time";
+import { useQueryClient } from "@tanstack/react-query";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
 import { RunAgentModal } from "../modals/RunAgentModal/RunAgentModal";
 import { RunDetailCard } from "../selected-views/RunDetailCard/RunDetailCard";
 import { EmptyTasksIllustration } from "./EmptyTasksIllustration";
@@ -30,6 +38,41 @@ export function EmptyTasks({
   onScheduleCreated,
 }: Props) {
   const { toast } = useToast();
+  const queryClient = useQueryClient();
+  const router = useRouter();
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [isDeletingAgent, setIsDeletingAgent] = useState(false);
+
+  const { mutateAsync: deleteAgent } = useDeleteV2DeleteLibraryAgent();
+
+  async function handleDeleteAgent() {
+    if (!agent.id) return;
+
+    setIsDeletingAgent(true);
+
+    try {
+      await deleteAgent({ libraryAgentId: agent.id });
+
+      await queryClient.refetchQueries({
+        queryKey: getGetV2ListLibraryAgentsQueryKey(),
+      });
+
+      toast({ title: "Agent deleted" });
+      setShowDeleteDialog(false);
+      router.push("/library");
+    } catch (error: unknown) {
+      toast({
+        title: "Failed to delete agent",
+        description:
+          error instanceof Error
+            ? error.message
+            : "An unexpected error occurred.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsDeletingAgent(false);
+    }
+  }
 
   async function handleExport() {
     try {
@@ -147,9 +190,50 @@ export function EmptyTasks({
             <Button variant="secondary" size="small" onClick={handleExport}>
               Export agent to file
             </Button>
+            <Button
+              variant="secondary"
+              size="small"
+              onClick={() => setShowDeleteDialog(true)}
+            >
+              Delete agent
+            </Button>
           </div>
         </div>
       </div>
+
+      <Dialog
+        controlled={{
+          isOpen: showDeleteDialog,
+          set: setShowDeleteDialog,
+        }}
+        styling={{ maxWidth: "32rem" }}
+        title="Delete agent"
+      >
+        <Dialog.Content>
+          <div>
+            <Text variant="large">
+              Are you sure you want to delete this agent? This action cannot be
+              undone.
+            </Text>
+            <Dialog.Footer>
+              <Button
+                variant="secondary"
+                disabled={isDeletingAgent}
+                onClick={() => setShowDeleteDialog(false)}
+              >
+                Cancel
+              </Button>
+              <Button
+                variant="destructive"
+                onClick={handleDeleteAgent}
+                loading={isDeletingAgent}
+              >
+                Delete Agent
+              </Button>
+            </Dialog.Footer>
+          </div>
+        </Dialog.Content>
+      </Dialog>
     </div>
   );
 }

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedScheduleView/SelectedScheduleView.tsx

@@ -13,7 +13,7 @@ import { LoadingSelectedContent } from "../LoadingSelectedContent";
 import { RunDetailCard } from "../RunDetailCard/RunDetailCard";
 import { RunDetailHeader } from "../RunDetailHeader/RunDetailHeader";
 import { SelectedViewLayout } from "../SelectedViewLayout";
-import { SelectedScheduleActions } from "./components/SelectedScheduleActions";
+import { SelectedScheduleActions } from "./components/SelectedScheduleActions/SelectedScheduleActions";
 import { useSelectedScheduleView } from "./useSelectedScheduleView";
 
 interface Props {

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedScheduleView/components/SelectedScheduleActions.tsx

@@ -1,40 +0,0 @@
-import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
-import { Button } from "@/components/atoms/Button/Button";
-import { EyeIcon } from "@phosphor-icons/react";
-import { AgentActionsDropdown } from "../../AgentActionsDropdown";
-import { useScheduleDetailHeader } from "../../RunDetailHeader/useScheduleDetailHeader";
-import { SelectedActionsWrap } from "../../SelectedActionsWrap";
-
-type Props = {
-  agent: LibraryAgent;
-  scheduleId: string;
-  onDeleted?: () => void;
-};
-
-export function SelectedScheduleActions({ agent, scheduleId }: Props) {
-  const { openInBuilderHref } = useScheduleDetailHeader(
-    agent.graph_id,
-    scheduleId,
-    agent.graph_version,
-  );
-
-  return (
-    <>
-      <SelectedActionsWrap>
-        {openInBuilderHref && (
-          <Button
-            variant="icon"
-            size="icon"
-            as="NextLink"
-            href={openInBuilderHref}
-            target="_blank"
-            aria-label="View scheduled task details"
-          >
-            <EyeIcon weight="bold" size={18} className="text-zinc-700" />
-          </Button>
-        )}
-        <AgentActionsDropdown agent={agent} scheduleId={scheduleId} />
-      </SelectedActionsWrap>
-    </>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedScheduleView/components/SelectedScheduleActions/SelectedScheduleActions.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
+import { Button } from "@/components/atoms/Button/Button";
+import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
+import { Text } from "@/components/atoms/Text/Text";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
+import { EyeIcon, TrashIcon } from "@phosphor-icons/react";
+import { AgentActionsDropdown } from "../../../AgentActionsDropdown";
+import { SelectedActionsWrap } from "../../../SelectedActionsWrap";
+import { useSelectedScheduleActions } from "./useSelectedScheduleActions";
+
+type Props = {
+  agent: LibraryAgent;
+  scheduleId: string;
+  onDeleted?: () => void;
+};
+
+export function SelectedScheduleActions({
+  agent,
+  scheduleId,
+  onDeleted,
+}: Props) {
+  const {
+    openInBuilderHref,
+    showDeleteDialog,
+    setShowDeleteDialog,
+    handleDelete,
+    isDeleting,
+  } = useSelectedScheduleActions({ agent, scheduleId, onDeleted });
+
+  return (
+    <>
+      <SelectedActionsWrap>
+        {openInBuilderHref && (
+          <Button
+            variant="icon"
+            size="icon"
+            as="NextLink"
+            href={openInBuilderHref}
+            target="_blank"
+            aria-label="View scheduled task details"
+          >
+            <EyeIcon weight="bold" size={18} className="text-zinc-700" />
+          </Button>
+        )}
+        <Button
+          variant="icon"
+          size="icon"
+          aria-label="Delete schedule"
+          onClick={() => setShowDeleteDialog(true)}
+          disabled={isDeleting}
+        >
+          {isDeleting ? (
+            <LoadingSpinner size="small" />
+          ) : (
+            <TrashIcon weight="bold" size={18} />
+          )}
+        </Button>
+        <AgentActionsDropdown agent={agent} scheduleId={scheduleId} />
+      </SelectedActionsWrap>
+
+      <Dialog
+        controlled={{
+          isOpen: showDeleteDialog,
+          set: setShowDeleteDialog,
+        }}
+        styling={{ maxWidth: "32rem" }}
+        title="Delete schedule"
+      >
+        <Dialog.Content>
+          <Text variant="large">
+            Are you sure you want to delete this schedule? This action cannot be
+            undone.
+          </Text>
+          <Dialog.Footer>
+            <Button
+              variant="secondary"
+              onClick={() => setShowDeleteDialog(false)}
+              disabled={isDeleting}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleDelete}
+              loading={isDeleting}
+            >
+              Delete Schedule
+            </Button>
+          </Dialog.Footer>
+        </Dialog.Content>
+      </Dialog>
+    </>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedScheduleView/components/SelectedScheduleActions/useSelectedScheduleActions.ts

@@ -0,0 +1,65 @@
+"use client";
+
+import {
+  getGetV1ListExecutionSchedulesForAGraphQueryOptions,
+  useDeleteV1DeleteExecutionSchedule,
+} from "@/app/api/__generated__/endpoints/schedules/schedules";
+import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
+import { useToast } from "@/components/molecules/Toast/use-toast";
+import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+
+interface UseSelectedScheduleActionsProps {
+  agent: LibraryAgent;
+  scheduleId: string;
+  onDeleted?: () => void;
+}
+
+export function useSelectedScheduleActions({
+  agent,
+  scheduleId,
+  onDeleted,
+}: UseSelectedScheduleActionsProps) {
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+
+  const deleteMutation = useDeleteV1DeleteExecutionSchedule({
+    mutation: {
+      onSuccess: () => {
+        toast({ title: "Schedule deleted" });
+        queryClient.invalidateQueries({
+          queryKey: getGetV1ListExecutionSchedulesForAGraphQueryOptions(
+            agent.graph_id,
+          ).queryKey,
+        });
+        setShowDeleteDialog(false);
+        onDeleted?.();
+      },
+      onError: (error: unknown) =>
+        toast({
+          title: "Failed to delete schedule",
+          description:
+            error instanceof Error
+              ? error.message
+              : "An unexpected error occurred.",
+          variant: "destructive",
+        }),
+    },
+  });
+
+  function handleDelete() {
+    if (!scheduleId) return;
+    deleteMutation.mutate({ scheduleId });
+  }
+
+  const openInBuilderHref = `/build?flowID=${agent.graph_id}&flowVersion=${agent.graph_version}`;
+
+  return {
+    openInBuilderHref,
+    showDeleteDialog,
+    setShowDeleteDialog,
+    handleDelete,
+    isDeleting: deleteMutation.isPending,
+  };
+}

autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx

@@ -1,15 +1,14 @@
 "use client";
 
-import React from "react";
-import { useFavoriteAgents } from "../../hooks/useFavoriteAgents";
-import LibraryAgentCard from "../LibraryAgentCard/LibraryAgentCard";
-import { useGetFlag, Flag } from "@/services/feature-flags/use-get-flag";
-import { Heart } from "lucide-react";
+import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
 import { Skeleton } from "@/components/__legacy__/ui/skeleton";
 import { InfiniteScroll } from "@/components/contextual/InfiniteScroll/InfiniteScroll";
-import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
+import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
+import { HeartIcon } from "@phosphor-icons/react";
+import { useFavoriteAgents } from "../../hooks/useFavoriteAgents";
+import { LibraryAgentCard } from "../LibraryAgentCard/LibraryAgentCard";
 
-export default function FavoritesSection() {
+export function FavoritesSection() {
   const isAgentFavoritingEnabled = useGetFlag(Flag.AGENT_FAVORITING);
   const {
     allAgents: favoriteAgents,
@@ -33,7 +32,7 @@ export default function FavoritesSection() {
   return (
     <div className="mb-8">
       <div className="flex items-center gap-[10px] p-2 pb-[10px]">
-        <Heart className="h-5 w-5 fill-red-500 text-red-500" />
+        <HeartIcon className="h-5 w-5 fill-red-500 text-red-500" />
         <span className="font-poppin text-[18px] font-semibold leading-[28px] text-neutral-800">
           Favorites
         </span>

autogpt_platform/frontend/src/app/(platform)/library/components/LibraryActionHeader/LibraryActionHeader.tsx

@@ -1,34 +1,28 @@
-// import LibraryNotificationDropdown from "./library-notification-dropdown";
+import { LibrarySearchBar } from "../LibrarySearchBar/LibrarySearchBar";
 import LibraryUploadAgentDialog from "../LibraryUploadAgentDialog/LibraryUploadAgentDialog";
-import LibrarySearchBar from "../LibrarySearchBar/LibrarySearchBar";
 
-type LibraryActionHeaderProps = Record<string, never>;
+interface Props {
+  setSearchTerm: (value: string) => void;
+}
 
-/**
- * LibraryActionHeader component - Renders a header with search, notifications and filters
- */
-const LibraryActionHeader: React.FC<LibraryActionHeaderProps> = ({}) => {
+export function LibraryActionHeader({ setSearchTerm }: Props) {
   return (
     <>
-      <div className="mb-[32px] hidden items-start justify-between md:flex">
-        {/* <LibraryNotificationDropdown /> */}
-        <LibrarySearchBar />
+      <div className="mb-[32px] hidden items-center justify-center gap-4 md:flex">
+        <LibrarySearchBar setSearchTerm={setSearchTerm} />
         <LibraryUploadAgentDialog />
       </div>
 
       {/* Mobile and tablet */}
       <div className="flex flex-col gap-4 p-4 pt-[52px] md:hidden">
         <div className="flex w-full justify-between">
-          {/* <LibraryNotificationDropdown /> */}
           <LibraryUploadAgentDialog />
         </div>
 
         <div className="flex items-center justify-center">
-          <LibrarySearchBar />
+          <LibrarySearchBar setSearchTerm={setSearchTerm} />
         </div>
       </div>
     </>
   );
-};
-
-export default LibraryActionHeader;
+}

autogpt_platform/frontend/src/app/(platform)/library/components/LibraryActionSubHeader/LibraryActionSubHeader.tsx

@@ -1,28 +1,28 @@
 "use client";
 
-import LibrarySortMenu from "../LibrarySortMenu/LibrarySortMenu";
+import { LibraryAgentSort } from "@/app/api/__generated__/models/libraryAgentSort";
+import { Text } from "@/components/atoms/Text/Text";
+import { LibrarySortMenu } from "../LibrarySortMenu/LibrarySortMenu";
 
-interface LibraryActionSubHeaderProps {
+interface Props {
   agentCount: number;
+  setLibrarySort: (value: LibraryAgentSort) => void;
 }
 
-export default function LibraryActionSubHeader({
-  agentCount,
-}: LibraryActionSubHeaderProps) {
+export function LibraryActionSubHeader({ agentCount, setLibrarySort }: Props) {
   return (
-    <div className="flex items-center justify-between pb-[10px]">
-      <div className="flex items-center gap-[10px] p-2">
-        <span className="font-poppin w-[96px] text-[18px] font-semibold leading-[28px] text-neutral-800">
-          My agents
-        </span>
-        <span
-          className="w-[70px] font-sans text-[14px] font-normal leading-6"
+    <div className="flex items-baseline justify-between">
+      <div className="flex items-baseline gap-4">
+        <Text variant="h4">My agents</Text>
+        <Text
+          variant="body"
           data-testid="agents-count"
+          className="text-zinc-500"
         >
-          {agentCount} agents
-        </span>
+          {agentCount}
+        </Text>
       </div>
-      <LibrarySortMenu />
+      <LibrarySortMenu setLibrarySort={setLibrarySort} />
     </div>
   );
 }

autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/LibraryAgentCard.tsx

@@ -1,332 +1,128 @@
 "use client";
 
-import Link from "next/link";
+import { Text } from "@/components/atoms/Text/Text";
+import { CaretCircleRightIcon } from "@phosphor-icons/react";
 import Image from "next/image";
-import { Heart } from "@phosphor-icons/react";
-import { useState, useEffect } from "react";
-import { getQueryClient } from "@/lib/react-query/queryClient";
-import { InfiniteData } from "@tanstack/react-query";
+import NextLink from "next/link";
 
 import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
-import {
-  getV2ListLibraryAgentsResponse,
-  getV2ListFavoriteLibraryAgentsResponse,
-} from "@/app/api/__generated__/endpoints/library/library";
-import BackendAPI, { LibraryAgentID } from "@/lib/autogpt-server-api";
-import { cn } from "@/lib/utils";
-import { useToast } from "@/components/molecules/Toast/use-toast";
-import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
 import Avatar, {
   AvatarFallback,
   AvatarImage,
 } from "@/components/atoms/Avatar/Avatar";
+import { Link } from "@/components/atoms/Link/Link";
+import { AgentCardMenu } from "./components/AgentCardMenu";
+import { FavoriteButton } from "./components/FavoriteButton";
+import { useLibraryAgentCard } from "./useLibraryAgentCard";
 
-interface LibraryAgentCardProps {
+interface Props {
   agent: LibraryAgent;
 }
 
-export default function LibraryAgentCard({
-  agent: {
-    id,
-    name,
-    description,
-    graph_id,
-    can_access_graph,
+export function LibraryAgentCard({ agent }: Props) {
+  const { id, name, graph_id, can_access_graph, image_url } = agent;
+
+  const {
+    isFromMarketplace,
+    isAgentFavoritingEnabled,
+    isFavorite,
+    profile,
     creator_image_url,
-    image_url,
-    is_favorite,
-  },
-}: LibraryAgentCardProps) {
-  const isAgentFavoritingEnabled = useGetFlag(Flag.AGENT_FAVORITING);
-  const [isFavorite, setIsFavorite] = useState(is_favorite);
-  const [isUpdating, setIsUpdating] = useState(false);
-  const { toast } = useToast();
-  const api = new BackendAPI();
-  const queryClient = getQueryClient();
-
-  // Sync local state with prop when it changes (e.g., after query invalidation)
-  useEffect(() => {
-    setIsFavorite(is_favorite);
-  }, [is_favorite]);
-
-  const updateQueryData = (newIsFavorite: boolean) => {
-    // Update the agent in all library agent queries
-    queryClient.setQueriesData(
-      { queryKey: ["/api/library/agents"] },
-      (
-        oldData:
-          | InfiniteData<getV2ListLibraryAgentsResponse, number | undefined>
-          | undefined,
-      ) => {
-        if (!oldData?.pages) return oldData;
-
-        return {
-          ...oldData,
-          pages: oldData.pages.map((page) => {
-            if (page.status !== 200) return page;
-
-            return {
-              ...page,
-              data: {
-                ...page.data,
-                agents: page.data.agents.map((agent: LibraryAgent) =>
-                  agent.id === id
-                    ? { ...agent, is_favorite: newIsFavorite }
-                    : agent,
-                ),
-              },
-            };
-          }),
-        };
-      },
-    );
-
-    // Update or remove from favorites query based on new state
-    queryClient.setQueriesData(
-      { queryKey: ["/api/library/agents/favorites"] },
-      (
-        oldData:
-          | InfiniteData<
-              getV2ListFavoriteLibraryAgentsResponse,
-              number | undefined
-            >
-          | undefined,
-      ) => {
-        if (!oldData?.pages) return oldData;
-
-        if (newIsFavorite) {
-          // Add to favorites if not already there
-          const exists = oldData.pages.some(
-            (page) =>
-              page.status === 200 &&
-              page.data.agents.some((agent: LibraryAgent) => agent.id === id),
-          );
-
-          if (!exists) {
-            const firstPage = oldData.pages[0];
-            if (firstPage?.status === 200) {
-              const updatedAgent = {
-                id,
-                name,
-                description,
-                graph_id,
-                can_access_graph,
-                creator_image_url,
-                image_url,
-                is_favorite: true,
-              };
-
-              return {
-                ...oldData,
-                pages: [
-                  {
-                    ...firstPage,
-                    data: {
-                      ...firstPage.data,
-                      agents: [updatedAgent, ...firstPage.data.agents],
-                      pagination: {
-                        ...firstPage.data.pagination,
-                        total_items: firstPage.data.pagination.total_items + 1,
-                      },
-                    },
-                  },
-                  ...oldData.pages.slice(1).map((page) =>
-                    page.status === 200
-                      ? {
-                          ...page,
-                          data: {
-                            ...page.data,
-                            pagination: {
-                              ...page.data.pagination,
-                              total_items: page.data.pagination.total_items + 1,
-                            },
-                          },
-                        }
-                      : page,
-                  ),
-                ],
-              };
-            }
-          }
-        } else {
-          // Remove from favorites
-          let removedCount = 0;
-          return {
-            ...oldData,
-            pages: oldData.pages.map((page) => {
-              if (page.status !== 200) return page;
-
-              const filteredAgents = page.data.agents.filter(
-                (agent: LibraryAgent) => agent.id !== id,
-              );
-
-              if (filteredAgents.length < page.data.agents.length) {
-                removedCount = 1;
-              }
-
-              return {
-                ...page,
-                data: {
-                  ...page.data,
-                  agents: filteredAgents,
-                  pagination: {
-                    ...page.data.pagination,
-                    total_items:
-                      page.data.pagination.total_items - removedCount,
-                  },
-                },
-              };
-            }),
-          };
-        }
-
-        return oldData;
-      },
-    );
-  };
-
-  const handleToggleFavorite = async (e: React.MouseEvent) => {
-    e.preventDefault(); // Prevent navigation when clicking the heart
-    e.stopPropagation();
-
-    if (isUpdating || !isAgentFavoritingEnabled) return;
-
-    const newIsFavorite = !isFavorite;
-
-    // Optimistic update
-    setIsFavorite(newIsFavorite);
-    updateQueryData(newIsFavorite);
-
-    setIsUpdating(true);
-    try {
-      await api.updateLibraryAgent(id as LibraryAgentID, {
-        is_favorite: newIsFavorite,
-      });
-
-      toast({
-        title: newIsFavorite ? "Added to favorites" : "Removed from favorites",
-        description: `${name} has been ${newIsFavorite ? "added to" : "removed from"} your favorites.`,
-      });
-    } catch (error) {
-      // Revert on error
-      console.error("Failed to update favorite status:", error);
-      setIsFavorite(!newIsFavorite);
-      updateQueryData(!newIsFavorite);
-
-      toast({
-        title: "Error",
-        description: "Failed to update favorite status. Please try again.",
-        variant: "destructive",
-      });
-    } finally {
-      setIsUpdating(false);
-    }
-  };
+    handleToggleFavorite,
+  } = useLibraryAgentCard({ agent });
 
   return (
     <div
       data-testid="library-agent-card"
       data-agent-id={id}
-      className="group inline-flex w-full max-w-[434px] flex-col items-start justify-start gap-2.5 rounded-[26px] bg-white transition-all duration-300 hover:shadow-lg dark:bg-transparent dark:hover:shadow-gray-700"
+      className="group relative inline-flex h-[10.625rem] w-full max-w-[25rem] flex-col items-start justify-start gap-2.5 rounded-medium border border-zinc-100 bg-white transition-all duration-300 hover:shadow-md"
     >
-      <Link
-        href={`/library/agents/${id}`}
-        className="relative h-[200px] w-full overflow-hidden rounded-[20px]"
-      >
-        {!image_url ? (
-          <div
-            className={`h-full w-full ${
-              [
-                "bg-gradient-to-r from-green-200 to-blue-200",
-                "bg-gradient-to-r from-pink-200 to-purple-200",
-                "bg-gradient-to-r from-yellow-200 to-orange-200",
-                "bg-gradient-to-r from-blue-200 to-cyan-200",
-                "bg-gradient-to-r from-indigo-200 to-purple-200",
-              ][parseInt(id.slice(0, 8), 16) % 5]
-            }`}
-            style={{
-              backgroundSize: "200% 200%",
-              animation: "gradient 15s ease infinite",
-            }}
-          />
-        ) : (
-          <Image
-            src={image_url}
-            alt={`${name} preview image`}
-            fill
-            className="object-cover"
-          />
-        )}
-        {isAgentFavoritingEnabled && (
-          <button
-            onClick={handleToggleFavorite}
-            className={cn(
-              "absolute right-4 top-4 rounded-full bg-white/90 p-2 backdrop-blur-sm transition-all duration-200",
-              "hover:scale-110 hover:bg-white",
-              "focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2",
-              isUpdating && "cursor-not-allowed opacity-50",
-              !isFavorite && "opacity-0 group-hover:opacity-100",
-            )}
-            disabled={isUpdating}
-            aria-label={
-              isFavorite ? "Remove from favorites" : "Add to favorites"
-            }
-          >
-            <Heart
-              size={20}
-              weight={isFavorite ? "fill" : "regular"}
-              className={cn(
-                "transition-colors duration-200",
-                isFavorite
-                  ? "text-red-500"
-                  : "text-gray-600 hover:text-red-500",
-              )}
-            />
-          </button>
-        )}
-        <div className="absolute bottom-4 left-4">
-          <Avatar className="h-16 w-16">
+      <AgentCardMenu agent={agent} />
+      <NextLink href={`/library/agents/${id}`} className="w-full flex-shrink-0">
+        <div className="flex items-center gap-2 px-4 pt-3">
+          <Avatar className="h-4 w-4 rounded-full">
             <AvatarImage
               src={
-                creator_image_url
-                  ? creator_image_url
-                  : "/avatar-placeholder.png"
+                isFromMarketplace
+                  ? creator_image_url || "/avatar-placeholder.png"
+                  : profile?.avatar_url || "/avatar-placeholder.png"
               }
               alt={`${name} creator avatar`}
             />
-            <AvatarFallback size={64}>{name.charAt(0)}</AvatarFallback>
+            <AvatarFallback size={48}>{name.charAt(0)}</AvatarFallback>
           </Avatar>
+          <Text
+            variant="small-medium"
+            className="uppercase tracking-wide text-zinc-400"
+          >
+            {isFromMarketplace ? "FROM MARKETPLACE" : "Built by you"}
+          </Text>
         </div>
-      </Link>
+        {isAgentFavoritingEnabled && (
+          <FavoriteButton
+            isFavorite={isFavorite}
+            onClick={handleToggleFavorite}
+          />
+        )}
+      </NextLink>
 
-      <div className="flex w-full flex-1 flex-col px-4 py-4">
-        <Link href={`/library/agents/${id}`}>
-          <h3 className="mb-2 line-clamp-2 font-poppins text-2xl font-semibold leading-tight text-[#272727] dark:text-neutral-100">
+      <div className="flex w-full flex-1 flex-col px-4 pb-2">
+        <Link
+          href={`/library/agents/${id}`}
+          className="flex w-full items-start justify-between gap-2 no-underline hover:no-underline"
+        >
+          <Text
+            variant="h5"
+            data-testid="library-agent-card-name"
+            className="line-clamp-3 hyphens-auto break-words no-underline hover:no-underline"
+          >
             {name}
-          </h3>
+          </Text>
 
-          <p className="line-clamp-3 flex-1 text-sm text-gray-600 dark:text-gray-400">
-            {description}
-          </p>
+          {!image_url ? (
+            <div
+              className={`h-[3.64rem] w-[6.70rem] flex-shrink-0 rounded-small ${
+                [
+                  "bg-gradient-to-r from-green-200 to-blue-200",
+                  "bg-gradient-to-r from-pink-200 to-purple-200",
+                  "bg-gradient-to-r from-yellow-200 to-orange-200",
+                  "bg-gradient-to-r from-blue-200 to-cyan-200",
+                  "bg-gradient-to-r from-indigo-200 to-purple-200",
+                ][parseInt(id.slice(0, 8), 16) % 5]
+              }`}
+              style={{
+                backgroundSize: "200% 200%",
+                animation: "gradient 15s ease infinite",
+              }}
+            />
+          ) : (
+            <Image
+              src={image_url}
+              alt={`${name} preview image`}
+              width={107}
+              height={58}
+              className="flex-shrink-0 rounded-small object-cover"
+            />
+          )}
         </Link>
 
-        <div className="flex-grow" />
-        {/* Spacer */}
-
-        <div className="items-between mt-4 flex w-full justify-between gap-3">
+        <div className="mt-auto flex w-full justify-start gap-6 border-t border-zinc-100 pb-1 pt-3">
           <Link
             href={`/library/agents/${id}`}
-            className="text-lg font-semibold text-neutral-800 hover:underline dark:text-neutral-200"
+            data-testid="library-agent-card-see-runs-link"
+            className="flex items-center gap-1 text-[13px]"
           >
-            See runs
+            See runs <CaretCircleRightIcon size={20} />
           </Link>
 
           {can_access_graph && (
             <Link
               href={`/build?flowID=${graph_id}`}
-              className="text-lg font-semibold text-neutral-800 hover:underline dark:text-neutral-200"
+              data-testid="library-agent-card-open-in-builder-link"
+              className="flex items-center gap-1 text-[13px]"
+              isExternal
             >
-              Open in builder
+              Open in builder <CaretCircleRightIcon size={20} />
             </Link>
           )}
         </div>

autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/components/AgentCardMenu.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+import {
+  getGetV2ListLibraryAgentsQueryKey,
+  useDeleteV2DeleteLibraryAgent,
+  usePostV2ForkLibraryAgent,
+} from "@/app/api/__generated__/endpoints/library/library";
+import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
+import { Button } from "@/components/atoms/Button/Button";
+import { Text } from "@/components/atoms/Text/Text";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/molecules/DropdownMenu/DropdownMenu";
+import { useToast } from "@/components/molecules/Toast/use-toast";
+import { DotsThree } from "@phosphor-icons/react";
+import { useQueryClient } from "@tanstack/react-query";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+interface AgentCardMenuProps {
+  agent: LibraryAgent;
+}
+
+export function AgentCardMenu({ agent }: AgentCardMenuProps) {
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+  const router = useRouter();
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [isDeletingAgent, setIsDeletingAgent] = useState(false);
+  const [isDuplicatingAgent, setIsDuplicatingAgent] = useState(false);
+
+  const { mutateAsync: deleteAgent } = useDeleteV2DeleteLibraryAgent();
+  const { mutateAsync: forkAgent } = usePostV2ForkLibraryAgent();
+
+  async function handleDuplicateAgent() {
+    if (!agent.id) return;
+
+    setIsDuplicatingAgent(true);
+
+    try {
+      const result = await forkAgent({ libraryAgentId: agent.id });
+
+      if (result.status === 200) {
+        await queryClient.refetchQueries({
+          queryKey: getGetV2ListLibraryAgentsQueryKey(),
+        });
+
+        toast({
+          title: "Agent duplicated",
+          description: `${result.data.name} has been created.`,
+        });
+      }
+    } catch (error: unknown) {
+      toast({
+        title: "Failed to duplicate agent",
+        description:
+          error instanceof Error
+            ? error.message
+            : "An unexpected error occurred.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsDuplicatingAgent(false);
+    }
+  }
+
+  async function handleDeleteAgent() {
+    if (!agent.id) return;
+
+    setIsDeletingAgent(true);
+
+    try {
+      await deleteAgent({ libraryAgentId: agent.id });
+
+      await queryClient.refetchQueries({
+        queryKey: getGetV2ListLibraryAgentsQueryKey(),
+      });
+
+      toast({ title: "Agent deleted" });
+      setShowDeleteDialog(false);
+      router.push("/library");
+    } catch (error: unknown) {
+      toast({
+        title: "Failed to delete agent",
+        description:
+          error instanceof Error
+            ? error.message
+            : "An unexpected error occurred.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsDeletingAgent(false);
+    }
+  }
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button
+            className="absolute right-2 top-1 rounded p-1.5 transition-opacity hover:bg-neutral-100"
+            onClick={(e) => e.stopPropagation()}
+            aria-label="More actions"
+          >
+            <DotsThree className="h-5 w-5 text-neutral-600" />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          {agent.can_access_graph && (
+            <>
+              <DropdownMenuItem asChild>
+                <Link
+                  href={`/build?flowID=${agent.graph_id}&flowVersion=${agent.graph_version}`}
+                  target="_blank"
+                  className="flex items-center gap-2"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  Edit agent
+                </Link>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+            </>
+          )}
+          <DropdownMenuItem
+            onClick={(e) => {
+              e.stopPropagation();
+              handleDuplicateAgent();
+            }}
+            disabled={isDuplicatingAgent}
+            className="flex items-center gap-2"
+          >
+            Duplicate agent
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            onClick={(e) => {
+              e.stopPropagation();
+              setShowDeleteDialog(true);
+            }}
+            className="flex items-center gap-2 text-red-600 focus:bg-red-50 focus:text-red-600"
+          >
+            Delete agent
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <Dialog
+        controlled={{
+          isOpen: showDeleteDialog,
+          set: setShowDeleteDialog,
+        }}
+        styling={{ maxWidth: "32rem" }}
+        title="Delete agent"
+      >
+        <Dialog.Content>
+          <div>
+            <Text variant="large">
+              Are you sure you want to delete this agent? This action cannot be
+              undone.
+            </Text>
+            <Dialog.Footer>
+              <Button
+                variant="secondary"
+                disabled={isDeletingAgent}
+                onClick={() => setShowDeleteDialog(false)}
+              >
+                Cancel
+              </Button>
+              <Button
+                variant="destructive"
+                onClick={handleDeleteAgent}
+                loading={isDeletingAgent}
+              >
+                Delete Agent
+              </Button>
+            </Dialog.Footer>
+          </div>
+        </Dialog.Content>
+      </Dialog>
+    </>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/components/FavoriteButton.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { HeartIcon } from "@phosphor-icons/react";
+
+interface FavoriteButtonProps {
+  isFavorite: boolean;
+  onClick: (e: React.MouseEvent) => void;
+}
+
+export function FavoriteButton({ isFavorite, onClick }: FavoriteButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        "rounded-full bg-white/90 p-2 backdrop-blur-sm transition-all duration-200",
+        "hover:scale-110 hover:bg-white",
+        "focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2",
+        !isFavorite && "opacity-0 group-hover:opacity-100",
+      )}
+      aria-label={isFavorite ? "Remove from favorites" : "Add to favorites"}
+    >
+      <HeartIcon
+        size={20}
+        weight={isFavorite ? "fill" : "regular"}
+        className={cn(
+          "transition-colors duration-200",
+          isFavorite ? "text-red-500" : "text-gray-600 hover:text-red-500",
+        )}
+      />
+    </button>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/helpers.ts

@@ -0,0 +1,150 @@
+import { InfiniteData, QueryClient } from "@tanstack/react-query";
+
+import {
+  getV2ListFavoriteLibraryAgentsResponse,
+  getV2ListLibraryAgentsResponse,
+} from "@/app/api/__generated__/endpoints/library/library";
+import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
+
+interface UpdateFavoriteInQueriesParams {
+  queryClient: QueryClient;
+  agentId: string;
+  agent: LibraryAgent;
+  newIsFavorite: boolean;
+}
+
+export function updateFavoriteInQueries({
+  queryClient,
+  agentId,
+  agent,
+  newIsFavorite,
+}: UpdateFavoriteInQueriesParams) {
+  queryClient.setQueriesData(
+    { queryKey: ["/api/library/agents"] },
+    (
+      oldData:
+        | InfiniteData<getV2ListLibraryAgentsResponse, number | undefined>
+        | undefined,
+    ) => {
+      if (!oldData?.pages) return oldData;
+
+      return {
+        ...oldData,
+        pages: oldData.pages.map((page) => {
+          if (page.status !== 200) return page;
+
+          return {
+            ...page,
+            data: {
+              ...page.data,
+              agents: page.data.agents.map((currentAgent: LibraryAgent) =>
+                currentAgent.id === agentId
+                  ? { ...currentAgent, is_favorite: newIsFavorite }
+                  : currentAgent,
+              ),
+            },
+          };
+        }),
+      };
+    },
+  );
+
+  queryClient.setQueriesData(
+    { queryKey: ["/api/library/agents/favorites"] },
+    (
+      oldData:
+        | InfiniteData<
+            getV2ListFavoriteLibraryAgentsResponse,
+            number | undefined
+          >
+        | undefined,
+    ) => {
+      if (!oldData?.pages) return oldData;
+
+      if (newIsFavorite) {
+        const exists = oldData.pages.some(
+          (page) =>
+            page.status === 200 &&
+            page.data.agents.some(
+              (currentAgent: LibraryAgent) => currentAgent.id === agentId,
+            ),
+        );
+
+        if (!exists) {
+          const firstPage = oldData.pages[0];
+          if (firstPage?.status === 200) {
+            const updatedAgent = {
+              id: agent.id,
+              name: agent.name,
+              description: agent.description,
+              graph_id: agent.graph_id,
+              can_access_graph: agent.can_access_graph,
+              creator_image_url: agent.creator_image_url,
+              image_url: agent.image_url,
+              is_favorite: true,
+            };
+
+            return {
+              ...oldData,
+              pages: [
+                {
+                  ...firstPage,
+                  data: {
+                    ...firstPage.data,
+                    agents: [updatedAgent, ...firstPage.data.agents],
+                    pagination: {
+                      ...firstPage.data.pagination,
+                      total_items: firstPage.data.pagination.total_items + 1,
+                    },
+                  },
+                },
+                ...oldData.pages.slice(1).map((page) =>
+                  page.status === 200
+                    ? {
+                        ...page,
+                        data: {
+                          ...page.data,
+                          pagination: {
+                            ...page.data.pagination,
+                            total_items: page.data.pagination.total_items + 1,
+                          },
+                        },
+                      }
+                    : page,
+                ),
+              ],
+            };
+          }
+        }
+      } else {
+        return {
+          ...oldData,
+          pages: oldData.pages.map((page) => {
+            if (page.status !== 200) return page;
+
+            const filteredAgents = page.data.agents.filter(
+              (currentAgent: LibraryAgent) => currentAgent.id !== agentId,
+            );
+
+            const removedCount =
+              filteredAgents.length < page.data.agents.length ? 1 : 0;
+
+            return {
+              ...page,
+              data: {
+                ...page.data,
+                agents: filteredAgents,
+                pagination: {
+                  ...page.data.pagination,
+                  total_items: page.data.pagination.total_items - removedCount,
+                },
+              },
+            };
+          }),
+        };
+      }
+
+      return oldData;
+    },
+  );
+}

autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/useLibraryAgentCard.ts

@@ -0,0 +1,89 @@
+"use client";
+
+import { getQueryClient } from "@/lib/react-query/queryClient";
+import { useEffect, useState } from "react";
+
+import { usePatchV2UpdateLibraryAgent } from "@/app/api/__generated__/endpoints/library/library";
+import { useGetV2GetUserProfile } from "@/app/api/__generated__/endpoints/store/store";
+import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
+import { okData } from "@/app/api/helpers";
+import { useToast } from "@/components/molecules/Toast/use-toast";
+import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
+import { updateFavoriteInQueries } from "./helpers";
+
+interface Props {
+  agent: LibraryAgent;
+}
+
+export function useLibraryAgentCard({ agent }: Props) {
+  const { id, name, is_favorite, creator_image_url, marketplace_listing } =
+    agent;
+
+  const isFromMarketplace = Boolean(marketplace_listing);
+  const isAgentFavoritingEnabled = useGetFlag(Flag.AGENT_FAVORITING);
+  const [isFavorite, setIsFavorite] = useState(is_favorite);
+  const { toast } = useToast();
+  const queryClient = getQueryClient();
+  const { mutateAsync: updateLibraryAgent } = usePatchV2UpdateLibraryAgent();
+
+  const { data: profile } = useGetV2GetUserProfile({
+    query: {
+      select: okData,
+    },
+  });
+
+  useEffect(() => {
+    setIsFavorite(is_favorite);
+  }, [is_favorite]);
+
+  function updateQueryData(newIsFavorite: boolean) {
+    updateFavoriteInQueries({
+      queryClient,
+      agentId: id,
+      agent,
+      newIsFavorite,
+    });
+  }
+
+  async function handleToggleFavorite(e: React.MouseEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (!isAgentFavoritingEnabled) return;
+
+    const newIsFavorite = !isFavorite;
+
+    setIsFavorite(newIsFavorite);
+    updateQueryData(newIsFavorite);
+
+    try {
+      await updateLibraryAgent({
+        libraryAgentId: id,
+        data: { is_favorite: newIsFavorite },
+      });
+
+      toast({
+        title: newIsFavorite ? "Added to favorites" : "Removed from favorites",
+        description: `${name} has been ${newIsFavorite ? "added to" : "removed from"} your favorites.`,
+      });
+    } catch {
+      setIsFavorite(!newIsFavorite);
+      updateQueryData(!newIsFavorite);
+
+      toast({
+        title: "Error",
+        description: "Failed to update favorite status. Please try again.",
+        variant: "destructive",
+      });
+    }
+  }
+
+  return {
+    isFromMarketplace,
+    isAgentFavoritingEnabled,
+    isFavorite,
+    profile,
+    creator_image_url,
+    handleToggleFavorite,
+  };
+}

autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentList/LibraryAgentList.tsx

@@ -1,10 +1,22 @@
 "use client";
-import LibraryActionSubHeader from "../LibraryActionSubHeader/LibraryActionSubHeader";
-import LibraryAgentCard from "../LibraryAgentCard/LibraryAgentCard";
+import { LibraryAgentSort } from "@/app/api/__generated__/models/libraryAgentSort";
+import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
 import { InfiniteScroll } from "@/components/contextual/InfiniteScroll/InfiniteScroll";
+import { LibraryActionSubHeader } from "../LibraryActionSubHeader/LibraryActionSubHeader";
+import { LibraryAgentCard } from "../LibraryAgentCard/LibraryAgentCard";
 import { useLibraryAgentList } from "./useLibraryAgentList";
 
-export default function LibraryAgentList() {
+interface Props {
+  searchTerm: string;
+  librarySort: LibraryAgentSort;
+  setLibrarySort: (value: LibraryAgentSort) => void;
+}
+
+export function LibraryAgentList({
+  searchTerm,
+  librarySort,
+  setLibrarySort,
+}: Props) {
   const {
     agentLoading,
     agentCount,
@@ -12,28 +24,27 @@ export default function LibraryAgentList() {
     hasNextPage,
     isFetchingNextPage,
     fetchNextPage,
-  } = useLibraryAgentList();
-
-  const LoadingSpinner = () => (
-    <div className="h-8 w-8 animate-spin rounded-full border-b-2 border-t-2 border-neutral-800" />
-  );
+  } = useLibraryAgentList({ searchTerm, librarySort });
 
   return (
     <>
-      <LibraryActionSubHeader agentCount={agentCount} />
+      <LibraryActionSubHeader
+        agentCount={agentCount}
+        setLibrarySort={setLibrarySort}
+      />
       <div className="px-2">
         {agentLoading ? (
           <div className="flex h-[200px] items-center justify-center">
-            <LoadingSpinner />
+            <LoadingSpinner size="large" />
           </div>
         ) : (
           <InfiniteScroll
             isFetchingNextPage={isFetchingNextPage}
             fetchNextPage={fetchNextPage}
             hasNextPage={hasNextPage}
-            loader={<LoadingSpinner />}
+            loader={<LoadingSpinner size="medium" />}
           >
-            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
               {agents.map((agent) => (
                 <LibraryAgentCard key={agent.id} agent={agent} />
               ))}

autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentList/useLibraryAgentList.ts

@@ -1,18 +1,23 @@
 "use client";
 
+import { useGetV2ListLibraryAgentsInfinite } from "@/app/api/__generated__/endpoints/library/library";
+import { LibraryAgentSort } from "@/app/api/__generated__/models/libraryAgentSort";
 import {
   getPaginatedTotalCount,
   getPaginationNextPageNumber,
   unpaginate,
 } from "@/app/api/helpers";
-import { useGetV2ListLibraryAgentsInfinite } from "@/app/api/__generated__/endpoints/library/library";
-import { useLibraryPageContext } from "../state-provider";
-import { useLibraryAgentsStore } from "@/hooks/useLibraryAgents/store";
-import { getInitialData } from "./helpers";
+import { getQueryClient } from "@/lib/react-query/queryClient";
+import { useEffect, useRef } from "react";
 
-export const useLibraryAgentList = () => {
-  const { searchTerm, librarySort } = useLibraryPageContext();
-  const { agents: cachedAgents } = useLibraryAgentsStore();
+interface Props {
+  searchTerm: string;
+  librarySort: LibraryAgentSort;
+}
+
+export function useLibraryAgentList({ searchTerm, librarySort }: Props) {
+  const queryClient = getQueryClient();
+  const prevSortRef = useRef<LibraryAgentSort | null>(null);
 
   const {
     data: agentsQueryData,
@@ -23,18 +28,28 @@ export const useLibraryAgentList = () => {
   } = useGetV2ListLibraryAgentsInfinite(
     {
       page: 1,
-      page_size: 8,
+      page_size: 20,
       search_term: searchTerm || undefined,
       sort_by: librarySort,
     },
     {
       query: {
-        initialData: getInitialData(cachedAgents, searchTerm, 8),
         getNextPageParam: getPaginationNextPageNumber,
       },
     },
   );
 
+  // Reset queries when sort changes to ensure fresh data with correct sorting
+  useEffect(() => {
+    if (prevSortRef.current !== null && prevSortRef.current !== librarySort) {
+      // Reset all library agent queries to ensure fresh fetch with new sort
+      queryClient.resetQueries({
+        queryKey: ["/api/library/agents"],
+      });
+    }
+    prevSortRef.current = librarySort;
+  }, [librarySort, queryClient]);
+
   const allAgents = agentsQueryData
     ? unpaginate(agentsQueryData, "agents")
     : [];
@@ -48,4 +63,4 @@ export const useLibraryAgentList = () => {
     isFetchingNextPage,
     fetchNextPage,
   };
-};
+}

autogpt_platform/frontend/src/app/(platform)/library/components/LibraryNotificationCard/LibraryNotificationCard.tsx

@@ -1,175 +0,0 @@
-import Image from "next/image";
-import { Button } from "@/components/__legacy__/ui/button";
-import { Separator } from "@/components/__legacy__/ui/separator";
-import {
-  CirclePlayIcon,
-  ClipboardCopy,
-  ImageIcon,
-  PlayCircle,
-  Share2,
-  X,
-} from "lucide-react";
-
-export interface NotificationCardData {
-  type: "text" | "image" | "video" | "audio";
-  title: string;
-  id: string;
-  content?: string;
-  mediaUrl?: string;
-}
-
-interface NotificationCardProps {
-  notification: NotificationCardData;
-  onClose: () => void;
-}
-
-const NotificationCard = ({
-  notification: { type, title, content, mediaUrl },
-  onClose,
-}: NotificationCardProps) => {
-  const barHeights = Array.from({ length: 60 }, () =>
-    Math.floor(Math.random() * (34 - 20 + 1) + 20),
-  );
-
-  const handleClose = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    onClose();
-  };
-
-  return (
-    <div className="w-[430px] space-y-[22px] rounded-[14px] border border-neutral-100 bg-neutral-50 p-[16px] pt-[12px]">
-      <div className="flex items-center justify-between">
-        {/* count */}
-        <div className="flex items-center gap-[10px]">
-          <p className="font-sans text-[12px] font-medium text-neutral-500">
-            1/4
-          </p>
-          <p className="h-[26px] rounded-[45px] bg-green-100 px-[9px] py-[3px] font-sans text-[12px] font-medium text-green-800">
-            Success
-          </p>
-        </div>
-
-        {/* cross icon */}
-        <Button
-          variant="ghost"
-          className="p-0 hover:bg-transparent"
-          onClick={handleClose}
-        >
-          <X
-            className="h-6 w-6 text-[#020617] hover:scale-105"
-            strokeWidth={1.25}
-          />
-        </Button>
-      </div>
-
-      <div className="space-y-[6px] p-0">
-        <p className="font-sans text-[14px] font-medium leading-[20px] text-neutral-500">
-          New Output Ready!
-        </p>
-        <h2 className="font-poppin text-[20px] font-medium leading-7 text-neutral-800">
-          {title}
-        </h2>
-        {type === "text" && <Separator />}
-      </div>
-
-      <div className="p-0">
-        {type === "text" && (
-          // Maybe in future we give markdown support
-          <div className="mt-[-8px] line-clamp-6 font-sans text-sm font-[400px] text-neutral-600">
-            {content}
-          </div>
-        )}
-
-        {type === "image" &&
-          (mediaUrl ? (
-            <div className="relative h-[200px] w-full">
-              <Image
-                src={mediaUrl}
-                alt={title}
-                fill
-                className="rounded-lg object-cover"
-              />
-            </div>
-          ) : (
-            <div className="flex h-[244px] w-full items-center justify-center rounded-lg bg-[#D9D9D9]">
-              <ImageIcon
-                className="h-[138px] w-[138px] text-neutral-400"
-                strokeWidth={1}
-              />
-            </div>
-          ))}
-
-        {type === "video" && (
-          <div className="space-y-4">
-            {mediaUrl ? (
-              <video src={mediaUrl} controls className="w-full rounded-lg" />
-            ) : (
-              <div className="flex h-[219px] w-[398px] items-center justify-center rounded-lg bg-[#D9D9D9]">
-                <PlayCircle
-                  className="h-16 w-16 text-neutral-500"
-                  strokeWidth={1}
-                />
-              </div>
-            )}
-          </div>
-        )}
-
-        {type === "audio" && (
-          <div className="flex gap-2">
-            <CirclePlayIcon
-              className="h-10 w-10 rounded-full bg-neutral-800 text-white"
-              strokeWidth={1}
-            />
-            <div className="flex flex-1 items-center justify-between">
-              {/* <audio src={mediaUrl} controls className="w-full" /> */}
-              {barHeights.map((h, i) => {
-                return (
-                  <div
-                    key={i}
-                    className={`rounded-[8px] bg-neutral-500`}
-                    style={{
-                      height: `${h}px`,
-                      width: "3px",
-                    }}
-                  />
-                );
-              })}
-            </div>
-          </div>
-        )}
-      </div>
-
-      <div className="flex justify-between gap-2 p-0">
-        <div className="space-x-3">
-          <Button
-            variant="outline"
-            onClick={() => {
-              navigator.share({
-                title,
-                text: content,
-                url: mediaUrl,
-              });
-            }}
-            className="h-10 w-10 rounded-full border-neutral-800 p-0"
-          >
-            <Share2 className="h-5 w-5" strokeWidth={1} />
-          </Button>
-          <Button
-            variant="outline"
-            onClick={() =>
-              navigator.clipboard.writeText(content || mediaUrl || "")
-            }
-            className="h-10 w-10 rounded-full border-neutral-800 p-0"
-          >
-            <ClipboardCopy className="h-5 w-5" strokeWidth={1} />
-          </Button>
-        </div>
-        <Button className="h-[40px] rounded-[52px] bg-neutral-800 px-4 py-2">
-          See run
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-export default NotificationCard;

autogpt_platform/frontend/src/app/(platform)/library/components/LibraryNotificationDropdown/LibraryNotificationDropdown.tsx

@@ -1,132 +0,0 @@
-"use client";
-import React, { useState, useEffect, useMemo } from "react";
-
-import { motion, useAnimationControls } from "framer-motion";
-import { BellIcon, X } from "lucide-react";
-import { Button } from "@/components/__legacy__/Button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-} from "@/components/__legacy__/ui/dropdown-menu";
-import NotificationCard, {
-  NotificationCardData,
-} from "../LibraryNotificationCard/LibraryNotificationCard";
-
-export default function LibraryNotificationDropdown(): React.ReactNode {
-  const controls = useAnimationControls();
-  const [open, setOpen] = useState(false);
-  const [notifications, setNotifications] = useState<
-    NotificationCardData[] | null
-  >(null);
-
-  const initialNotificationData = useMemo(
-    () =>
-      [
-        {
-          type: "audio",
-          title: "Audio Processing Complete",
-          id: "4",
-        },
-        {
-          type: "text",
-          title: "LinkedIn Post Generator: YouTube to Professional Content",
-          id: "1",
-          content:
-            "As artificial intelligence (AI) continues to evolve, it's increasingly clear that AI isn't just a trend—it's reshaping the way we work, innovate, and solve complex problems. However, for many professionals, the question remains: How can I leverage AI to drive meaningful results in my own field? In this article, we'll explore how AI can empower businesses and individuals alike to be more efficient, make better decisions, and unlock new opportunities. Whether you're in tech, finance, healthcare, or any other industry, understanding the potential of AI can set you apart.",
-        },
-        {
-          type: "image",
-          title: "New Image Upload",
-          id: "2",
-        },
-        {
-          type: "video",
-          title: "Video Processing Complete",
-          id: "3",
-        },
-      ] as NotificationCardData[],
-    [],
-  );
-
-  useEffect(() => {
-    if (initialNotificationData) {
-      setNotifications(initialNotificationData);
-    }
-  }, [initialNotificationData]);
-
-  const handleHoverStart = () => {
-    controls.start({
-      rotate: [0, -10, 10, -10, 10, 0],
-      transition: { duration: 0.5 },
-    });
-  };
-
-  return (
-    <DropdownMenu open={open} onOpenChange={setOpen}>
-      <DropdownMenuTrigger className="sm:flex-1" asChild>
-        <Button
-          variant={open ? "primary" : "outline"}
-          onMouseEnter={handleHoverStart}
-          onMouseLeave={handleHoverStart}
-          className="w-fit max-w-[161px] transition-all duration-200 ease-in-out sm:w-[161px]"
-        >
-          <motion.div animate={controls}>
-            <BellIcon
-              className="h-5 w-5 transition-all duration-200 ease-in-out sm:mr-2"
-              strokeWidth={2}
-            />
-          </motion.div>
-          <motion.div
-            initial={{ opacity: 1 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            className="hidden items-center transition-opacity duration-300 sm:inline-flex"
-          >
-            Your updates
-            <span className="ml-2 text-[14px]">
-              {notifications?.length || 0}
-            </span>
-          </motion.div>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent
-        sideOffset={22}
-        className="relative left-[16px] h-[80vh] w-fit overflow-y-auto rounded-[26px] bg-[#C5C5CA] p-5"
-      >
-        <DropdownMenuLabel className="z-10 mb-4 font-sans text-[18px] text-white">
-          Agent run updates
-        </DropdownMenuLabel>
-        <button
-          className="absolute right-[10px] top-[20px] h-fit w-fit"
-          onClick={() => setOpen(false)}
-        >
-          <X className="h-6 w-6 text-white hover:text-white/60" />
-        </button>
-        <div className="space-y-[12px]">
-          {notifications && notifications.length ? (
-            notifications.map((notification) => (
-              <DropdownMenuItem key={notification.id} className="p-0">
-                <NotificationCard
-                  notification={notification}
-                  onClose={() =>
-                    setNotifications((prev) => {
-                      if (!prev) return null;
-                      return prev.filter((n) => n.id !== notification.id);
-                    })
-                  }
-                />
-              </DropdownMenuItem>
-            ))
-          ) : (
-            <div className="w-[464px] py-4 text-center text-white">
-              No notifications present
-            </div>
-          )}
-        </div>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/library/components/LibrarySearchBar/LibrarySearchBar.tsx

@@ -1,40 +1,37 @@
 "use client";
-import { Input } from "@/components/__legacy__/ui/input";
-import { Search, X } from "lucide-react";
+
+import { Input } from "@/components/atoms/Input/Input";
+import { MagnifyingGlassIcon } from "@phosphor-icons/react";
 import { useLibrarySearchbar } from "./useLibrarySearchbar";
 
-export default function LibrarySearchBar(): React.ReactNode {
-  const { handleSearchInput, handleClear, setIsFocused, isFocused, inputRef } =
-    useLibrarySearchbar();
+interface Props {
+  setSearchTerm: (value: string) => void;
+}
+
+export function LibrarySearchBar({ setSearchTerm }: Props) {
+  const { handleSearchInput } = useLibrarySearchbar({ setSearchTerm });
+
   return (
     <div
       data-testid="search-bar"
-      onClick={() => inputRef.current?.focus()}
-      className="relative z-[21] mx-auto flex h-[50px] w-full max-w-[500px] flex-1 cursor-pointer items-center rounded-[45px] bg-[#EDEDED] px-[24px] py-[10px]"
+      className="relative z-[21] -mb-6 flex w-full items-center md:w-auto"
     >
-      <Search
-        className="mr-2 h-[29px] w-[29px] text-neutral-900"
-        strokeWidth={1.25}
+      <MagnifyingGlassIcon
+        width={18}
+        height={18}
+        className="absolute left-4 top-[34%] z-20 -translate-y-1/2 text-zinc-800"
       />
 
       <Input
-        ref={inputRef}
-        onFocus={() => setIsFocused(true)}
-        onBlur={() => !inputRef.current?.value && setIsFocused(false)}
+        label="Search agents"
+        id="library-search-bar"
+        hideLabel
         onChange={handleSearchInput}
-        className="flex-1 border-none font-sans text-[16px] font-normal leading-7 shadow-none focus:shadow-none focus:ring-0"
+        className="min-w-[18rem] pl-12 lg:min-w-[30rem]"
         type="text"
         data-testid="library-textbox"
         placeholder="Search agents"
       />
-
-      {isFocused && inputRef.current?.value && (
-        <X
-          className="ml-2 h-[29px] w-[29px] cursor-pointer text-neutral-900"
-          strokeWidth={1.25}
-          onClick={handleClear}
-        />
-      )}
     </div>
   );
 }

autogpt_platform/frontend/src/app/(platform)/library/components/LibrarySearchBar/useLibrarySearchbar.tsx

@@ -1,36 +1,30 @@
-import { useRef, useState } from "react";
-import { useLibraryPageContext } from "../state-provider";
 import { debounce } from "lodash";
+import { useCallback, useEffect } from "react";
 
-export const useLibrarySearchbar = () => {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [isFocused, setIsFocused] = useState(false);
-  const { setSearchTerm } = useLibraryPageContext();
+interface Props {
+  setSearchTerm: (value: string) => void;
+}
 
-  const debouncedSearch = debounce((value: string) => {
-    setSearchTerm(value);
-  }, 300);
+export function useLibrarySearchbar({ setSearchTerm }: Props) {
+  const debouncedSearch = useCallback(
+    debounce((value: string) => {
+      setSearchTerm(value);
+    }, 300),
+    [setSearchTerm],
+  );
 
-  const handleSearchInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+  useEffect(() => {
+    return () => {
+      debouncedSearch.cancel();
+    };
+  }, [debouncedSearch]);
+
+  function handleSearchInput(e: React.ChangeEvent<HTMLInputElement>) {
     const searchTerm = e.target.value;
     debouncedSearch(searchTerm);
-  };
-
-  const handleClear = (e: React.MouseEvent) => {
-    if (inputRef.current) {
-      inputRef.current.value = "";
-      inputRef.current.blur();
-      setSearchTerm("");
-      e.preventDefault();
-    }
-    setIsFocused(false);
-  };
+  }
 
   return {
-    handleClear,
     handleSearchInput,
-    isFocused,
-    inputRef,
-    setIsFocused,
   };
-};
+}

autogpt_platform/frontend/src/app/(platform)/library/components/LibrarySortMenu/LibrarySortMenu.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { ArrowDownNarrowWideIcon } from "lucide-react";
+import { LibraryAgentSort } from "@/app/api/__generated__/models/libraryAgentSort";
 import {
   Select,
   SelectContent,
@@ -8,11 +8,15 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/__legacy__/ui/select";
-import { LibraryAgentSort } from "@/app/api/__generated__/models/libraryAgentSort";
+import { ArrowDownNarrowWideIcon } from "lucide-react";
 import { useLibrarySortMenu } from "./useLibrarySortMenu";
 
-export default function LibrarySortMenu(): React.ReactNode {
-  const { handleSortChange } = useLibrarySortMenu();
+interface Props {
+  setLibrarySort: (value: LibraryAgentSort) => void;
+}
+
+export function LibrarySortMenu({ setLibrarySort }: Props) {
+  const { handleSortChange } = useLibrarySortMenu({ setLibrarySort });
   return (
     <div className="flex items-center" data-testid="sort-by-dropdown">
       <span className="hidden whitespace-nowrap sm:inline">sort by</span>

autogpt_platform/frontend/src/app/(platform)/library/components/LibrarySortMenu/useLibrarySortMenu.ts

@@ -1,11 +1,11 @@
 import { LibraryAgentSort } from "@/app/api/__generated__/models/libraryAgentSort";
-import { useLibraryPageContext } from "../state-provider";
 
-export const useLibrarySortMenu = () => {
-  const { setLibrarySort } = useLibraryPageContext();
+interface Props {
+  setLibrarySort: (value: LibraryAgentSort) => void;
+}
 
+export function useLibrarySortMenu({ setLibrarySort }: Props) {
   const handleSortChange = (value: LibraryAgentSort) => {
-    // Simply updating the sort state - React Query will handle the rest
     setLibrarySort(value);
   };
 
@@ -24,4 +24,4 @@ export const useLibrarySortMenu = () => {
     handleSortChange,
     getSortLabel,
   };
-};
+}

autogpt_platform/frontend/src/app/(platform)/library/components/LibraryUploadAgentDialog/LibraryUploadAgentDialog.tsx

@@ -1,192 +1,134 @@
 "use client";
-import { Upload, X } from "lucide-react";
-import { Button } from "@/components/__legacy__/Button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/__legacy__/ui/dialog";
-import { z } from "zod";
-import { FileUploader } from "react-drag-drop-files";
+import { Button } from "@/components/atoms/Button/Button";
+import { FileInput } from "@/components/atoms/FileInput/FileInput";
+import { Input } from "@/components/atoms/Input/Input";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
 import {
   Form,
   FormControl,
   FormField,
   FormItem,
-  FormLabel,
   FormMessage,
-} from "@/components/__legacy__/ui/form";
-import { Input } from "@/components/__legacy__/ui/input";
-import { Textarea } from "@/components/__legacy__/ui/textarea";
+} from "@/components/molecules/Form/Form";
+import { UploadSimpleIcon } from "@phosphor-icons/react";
+import { z } from "zod";
 import { useLibraryUploadAgentDialog } from "./useLibraryUploadAgentDialog";
 
-const fileTypes = ["JSON"];
-
-const fileSchema = z.custom<File>((val) => val instanceof File, {
-  message: "Must be a File object",
-});
-
 export const uploadAgentFormSchema = z.object({
-  agentFile: fileSchema,
+  agentFile: z.string().min(1, "Agent file is required"),
   agentName: z.string().min(1, "Agent name is required"),
   agentDescription: z.string(),
 });
 
-export default function LibraryUploadAgentDialog(): React.ReactNode {
-  const {
-    onSubmit,
-    isUploading,
-    isOpen,
-    setIsOpen,
-    isDroped,
-    handleChange,
-    form,
-    setisDroped,
-    agentObject,
-    clearAgentFile,
-  } = useLibraryUploadAgentDialog();
+export default function LibraryUploadAgentDialog() {
+  const { onSubmit, isUploading, isOpen, setIsOpen, form, agentObject } =
+    useLibraryUploadAgentDialog();
+
   return (
-    <Dialog open={isOpen} onOpenChange={setIsOpen}>
-      <DialogTrigger asChild>
+    <Dialog
+      title="Upload Agent"
+      styling={{ maxWidth: "30rem" }}
+      controlled={{
+        isOpen,
+        set: setIsOpen,
+      }}
+      onClose={() => {
+        setIsOpen(false);
+      }}
+    >
+      <Dialog.Trigger>
         <Button
           data-testid="upload-agent-button"
           variant="primary"
-          className="w-fit sm:w-[177px]"
+          className="h-[2.78rem] w-full md:w-[12rem]"
+          size="small"
         >
-          <Upload className="h-5 w-5 sm:mr-2" />
-          <span className="hidden items-center sm:inline-flex">
-            Upload an agent
-          </span>
+          <UploadSimpleIcon width={18} height={18} />
+          <span className="">Upload agent</span>
         </Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle className="mb-8 text-center">Upload Agent</DialogTitle>
-          <DialogDescription>
-            Upload your agent by providing a name, description, and JSON file.
-          </DialogDescription>
-        </DialogHeader>
+      </Dialog.Trigger>
+      <Dialog.Content>
+        <Form
+          form={form}
+          onSubmit={onSubmit}
+          className="flex flex-col justify-center gap-0 px-1"
+        >
+          <FormField
+            control={form.control}
+            name="agentName"
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <Input
+                    {...field}
+                    id={field.name}
+                    label="Agent name"
+                    className="w-full rounded-[10px]"
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
 
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-            <FormField
-              control={form.control}
-              name="agentName"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Agent name</FormLabel>
-                  <FormControl>
-                    <Input {...field} className="w-full rounded-[10px]" />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+          <FormField
+            control={form.control}
+            name="agentDescription"
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <Input
+                    {...field}
+                    id={field.name}
+                    label="Agent description"
+                    type="textarea"
+                    className="w-full rounded-[10px]"
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
 
-            <FormField
-              control={form.control}
-              name="agentDescription"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Description</FormLabel>
-                  <FormControl>
-                    <Textarea {...field} className="w-full rounded-[10px]" />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+          <FormField
+            control={form.control}
+            name="agentFile"
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <FileInput
+                    mode="base64"
+                    value={field.value}
+                    onChange={field.onChange}
+                    accept=".json,application/json"
+                    placeholder="Agent file"
+                    maxFileSize={10 * 1024 * 1024}
+                    showStorageNote={false}
+                    className="mb-8 mt-4"
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
 
-            <FormField
-              control={form.control}
-              name="agentFile"
-              render={({ field }) => (
-                <FormItem className="rounded-xl border-2 border-dashed border-neutral-300 hover:border-neutral-600">
-                  <FormControl>
-                    {field.value ? (
-                      <div className="relative flex rounded-[10px] border p-2 font-sans text-sm font-medium text-[#525252] outline-none">
-                        <span className="line-clamp-1">{field.value.name}</span>
-                        <Button
-                          onClick={clearAgentFile}
-                          className="absolute left-[-10px] top-[-16px] mt-2 h-fit border-none bg-red-200 p-1"
-                        >
-                          <X
-                            className="m-0 h-[12px] w-[12px] text-red-600"
-                            strokeWidth={3}
-                          />
-                        </Button>
-                      </div>
-                    ) : (
-                      <FileUploader
-                        handleChange={handleChange}
-                        name="file"
-                        types={fileTypes}
-                        label={"Upload your agent here..!!"}
-                        uploadedLabel={"Uploading Successful"}
-                        required={true}
-                        hoverTitle={"Drop your agent here...!!"}
-                        maxSize={10}
-                        classes={"drop-style"}
-                        onDrop={() => {
-                          setisDroped(true);
-                        }}
-                        onSelect={() => setisDroped(true)}
-                      >
-                        <div
-                          style={{
-                            minHeight: "150px",
-                            display: "flex",
-                            flexDirection: "column",
-                            justifyContent: "center",
-                            alignItems: "center",
-                            outline: "none",
-                            color: "#525252",
-                            fontSize: "14px",
-                            fontWeight: "500",
-                            borderWidth: "0px",
-                          }}
-                        >
-                          {isDroped ? (
-                            <div className="flex items-center justify-center py-4">
-                              <div className="h-8 w-8 animate-spin rounded-full border-b-2 border-t-2 border-neutral-800"></div>
-                            </div>
-                          ) : (
-                            <>
-                              <span>Drop your agent here</span>
-                              <span>or</span>
-                              <span>Click to upload</span>
-                            </>
-                          )}
-                        </div>
-                      </FileUploader>
-                    )}
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <Button
-              type="submit"
-              variant="primary"
-              className="mt-2 self-end"
-              disabled={!agentObject || isUploading}
-            >
-              {isUploading ? (
-                <div className="flex items-center gap-2">
-                  <div className="h-4 w-4 animate-spin rounded-full border-b-2 border-t-2 border-white"></div>
-                  <span>Uploading...</span>
-                </div>
-              ) : (
-                "Upload Agent"
-              )}
-            </Button>
-          </form>
+          <Button
+            type="submit"
+            variant="primary"
+            className="min-w-[18rem]"
+            disabled={!agentObject || isUploading}
+          >
+            {isUploading ? (
+              <div className="flex items-center gap-2">
+                <div className="h-4 w-4 animate-spin rounded-full border-b-2 border-t-2 border-white"></div>
+                <span>Uploading...</span>
+              </div>
+            ) : (
+              "Upload"
+            )}
+          </Button>
         </Form>
-      </DialogContent>
+      </Dialog.Content>
     </Dialog>
   );
 }

autogpt_platform/frontend/src/app/(platform)/library/components/LibraryUploadAgentDialog/useLibraryUploadAgentDialog.ts

@@ -1,16 +1,15 @@
+import { usePostV1CreateNewGraph } from "@/app/api/__generated__/endpoints/graphs/graphs";
+import { Graph } from "@/app/api/__generated__/models/graph";
+import { GraphModel } from "@/app/api/__generated__/models/graphModel";
+import { useToast } from "@/components/molecules/Toast/use-toast";
+import { sanitizeImportedGraph } from "@/lib/autogpt-server-api";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { uploadAgentFormSchema } from "./LibraryUploadAgentDialog";
-import { usePostV1CreateNewGraph } from "@/app/api/__generated__/endpoints/graphs/graphs";
-import { GraphModel } from "@/app/api/__generated__/models/graphModel";
-import { useToast } from "@/components/molecules/Toast/use-toast";
-import { useState } from "react";
-import { Graph } from "@/app/api/__generated__/models/graph";
-import { sanitizeImportedGraph } from "@/lib/autogpt-server-api";
 
-export const useLibraryUploadAgentDialog = () => {
-  const [isDroped, setisDroped] = useState(false);
+export function useLibraryUploadAgentDialog() {
   const [isOpen, setIsOpen] = useState(false);
   const { toast } = useToast();
   const [agentObject, setAgentObject] = useState<Graph | null>(null);
@@ -43,9 +42,78 @@ export const useLibraryUploadAgentDialog = () => {
     defaultValues: {
       agentName: "",
       agentDescription: "",
+      agentFile: "",
     },
   });
 
+  const agentFileValue = form.watch("agentFile");
+  const prevAgentObjectRef = useRef<Graph | null>(null);
+
+  useEffect(() => {
+    if (!agentFileValue) {
+      const prevAgent = prevAgentObjectRef.current;
+      if (prevAgent) {
+        const currentName = form.getValues("agentName");
+        const currentDescription = form.getValues("agentDescription");
+        if (currentName === prevAgent.name) {
+          form.setValue("agentName", "");
+        }
+        if (currentDescription === prevAgent.description) {
+          form.setValue("agentDescription", "");
+        }
+      }
+      setAgentObject(null);
+      prevAgentObjectRef.current = null;
+      return;
+    }
+
+    try {
+      const base64Match = agentFileValue.match(/^data:[^;]+;base64,(.+)$/);
+      if (!base64Match) {
+        throw new Error("Invalid base64 data URL format");
+      }
+
+      const base64String = base64Match[1];
+      const jsonString = atob(base64String);
+      const obj = JSON.parse(jsonString);
+
+      if (
+        !["name", "description", "nodes", "links"].every(
+          (key) => key in obj && obj[key] != null,
+        )
+      ) {
+        throw new Error(
+          "Invalid agent file. Please upload a valid agent.json file that has been previously exported from the AutoGPT platform. The file must contain the required fields: name, description, nodes, and links.",
+        );
+      }
+
+      const agent = obj as Graph;
+      sanitizeImportedGraph(agent);
+      setAgentObject(agent);
+      prevAgentObjectRef.current = agent;
+
+      if (!form.getValues("agentName")) {
+        form.setValue("agentName", agent.name);
+      }
+      if (!form.getValues("agentDescription")) {
+        form.setValue("agentDescription", agent.description);
+      }
+    } catch (error) {
+      console.error("Error loading agent file:", error);
+
+      toast({
+        title: "Invalid Agent File",
+        description:
+          "Please upload a valid agent.json file that has been previously exported from the AutoGPT platform. The file must contain the required fields: name, description, nodes, and links.",
+        duration: 5000,
+        variant: "destructive",
+      });
+
+      form.resetField("agentFile");
+      setAgentObject(null);
+    }
+  }, [agentFileValue, form, toast]);
+
   const onSubmit = async (values: z.infer<typeof uploadAgentFormSchema>) => {
     if (!agentObject) {
       form.setError("root", { message: "No Agent object to save" });
@@ -67,69 +135,6 @@ export const useLibraryUploadAgentDialog = () => {
     });
   };
 
-  const handleChange = (file: File) => {
-    setTimeout(() => {
-      setisDroped(false);
-    }, 2000);
-
-    form.setValue("agentFile", file);
-    const reader = new FileReader();
-    reader.onload = (event) => {
-      try {
-        const obj = JSON.parse(event.target?.result as string);
-        if (
-          !["name", "description", "nodes", "links"].every(
-            (key) => key in obj && obj[key] != null,
-          )
-        ) {
-          throw new Error(
-            "Invalid agent file. Please upload a valid agent.json file that has been previously exported from the AutoGPT platform. The file must contain the required fields: name, description, nodes, and links.",
-          );
-        }
-        const agent = obj as Graph;
-        sanitizeImportedGraph(agent);
-        setAgentObject(agent);
-        if (!form.getValues("agentName")) {
-          form.setValue("agentName", agent.name);
-        }
-        if (!form.getValues("agentDescription")) {
-          form.setValue("agentDescription", agent.description);
-        }
-      } catch (error) {
-        console.error("Error loading agent file:", error);
-
-        toast({
-          title: "Invalid Agent File",
-          description:
-            "Please upload a valid agent.json file that has been previously exported from the AutoGPT platform. The file must contain the required fields: name, description, nodes, and links.",
-          duration: 5000,
-          variant: "destructive",
-        });
-
-        form.resetField("agentFile");
-        setAgentObject(null);
-      }
-    };
-    reader.readAsText(file);
-    setisDroped(false);
-  };
-
-  const clearAgentFile = () => {
-    const currentName = form.getValues("agentName");
-    const currentDescription = form.getValues("agentDescription");
-    const prevAgent = agentObject;
-
-    form.setValue("agentFile", undefined as any);
-    if (prevAgent && currentName === prevAgent.name) {
-      form.setValue("agentName", "");
-    }
-    if (prevAgent && currentDescription === prevAgent.description) {
-      form.setValue("agentDescription", "");
-    }
-
-    setAgentObject(null);
-  };
-
   return {
     onSubmit,
     isUploading,
@@ -137,9 +142,5 @@ export const useLibraryUploadAgentDialog = () => {
     setIsOpen,
     form,
     agentObject,
-    isDroped,
-    handleChange,
-    setisDroped,
-    clearAgentFile,
   };
-};
+}

autogpt_platform/frontend/src/app/(platform)/library/components/state-provider.tsx

@@ -1,59 +0,0 @@
-"use client";
-
-import { LibraryAgentSort } from "@/app/api/__generated__/models/libraryAgentSort";
-import {
-  createContext,
-  useState,
-  ReactNode,
-  useContext,
-  Dispatch,
-  SetStateAction,
-} from "react";
-
-interface LibraryPageContextType {
-  searchTerm: string;
-  setSearchTerm: Dispatch<SetStateAction<string>>;
-  uploadedFile: File | null;
-  setUploadedFile: Dispatch<SetStateAction<File | null>>;
-  librarySort: LibraryAgentSort;
-  setLibrarySort: Dispatch<SetStateAction<LibraryAgentSort>>;
-}
-
-export const LibraryPageContext = createContext<LibraryPageContextType>(
-  {} as LibraryPageContextType,
-);
-
-export function LibraryPageStateProvider({
-  children,
-}: {
-  children: ReactNode;
-}) {
-  const [searchTerm, setSearchTerm] = useState<string>("");
-  const [uploadedFile, setUploadedFile] = useState<File | null>(null);
-  const [librarySort, setLibrarySort] = useState<LibraryAgentSort>(
-    LibraryAgentSort.updatedAt,
-  );
-
-  return (
-    <LibraryPageContext.Provider
-      value={{
-        searchTerm,
-        setSearchTerm,
-        uploadedFile,
-        setUploadedFile,
-        librarySort,
-        setLibrarySort,
-      }}
-    >
-      {children}
-    </LibraryPageContext.Provider>
-  );
-}
-
-export function useLibraryPageContext(): LibraryPageContextType {
-  const context = useContext(LibraryPageContext);
-  if (!context) {
-    throw new Error("Error in context of Library page");
-  }
-  return context;
-}

autogpt_platform/frontend/src/app/(platform)/library/components/useLibraryListPage.ts

@@ -0,0 +1,41 @@
+"use client";
+
+import { LibraryAgentSort } from "@/app/api/__generated__/models/libraryAgentSort";
+import { parseAsStringEnum, useQueryState } from "nuqs";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+const sortParser = parseAsStringEnum(Object.values(LibraryAgentSort));
+
+export function useLibraryListPage() {
+  const [searchTerm, setSearchTerm] = useState<string>("");
+  const [uploadedFile, setUploadedFile] = useState<File | null>(null);
+  const [librarySortRaw, setLibrarySortRaw] = useQueryState("sort", sortParser);
+
+  // Ensure sort param is always present in URL (even if default)
+  useEffect(() => {
+    if (!librarySortRaw) {
+      setLibrarySortRaw(LibraryAgentSort.updatedAt, { shallow: false });
+    }
+  }, [librarySortRaw, setLibrarySortRaw]);
+
+  const librarySort = librarySortRaw || LibraryAgentSort.updatedAt;
+
+  const setLibrarySort = useCallback(
+    (value: LibraryAgentSort) => {
+      setLibrarySortRaw(value, { shallow: false });
+    },
+    [setLibrarySortRaw],
+  );
+
+  return useMemo(
+    () => ({
+      searchTerm,
+      setSearchTerm,
+      uploadedFile,
+      setUploadedFile,
+      librarySort,
+      setLibrarySort,
+    }),
+    [searchTerm, uploadedFile, librarySort, setLibrarySort],
+  );
+}

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

@@ -1,23 +1,28 @@
 "use client";
 
 import { useEffect } from "react";
-import FavoritesSection from "./components/FavoritesSection/FavoritesSection";
-import LibraryActionHeader from "./components/LibraryActionHeader/LibraryActionHeader";
-import LibraryAgentList from "./components/LibraryAgentList/LibraryAgentList";
-import { LibraryPageStateProvider } from "./components/state-provider";
+import { FavoritesSection } from "./components/FavoritesSection/FavoritesSection";
+import { LibraryActionHeader } from "./components/LibraryActionHeader/LibraryActionHeader";
+import { LibraryAgentList } from "./components/LibraryAgentList/LibraryAgentList";
+import { useLibraryListPage } from "./components/useLibraryListPage";
 
 export default function LibraryPage() {
+  const { searchTerm, setSearchTerm, librarySort, setLibrarySort } =
+    useLibraryListPage();
+
   useEffect(() => {
     document.title = "Library – AutoGPT Platform";
   }, []);
 
   return (
     <main className="pt-160 container min-h-screen space-y-4 pb-20 pt-16 sm:px-8 md:px-12">
-      <LibraryPageStateProvider>
-        <LibraryActionHeader />
-        <FavoritesSection />
-        <LibraryAgentList />
-      </LibraryPageStateProvider>
+      <LibraryActionHeader setSearchTerm={setSearchTerm} />
+      <FavoritesSection />
+      <LibraryAgentList
+        searchTerm={searchTerm}
+        librarySort={librarySort}
+        setLibrarySort={setLibrarySort}
+      />
     </main>
   );
 }

autogpt_platform/frontend/src/app/(platform)/profile/(user)/integrations/page.tsx

@@ -13,7 +13,7 @@ import {
 import { Button } from "@/components/atoms/Button/Button";
 import { Dialog } from "@/components/molecules/Dialog/Dialog";
 import { useToast } from "@/components/molecules/Toast/use-toast";
-import { providerIcons } from "@/components/renderers/input-renderer/fields/CredentialField/helpers";
+import { providerIcons } from "@/components/renderers/InputRenderer/custom/CredentialField/helpers";
 import { CredentialsProviderName } from "@/lib/autogpt-server-api";
 import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
 import { CredentialsProvidersContext } from "@/providers/agent-credentials/credentials-provider";

autogpt_platform/frontend/src/app/api/mutators/custom-mutator.ts

@@ -41,11 +41,9 @@ export const customMutator = async <
   T extends { data: any; status: number; headers: Headers },
 >(
   url: string,
-  options: RequestInit & {
-    params?: any;
-  } = {},
+  options: RequestInit,
 ): Promise<T> => {
-  const { params, ...requestOptions } = options;
+  const requestOptions = options;
   const method = (requestOptions.method || "GET") as
     | "GET"
     | "POST"
@@ -87,14 +85,11 @@ export const customMutator = async <
     headers["Content-Type"] = "application/json";
   }
 
-  const queryString = params
-    ? "?" + new URLSearchParams(params).toString()
-    : "";
-
   const baseUrl = getBaseUrl();
 
   // The caching in React Query in our system depends on the url, so the base_url could be different for the server and client sides.
-  const fullUrl = `${baseUrl}${url}${queryString}`;
+  // here url also contains encoded query params
+  const fullUrl = `${baseUrl}${url}`;
 
   if (environment.isServerSide()) {
     try {

autogpt_platform/frontend/src/components/contextual/GoogleDrivePicker/GoogleDrivePicker.tsx

@@ -49,6 +49,7 @@ export function GoogleDrivePicker(props: Props) {
       )}
       <Button
         size="small"
+        type="button"
         onClick={handleOpenPicker}
         disabled={props.disabled || isLoading || isAuthInProgress}
       >

autogpt_platform/frontend/src/components/contextual/GoogleDrivePicker/GoogleDrivePickerInput.tsx

@@ -4,6 +4,7 @@ import { cn } from "@/lib/utils";
 import { Cross2Icon } from "@radix-ui/react-icons";
 import React, { useCallback } from "react";
 import { GoogleDrivePicker } from "./GoogleDrivePicker";
+import { isValidFile } from "./helpers";
 
 export interface Props {
   config: GoogleDrivePickerConfig;
@@ -27,13 +28,15 @@ export function GoogleDrivePickerInput({
   const hasAutoCredentials = !!config.auto_credentials;
 
   // Strip _credentials_id from value for display purposes
-  const currentFiles = isMultiSelect
-    ? Array.isArray(value)
-      ? value
-      : []
-    : value
-      ? [value]
-      : [];
+  // Only show files section when there are valid file objects
+  const currentFiles = React.useMemo(() => {
+    if (isMultiSelect) {
+      if (!Array.isArray(value)) return [];
+      return value.filter(isValidFile);
+    }
+    if (!value || !isValidFile(value)) return [];
+    return [value];
+  }, [value, isMultiSelect]);
 
   const handlePicked = useCallback(
     (files: any[], credentialId?: string) => {
@@ -85,23 +88,27 @@ export function GoogleDrivePickerInput({
 
   return (
     <div className={cn("flex flex-col gap-2", className)}>
-      {/* Picker Button */}
-      <GoogleDrivePicker
-        multiselect={config.multiselect || false}
-        views={config.allowed_views || ["DOCS"]}
-        scopes={config.scopes || ["https://www.googleapis.com/auth/drive.file"]}
-        disabled={false}
-        requirePlatformCredentials={hasAutoCredentials}
-        onPicked={handlePicked}
-        onCanceled={() => {
-          // User canceled - no action needed
-        }}
-        onError={handleError}
-      />
+      <div className="mb-4">
+        {/* Picker Button */}
+        <GoogleDrivePicker
+          multiselect={config.multiselect || false}
+          views={config.allowed_views || ["DOCS"]}
+          scopes={
+            config.scopes || ["https://www.googleapis.com/auth/drive.file"]
+          }
+          disabled={false}
+          requirePlatformCredentials={hasAutoCredentials}
+          onPicked={handlePicked}
+          onCanceled={() => {
+            // User canceled - no action needed
+          }}
+          onError={handleError}
+        />
+      </div>
 
       {/* Display Selected Files */}
       {currentFiles.length > 0 && (
-        <div className="space-y-1">
+        <div className="mb-8 space-y-1">
           {currentFiles.map((file: any, idx: number) => (
             <div
               key={file.id || idx}

autogpt_platform/frontend/src/components/contextual/GoogleDrivePicker/helpers.ts

@@ -119,3 +119,14 @@ export function getCredentialsSchema(scopes: string[]) {
     secret: true,
   } satisfies BlockIOCredentialsSubSchema;
 }
+
+export function isValidFile(
+  file: unknown,
+): file is { id?: string; name?: string } {
+  return (
+    typeof file === "object" &&
+    file !== null &&
+    (typeof (file as { id?: unknown }).id === "string" ||
+      typeof (file as { name?: unknown }).name === "string")
+  );
+}

autogpt_platform/frontend/src/components/contextual/InfiniteScroll/InfiniteScroll.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import React from "react";
+import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
 import { cn } from "@/lib/utils";
+import React from "react";
 import { useInfiniteScroll } from "./useInfiniteScroll";
-import LoadingBox from "@/components/__legacy__/ui/loading";
 
 type InfiniteScrollProps = {
   children: React.ReactNode;
@@ -47,7 +47,7 @@ export const InfiniteScroll: React.FC<InfiniteScrollProps> = ({
     hasNextPage,
   });
 
-  const defaultLoader = <LoadingBox className="w-full py-4" spinnerSize={12} />;
+  const defaultLoader = <LoadingSpinner size="medium" />;
 
   return (
     <div

autogpt_platform/frontend/src/components/contextual/InfiniteScroll/useInfiniteScroll.ts

@@ -49,7 +49,26 @@ export const useInfiniteScroll = ({
 
     observer.observe(endOfListRef.current);
 
+    // Check if element is initially in view after a short delay to ensure DOM is ready
+    const checkInitialView = () => {
+      if (endOfListRef.current) {
+        const rect = endOfListRef.current.getBoundingClientRect();
+        const isInitiallyInView =
+          rect.top <= window.innerHeight + scrollThreshold &&
+          rect.bottom >= -scrollThreshold;
+
+        if (isInitiallyInView) {
+          setIsInView(true);
+        }
+      }
+    };
+
+    // Check immediately and after a short delay to catch cases where DOM updates
+    checkInitialView();
+    const timeoutId = setTimeout(checkInitialView, 100);
+
     return () => {
+      clearTimeout(timeoutId);
       observer.disconnect();
     };
   }, [hasNextPage, scrollThreshold]);
@@ -58,7 +77,7 @@ export const useInfiniteScroll = ({
     if (isInView && hasNextPage && !isLoadingRef.current) {
       loadMore();
     }
-  }, [isInView, hasNextPage]);
+  }, [isInView, hasNextPage, loadMore]);
 
   return {
     containerRef,

autogpt_platform/frontend/src/components/layout/Navbar/components/AgentActivityDropdown/useAgentActivityDropdown.ts

@@ -1,10 +1,10 @@
 import { useGetV1ListAllExecutions } from "@/app/api/__generated__/endpoints/graphs/graphs";
 
+import { okData } from "@/app/api/helpers";
 import { useExecutionEvents } from "@/hooks/useExecutionEvents";
 import { useLibraryAgents } from "@/hooks/useLibraryAgents/useLibraryAgents";
 import type { GraphExecution } from "@/lib/autogpt-server-api/types";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { okData } from "@/app/api/helpers";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   NotificationState,
   categorizeExecutions,
@@ -47,10 +47,22 @@ export function useAgentActivityDropdown() {
   );
 
   // Process initial execution state when data loads
+  // Use a ref to track if we've already processed to avoid infinite loops
+  const processedExecutionsRef = useRef<string | null>(null);
   useEffect(() => {
-    if (executions && executionsSuccess && agentInfoMap.size > 0) {
+    const executionKey = executions
+      ? `${executions.length}-${executionsSuccess}`
+      : null;
+
+    if (
+      executions &&
+      executionsSuccess &&
+      agentInfoMap.size > 0 &&
+      processedExecutionsRef.current !== executionKey
+    ) {
       const notifications = categorizeExecutions(executions, agentInfoMap);
       setNotifications(notifications);
+      processedExecutionsRef.current = executionKey;
     }
   }, [executions, executionsSuccess, agentInfoMap]);
 

autogpt_platform/frontend/src/components/molecules/Form/Form.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form";
+
+import { cn } from "@/lib/utils";
+import type { UseFormReturn } from "react-hook-form";
+
+type FormProps<TFieldValues extends FieldValues = FieldValues> = {
+  form: UseFormReturn<TFieldValues>;
+  onSubmit: (values: TFieldValues) => void | Promise<void>;
+  className?: string;
+} & Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit">;
+
+function Form<TFieldValues extends FieldValues = FieldValues>({
+  form,
+  onSubmit,
+  className,
+  children,
+  ...props
+}: FormProps<TFieldValues>) {
+  return (
+    <FormProvider {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className={cn("space-y-4", className)}
+        {...props}
+      >
+        {children}
+      </form>
+    </FormProvider>
+  );
+}
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+);
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  );
+});
+FormItem.displayName = "FormItem";
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <LabelPrimitive.Root
+      ref={ref}
+      className={cn(error && "text-red-500 dark:text-red-900", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = "FormLabel";
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = "FormControl";
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn(
+        "font-sans text-[0.75rem] font-[400] leading-[1.125rem] text-neutral-500 dark:text-neutral-400",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+FormDescription.displayName = "FormDescription";
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn(
+        "font-sans text-[0.75rem] font-[500] leading-[1.125rem] text-red-500 dark:text-red-900",
+        className,
+      )}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+});
+FormMessage.displayName = "FormMessage";
+
+export {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField,
+};

autogpt_platform/frontend/src/components/molecules/SecondaryMenu/SecondaryMenu.stories.tsx

@@ -0,0 +1,99 @@
+import { Button } from "@/components/atoms/Button/Button";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+} from "@/components/molecules/DropdownMenu/DropdownMenu";
+import {
+  ArrowSquareOutIcon,
+  CopyIcon,
+  DotsThreeOutlineVerticalIcon,
+  TrashIcon,
+} from "@phosphor-icons/react";
+import * as ContextMenu from "@radix-ui/react-context-menu";
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import {
+  SecondaryDropdownMenuContent,
+  SecondaryDropdownMenuItem,
+  SecondaryDropdownMenuSeparator,
+  SecondaryMenuContent,
+  SecondaryMenuItem,
+  SecondaryMenuSeparator,
+} from "./SecondaryMenu";
+
+const meta: Meta = {
+  title: "Molecules/SecondaryMenu",
+  component: SecondaryMenuContent,
+};
+
+export default meta;
+type Story = StoryObj<typeof SecondaryMenuContent>;
+
+export const ContextMenuExample: Story = {
+  render: () => (
+    <div className="flex h-96 items-center justify-center">
+      <ContextMenu.Root>
+        <ContextMenu.Trigger asChild>
+          <div className="flex h-32 w-64 cursor-pointer items-center justify-center rounded-lg border border-gray-300 bg-gray-50 dark:border-gray-600 dark:bg-gray-800">
+            Right-click me
+          </div>
+        </ContextMenu.Trigger>
+        <SecondaryMenuContent>
+          <SecondaryMenuItem onSelect={() => alert("Copy")}>
+            <CopyIcon size={20} className="mr-2 dark:text-gray-100" />
+            <span className="dark:text-gray-100">Copy</span>
+          </SecondaryMenuItem>
+          <SecondaryMenuItem onSelect={() => alert("Open agent")}>
+            <ArrowSquareOutIcon size={20} className="mr-2 dark:text-gray-100" />
+            <span className="dark:text-gray-100">Open agent</span>
+          </SecondaryMenuItem>
+          <SecondaryMenuSeparator />
+          <SecondaryMenuItem
+            variant="destructive"
+            onSelect={() => alert("Delete")}
+          >
+            <TrashIcon
+              size={20}
+              className="mr-2 text-red-500 dark:text-red-400"
+            />
+            <span className="dark:text-red-400">Delete</span>
+          </SecondaryMenuItem>
+        </SecondaryMenuContent>
+      </ContextMenu.Root>
+    </div>
+  ),
+};
+
+export const DropdownMenuExample: Story = {
+  render: () => (
+    <div className="flex h-96 items-center justify-center">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="secondary" size="small">
+            <DotsThreeOutlineVerticalIcon size={16} weight="fill" />
+          </Button>
+        </DropdownMenuTrigger>
+        <SecondaryDropdownMenuContent side="right" align="start">
+          <SecondaryDropdownMenuItem onClick={() => alert("Copy")}>
+            <CopyIcon size={20} className="mr-2 dark:text-gray-100" />
+            <span className="dark:text-gray-100">Copy</span>
+          </SecondaryDropdownMenuItem>
+          <SecondaryDropdownMenuItem onClick={() => alert("Open agent")}>
+            <ArrowSquareOutIcon size={20} className="mr-2 dark:text-gray-100" />
+            <span className="dark:text-gray-100">Open agent</span>
+          </SecondaryDropdownMenuItem>
+          <SecondaryDropdownMenuSeparator />
+          <SecondaryDropdownMenuItem
+            variant="destructive"
+            onClick={() => alert("Delete")}
+          >
+            <TrashIcon
+              size={20}
+              className="mr-2 text-red-500 dark:text-red-400"
+            />
+            <span className="dark:text-red-400">Delete</span>
+          </SecondaryDropdownMenuItem>
+        </SecondaryDropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  ),
+};

autogpt_platform/frontend/src/components/molecules/SecondaryMenu/SecondaryMenu.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import * as ContextMenu from "@radix-ui/react-context-menu";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import React from "react";
+
+const secondaryMenuContentClassName =
+  "z-10 rounded-xl border bg-white p-1 shadow-md dark:bg-gray-800";
+
+const secondaryMenuItemClassName =
+  "flex cursor-pointer items-center rounded-md px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700";
+
+const secondaryMenuSeparatorClassName =
+  "my-1 h-px bg-gray-300 dark:bg-gray-600";
+
+export const SecondaryMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenu.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenu.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenu.Content
+    ref={ref}
+    className={cn(secondaryMenuContentClassName, className)}
+    {...props}
+  />
+));
+SecondaryMenuContent.displayName = "SecondaryMenuContent";
+
+export const SecondaryMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenu.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenu.Item> & {
+    variant?: "default" | "destructive";
+  }
+>(({ className, variant = "default", ...props }, ref) => (
+  <ContextMenu.Item
+    ref={ref}
+    className={cn(
+      secondaryMenuItemClassName,
+      variant === "destructive" &&
+        "text-red-500 hover:bg-gray-100 dark:hover:bg-gray-700",
+      className,
+    )}
+    {...props}
+  />
+));
+SecondaryMenuItem.displayName = "SecondaryMenuItem";
+
+export const SecondaryMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenu.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenu.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenu.Separator
+    ref={ref}
+    className={cn(secondaryMenuSeparatorClassName, className)}
+    {...props}
+  />
+));
+SecondaryMenuSeparator.displayName = "SecondaryMenuSeparator";
+
+export const SecondaryDropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      className={cn(secondaryMenuContentClassName, className)}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+SecondaryDropdownMenuContent.displayName = "SecondaryDropdownMenuContent";
+
+export const SecondaryDropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    variant?: "default" | "destructive";
+  }
+>(({ className, variant = "default", ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      secondaryMenuItemClassName,
+      variant === "destructive" &&
+        "text-red-500 hover:bg-gray-100 dark:hover:bg-gray-700",
+      className,
+    )}
+    {...props}
+  />
+));
+SecondaryDropdownMenuItem.displayName = "SecondaryDropdownMenuItem";
+
+export const SecondaryDropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn(secondaryMenuSeparatorClassName, className)}
+    {...props}
+  />
+));
+SecondaryDropdownMenuSeparator.displayName = "SecondaryDropdownMenuSeparator";

autogpt_platform/frontend/src/components/renderers/InputRenderer/FormRenderer.tsx

@@ -1,26 +1,17 @@
-import { BlockUIType } from "@/app/(platform)/build/components/types";
-import Form from "@rjsf/core";
 import { RJSFSchema } from "@rjsf/utils";
-import { fields } from "./fields";
-import { templates } from "./templates";
-import { widgets } from "./widgets";
 import { preprocessInputSchema } from "./utils/input-schema-pre-processor";
 import { useMemo } from "react";
 import { customValidator } from "./utils/custom-validator";
-
-type FormContextType = {
-  nodeId?: string;
-  uiType?: BlockUIType;
-  showHandles?: boolean;
-  size?: "small" | "medium" | "large";
-};
+import Form from "./registry";
+import { ExtendedFormContextType } from "./types";
+import { generateUiSchemaForCustomFields } from "./utils/generate-ui-schema";
 
 type FormRendererProps = {
   jsonSchema: RJSFSchema;
   handleChange: (formData: any) => void;
   uiSchema: any;
   initialValues: any;
-  formContext: FormContextType;
+  formContext: ExtendedFormContextType;
 };
 
 export const FormRenderer = ({
@@ -33,19 +24,23 @@ export const FormRenderer = ({
   const preprocessedSchema = useMemo(() => {
     return preprocessInputSchema(jsonSchema);
   }, [jsonSchema]);
+
+  // Merge custom field ui:field settings with existing uiSchema
+  const mergedUiSchema = useMemo(() => {
+    return generateUiSchemaForCustomFields(preprocessedSchema, uiSchema);
+  }, [preprocessedSchema, uiSchema]);
+
   return (
-    <div className={"mt-4"}>
+    <div className={"mb-6 mt-4"}>
       <Form
+        formContext={formContext}
+        idPrefix="agpt"
+        idSeparator="_%_"
         schema={preprocessedSchema}
         validator={customValidator}
-        fields={fields}
-        templates={templates}
-        widgets={widgets}
-        formContext={formContext}
         onChange={handleChange}
-        uiSchema={uiSchema}
+        uiSchema={mergedUiSchema}
         formData={initialValues}
-        noValidate={true}
         liveValidate={false}
       />
     </div>

autogpt_platform/frontend/src/components/renderers/InputRenderer/base/anyof/AnyOfField.tsx

@@ -0,0 +1,86 @@
+import { FieldProps, getUiOptions, getWidget } from "@rjsf/utils";
+import { AnyOfFieldTitle } from "./components/AnyOfFieldTitle";
+import { isEmpty } from "lodash";
+import { useAnyOfField } from "./useAnyOfField";
+import { getHandleId, updateUiOption } from "../../helpers";
+import { useEdgeStore } from "@/app/(platform)/build/stores/edgeStore";
+import { ANY_OF_FLAG } from "../../constants";
+
+export const AnyOfField = (props: FieldProps) => {
+  const { registry, schema } = props;
+  const { fields } = registry;
+  const { SchemaField: _SchemaField } = fields;
+  const { nodeId } = registry.formContext;
+
+  const { isInputConnected } = useEdgeStore();
+
+  const uiOptions = getUiOptions(props.uiSchema, props.globalUiOptions);
+
+  const Widget = getWidget({ type: "string" }, "select", registry.widgets);
+
+  const {
+    handleOptionChange,
+    enumOptions,
+    selectedOption,
+    optionSchema,
+    field_id,
+  } = useAnyOfField(props);
+
+  const handleId = getHandleId({
+    uiOptions,
+    id: field_id + ANY_OF_FLAG,
+    schema: schema,
+  });
+
+  const updatedUiSchema = updateUiOption(props.uiSchema, {
+    handleId: handleId,
+    label: false,
+    fromAnyOf: true,
+  });
+
+  const isHandleConnected = isInputConnected(nodeId, handleId);
+
+  const optionsSchemaField =
+    (optionSchema && optionSchema.type !== "null" && (
+      <_SchemaField
+        {...props}
+        schema={optionSchema}
+        uiSchema={updatedUiSchema}
+      />
+    )) ||
+    null;
+
+  const selector = (
+    <Widget
+      id={field_id}
+      name={`${props.name}${schema.oneOf ? "__oneof_select" : "__anyof_select"}`}
+      schema={{ type: "number", default: 0 }}
+      onChange={handleOptionChange}
+      onBlur={props.onBlur}
+      onFocus={props.onFocus}
+      disabled={props.disabled || isEmpty(enumOptions)}
+      multiple={false}
+      value={selectedOption >= 0 ? selectedOption : undefined}
+      options={{ enumOptions }}
+      registry={registry}
+      placeholder={props.placeholder}
+      autocomplete={props.autocomplete}
+      className="-ml-1 h-[22px] w-fit gap-1 px-1 pl-2 text-xs font-medium"
+      autofocus={props.autofocus}
+      label=""
+      hideLabel={true}
+      readonly={props.readonly}
+    />
+  );
+
+  return (
+    <div>
+      <AnyOfFieldTitle
+        {...props}
+        selector={selector}
+        uiSchema={updatedUiSchema}
+      />
+      {!isHandleConnected && optionsSchemaField}
+    </div>
+  );
+};

autogpt_platform/frontend/src/components/renderers/InputRenderer/base/anyof/components/AnyOfFieldTitle.tsx

@@ -0,0 +1,78 @@
+import {
+  descriptionId,
+  FieldProps,
+  getTemplate,
+  getUiOptions,
+  titleId,
+} from "@rjsf/utils";
+import { shouldShowTypeSelector } from "../helpers";
+import { useIsArrayItem } from "../../array/context/array-item-context";
+import { cleanUpHandleId } from "../../../helpers";
+import { useEdgeStore } from "@/app/(platform)/build/stores/edgeStore";
+import { Text } from "@/components/atoms/Text/Text";
+import { isOptionalType } from "../../../utils/schema-utils";
+import { getTypeDisplayInfo } from "@/app/(platform)/build/components/FlowEditor/nodes/helpers";
+import { cn } from "@/lib/utils";
+
+interface customFieldProps extends FieldProps {
+  selector: JSX.Element;
+}
+
+export const AnyOfFieldTitle = (props: customFieldProps) => {
+  const { uiSchema, schema, required, name, registry, fieldPathId, selector } =
+    props;
+  const { isInputConnected } = useEdgeStore();
+  const { nodeId } = registry.formContext;
+
+  const uiOptions = getUiOptions(uiSchema);
+  const TitleFieldTemplate = getTemplate(
+    "TitleFieldTemplate",
+    registry,
+    uiOptions,
+  );
+  const DescriptionFieldTemplate = getTemplate(
+    "DescriptionFieldTemplate",
+    registry,
+    uiOptions,
+  );
+
+  const title_id = titleId(fieldPathId ?? "");
+  const description_id = descriptionId(fieldPathId ?? "");
+
+  const isArrayItem = useIsArrayItem();
+
+  const handleId = cleanUpHandleId(uiOptions.handleId);
+  const isHandleConnected = isInputConnected(nodeId, handleId);
+
+  const { isOptional, type } = isOptionalType(schema); // If we have something like int | null = we will treat it as optional int
+  const { displayType, colorClass } = getTypeDisplayInfo(type);
+
+  const shouldShowSelector =
+    shouldShowTypeSelector(schema) && !isArrayItem && !isHandleConnected;
+  const shoudlShowType = isHandleConnected || (isOptional && type);
+
+  return (
+    <div className="flex items-center gap-2">
+      <TitleFieldTemplate
+        id={title_id}
+        title={schema.title || name || ""}
+        required={required}
+        schema={schema}
+        registry={registry}
+        uiSchema={uiSchema}
+      />
+      {shoudlShowType && (
+        <Text variant="small" className={cn("text-zinc-700", colorClass)}>
+          {isOptional ? `(${displayType})` : "(any)"}
+        </Text>
+      )}
+      {shouldShowSelector && selector}
+      <DescriptionFieldTemplate
+        id={description_id}
+        description={schema.description || ""}
+        schema={schema}
+        registry={registry}
+      />
+    </div>
+  );
+};

autogpt_platform/frontend/src/components/renderers/InputRenderer/base/anyof/helpers.ts

@@ -0,0 +1,61 @@
+import { RJSFSchema, StrictRJSFSchema } from "@rjsf/utils";
+
+const TYPE_PRIORITY = [
+  "string",
+  "number",
+  "integer",
+  "boolean",
+  "array",
+  "object",
+] as const;
+
+export function getDefaultTypeIndex(options: StrictRJSFSchema[]): number {
+  for (const preferredType of TYPE_PRIORITY) {
+    const index = options.findIndex((opt) => opt.type === preferredType);
+    if (index >= 0) return index;
+  }
+
+  const nonNullIndex = options.findIndex((opt) => opt.type !== "null");
+  return nonNullIndex >= 0 ? nonNullIndex : 0;
+}
+
+/**
+ * Determines if a type selector should be shown for an anyOf schema
+ * Returns false for simple optional types (type | null)
+ * Returns true for complex anyOf (3+ types or multiple non-null types)
+ */
+export function shouldShowTypeSelector(
+  schema: RJSFSchema | undefined,
+): boolean {
+  const anyOf = schema?.anyOf;
+  if (!anyOf || !Array.isArray(anyOf) || anyOf.length === 0) {
+    return false;
+  }
+
+  if (anyOf.length === 2 && anyOf.some((opt: any) => opt.type === "null")) {
+    return false;
+  }
+
+  return anyOf.length >= 3;
+}
+
+export function isSimpleOptional(schema: RJSFSchema | undefined): boolean {
+  const anyOf = schema?.anyOf;
+  return (
+    Array.isArray(anyOf) &&
+    anyOf.length === 2 &&
+    anyOf.some((opt: any) => opt.type === "null")
+  );
+}
+
+export function getOptionalType(
+  schema: RJSFSchema | undefined,
+): string | undefined {
+  if (!isSimpleOptional(schema)) {
+    return undefined;
+  }
+
+  const anyOf = schema?.anyOf;
+  const nonNullOption = anyOf?.find((opt: any) => opt.type !== "null");
+  return nonNullOption ? (nonNullOption as any).type : undefined;
+}

autogpt_platform/frontend/src/components/renderers/InputRenderer/base/anyof/useAnyOfField.ts

@@ -0,0 +1,96 @@
+import { FieldProps, getFirstMatchingOption, mergeSchemas } from "@rjsf/utils";
+import { useRef, useState } from "react";
+import validator from "@rjsf/validator-ajv8";
+import { getDefaultTypeIndex } from "./helpers";
+import { cleanUpHandleId } from "../../helpers";
+import { useEdgeStore } from "@/app/(platform)/build/stores/edgeStore";
+
+export const useAnyOfField = (props: FieldProps) => {
+  const { registry, schema, options, onChange, formData } = props;
+  const { schemaUtils } = registry;
+
+  const getInitialOption = () => {
+    if (formData !== undefined && formData !== null) {
+      const option = getFirstMatchingOption(
+        validator,
+        formData,
+        options,
+        schema,
+      );
+      return option !== undefined ? option : getDefaultTypeIndex(options);
+    }
+    return getDefaultTypeIndex(options);
+  };
+
+  const [selectedOption, setSelectedOption] =
+    useState<number>(getInitialOption());
+  const retrievedOptions = useRef<any[]>(
+    options.map((opt: any) => schemaUtils.retrieveSchema(opt, formData)),
+  );
+
+  const option =
+    selectedOption >= 0
+      ? retrievedOptions.current[selectedOption] || null
+      : null;
+  let optionSchema: any | undefined | null;
+
+  // adding top level required to each option schema
+  if (option) {
+    const { required } = schema;
+    optionSchema = required
+      ? (mergeSchemas({ required }, option) as any)
+      : option;
+  }
+
+  const field_id = props.fieldPathId.$id;
+
+  const handleOptionChange = (option?: string) => {
+    const intOption = option !== undefined ? parseInt(option, 10) : -1;
+    if (intOption === selectedOption) return;
+
+    const newOption =
+      intOption >= 0 ? retrievedOptions.current[intOption] : undefined;
+    const oldOption =
+      selectedOption >= 0
+        ? retrievedOptions.current[selectedOption]
+        : undefined;
+
+    //   When we change the option, we need to clean the form data
+    let newFormData = schemaUtils.sanitizeDataForNewSchema(
+      newOption,
+      oldOption,
+      formData,
+    );
+
+    const handlePrefix = cleanUpHandleId(field_id);
+    console.log("handlePrefix", handlePrefix);
+    useEdgeStore
+      .getState()
+      .removeEdgesByHandlePrefix(registry.formContext.nodeId, handlePrefix);
+
+    // We have cleaned the form data, now we need to get the default form state of new selected option
+    if (newOption) {
+      newFormData = schemaUtils.getDefaultFormState(
+        newOption,
+        newFormData,
+        "excludeObjectChildren",
+      ) as any;
+    }
+
+    setSelectedOption(intOption);
+    onChange(newFormData, props.fieldPathId.path, undefined, field_id);
+  };
+
+  const enumOptions = retrievedOptions.current.map((option, index) => ({
+    value: index,
+    label: option.type,
+  }));
+
+  return {
+    handleOptionChange,
+    enumOptions,
+    selectedOption,
+    optionSchema,
+    field_id,
+  };
+};

autogpt_platform/frontend/src/components/renderers/InputRenderer/base/array/ArrayFieldItemTemplate.tsx

@@ -0,0 +1,34 @@
+import {
+  ArrayFieldItemTemplateProps,
+  getTemplate,
+  getUiOptions,
+} from "@rjsf/utils";
+
+export default function ArrayFieldItemTemplate(
+  props: ArrayFieldItemTemplateProps,
+) {
+  const { children, buttonsProps, hasToolbar, uiSchema, registry } = props;
+  const uiOptions = getUiOptions(uiSchema);
+  const ArrayFieldItemButtonsTemplate = getTemplate(
+    "ArrayFieldItemButtonsTemplate",
+    registry,
+    uiOptions,
+  );
+
+  return (
+    <div>
+      <div className="mb-2 flex flex-row flex-wrap items-center">
+        <div className="shrink grow">
+          <div className="shrink grow">{children}</div>
+        </div>
+        <div className="flex items-end justify-end">
+          {hasToolbar && (
+            <div className="-mt-4 mb-2 flex gap-2">
+              <ArrayFieldItemButtonsTemplate {...buttonsProps} />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

autogpt_platform/frontend/src/components/renderers/InputRenderer/base/array/ArrayFieldTemplate.tsx

@@ -0,0 +1,105 @@
+import {
+  ArrayFieldTemplateProps,
+  buttonId,
+  getTemplate,
+  getUiOptions,
+} from "@rjsf/utils";
+import { getHandleId, updateUiOption } from "../../helpers";
+
+export default function ArrayFieldTemplate(props: ArrayFieldTemplateProps) {
+  const {
+    canAdd,
+    disabled,
+    fieldPathId,
+    uiSchema,
+    items,
+    optionalDataControl,
+    onAddClick,
+    readonly,
+    registry,
+    required,
+    schema,
+    title,
+  } = props;
+
+  const uiOptions = getUiOptions(uiSchema);
+
+  const ArrayFieldDescriptionTemplate = getTemplate(
+    "ArrayFieldDescriptionTemplate",
+    registry,
+    uiOptions,
+  );
+  const ArrayFieldTitleTemplate = getTemplate(
+    "ArrayFieldTitleTemplate",
+    registry,
+    uiOptions,
+  );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
+
+  const {
+    ButtonTemplates: { AddButton },
+  } = registry.templates;
+
+  const { fromAnyOf } = uiOptions;
+
+  const handleId = getHandleId({
+    uiOptions,
+    id: fieldPathId.$id,
+    schema: schema,
+  });
+  const updatedUiSchema = updateUiOption(uiSchema, {
+    handleId: handleId,
+  });
+
+  return (
+    <div>
+      <div className="m-0 flex p-0">
+        <div className="m-0 w-full space-y-4 p-0">
+          {!fromAnyOf && (
+            <div className="flex items-center">
+              <ArrayFieldTitleTemplate
+                fieldPathId={fieldPathId}
+                title={uiOptions.title || title}
+                schema={schema}
+                uiSchema={updatedUiSchema}
+                required={required}
+                registry={registry}
+                optionalDataControl={
+                  showOptionalDataControlInTitle
+                    ? optionalDataControl
+                    : undefined
+                }
+              />
+              <ArrayFieldDescriptionTemplate
+                fieldPathId={fieldPathId}
+                description={uiOptions.description || schema.description}
+                schema={schema}
+                uiSchema={updatedUiSchema}
+                registry={registry}
+              />
+            </div>
+          )}
+          <div
+            key={`array-item-list-${fieldPathId.$id}`}
+            className="m-0 mb-2 w-full p-0"
+          >
+            {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
+            {items}
+            {canAdd && (
+              <div className="mt-4 flex justify-end">
+                <AddButton
+                  id={buttonId(fieldPathId, "add")}
+                  className="rjsf-array-item-add"
+                  onClick={onAddClick}
+                  disabled={disabled || readonly}
+                  uiSchema={updatedUiSchema}
+                  registry={registry}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

autogpt_platform/frontend/src/components/renderers/InputRenderer/base/array/ArraySchemaField.tsx

@@ -0,0 +1,29 @@
+import { FieldProps, getUiOptions } from "@rjsf/utils";
+import { getHandleId, updateUiOption } from "../../helpers";
+import { ARRAY_ITEM_FLAG } from "../../constants";
+
+const ArraySchemaField = (props: FieldProps) => {
+  const { index, registry, fieldPathId } = props;
+  const { SchemaField } = registry.fields;
+
+  const uiOptions = getUiOptions(props.uiSchema);
+
+  const handleId = getHandleId({
+    uiOptions,
+    id: fieldPathId.$id,
+    schema: props.schema,
+  });
+  const updatedUiSchema = updateUiOption(props.uiSchema, {
+    handleId: handleId + ARRAY_ITEM_FLAG,
+  });
+
+  return (
+    <SchemaField
+      {...props}
+      uiSchema={updatedUiSchema}
+      title={"_item-" + index.toString()}
+    />
+  );
+};
+
+export default ArraySchemaField;

autogpt_platform/frontend/src/components/renderers/InputRenderer/base/array/context/array-item-context.tsx

@@ -0,0 +1,33 @@
+import React, { createContext, useContext } from "react";
+
+interface ArrayItemContextValue {
+  isArrayItem: boolean;
+  arrayItemHandleId: string;
+}
+
+const ArrayItemContext = createContext<ArrayItemContextValue>({
+  isArrayItem: false,
+  arrayItemHandleId: "",
+});
+
+export const ArrayItemProvider: React.FC<{
+  children: React.ReactNode;
+  arrayItemHandleId: string;
+}> = ({ children, arrayItemHandleId }) => {
+  return (
+    <ArrayItemContext.Provider value={{ isArrayItem: true, arrayItemHandleId }}>
+      {children}
+    </ArrayItemContext.Provider>
+  );
+};
+
+export const useIsArrayItem = (): boolean => {
+  // here this will be true if field is inside an array
+  const context = useContext(ArrayItemContext);
+  return context.isArrayItem;
+};
+
+export const useArrayItemHandleId = (): string => {
+  const context = useContext(ArrayItemContext);
+  return context.arrayItemHandleId;
+};

autogpt_platform/frontend/src/components/renderers/InputRenderer/base/array/helpers.ts

@@ -0,0 +1,3 @@
+export const generateArrayItemHandleId = (id: string) => {
+  return `array-item-${id}`;
+};

autogpt_platform/frontend/src/components/renderers/InputRenderer/base/array/index.ts

@@ -0,0 +1,7 @@
+export { default as ArrayFieldTemplate } from "./ArrayFieldTemplate";
+export { default as ArrayFieldItemTemplate } from "./ArrayFieldItemTemplate";
+export { default as ArraySchemaField } from "./ArraySchemaField";
+export {
+  ArrayItemProvider,
+  useIsArrayItem,
+} from "./context/array-item-context";

autogpt_platform/frontend/src/components/renderers/InputRenderer/base/base-registry.ts

@@ -0,0 +1,71 @@
+import {
+  RegistryFieldsType,
+  RegistryWidgetsType,
+  TemplatesType,
+} from "@rjsf/utils";
+import { AnyOfField } from "./anyof/AnyOfField";
+import {
+  ArrayFieldItemTemplate,
+  ArrayFieldTemplate,
+  ArraySchemaField,
+} from "./array";
+import {
+  ObjectFieldTemplate,
+  OptionalDataControlsTemplate,
+  WrapIfAdditionalTemplate,
+} from "./object";
+import { DescriptionField, FieldTemplate, TitleField } from "./standard";
+import { AddButton, CopyButton, RemoveButton } from "./standard/buttons";
+import {
+  CheckboxWidget,
+  DateTimeWidget,
+  DateWidget,
+  FileWidget,
+  GoogleDrivePickerWidget,
+  SelectWidget,
+  TextWidget,
+  TimeWidget,
+} from "./standard/widgets";
+
+const NoButton = () => null;
+
+export function generateBaseFields(): RegistryFieldsType {
+  return {
+    AnyOfField,
+    ArraySchemaField,
+  };
+}
+
+export function generateBaseTemplates(): Partial<TemplatesType> {
+  return {
+    ArrayFieldItemTemplate,
+    ArrayFieldTemplate,
+    ButtonTemplates: {
+      AddButton,
+      CopyButton,
+      MoveDownButton: NoButton,
+      MoveUpButton: NoButton,
+      RemoveButton,
+      SubmitButton: NoButton,
+    },
+    DescriptionFieldTemplate: DescriptionField,
+    FieldTemplate,
+    ObjectFieldTemplate,
+    OptionalDataControlsTemplate,
+    TitleFieldTemplate: TitleField,
+    WrapIfAdditionalTemplate,
+  };
+}
+
+export function generateBaseWidgets(): RegistryWidgetsType {
+  return {
+    TextWidget,
+    SelectWidget,
+    CheckboxWidget,
+    FileWidget,
+    DateWidget,
+    TimeWidget,
+    DateTimeWidget,
+    GoogleDrivePickerWidget,
+  };
+}

autogpt_platform/frontend/src/components/renderers/InputRenderer/base/index.ts

@@ -0,0 +1,5 @@
+export * from "./array";
+export * from "./object";
+export * from "./standard";
+export * from "./standard/widgets";
+export * from "./standard/buttons";

autogpt_platform/frontend/src/components/renderers/InputRenderer/base/object/ObjectFieldTemplate.tsx

@@ -0,0 +1,122 @@
+import {
+  ADDITIONAL_PROPERTY_FLAG,
+  buttonId,
+  canExpand,
+  descriptionId,
+  getTemplate,
+  getUiOptions,
+  ObjectFieldTemplateProps,
+  titleId,
+} from "@rjsf/utils";
+import { getHandleId, updateUiOption } from "../../helpers";
+import React from "react";
+
+export default function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
+  const {
+    description,
+    title,
+    properties,
+    required,
+    uiSchema,
+    fieldPathId,
+    schema,
+    formData,
+    optionalDataControl,
+    onAddProperty,
+    disabled,
+    readonly,
+    registry,
+  } = props;
+  const uiOptions = getUiOptions(uiSchema);
+
+  const TitleFieldTemplate = getTemplate(
+    "TitleFieldTemplate",
+    registry,
+    uiOptions,
+  );
+
+  const DescriptionFieldTemplate = getTemplate(
+    "DescriptionFieldTemplate",
+    registry,
+    uiOptions,
+  );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
+
+  const {
+    ButtonTemplates: { AddButton },
+  } = registry.templates;
+
+  const additional = ADDITIONAL_PROPERTY_FLAG in schema;
+
+  const handleId = getHandleId({
+    uiOptions,
+    id: fieldPathId.$id,
+    schema,
+  });
+
+  const updatedUiSchema = updateUiOption(uiSchema, {
+    handleId: handleId,
+  });
+
+  return (
+    <>
+      <div className="flex items-center gap-2">
+        {title && !additional && (
+          <TitleFieldTemplate
+            id={titleId(fieldPathId)}
+            title={title}
+            required={required}
+            schema={schema}
+            uiSchema={updatedUiSchema}
+            registry={registry}
+            optionalDataControl={true ? optionalDataControl : undefined}
+          />
+        )}
+        {description && (
+          <DescriptionFieldTemplate
+            id={descriptionId(fieldPathId)}
+            description={description}
+            schema={schema}
+            uiSchema={updatedUiSchema}
+            registry={registry}
+          />
+        )}
+      </div>
+
+      <div className="flex flex-col">
+        {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
+
+        {/* I have cloned it - so i could pass updated uiSchema to the nested children */}
+        {properties.map((element: any, index: number) => {
+          const clonedContent = React.cloneElement(element.content, {
+            ...element.content.props,
+            uiSchema: updateUiOption(element.content.props.uiSchema, {
+              handleId: handleId,
+            }),
+          });
+
+          return (
+            <div
+              key={index}
+              className={`${element.hidden ? "hidden" : ""} flex`}
+            >
+              <div className="w-full">{clonedContent}</div>
+            </div>
+          );
+        })}
+        {canExpand(schema, uiSchema, formData) ? (
+          <div className="mt-2 flex justify-end">
+            <AddButton
+              id={buttonId(fieldPathId, "add")}
+              onClick={onAddProperty}
+              disabled={disabled || readonly}
+              className="rjsf-object-property-expand"
+              uiSchema={updatedUiSchema}
+              registry={registry}
+            />
+          </div>
+        ) : null}
+      </div>
+    </>
+  );
+}

autogpt_platform/frontend/src/components/renderers/InputRenderer/base/object/OptionalDataControlsTemplate.tsx

@@ -0,0 +1,35 @@
+import { OptionalDataControlsTemplateProps } from "@rjsf/utils";
+import { PlusCircle } from "lucide-react";
+
+import { IconButton, RemoveButton } from "../standard/buttons";
+
+export default function OptionalDataControlsTemplate(
+  props: OptionalDataControlsTemplateProps,
+) {
+  const { id, registry, label, onAddClick, onRemoveClick } = props;
+  if (onAddClick) {
+    return (
+      <IconButton
+        id={id}
+        registry={registry}
+        className="rjsf-add-optional-data"
+        onClick={onAddClick}
+        title={label}
+        icon={<PlusCircle />}
+        size="small"
+      />
+    );
+  } else if (onRemoveClick) {
+    return (
+      <RemoveButton
+        id={id}
+        registry={registry}
+        className="rjsf-remove-optional-data"
+        onClick={onRemoveClick}
+        title={label}
+        size="small"
+      />
+    );
+  }
+  return <em id={id}>{label}</em>;
+}

autogpt_platform/frontend/src/components/renderers/InputRenderer/base/object/WrapIfAdditionalTemplate.tsx

@@ -0,0 +1,114 @@
+import {
+  ADDITIONAL_PROPERTY_FLAG,
+  buttonId,
+  getTemplate,
+  getUiOptions,
+  titleId,
+  WrapIfAdditionalTemplateProps,
+} from "@rjsf/utils";
+
+import { Input } from "@/components/atoms/Input/Input";
+import { useEdgeStore } from "@/app/(platform)/build/stores/edgeStore";
+
+export default function WrapIfAdditionalTemplate(
+  props: WrapIfAdditionalTemplateProps,
+) {
+  const {
+    classNames,
+    style,
+    children,
+    disabled,
+    id,
+    label,
+    onRemoveProperty,
+    onKeyRenameBlur,
+    readonly,
+    required,
+    schema,
+    uiSchema,
+    registry,
+  } = props;
+  const { templates, formContext } = registry;
+  const uiOptions = getUiOptions(uiSchema);
+  // Button templates are not overridden in the uiSchema
+  const { RemoveButton } = templates.ButtonTemplates;
+  const { isInputConnected } = useEdgeStore();
+
+  const additional = ADDITIONAL_PROPERTY_FLAG in schema;
+  const { nodeId } = formContext;
+  const handleId = uiOptions.handleId;
+
+  const TitleFieldTemplate = getTemplate(
+    "TitleFieldTemplate",
+    registry,
+    uiOptions,
+  );
+
+  if (!additional) {
+    return (
+      <div className={classNames} style={style}>
+        {children}
+      </div>
+    );
+  }
+
+  const keyId = `${id}-key`;
+  const generateObjectPropertyTitleId = (id: string, label: string) => {
+    return id.replace(`_${label}`, `_#_${label}`);
+  };
+  const title_id = generateObjectPropertyTitleId(id, label);
+
+  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    if (e.target.value == "") {
+      onRemoveProperty();
+    } else {
+      onKeyRenameBlur(e);
+    }
+  };
+
+  const isHandleConnected = isInputConnected(nodeId, handleId);
+
+  return (
+    <>
+      <div className={`mb-4 flex flex-col gap-1`} style={style}>
+        <TitleFieldTemplate
+          id={titleId(title_id)}
+          title={`#${label}`}
+          required={required}
+          schema={schema}
+          registry={registry}
+          uiSchema={uiSchema}
+        />
+        {!isHandleConnected && (
+          <div className="flex flex-1 items-center gap-2">
+            <Input
+              label={""}
+              hideLabel={true}
+              required={required}
+              defaultValue={label}
+              disabled={disabled || readonly}
+              id={keyId}
+              wrapperClassName="mb-2 w-30"
+              name={keyId}
+              onBlur={!readonly ? handleBlur : undefined}
+              type="text"
+              size="small"
+            />
+            <div className="mt-2"> {children}</div>
+          </div>
+        )}
+        {!isHandleConnected && (
+          <div className="-mt-4">
+            <RemoveButton
+              id={buttonId(id, "remove")}
+              disabled={disabled || readonly}
+              onClick={onRemoveProperty}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

autogpt_platform/frontend/src/components/renderers/InputRenderer/base/object/index.ts

@@ -0,0 +1,3 @@
+export { default as ObjectFieldTemplate } from "./ObjectFieldTemplate";
+export { default as WrapIfAdditionalTemplate } from "./WrapIfAdditionalTemplate";
+export { default as OptionalDataControlsTemplate } from "./OptionalDataControlsTemplate";