feat(frontend): enhance UI components with animations and accessibility improvements

### Changes 🏗️
- Integrated `FadeIn` animations in `AgentsSection`, `FeaturedCreators`, `FeaturedSection`, `HeroSection`, and `BecomeACreator` components for improved visual appeal.
- Replaced static elements with `StaggeredList` in `FeaturedCreators` and `AgentsSection` for a more dynamic layout.
- Updated `SearchBar` to use `type="search"` and added `aria-label` for better accessibility.
- Enhanced `StoreCard` with focus-visible styles and keyboard navigation support.
- Refactored `FilterChips` to utilize `FilterChip` component for a more consistent design.

### Checklist 📋
- [x] Verified animations function correctly across components.
- [x] Ensured accessibility improvements are in place and tested.
- [x] Confirmed UI consistency with design specifications.

autogpt_platform/backend/backend/api/features/chat/tools/run_agent.py

@@ -33,7 +33,7 @@ from .models import (
     UserReadiness,
 )
 from .utils import (
-    build_missing_credentials_from_graph,
+    check_user_has_required_credentials,
     extract_credentials_from_schema,
     fetch_graph_from_store_slug,
     get_or_create_library_agent,
@@ -237,13 +237,15 @@ class RunAgentTool(BaseTool):
                 # Return credentials needed response with input data info
                 # The UI handles credential setup automatically, so the message
                 # focuses on asking about input data
-                requirements_creds_dict = build_missing_credentials_from_graph(
-                    graph, None
+                credentials = extract_credentials_from_schema(
+                    graph.credentials_input_schema
                 )
-                missing_credentials_dict = build_missing_credentials_from_graph(
-                    graph, graph_credentials
+                missing_creds_check = await check_user_has_required_credentials(
+                    user_id, credentials
                 )
-                requirements_creds_list = list(requirements_creds_dict.values())
+                missing_credentials_dict = {
+                    c.id: c.model_dump() for c in missing_creds_check
+                }
 
                 return SetupRequirementsResponse(
                     message=self._build_inputs_message(graph, MSG_WHAT_VALUES_TO_USE),
@@ -257,7 +259,7 @@ class RunAgentTool(BaseTool):
                             ready_to_run=False,
                         ),
                         requirements={
-                            "credentials": requirements_creds_list,
+                            "credentials": [c.model_dump() for c in credentials],
                             "inputs": self._get_inputs_list(graph.input_schema),
                             "execution_modes": self._get_execution_modes(graph),
                         },

autogpt_platform/backend/backend/api/features/chat/tools/run_block.py

@@ -22,7 +22,6 @@ from .models import (
     ToolResponseBase,
     UserReadiness,
 )
-from .utils import build_missing_credentials_from_field_info
 
 logger = logging.getLogger(__name__)
 
@@ -190,11 +189,7 @@ class RunBlockTool(BaseTool):
 
         if missing_credentials:
             # Return setup requirements response with missing credentials
-            credentials_fields_info = block.input_schema.get_credentials_fields_info()
-            missing_creds_dict = build_missing_credentials_from_field_info(
-                credentials_fields_info, set(matched_credentials.keys())
-            )
-            missing_creds_list = list(missing_creds_dict.values())
+            missing_creds_dict = {c.id: c.model_dump() for c in missing_credentials}
 
             return SetupRequirementsResponse(
                 message=(
@@ -211,7 +206,7 @@ class RunBlockTool(BaseTool):
                         ready_to_run=False,
                     ),
                     requirements={
-                        "credentials": missing_creds_list,
+                        "credentials": [c.model_dump() for c in missing_credentials],
                         "inputs": self._get_inputs_list(block),
                         "execution_modes": ["immediate"],
                     },

autogpt_platform/backend/backend/api/features/chat/tools/utils.py

@@ -8,7 +8,7 @@ from backend.api.features.library import model as library_model
 from backend.api.features.store import db as store_db
 from backend.data import graph as graph_db
 from backend.data.graph import GraphModel
-from backend.data.model import CredentialsFieldInfo, CredentialsMetaInput
+from backend.data.model import CredentialsMetaInput
 from backend.integrations.creds_manager import IntegrationCredentialsManager
 from backend.util.exceptions import NotFoundError
 
@@ -89,59 +89,6 @@ def extract_credentials_from_schema(
     return credentials
 
 
-def _serialize_missing_credential(
-    field_key: str, field_info: CredentialsFieldInfo
-) -> dict[str, Any]:
-    """
-    Convert credential field info into a serializable dict that preserves all supported
-    credential types (e.g., api_key + oauth2) so the UI can offer multiple options.
-    """
-    supported_types = sorted(field_info.supported_types)
-    provider = next(iter(field_info.provider), "unknown")
-    scopes = sorted(field_info.required_scopes or [])
-
-    return {
-        "id": field_key,
-        "title": field_key.replace("_", " ").title(),
-        "provider": provider,
-        "provider_name": provider.replace("_", " ").title(),
-        "type": supported_types[0] if supported_types else "api_key",
-        "types": supported_types,
-        "scopes": scopes,
-    }
-
-
-def build_missing_credentials_from_graph(
-    graph: GraphModel, matched_credentials: dict[str, CredentialsMetaInput] | None
-) -> dict[str, Any]:
-    """
-    Build a missing_credentials mapping from a graph's aggregated credentials inputs,
-    preserving all supported credential types for each field.
-    """
-    matched_keys = set(matched_credentials.keys()) if matched_credentials else set()
-    aggregated_fields = graph.aggregate_credentials_inputs()
-
-    return {
-        field_key: _serialize_missing_credential(field_key, field_info)
-        for field_key, (field_info, _node_fields) in aggregated_fields.items()
-        if field_key not in matched_keys
-    }
-
-
-def build_missing_credentials_from_field_info(
-    credential_fields: dict[str, CredentialsFieldInfo],
-    matched_keys: set[str],
-) -> dict[str, Any]:
-    """
-    Build missing_credentials mapping from a simple credentials field info dictionary.
-    """
-    return {
-        field_key: _serialize_missing_credential(field_key, field_info)
-        for field_key, field_info in credential_fields.items()
-        if field_key not in matched_keys
-    }
-
-
 def extract_credentials_as_dict(
     credentials_input_schema: dict[str, Any] | None,
 ) -> dict[str, CredentialsMetaInput]:

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

@@ -5,11 +5,10 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/atoms/Tooltip/BaseTooltip";
-import { CircleNotchIcon, PlayIcon, StopIcon } from "@phosphor-icons/react";
+import { PlayIcon, StopIcon } from "@phosphor-icons/react";
 import { useShallow } from "zustand/react/shallow";
 import { RunInputDialog } from "../RunInputDialog/RunInputDialog";
 import { useRunGraph } from "./useRunGraph";
-import { cn } from "@/lib/utils";
 
 export const RunGraph = ({ flowID }: { flowID: string | null }) => {
   const {
@@ -25,31 +24,6 @@ export const RunGraph = ({ flowID }: { flowID: string | null }) => {
     useShallow((state) => state.isGraphRunning),
   );
 
-  const isLoading = isExecutingGraph || isTerminatingGraph || isSaving;
-
-  // Determine which icon to show with proper animation
-  const renderIcon = () => {
-    const iconClass = cn(
-      "size-4 transition-transform duration-200 ease-out",
-      !isLoading && "group-hover:scale-110",
-    );
-
-    if (isLoading) {
-      return (
-        <CircleNotchIcon
-          className={cn(iconClass, "animate-spin")}
-          weight="bold"
-        />
-      );
-    }
-
-    if (isGraphRunning) {
-      return <StopIcon className={iconClass} weight="fill" />;
-    }
-
-    return <PlayIcon className={iconClass} weight="fill" />;
-  };
-
   return (
     <>
       <Tooltip>
@@ -59,18 +33,18 @@ export const RunGraph = ({ flowID }: { flowID: string | null }) => {
             variant={isGraphRunning ? "destructive" : "primary"}
             data-id={isGraphRunning ? "stop-graph-button" : "run-graph-button"}
             onClick={isGraphRunning ? handleStopGraph : handleRunGraph}
-            disabled={!flowID || isLoading}
-            className="group"
+            disabled={!flowID || isExecutingGraph || isTerminatingGraph}
+            loading={isExecutingGraph || isTerminatingGraph || isSaving}
           >
-            {renderIcon()}
+            {!isGraphRunning ? (
+              <PlayIcon className="size-4" />
+            ) : (
+              <StopIcon className="size-4" />
+            )}
           </Button>
         </TooltipTrigger>
         <TooltipContent>
-          {isLoading
-            ? "Processing..."
-            : isGraphRunning
-              ? "Stop agent"
-              : "Run agent"}
+          {isGraphRunning ? "Stop agent" : "Run agent"}
         </TooltipContent>
       </Tooltip>
       <RunInputDialog

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

@@ -61,67 +61,63 @@ export const RunInputDialog = ({
           isOpen,
           set: setIsOpen,
         }}
-        styling={{ maxWidth: "700px", minWidth: "700px" }}
+        styling={{ maxWidth: "600px", minWidth: "600px" }}
       >
         <Dialog.Content>
-          <div
-            className="grid grid-cols-[1fr_auto] gap-10 p-1"
-            data-id="run-input-dialog-content"
-          >
-            <div className="space-y-6">
-              {/* Credentials Section */}
-              {hasCredentials() && credentialFields.length > 0 && (
-                <div data-id="run-input-credentials-section">
-                  <div className="mb-4">
-                    <Text variant="h4" className="text-gray-900">
-                      Credentials
-                    </Text>
-                  </div>
-                  <div className="px-2" data-id="run-input-credentials-form">
-                    <CredentialsGroupedView
-                      credentialFields={credentialFields}
-                      requiredCredentials={requiredCredentials}
-                      inputCredentials={credentialValues}
-                      inputValues={inputValues}
-                      onCredentialChange={handleCredentialFieldChange}
-                    />
-                  </div>
+          <div className="space-y-6 p-1" data-id="run-input-dialog-content">
+            {/* Credentials Section */}
+            {hasCredentials() && credentialFields.length > 0 && (
+              <div data-id="run-input-credentials-section">
+                <div className="mb-4">
+                  <Text variant="h4" className="text-gray-900">
+                    Credentials
+                  </Text>
                 </div>
-              )}
-
-              {/* Inputs Section */}
-              {hasInputs() && (
-                <div data-id="run-input-inputs-section">
-                  <div className="mb-4">
-                    <Text variant="h4" className="text-gray-900">
-                      Inputs
-                    </Text>
-                  </div>
-                  <div data-id="run-input-inputs-form">
-                    <FormRenderer
-                      jsonSchema={inputSchema as RJSFSchema}
-                      handleChange={(v) => handleInputChange(v.formData)}
-                      uiSchema={uiSchema}
-                      initialValues={{}}
-                      formContext={{
-                        showHandles: false,
-                        size: "large",
-                      }}
-                    />
-                  </div>
+                <div className="px-2" data-id="run-input-credentials-form">
+                  <CredentialsGroupedView
+                    credentialFields={credentialFields}
+                    requiredCredentials={requiredCredentials}
+                    inputCredentials={credentialValues}
+                    inputValues={inputValues}
+                    onCredentialChange={handleCredentialFieldChange}
+                  />
                 </div>
-              )}
-            </div>
+              </div>
+            )}
 
+            {/* Inputs Section */}
+            {hasInputs() && (
+              <div data-id="run-input-inputs-section">
+                <div className="mb-4">
+                  <Text variant="h4" className="text-gray-900">
+                    Inputs
+                  </Text>
+                </div>
+                <div data-id="run-input-inputs-form">
+                  <FormRenderer
+                    jsonSchema={inputSchema as RJSFSchema}
+                    handleChange={(v) => handleInputChange(v.formData)}
+                    uiSchema={uiSchema}
+                    initialValues={{}}
+                    formContext={{
+                      showHandles: false,
+                      size: "large",
+                    }}
+                  />
+                </div>
+              </div>
+            )}
+
+            {/* Action Button */}
             <div
-              className="flex flex-col items-end justify-start"
+              className="flex justify-end pt-2"
               data-id="run-input-actions-section"
             >
               {purpose === "run" && (
                 <Button
                   variant="primary"
                   size="large"
-                  className="group h-fit min-w-0 gap-2 px-10"
+                  className="group h-fit min-w-0 gap-2"
                   onClick={handleManualRun}
                   loading={isExecutingGraph}
                   data-id="run-input-manual-run-button"
@@ -136,7 +132,7 @@ export const RunInputDialog = ({
                 <Button
                   variant="primary"
                   size="large"
-                  className="group h-fit min-w-0 gap-2 px-10"
+                  className="group h-fit min-w-0 gap-2"
                   onClick={() => setOpenCronSchedulerDialog(true)}
                   data-id="run-input-schedule-button"
                 >

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

@@ -53,14 +53,14 @@ export const CustomControls = memo(
     const controls = [
       {
         id: "zoom-in-button",
-        icon: <PlusIcon className="size-3.5 text-zinc-600" />,
+        icon: <PlusIcon className="size-4" />,
         label: "Zoom In",
         onClick: () => zoomIn(),
         className: "h-10 w-10 border-none",
       },
       {
         id: "zoom-out-button",
-        icon: <MinusIcon className="size-3.5 text-zinc-600" />,
+        icon: <MinusIcon className="size-4" />,
         label: "Zoom Out",
         onClick: () => zoomOut(),
         className: "h-10 w-10 border-none",
@@ -68,9 +68,9 @@ export const CustomControls = memo(
       {
         id: "tutorial-button",
         icon: isTutorialLoading ? (
-          <CircleNotchIcon className="size-3.5 animate-spin text-zinc-600" />
+          <CircleNotchIcon className="size-4 animate-spin" />
         ) : (
-          <ChalkboardIcon className="size-3.5 text-zinc-600" />
+          <ChalkboardIcon className="size-4" />
         ),
         label: isTutorialLoading ? "Loading Tutorial..." : "Start Tutorial",
         onClick: handleTutorialClick,
@@ -79,7 +79,7 @@ export const CustomControls = memo(
       },
       {
         id: "fit-view-button",
-        icon: <FrameCornersIcon className="size-3.5 text-zinc-600" />,
+        icon: <FrameCornersIcon className="size-4" />,
         label: "Fit View",
         onClick: () => fitView({ padding: 0.2, duration: 800, maxZoom: 1 }),
         className: "h-10 w-10 border-none",
@@ -87,9 +87,9 @@ export const CustomControls = memo(
       {
         id: "lock-button",
         icon: !isLocked ? (
-          <LockOpenIcon className="size-3.5 text-zinc-600" />
+          <LockOpenIcon className="size-4" />
         ) : (
-          <LockIcon className="size-3.5 text-zinc-600" />
+          <LockIcon className="size-4" />
         ),
         label: "Toggle Lock",
         onClick: () => setIsLocked(!isLocked),

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

@@ -19,8 +19,6 @@ export type CustomEdgeData = {
   beadUp?: number;
   beadDown?: number;
   beadData?: Map<string, NodeExecutionResult["status"]>;
-  edgeColorClass?: string;
-  edgeHexColor?: string;
 };
 
 export type CustomEdge = XYEdge<CustomEdgeData, "custom">;
@@ -38,6 +36,7 @@ const CustomEdge = ({
   selected,
 }: EdgeProps<CustomEdge>) => {
   const removeConnection = useEdgeStore((state) => state.removeEdge);
+  // Subscribe to the brokenEdgeIDs map and check if this edge is broken across any node
   const isBroken = useNodeStore((state) => state.isEdgeBroken(id));
   const [isHovered, setIsHovered] = useState(false);
 
@@ -53,7 +52,6 @@ const CustomEdge = ({
   const isStatic = data?.isStatic ?? false;
   const beadUp = data?.beadUp ?? 0;
   const beadDown = data?.beadDown ?? 0;
-  const edgeColorClass = data?.edgeColorClass;
 
   const handleRemoveEdge = () => {
     removeConnection(id);
@@ -72,9 +70,7 @@ const CustomEdge = ({
             ? "!stroke-red-500 !stroke-[2px] [stroke-dasharray:4]"
             : selected
               ? "stroke-zinc-800"
-              : edgeColorClass
-                ? cn(edgeColorClass, "opacity-70 hover:opacity-100")
-                : "stroke-zinc-500/50 hover:stroke-zinc-500",
+              : "stroke-zinc-500/50 hover:stroke-zinc-500",
         )}
       />
       <JSBeads

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

@@ -8,7 +8,6 @@ import { useCallback } from "react";
 import { useNodeStore } from "../../../stores/nodeStore";
 import { useHistoryStore } from "../../../stores/historyStore";
 import { CustomEdge } from "./CustomEdge";
-import { getEdgeColorFromOutputType } from "../nodes/helpers";
 
 export const useCustomEdge = () => {
   const edges = useEdgeStore((s) => s.edges);
@@ -35,13 +34,8 @@ export const useCustomEdge = () => {
       if (exists) return;
 
       const nodes = useNodeStore.getState().nodes;
-      const sourceNode = nodes.find((n) => n.id === conn.source);
-      const isStatic = sourceNode?.data?.staticOutput;
-
-      const { colorClass, hexColor } = getEdgeColorFromOutputType(
-        sourceNode?.data?.outputSchema,
-        conn.sourceHandle,
-      );
+      const isStatic = nodes.find((n) => n.id === conn.source)?.data
+        ?.staticOutput;
 
       addEdge({
         source: conn.source,
@@ -50,8 +44,6 @@ export const useCustomEdge = () => {
         targetHandle: conn.targetHandle,
         data: {
           isStatic,
-          edgeColorClass: colorClass,
-          edgeHexColor: hexColor,
         },
       });
     },

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

@@ -187,38 +187,3 @@ export const getTypeDisplayInfo = (schema: any) => {
     hexColor,
   };
 };
-
-export function getEdgeColorFromOutputType(
-  outputSchema: RJSFSchema | undefined,
-  sourceHandle: string,
-): { colorClass: string; hexColor: string } {
-  const defaultColor = {
-    colorClass: "stroke-zinc-500/50",
-    hexColor: "#6b7280",
-  };
-
-  if (!outputSchema?.properties) return defaultColor;
-
-  const properties = outputSchema.properties as Record<string, unknown>;
-  const handleParts = sourceHandle.split("_#_");
-  let currentSchema: Record<string, unknown> = properties;
-
-  for (let i = 0; i < handleParts.length; i++) {
-    const part = handleParts[i];
-    const fieldSchema = currentSchema[part] as Record<string, unknown>;
-    if (!fieldSchema) return defaultColor;
-
-    if (i === handleParts.length - 1) {
-      const { hexColor, colorClass } = getTypeDisplayInfo(fieldSchema);
-      return { colorClass: colorClass.replace("!text-", "stroke-"), hexColor };
-    }
-
-    if (fieldSchema.properties) {
-      currentSchema = fieldSchema.properties as Record<string, unknown>;
-    } else {
-      return defaultColor;
-    }
-  }
-
-  return defaultColor;
-}

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/icons.ts

@@ -1,32 +1,7 @@
-type IconOptions = {
-  size?: number;
-  color?: string;
-};
-
-const DEFAULT_SIZE = 16;
-const DEFAULT_COLOR = "#52525b"; // zinc-600
-
-const iconPaths = {
-  ClickIcon: `M88,24V16a8,8,0,0,1,16,0v8a8,8,0,0,1-16,0ZM16,104h8a8,8,0,0,0,0-16H16a8,8,0,0,0,0,16ZM124.42,39.16a8,8,0,0,0,10.74-3.58l8-16a8,8,0,0,0-14.31-7.16l-8,16A8,8,0,0,0,124.42,39.16Zm-96,81.69-16,8a8,8,0,0,0,7.16,14.31l16-8a8,8,0,1,0-7.16-14.31ZM219.31,184a16,16,0,0,1,0,22.63l-12.68,12.68a16,16,0,0,1-22.63,0L132.7,168,115,214.09c0,.1-.08.21-.13.32a15.83,15.83,0,0,1-14.6,9.59l-.79,0a15.83,15.83,0,0,1-14.41-11L32.8,52.92A16,16,0,0,1,52.92,32.8L213,85.07a16,16,0,0,1,1.41,29.8l-.32.13L168,132.69ZM208,195.31,156.69,144h0a16,16,0,0,1,4.93-26l.32-.14,45.95-17.64L48,48l52.2,159.86,17.65-46c0-.11.08-.22.13-.33a16,16,0,0,1,11.69-9.34,16.72,16.72,0,0,1,3-.28,16,16,0,0,1,11.3,4.69L195.31,208Z`,
-  Keyboard: `M224,48H32A16,16,0,0,0,16,64V192a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48Zm0,144H32V64H224V192Zm-16-64a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16H200A8,8,0,0,1,208,128Zm0-32a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16H200A8,8,0,0,1,208,96ZM72,160a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16h8A8,8,0,0,1,72,160Zm96,0a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,160Zm40,0a8,8,0,0,1-8,8h-8a8,8,0,0,1,0-16h8A8,8,0,0,1,208,160Z`,
-  Drag: `M188,80a27.79,27.79,0,0,0-13.36,3.4,28,28,0,0,0-46.64-11A28,28,0,0,0,80,92v20H68a28,28,0,0,0-28,28v12a88,88,0,0,0,176,0V108A28,28,0,0,0,188,80Zm12,72a72,72,0,0,1-144,0V140a12,12,0,0,1,12-12H80v24a8,8,0,0,0,16,0V92a12,12,0,0,1,24,0v28a8,8,0,0,0,16,0V92a12,12,0,0,1,24,0v28a8,8,0,0,0,16,0V108a12,12,0,0,1,24,0Z`,
-};
-
-function createIcon(path: string, options: IconOptions = {}): string {
-  const size = options.size ?? DEFAULT_SIZE;
-  const color = options.color ?? DEFAULT_COLOR;
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${color}" viewBox="0 0 256 256"><path d="${path}"></path></svg>`;
-}
+// These are SVG Phosphor icons
 
 export const ICONS = {
-  ClickIcon: createIcon(iconPaths.ClickIcon),
-  Keyboard: createIcon(iconPaths.Keyboard),
-  Drag: createIcon(iconPaths.Drag),
+  ClickIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#000000" viewBox="0 0 256 256"><path d="M88,24V16a8,8,0,0,1,16,0v8a8,8,0,0,1-16,0ZM16,104h8a8,8,0,0,0,0-16H16a8,8,0,0,0,0,16ZM124.42,39.16a8,8,0,0,0,10.74-3.58l8-16a8,8,0,0,0-14.31-7.16l-8,16A8,8,0,0,0,124.42,39.16Zm-96,81.69-16,8a8,8,0,0,0,7.16,14.31l16-8a8,8,0,1,0-7.16-14.31ZM219.31,184a16,16,0,0,1,0,22.63l-12.68,12.68a16,16,0,0,1-22.63,0L132.7,168,115,214.09c0,.1-.08.21-.13.32a15.83,15.83,0,0,1-14.6,9.59l-.79,0a15.83,15.83,0,0,1-14.41-11L32.8,52.92A16,16,0,0,1,52.92,32.8L213,85.07a16,16,0,0,1,1.41,29.8l-.32.13L168,132.69ZM208,195.31,156.69,144h0a16,16,0,0,1,4.93-26l.32-.14,45.95-17.64L48,48l52.2,159.86,17.65-46c0-.11.08-.22.13-.33a16,16,0,0,1,11.69-9.34,16.72,16.72,0,0,1,3-.28,16,16,0,0,1,11.3,4.69L195.31,208Z"></path></svg>`,
+  Keyboard: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#000000" viewBox="0 0 256 256"><path d="M224,48H32A16,16,0,0,0,16,64V192a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48Zm0,144H32V64H224V192Zm-16-64a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16H200A8,8,0,0,1,208,128Zm0-32a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16H200A8,8,0,0,1,208,96ZM72,160a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16h8A8,8,0,0,1,72,160Zm96,0a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,160Zm40,0a8,8,0,0,1-8,8h-8a8,8,0,0,1,0-16h8A8,8,0,0,1,208,160Z"></path></svg>`,
+  Drag: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#000000" viewBox="0 0 256 256"><path d="M188,80a27.79,27.79,0,0,0-13.36,3.4,28,28,0,0,0-46.64-11A28,28,0,0,0,80,92v20H68a28,28,0,0,0-28,28v12a88,88,0,0,0,176,0V108A28,28,0,0,0,188,80Zm12,72a72,72,0,0,1-144,0V140a12,12,0,0,1,12-12H80v24a8,8,0,0,0,16,0V92a12,12,0,0,1,24,0v28a8,8,0,0,0,16,0V92a12,12,0,0,1,24,0v28a8,8,0,0,0,16,0V108a12,12,0,0,1,24,0Z"></path></svg>`,
 };
-
-export function getIcon(
-  name: keyof typeof iconPaths,
-  options?: IconOptions,
-): string {
-  return createIcon(iconPaths[name], options);
-}

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/index.ts

@@ -11,7 +11,6 @@ import {
 } from "./helpers";
 import { useNodeStore } from "../../../stores/nodeStore";
 import { useEdgeStore } from "../../../stores/edgeStore";
-import { useTutorialStore } from "../../../stores/tutorialStore";
 
 let isTutorialLoading = false;
 let tutorialLoadingCallback: ((loading: boolean) => void) | null = null;
@@ -61,14 +60,12 @@ export const startTutorial = async () => {
     handleTutorialComplete();
     removeTutorialStyles();
     clearPrefetchedBlocks();
-    useTutorialStore.getState().setIsTutorialRunning(false);
   });
 
   tour.on("cancel", () => {
     handleTutorialCancel(tour);
     removeTutorialStyles();
     clearPrefetchedBlocks();
-    useTutorialStore.getState().setIsTutorialRunning(false);
   });
 
   for (const step of tour.steps) {

autogpt_platform/frontend/src/app/(platform)/chat/components/Chat/components/ChatContainer/helpers.ts

@@ -267,34 +267,23 @@ export function extractCredentialsNeeded(
       | undefined;
     if (missingCreds && Object.keys(missingCreds).length > 0) {
       const agentName = (setupInfo?.agent_name as string) || "this block";
-      const credentials = Object.values(missingCreds).map((credInfo) => {
-        // Normalize to array at boundary - prefer 'types' array, fall back to single 'type'
-        const typesArray = credInfo.types as
-          | Array<"api_key" | "oauth2" | "user_password" | "host_scoped">
-          | undefined;
-        const singleType =
+      const credentials = Object.values(missingCreds).map((credInfo) => ({
+        provider: (credInfo.provider as string) || "unknown",
+        providerName:
+          (credInfo.provider_name as string) ||
+          (credInfo.provider as string) ||
+          "Unknown Provider",
+        credentialType:
           (credInfo.type as
             | "api_key"
             | "oauth2"
             | "user_password"
-            | "host_scoped"
-            | undefined) || "api_key";
-        const credentialTypes =
-          typesArray && typesArray.length > 0 ? typesArray : [singleType];
-
-        return {
-          provider: (credInfo.provider as string) || "unknown",
-          providerName:
-            (credInfo.provider_name as string) ||
-            (credInfo.provider as string) ||
-            "Unknown Provider",
-          credentialTypes,
-          title:
-            (credInfo.title as string) ||
-            `${(credInfo.provider_name as string) || (credInfo.provider as string)} credentials`,
-          scopes: credInfo.scopes as string[] | undefined,
-        };
-      });
+            | "host_scoped") || "api_key",
+        title:
+          (credInfo.title as string) ||
+          `${(credInfo.provider_name as string) || (credInfo.provider as string)} credentials`,
+        scopes: credInfo.scopes as string[] | undefined,
+      }));
       return {
         type: "credentials_needed",
         toolName,
@@ -369,14 +358,11 @@ export function extractInputsNeeded(
       credentials.forEach((cred) => {
         const id = cred.id as string;
         if (id) {
-          const credentialTypes = Array.isArray(cred.types)
-            ? cred.types
-            : [(cred.type as string) || "api_key"];
           credentialsSchema[id] = {
             type: "object",
             properties: {},
             credentials_provider: [cred.provider as string],
-            credentials_types: credentialTypes,
+            credentials_types: [(cred.type as string) || "api_key"],
             credentials_scopes: cred.scopes as string[] | undefined,
           };
         }

autogpt_platform/frontend/src/app/(platform)/chat/components/Chat/components/ChatCredentialsSetup/ChatCredentialsSetup.tsx

@@ -9,9 +9,7 @@ import { useChatCredentialsSetup } from "./useChatCredentialsSetup";
 export interface CredentialInfo {
   provider: string;
   providerName: string;
-  credentialTypes: Array<
-    "api_key" | "oauth2" | "user_password" | "host_scoped"
-  >;
+  credentialType: "api_key" | "oauth2" | "user_password" | "host_scoped";
   title: string;
   scopes?: string[];
 }
@@ -32,7 +30,7 @@ function createSchemaFromCredentialInfo(
     type: "object",
     properties: {},
     credentials_provider: [credential.provider],
-    credentials_types: credential.credentialTypes,
+    credentials_types: [credential.credentialType],
     credentials_scopes: credential.scopes,
     discriminator: undefined,
     discriminator_mapping: undefined,

autogpt_platform/frontend/src/app/(platform)/chat/components/Chat/components/ChatMessage/useChatMessage.ts

@@ -41,9 +41,7 @@ export type ChatMessageData =
       credentials: Array<{
         provider: string;
         providerName: string;
-        credentialTypes: Array<
-          "api_key" | "oauth2" | "user_password" | "host_scoped"
-        >;
+        credentialType: "api_key" | "oauth2" | "user_password" | "host_scoped";
         title: string;
         scopes?: string[];
       }>;

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

@@ -2,7 +2,6 @@
 import { Button } from "@/components/atoms/Button/Button";
 import { FileInput } from "@/components/atoms/FileInput/FileInput";
 import { Input } from "@/components/atoms/Input/Input";
-import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
 import { Dialog } from "@/components/molecules/Dialog/Dialog";
 import {
   Form,
@@ -121,7 +120,7 @@ export default function LibraryUploadAgentDialog() {
           >
             {isUploading ? (
               <div className="flex items-center gap-2">
-                <LoadingSpinner size="small" className="text-white" />
+                <div className="h-4 w-4 animate-spin rounded-full border-b-2 border-t-2 border-white"></div>
                 <span>Uploading...</span>
               </div>
             ) : (

autogpt_platform/frontend/src/app/(platform)/marketplace/components/AgentsSection/AgentsSection.tsx

@@ -5,6 +5,8 @@ import {
   CarouselContent,
   CarouselItem,
 } from "@/components/__legacy__/ui/carousel";
+import { FadeIn } from "@/components/molecules/FadeIn/FadeIn";
+import { StaggeredList } from "@/components/molecules/StaggeredList/StaggeredList";
 import { useAgentsSection } from "./useAgentsSection";
 import { StoreAgent } from "@/app/api/__generated__/models/storeAgent";
 import { StoreCard } from "../StoreCard/StoreCard";
@@ -41,12 +43,14 @@ export const AgentsSection = ({
   return (
     <div className="flex flex-col items-center justify-center">
       <div className="w-full max-w-[1360px]">
-        <h2
-          style={{ marginBottom: margin }}
-          className="font-poppins text-lg font-semibold text-[#282828] dark:text-neutral-200"
-        >
-          {sectionTitle}
-        </h2>
+        <FadeIn direction="left" duration={0.5}>
+          <h2
+            style={{ marginBottom: margin }}
+            className="font-poppins text-lg font-semibold text-neutral-800 dark:text-neutral-200"
+          >
+            {sectionTitle}
+          </h2>
+        </FadeIn>
         {!displayedAgents || displayedAgents.length === 0 ? (
           <div className="text-center text-gray-500 dark:text-gray-400">
             No agents found
@@ -54,32 +58,38 @@ export const AgentsSection = ({
         ) : (
           <>
             {/* Mobile Carousel View */}
-            <Carousel
-              className="md:hidden"
-              opts={{
-                loop: true,
-              }}
-            >
-              <CarouselContent>
-                {displayedAgents.map((agent, index) => (
-                  <CarouselItem key={index} className="min-w-64 max-w-71">
-                    <StoreCard
-                      agentName={agent.agent_name}
-                      agentImage={agent.agent_image}
-                      description={agent.description}
-                      runs={agent.runs}
-                      rating={agent.rating}
-                      avatarSrc={agent.creator_avatar}
-                      creatorName={agent.creator}
-                      hideAvatar={hideAvatars}
-                      onClick={() => handleCardClick(agent.creator, agent.slug)}
-                    />
-                  </CarouselItem>
-                ))}
-              </CarouselContent>
-            </Carousel>
+            <FadeIn direction="up" className="md:hidden">
+              <Carousel
+                opts={{
+                  loop: true,
+                }}
+              >
+                <CarouselContent>
+                  {displayedAgents.map((agent, index) => (
+                    <CarouselItem key={index} className="min-w-64 max-w-71">
+                      <StoreCard
+                        agentName={agent.agent_name}
+                        agentImage={agent.agent_image}
+                        description={agent.description}
+                        runs={agent.runs}
+                        rating={agent.rating}
+                        avatarSrc={agent.creator_avatar}
+                        creatorName={agent.creator}
+                        hideAvatar={hideAvatars}
+                        onClick={() => handleCardClick(agent.creator, agent.slug)}
+                      />
+                    </CarouselItem>
+                  ))}
+                </CarouselContent>
+              </Carousel>
+            </FadeIn>
 
-            <div className="hidden grid-cols-1 place-items-center gap-6 md:grid md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+            {/* Desktop Grid View with Staggered Animation */}
+            <StaggeredList
+              direction="up"
+              staggerDelay={0.08}
+              className="hidden grid-cols-1 place-items-center gap-6 md:grid md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4"
+            >
               {displayedAgents.map((agent, index) => (
                 <StoreCard
                   key={index}
@@ -94,7 +104,7 @@ export const AgentsSection = ({
                   onClick={() => handleCardClick(agent.creator, agent.slug)}
                 />
               ))}
-            </div>
+            </StaggeredList>
           </>
         )}
       </div>

autogpt_platform/frontend/src/app/(platform)/marketplace/components/BecomeACreator/BecomeACreator.tsx

@@ -38,7 +38,7 @@ export function BecomeACreator({
 
         <PublishAgentModal
           trigger={
-            <button className="inline-flex h-[48px] cursor-pointer items-center justify-center rounded-[38px] bg-neutral-800 px-8 py-3 transition-colors hover:bg-neutral-700 dark:bg-neutral-700 dark:hover:bg-neutral-600 md:h-[56px] md:px-10 md:py-4 lg:h-[68px] lg:px-12 lg:py-5">
+            <button className="inline-flex h-[48px] cursor-pointer items-center justify-center rounded-[38px] bg-neutral-800 px-8 py-3 transition-colors hover:bg-neutral-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:focus-visible:ring-neutral-50 md:h-[56px] md:px-10 md:py-4 lg:h-[68px] lg:px-12 lg:py-5">
               <span className="whitespace-nowrap font-poppins text-base font-medium leading-normal text-neutral-50 md:text-lg md:leading-relaxed lg:text-xl lg:leading-7">
                 {buttonText}
               </span>

autogpt_platform/frontend/src/app/(platform)/marketplace/components/CreatorCard/CreatorCard.tsx

@@ -20,9 +20,18 @@ export const CreatorCard = ({
 }: CreatorCardProps) => {
   return (
     <div
-      className={`h-[264px] w-full px-[18px] pb-5 pt-6 ${backgroundColor(index)} inline-flex cursor-pointer flex-col items-start justify-start gap-3.5 rounded-[26px] transition-all duration-200 hover:brightness-95`}
+      className={`h-[264px] w-full px-[18px] pb-5 pt-6 ${backgroundColor(index)} inline-flex cursor-pointer flex-col items-start justify-start gap-3.5 rounded-[26px] transition-[filter] duration-200 hover:brightness-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 dark:focus-visible:ring-neutral-50`}
       onClick={onClick}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick();
+        }
+      }}
       data-testid="creator-card"
+      role="button"
+      tabIndex={0}
+      aria-label={`View ${creatorName}'s profile - ${agentsUploaded} agents`}
     >
       <div className="relative h-[64px] w-[64px]">
         <div className="absolute inset-0 overflow-hidden rounded-full">

autogpt_platform/frontend/src/app/(platform)/marketplace/components/FeaturedCreators/FeaturedCreators.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { FadeIn } from "@/components/molecules/FadeIn/FadeIn";
+import { StaggeredList } from "@/components/molecules/StaggeredList/StaggeredList";
 import { CreatorCard } from "../CreatorCard/CreatorCard";
 import { useFeaturedCreators } from "./useFeaturedCreators";
 import { Creator } from "@/app/api/__generated__/models/creator";
@@ -19,11 +21,17 @@ export const FeaturedCreators = ({
   return (
     <div className="flex w-full flex-col items-center justify-center">
       <div className="w-full max-w-[1360px]">
-        <h2 className="mb-9 font-poppins text-lg font-semibold text-neutral-800 dark:text-neutral-200">
-          {title}
-        </h2>
+        <FadeIn direction="left" duration={0.5}>
+          <h2 className="mb-9 font-poppins text-lg font-semibold text-neutral-800 dark:text-neutral-200">
+            {title}
+          </h2>
+        </FadeIn>
 
-        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
+        <StaggeredList
+          direction="up"
+          staggerDelay={0.1}
+          className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4"
+        >
           {displayedCreators.map((creator, index) => (
             <CreatorCard
               key={index}
@@ -35,7 +43,7 @@ export const FeaturedCreators = ({
               index={index}
             />
           ))}
-        </div>
+        </StaggeredList>
       </div>
     </div>
   );

autogpt_platform/frontend/src/app/(platform)/marketplace/components/FeaturedSection/FeaturedSection.tsx

@@ -8,6 +8,7 @@ import {
   CarouselNext,
   CarouselIndicator,
 } from "@/components/__legacy__/ui/carousel";
+import { FadeIn } from "@/components/molecules/FadeIn/FadeIn";
 import Link from "next/link";
 import { useFeaturedSection } from "./useFeaturedSection";
 import { StoreAgent } from "@/app/api/__generated__/models/storeAgent";
@@ -25,40 +26,44 @@ export const FeaturedSection = ({ featuredAgents }: FeaturedSectionProps) => {
 
   return (
     <section className="w-full">
-      <h2 className="mb-8 font-poppins text-2xl font-semibold leading-7 text-neutral-800 dark:text-neutral-200">
-        Featured agents
-      </h2>
+      <FadeIn direction="left" duration={0.5}>
+        <h2 className="mb-8 font-poppins text-2xl font-semibold leading-7 text-neutral-800 dark:text-neutral-200">
+          Featured agents
+        </h2>
+      </FadeIn>
 
-      <Carousel
-        opts={{
-          align: "center",
-          containScroll: "trimSnaps",
-        }}
-      >
-        <CarouselContent>
-          {featuredAgents.map((agent, index) => (
-            <CarouselItem
-              key={index}
-              className="h-[480px] md:basis-1/2 lg:basis-1/3"
-            >
-              <Link
-                href={`/marketplace/agent/${encodeURIComponent(agent.creator)}/${encodeURIComponent(agent.slug)}`}
-                className="block h-full"
+      <FadeIn direction="up" duration={0.6} delay={0.1}>
+        <Carousel
+          opts={{
+            align: "center",
+            containScroll: "trimSnaps",
+          }}
+        >
+          <CarouselContent>
+            {featuredAgents.map((agent, index) => (
+              <CarouselItem
+                key={index}
+                className="h-[480px] md:basis-1/2 lg:basis-1/3"
               >
-                <FeaturedAgentCard
-                  agent={agent}
-                  backgroundColor={getBackgroundColor(index)}
-                />
-              </Link>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <div className="relative mt-4">
-          <CarouselIndicator />
-          <CarouselPrevious afterClick={handlePrevSlide} />
-          <CarouselNext afterClick={handleNextSlide} />
-        </div>
-      </Carousel>
+                <Link
+                  href={`/marketplace/agent/${encodeURIComponent(agent.creator)}/${encodeURIComponent(agent.slug)}`}
+                  className="block h-full"
+                >
+                  <FeaturedAgentCard
+                    agent={agent}
+                    backgroundColor={getBackgroundColor(index)}
+                  />
+                </Link>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <div className="relative mt-4">
+            <CarouselIndicator />
+            <CarouselPrevious afterClick={handlePrevSlide} />
+            <CarouselNext afterClick={handleNextSlide} />
+          </div>
+        </Carousel>
+      </FadeIn>
     </section>
   );
 };

autogpt_platform/frontend/src/app/(platform)/marketplace/components/FilterChips/FilterChips.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Badge } from "@/components/__legacy__/ui/badge";
+import { FilterChip } from "@/components/atoms/FilterChip/FilterChip";
 import { useFilterChips } from "./useFilterChips";
 
 interface FilterChipsProps {
@@ -9,8 +9,6 @@ interface FilterChipsProps {
   multiSelect?: boolean;
 }
 
-// Some flaws in its logic
-// FRONTEND-TODO : This needs to be fixed
 export const FilterChips = ({
   badges,
   onFilterChange,
@@ -22,18 +20,20 @@ export const FilterChips = ({
   });
 
   return (
-    <div className="flex h-auto min-h-8 flex-wrap items-center justify-center gap-3 lg:min-h-14 lg:justify-start lg:gap-5">
+    <div
+      className="flex h-auto min-h-8 flex-wrap items-center justify-center gap-3 lg:min-h-14 lg:justify-start lg:gap-5"
+      role="group"
+      aria-label="Filter options"
+    >
       {badges.map((badge) => (
-        <Badge
+        <FilterChip
           key={badge}
-          variant={selectedFilters.includes(badge) ? "secondary" : "outline"}
-          className="mb-2 flex cursor-pointer items-center justify-center gap-2 rounded-full border border-black/50 px-3 py-1 dark:border-white/50 lg:mb-3 lg:gap-2.5 lg:px-6 lg:py-2"
+          label={badge}
+          selected={selectedFilters.includes(badge)}
           onClick={() => handleBadgeClick(badge)}
-        >
-          <div className="text-sm font-light tracking-tight text-[#474747] dark:text-[#e0e0e0] lg:text-xl lg:font-medium lg:leading-9">
-            {badge}
-          </div>
-        </Badge>
+          size="lg"
+          className="mb-2 lg:mb-3"
+        />
       ))}
     </div>
   );

autogpt_platform/frontend/src/app/(platform)/marketplace/components/HeroSection/HeroSection.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { FadeIn } from "@/components/molecules/FadeIn/FadeIn";
 import { FilterChips } from "../FilterChips/FilterChips";
 import { SearchBar } from "../SearchBar/SearchBar";
 import { useHeroSection } from "./useHeroSection";
@@ -9,30 +10,36 @@ export const HeroSection = () => {
   return (
     <div className="mb-2 mt-8 flex flex-col items-center justify-center px-4 sm:mb-4 sm:mt-12 sm:px-6 md:mb-6 md:mt-16 lg:my-24 lg:px-8 xl:my-16">
       <div className="w-full max-w-3xl lg:max-w-4xl xl:max-w-5xl">
-        <div className="mb-4 text-center md:mb-8">
-          <h1 className="text-center">
-            <span className="font-poppins text-[48px] font-semibold leading-[54px] text-neutral-950 dark:text-neutral-50">
-              Explore AI agents built for{" "}
-            </span>
-            <span className="font-poppins text-[48px] font-semibold leading-[54px] text-violet-600">
-              you
-            </span>
-            <br />
-            <span className="font-poppins text-[48px] font-semibold leading-[54px] text-neutral-950 dark:text-neutral-50">
-              by the{" "}
-            </span>
-            <span className="font-poppins text-[48px] font-semibold leading-[54px] text-blue-500">
-              community
-            </span>
-          </h1>
-        </div>
-        <h3 className="mb:text-2xl mb-6 text-center font-sans text-xl font-normal leading-loose text-neutral-700 dark:text-neutral-300 md:mb-12">
-          Bringing you AI agents designed by thinkers from around the world
-        </h3>
-        <div className="mb-4 flex justify-center sm:mb-5">
-          <SearchBar height="h-[74px]" />
-        </div>
-        <div>
+        <FadeIn direction="down" duration={0.6} delay={0}>
+          <div className="mb-4 text-center md:mb-8">
+            <h1 className="text-center">
+              <span className="font-poppins text-[48px] font-semibold leading-[54px] text-neutral-950 dark:text-neutral-50">
+                Explore AI agents built for{" "}
+              </span>
+              <span className="font-poppins text-[48px] font-semibold leading-[54px] text-violet-600">
+                you
+              </span>
+              <br />
+              <span className="font-poppins text-[48px] font-semibold leading-[54px] text-neutral-950 dark:text-neutral-50">
+                by the{" "}
+              </span>
+              <span className="font-poppins text-[48px] font-semibold leading-[54px] text-blue-500">
+                community
+              </span>
+            </h1>
+          </div>
+        </FadeIn>
+        <FadeIn direction="up" duration={0.6} delay={0.15}>
+          <h3 className="mb:text-2xl mb-6 text-center font-sans text-xl font-normal leading-loose text-neutral-700 dark:text-neutral-300 md:mb-12">
+            Bringing you AI agents designed by thinkers from around the world
+          </h3>
+        </FadeIn>
+        <FadeIn direction="up" duration={0.5} delay={0.3}>
+          <div className="mb-4 flex justify-center sm:mb-5">
+            <SearchBar height="h-[74px]" />
+          </div>
+        </FadeIn>
+        <FadeIn direction="up" duration={0.5} delay={0.4}>
           <div className="flex justify-center">
             <FilterChips
               badges={searchTerms}
@@ -40,7 +47,7 @@ export const HeroSection = () => {
               multiSelect={false}
             />
           </div>
-        </div>
+        </FadeIn>
       </div>
     </div>
   );

autogpt_platform/frontend/src/app/(platform)/marketplace/components/MainMarketplacePage/MainMarketplacePage.tsx

@@ -1,5 +1,6 @@
 "use client";
-import { Separator } from "@/components/__legacy__/ui/separator";
+import { Separator } from "@/components/atoms/Separator/Separator";
+import { FadeIn } from "@/components/molecules/FadeIn/FadeIn";
 import { FeaturedSection } from "../FeaturedSection/FeaturedSection";
 import { BecomeACreator } from "../BecomeACreator/BecomeACreator";
 import { HeroSection } from "../HeroSection/HeroSection";
@@ -54,11 +55,13 @@ export const MainMarkeplacePage = () => {
           <FeaturedCreators featuredCreators={featuredCreators.creators} />
         )}
         <Separator className="mb-[25px] mt-[60px]" />
-        <BecomeACreator
-          title="Become a Creator"
-          description="Join our ever-growing community of hackers and tinkerers"
-          buttonText="Become a Creator"
-        />
+        <FadeIn direction="up" duration={0.6}>
+          <BecomeACreator
+            title="Become a Creator"
+            description="Join our ever-growing community of hackers and tinkerers"
+            buttonText="Become a Creator"
+          />
+        </FadeIn>
       </main>
     </div>
   );

autogpt_platform/frontend/src/app/(platform)/marketplace/components/SearchBar/SearchBar.tsx

@@ -16,9 +16,9 @@ interface SearchBarProps {
 export const SearchBar = ({
   placeholder = 'Search for tasks like "optimise SEO"',
   backgroundColor = "bg-neutral-100 dark:bg-neutral-800",
-  iconColor = "text-[#646464] dark:text-neutral-400",
-  textColor = "text-[#707070] dark:text-neutral-200",
-  placeholderColor = "text-[#707070] dark:text-neutral-400",
+  iconColor = "text-neutral-500 dark:text-neutral-400",
+  textColor = "text-neutral-500 dark:text-neutral-200",
+  placeholderColor = "text-neutral-500 dark:text-neutral-400",
   width = "w-9/10 lg:w-[56.25rem]",
   height = "h-[60px]",
 }: SearchBarProps) => {
@@ -32,10 +32,13 @@ export const SearchBar = ({
     >
       <MagnifyingGlassIcon className={`h-5 w-5 md:h-7 md:w-7 ${iconColor}`} />
       <input
-        type="text"
+        type="search"
+        name="search"
+        autoComplete="off"
         value={searchQuery}
         onChange={(e) => setSearchQuery(e.target.value)}
         placeholder={placeholder}
+        aria-label="Search for AI agents"
         className={`flex-grow border-none bg-transparent ${textColor} font-sans text-lg font-normal leading-[2.25rem] tracking-tight md:text-xl placeholder:${placeholderColor} focus:outline-none`}
         data-testid="store-search-input"
       />

autogpt_platform/frontend/src/app/(platform)/marketplace/components/StoreCard/StoreCard.tsx

@@ -1,10 +1,25 @@
 import Image from "next/image";
-import { StarRatingIcons } from "@/components/__legacy__/ui/icons";
+import { Star } from "@phosphor-icons/react";
 import Avatar, {
   AvatarFallback,
   AvatarImage,
 } from "@/components/atoms/Avatar/Avatar";
 
+function StarRating({ rating }: { rating: number }) {
+  const stars = [];
+  const clampedRating = Math.max(0, Math.min(5, rating));
+  for (let i = 1; i <= 5; i++) {
+    stars.push(
+      <Star
+        key={i}
+        weight={i <= clampedRating ? "fill" : "regular"}
+        className="h-4 w-4 text-neutral-900 dark:text-yellow-500"
+      />,
+    );
+  }
+  return <>{stars}</>;
+}
+
 interface StoreCardProps {
   agentName: string;
   agentImage: string;
@@ -34,7 +49,7 @@ export const StoreCard: React.FC<StoreCardProps> = ({
 
   return (
     <div
-      className="flex h-[27rem] w-full max-w-md cursor-pointer flex-col items-start rounded-3xl bg-background transition-all duration-300 hover:shadow-lg dark:hover:shadow-gray-700"
+      className="flex h-[27rem] w-full max-w-md cursor-pointer flex-col items-start rounded-3xl bg-background transition-shadow duration-300 hover:shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 dark:hover:shadow-gray-700 dark:focus-visible:ring-neutral-50"
       onClick={handleClick}
       data-testid="store-card"
       role="button"
@@ -76,7 +91,7 @@ export const StoreCard: React.FC<StoreCardProps> = ({
       <div className="mt-3 flex w-full flex-1 flex-col px-4">
         {/* Second Section: Agent Name and Creator Name */}
         <div className="flex w-full flex-col">
-          <h3 className="line-clamp-2 font-poppins text-2xl font-semibold text-[#272727] dark:text-neutral-100">
+          <h3 className="line-clamp-2 font-poppins text-2xl font-semibold text-neutral-800 dark:text-neutral-100">
             {agentName}
           </h3>
           {!hideAvatar && creatorName && (
@@ -107,11 +122,11 @@ export const StoreCard: React.FC<StoreCardProps> = ({
                 {rating.toFixed(1)}
               </span>
               <div
-                className="inline-flex items-center"
+                className="inline-flex items-center gap-0.5"
                 role="img"
                 aria-label={`Rating: ${rating.toFixed(1)} out of 5 stars`}
               >
-                {StarRatingIcons(rating)}
+                <StarRating rating={rating} />
               </div>
             </div>
           </div>

autogpt_platform/frontend/src/components/atoms/FilterChip/FilterChip.stories.tsx

@@ -0,0 +1,151 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { FilterChip } from "./FilterChip";
+
+const meta: Meta<typeof FilterChip> = {
+  title: "Atoms/FilterChip",
+  component: FilterChip,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FilterChip>;
+
+export const Default: Story = {
+  args: {
+    label: "Marketing",
+  },
+};
+
+export const Selected: Story = {
+  args: {
+    label: "Marketing",
+    selected: true,
+  },
+};
+
+export const Dismissible: Story = {
+  args: {
+    label: "Marketing",
+    selected: true,
+    dismissible: true,
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <FilterChip label="Small" size="sm" />
+      <FilterChip label="Medium" size="md" />
+      <FilterChip label="Large" size="lg" />
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  args: {
+    label: "Disabled",
+    disabled: true,
+  },
+};
+
+function FilterChipGroupDemo() {
+  const filters = [
+    "Marketing",
+    "Sales",
+    "Development",
+    "Design",
+    "Research",
+    "Analytics",
+  ];
+  const [selected, setSelected] = useState<string[]>(["Marketing"]);
+
+  function handleToggle(filter: string) {
+    setSelected((prev) =>
+      prev.includes(filter)
+        ? prev.filter((f) => f !== filter)
+        : [...prev, filter],
+    );
+  }
+
+  return (
+    <div className="flex flex-wrap gap-3">
+      {filters.map((filter) => (
+        <FilterChip
+          key={filter}
+          label={filter}
+          selected={selected.includes(filter)}
+          onClick={() => handleToggle(filter)}
+        />
+      ))}
+    </div>
+  );
+}
+
+export const FilterGroup: Story = {
+  render: () => <FilterChipGroupDemo />,
+};
+
+function SingleSelectDemo() {
+  const filters = ["All", "Featured", "Popular", "New"];
+  const [selected, setSelected] = useState("All");
+
+  return (
+    <div className="flex flex-wrap gap-3">
+      {filters.map((filter) => (
+        <FilterChip
+          key={filter}
+          label={filter}
+          selected={selected === filter}
+          onClick={() => setSelected(filter)}
+        />
+      ))}
+    </div>
+  );
+}
+
+export const SingleSelect: Story = {
+  render: () => <SingleSelectDemo />,
+};
+
+function DismissibleDemo() {
+  const [filters, setFilters] = useState([
+    "Marketing",
+    "Sales",
+    "Development",
+  ]);
+
+  function handleDismiss(filter: string) {
+    setFilters((prev) => prev.filter((f) => f !== filter));
+  }
+
+  return (
+    <div className="flex flex-wrap gap-3">
+      {filters.map((filter) => (
+        <FilterChip
+          key={filter}
+          label={filter}
+          selected
+          dismissible
+          onDismiss={() => handleDismiss(filter)}
+        />
+      ))}
+      {filters.length === 0 && (
+        <span className="text-neutral-500">No filters selected</span>
+      )}
+    </div>
+  );
+}
+
+export const DismissibleGroup: Story = {
+  render: () => <DismissibleDemo />,
+};

autogpt_platform/frontend/src/components/atoms/FilterChip/FilterChip.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { X } from "@phosphor-icons/react";
+
+type FilterChipSize = "sm" | "md" | "lg";
+
+interface FilterChipProps {
+  /** The label text displayed in the chip */
+  label: string;
+  /** Whether the chip is currently selected */
+  selected?: boolean;
+  /** Callback when the chip is clicked */
+  onClick?: () => void;
+  /** Whether to show a dismiss/remove button */
+  dismissible?: boolean;
+  /** Callback when the dismiss button is clicked */
+  onDismiss?: () => void;
+  /** Size variant of the chip */
+  size?: FilterChipSize;
+  /** Whether the chip is disabled */
+  disabled?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const sizeStyles: Record<FilterChipSize, string> = {
+  sm: "px-3 py-1 text-sm gap-1.5",
+  md: "px-4 py-1.5 text-base gap-2",
+  lg: "px-6 py-2 text-lg gap-2.5 lg:text-xl lg:leading-9",
+};
+
+const iconSizes: Record<FilterChipSize, string> = {
+  sm: "h-3 w-3",
+  md: "h-4 w-4",
+  lg: "h-5 w-5",
+};
+
+/**
+ * A filter chip component for selecting/deselecting filter options.
+ * Supports single and multi-select patterns with proper accessibility.
+ */
+export function FilterChip({
+  label,
+  selected = false,
+  onClick,
+  dismissible = false,
+  onDismiss,
+  size = "md",
+  disabled = false,
+  className,
+}: FilterChipProps) {
+  function handleDismiss(e: React.MouseEvent) {
+    e.stopPropagation();
+    onDismiss?.();
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      aria-pressed={selected}
+      className={cn(
+        // Base styles
+        "inline-flex items-center justify-center rounded-full border font-medium transition-colors",
+        // Focus styles
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 dark:focus-visible:ring-neutral-50",
+        // Size styles
+        sizeStyles[size],
+        // State styles
+        selected
+          ? "border-neutral-900 bg-neutral-100 text-neutral-800 dark:border-neutral-100 dark:bg-neutral-800 dark:text-neutral-200"
+          : "border-neutral-400 bg-transparent text-neutral-600 hover:bg-neutral-50 dark:border-neutral-500 dark:text-neutral-300 dark:hover:bg-neutral-800",
+        // Disabled styles
+        disabled && "pointer-events-none opacity-50",
+        className,
+      )}
+    >
+      <span>{label}</span>
+      {dismissible && selected && (
+        <span
+          role="button"
+          tabIndex={0}
+          onClick={handleDismiss}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleDismiss(e as unknown as React.MouseEvent);
+            }
+          }}
+          className="rounded-full p-0.5 hover:bg-neutral-200 dark:hover:bg-neutral-700"
+          aria-label={`Remove ${label} filter`}
+        >
+          <X className={iconSizes[size]} weight="bold" />
+        </span>
+      )}
+    </button>
+  );
+}

autogpt_platform/frontend/src/components/atoms/Separator/Separator.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Separator } from "./Separator";
+
+const meta: Meta<typeof Separator> = {
+  title: "Atoms/Separator",
+  component: Separator,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Separator>;
+
+export const Horizontal: Story = {
+  render: () => (
+    <div className="w-full max-w-md">
+      <p className="mb-4 text-neutral-700 dark:text-neutral-300">
+        Content above the separator
+      </p>
+      <Separator />
+      <p className="mt-4 text-neutral-700 dark:text-neutral-300">
+        Content below the separator
+      </p>
+    </div>
+  ),
+};
+
+export const Vertical: Story = {
+  render: () => (
+    <div className="flex h-16 items-center gap-4">
+      <span className="text-neutral-700 dark:text-neutral-300">Left</span>
+      <Separator orientation="vertical" />
+      <span className="text-neutral-700 dark:text-neutral-300">Right</span>
+    </div>
+  ),
+};
+
+export const WithCustomStyles: Story = {
+  render: () => (
+    <div className="w-full max-w-md space-y-4">
+      <Separator className="bg-violet-500" />
+      <Separator className="h-0.5 bg-gradient-to-r from-violet-500 to-blue-500" />
+      <Separator className="bg-neutral-400 dark:bg-neutral-600" />
+    </div>
+  ),
+};
+
+export const InSection: Story = {
+  render: () => (
+    <div className="w-full max-w-md space-y-6">
+      <section>
+        <h2 className="mb-2 text-lg font-semibold text-neutral-900 dark:text-neutral-100">
+          Featured Agents
+        </h2>
+        <p className="text-neutral-600 dark:text-neutral-400">
+          Browse our collection of featured AI agents.
+        </p>
+      </section>
+      <Separator className="my-6" />
+      <section>
+        <h2 className="mb-2 text-lg font-semibold text-neutral-900 dark:text-neutral-100">
+          Top Creators
+        </h2>
+        <p className="text-neutral-600 dark:text-neutral-400">
+          Meet the creators behind the most popular agents.
+        </p>
+      </section>
+    </div>
+  ),
+};

autogpt_platform/frontend/src/components/atoms/Separator/Separator.tsx

@@ -0,0 +1,43 @@
+import { cn } from "@/lib/utils";
+
+type SeparatorOrientation = "horizontal" | "vertical";
+
+interface SeparatorProps {
+  /** The orientation of the separator */
+  orientation?: SeparatorOrientation;
+  /** Whether the separator is purely decorative (true) or represents a semantic boundary (false) */
+  decorative?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+/**
+ * A visual separator that divides content.
+ * Uses semantic `<hr>` for horizontal separators and a styled `<div>` for vertical.
+ */
+export function Separator({
+  orientation = "horizontal",
+  decorative = true,
+  className,
+}: SeparatorProps) {
+  const baseStyles = "shrink-0 bg-neutral-200 dark:bg-neutral-800";
+
+  if (orientation === "horizontal") {
+    return (
+      <hr
+        className={cn(baseStyles, "h-px w-full border-0", className)}
+        aria-hidden={decorative}
+        role={decorative ? "none" : "separator"}
+      />
+    );
+  }
+
+  return (
+    <div
+      className={cn(baseStyles, "h-full w-px", className)}
+      aria-hidden={decorative}
+      role={decorative ? "none" : "separator"}
+      aria-orientation="vertical"
+    />
+  );
+}

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

@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FadeIn } from "./FadeIn";
+
+const meta: Meta<typeof FadeIn> = {
+  title: "Molecules/FadeIn",
+  component: FadeIn,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+  argTypes: {
+    direction: {
+      control: "select",
+      options: ["up", "down", "left", "right", "none"],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FadeIn>;
+
+const DemoCard = ({ title }: { title: string }) => (
+  <div className="rounded-xl bg-neutral-100 p-6 dark:bg-neutral-800">
+    <h3 className="mb-2 text-lg font-semibold text-neutral-900 dark:text-neutral-100">
+      {title}
+    </h3>
+    <p className="text-neutral-600 dark:text-neutral-400">
+      This card fades in with a smooth animation.
+    </p>
+  </div>
+);
+
+export const Default: Story = {
+  args: {
+    direction: "up",
+    children: <DemoCard title="Fade Up" />,
+  },
+};
+
+export const FadeDown: Story = {
+  args: {
+    direction: "down",
+    children: <DemoCard title="Fade Down" />,
+  },
+};
+
+export const FadeLeft: Story = {
+  args: {
+    direction: "left",
+    children: <DemoCard title="Fade Left" />,
+  },
+};
+
+export const FadeRight: Story = {
+  args: {
+    direction: "right",
+    children: <DemoCard title="Fade Right" />,
+  },
+};
+
+export const FadeOnly: Story = {
+  args: {
+    direction: "none",
+    children: <DemoCard title="Fade Only (No Direction)" />,
+  },
+};
+
+export const WithDelay: Story = {
+  args: {
+    direction: "up",
+    delay: 0.5,
+    children: <DemoCard title="Delayed Fade (0.5s)" />,
+  },
+};
+
+export const SlowAnimation: Story = {
+  args: {
+    direction: "up",
+    duration: 1.5,
+    children: <DemoCard title="Slow Animation (1.5s)" />,
+  },
+};
+
+export const LargeDistance: Story = {
+  args: {
+    direction: "up",
+    distance: 60,
+    children: <DemoCard title="Large Distance (60px)" />,
+  },
+};
+
+export const MultipleElements: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <FadeIn direction="up" delay={0}>
+        <DemoCard title="First Card" />
+      </FadeIn>
+      <FadeIn direction="up" delay={0.1}>
+        <DemoCard title="Second Card" />
+      </FadeIn>
+      <FadeIn direction="up" delay={0.2}>
+        <DemoCard title="Third Card" />
+      </FadeIn>
+    </div>
+  ),
+};
+
+export const HeroExample: Story = {
+  render: () => (
+    <div className="text-center">
+      <FadeIn direction="down" delay={0}>
+        <h1 className="mb-4 text-4xl font-bold text-neutral-900 dark:text-neutral-100">
+          Welcome to the Marketplace
+        </h1>
+      </FadeIn>
+      <FadeIn direction="up" delay={0.2}>
+        <p className="mb-8 text-xl text-neutral-600 dark:text-neutral-400">
+          Discover AI agents built by the community
+        </p>
+      </FadeIn>
+      <FadeIn direction="up" delay={0.4}>
+        <button className="rounded-full bg-violet-600 px-8 py-3 text-white hover:bg-violet-700">
+          Get Started
+        </button>
+      </FadeIn>
+    </div>
+  ),
+};

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

@@ -0,0 +1,109 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { motion, useReducedMotion, type Variants } from "framer-motion";
+import { ReactNode } from "react";
+
+type FadeDirection = "up" | "down" | "left" | "right" | "none";
+
+interface FadeInProps {
+  /** Content to animate */
+  children: ReactNode;
+  /** Direction the content fades in from */
+  direction?: FadeDirection;
+  /** Distance to travel in pixels (only applies when direction is not "none") */
+  distance?: number;
+  /** Animation duration in seconds */
+  duration?: number;
+  /** Delay before animation starts in seconds */
+  delay?: number;
+  /** Whether to trigger animation when element enters viewport */
+  viewport?: boolean;
+  /** How much of element must be visible to trigger (0-1) */
+  viewportAmount?: number;
+  /** Whether animation should only trigger once */
+  once?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+  /** HTML element to render as */
+  as?: keyof JSX.IntrinsicElements;
+}
+
+function getDirectionOffset(
+  direction: FadeDirection,
+  distance: number,
+): { x: number; y: number } {
+  switch (direction) {
+    case "up":
+      return { x: 0, y: distance };
+    case "down":
+      return { x: 0, y: -distance };
+    case "left":
+      return { x: distance, y: 0 };
+    case "right":
+      return { x: -distance, y: 0 };
+    case "none":
+    default:
+      return { x: 0, y: 0 };
+  }
+}
+
+/**
+ * A fade-in animation wrapper component.
+ * Animates children with a fade effect and optional directional slide.
+ * Respects user's reduced motion preferences.
+ */
+export function FadeIn({
+  children,
+  direction = "up",
+  distance = 24,
+  duration = 0.5,
+  delay = 0,
+  viewport = true,
+  viewportAmount = 0.2,
+  once = true,
+  className,
+  as = "div",
+}: FadeInProps) {
+  const shouldReduceMotion = useReducedMotion();
+  const offset = getDirectionOffset(direction, distance);
+
+  // If user prefers reduced motion, render without animation
+  if (shouldReduceMotion) {
+    const Component = as as keyof JSX.IntrinsicElements;
+    return <Component className={className}>{children}</Component>;
+  }
+
+  const variants: Variants = {
+    hidden: {
+      opacity: 0,
+      x: offset.x,
+      y: offset.y,
+    },
+    visible: {
+      opacity: 1,
+      x: 0,
+      y: 0,
+      transition: {
+        duration,
+        delay,
+        ease: [0.25, 0.1, 0.25, 1], // Custom easing for smooth feel
+      },
+    },
+  };
+
+  const MotionComponent = motion[as as keyof typeof motion] as typeof motion.div;
+
+  return (
+    <MotionComponent
+      className={cn(className)}
+      initial="hidden"
+      animate={viewport ? undefined : "visible"}
+      whileInView={viewport ? "visible" : undefined}
+      viewport={viewport ? { once, amount: viewportAmount } : undefined}
+      variants={variants}
+    >
+      {children}
+    </MotionComponent>
+  );
+}

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

@@ -0,0 +1,180 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { StaggeredList } from "./StaggeredList";
+
+const meta: Meta<typeof StaggeredList> = {
+  title: "Molecules/StaggeredList",
+  component: StaggeredList,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+  argTypes: {
+    direction: {
+      control: "select",
+      options: ["up", "down", "left", "right", "none"],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof StaggeredList>;
+
+const DemoCard = ({ title, index }: { title: string; index: number }) => (
+  <div className="rounded-xl bg-neutral-100 p-4 dark:bg-neutral-800">
+    <h3 className="mb-1 font-semibold text-neutral-900 dark:text-neutral-100">
+      {title}
+    </h3>
+    <p className="text-sm text-neutral-600 dark:text-neutral-400">
+      Card #{index + 1} with staggered animation
+    </p>
+  </div>
+);
+
+const items = ["First Item", "Second Item", "Third Item", "Fourth Item"];
+
+export const Default: Story = {
+  args: {
+    direction: "up",
+    className: "space-y-4",
+    children: items.map((item, i) => <DemoCard key={i} title={item} index={i} />),
+  },
+};
+
+export const FadeDown: Story = {
+  args: {
+    direction: "down",
+    className: "space-y-4",
+    children: items.map((item, i) => <DemoCard key={i} title={item} index={i} />),
+  },
+};
+
+export const FadeLeft: Story = {
+  args: {
+    direction: "left",
+    className: "flex gap-4",
+    children: items.map((item, i) => <DemoCard key={i} title={item} index={i} />),
+  },
+};
+
+export const FadeRight: Story = {
+  args: {
+    direction: "right",
+    className: "flex gap-4",
+    children: items.map((item, i) => <DemoCard key={i} title={item} index={i} />),
+  },
+};
+
+export const FastStagger: Story = {
+  args: {
+    direction: "up",
+    staggerDelay: 0.05,
+    className: "space-y-4",
+    children: items.map((item, i) => <DemoCard key={i} title={item} index={i} />),
+  },
+};
+
+export const SlowStagger: Story = {
+  args: {
+    direction: "up",
+    staggerDelay: 0.3,
+    className: "space-y-4",
+    children: items.map((item, i) => <DemoCard key={i} title={item} index={i} />),
+  },
+};
+
+export const WithInitialDelay: Story = {
+  args: {
+    direction: "up",
+    initialDelay: 0.5,
+    className: "space-y-4",
+    children: items.map((item, i) => <DemoCard key={i} title={item} index={i} />),
+  },
+};
+
+export const GridLayout: Story = {
+  args: {
+    direction: "up",
+    staggerDelay: 0.08,
+    className: "grid grid-cols-2 gap-4 md:grid-cols-4",
+    children: [
+      ...items,
+      "Fifth Item",
+      "Sixth Item",
+      "Seventh Item",
+      "Eighth Item",
+    ].map((item, i) => <DemoCard key={i} title={item} index={i} />),
+  },
+};
+
+export const AgentCardsExample: Story = {
+  render: () => {
+    const agents = [
+      { name: "SEO Optimizer", runs: 1234 },
+      { name: "Content Writer", runs: 987 },
+      { name: "Data Analyzer", runs: 756 },
+      { name: "Code Reviewer", runs: 543 },
+    ];
+
+    return (
+      <StaggeredList
+        direction="up"
+        staggerDelay={0.1}
+        className="grid grid-cols-2 gap-6 md:grid-cols-4"
+      >
+        {agents.map((agent, i) => (
+          <div
+            key={i}
+            className="rounded-2xl bg-white p-4 shadow-md dark:bg-neutral-900"
+          >
+            <div className="mb-3 aspect-video rounded-xl bg-gradient-to-br from-violet-500 to-blue-500" />
+            <h3 className="mb-1 font-semibold text-neutral-900 dark:text-neutral-100">
+              {agent.name}
+            </h3>
+            <p className="text-sm text-neutral-500">{agent.runs} runs</p>
+          </div>
+        ))}
+      </StaggeredList>
+    );
+  },
+};
+
+export const CreatorCardsExample: Story = {
+  render: () => {
+    const creators = [
+      { name: "Alice", agents: 12 },
+      { name: "Bob", agents: 8 },
+      { name: "Charlie", agents: 15 },
+      { name: "Diana", agents: 6 },
+    ];
+
+    const colors = [
+      "bg-violet-100 dark:bg-violet-900/30",
+      "bg-blue-100 dark:bg-blue-900/30",
+      "bg-green-100 dark:bg-green-900/30",
+      "bg-orange-100 dark:bg-orange-900/30",
+    ];
+
+    return (
+      <StaggeredList
+        direction="up"
+        staggerDelay={0.12}
+        className="grid grid-cols-2 gap-6 md:grid-cols-4"
+      >
+        {creators.map((creator, i) => (
+          <div
+            key={i}
+            className={`rounded-2xl p-5 ${colors[i % colors.length]}`}
+          >
+            <div className="mb-3 h-12 w-12 rounded-full bg-neutral-300 dark:bg-neutral-700" />
+            <h3 className="mb-1 font-semibold text-neutral-900 dark:text-neutral-100">
+              {creator.name}
+            </h3>
+            <p className="text-sm text-neutral-600 dark:text-neutral-400">
+              {creator.agents} agents
+            </p>
+          </div>
+        ))}
+      </StaggeredList>
+    );
+  },
+};

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

@@ -0,0 +1,130 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { motion, useReducedMotion, type Variants } from "framer-motion";
+import { ReactNode } from "react";
+
+type StaggerDirection = "up" | "down" | "left" | "right" | "none";
+
+interface StaggeredListProps {
+  /** Array of items to render with staggered animation */
+  children: ReactNode[];
+  /** Direction items animate from */
+  direction?: StaggerDirection;
+  /** Distance to travel in pixels */
+  distance?: number;
+  /** Base duration for each item's animation */
+  duration?: number;
+  /** Delay between each item's animation start */
+  staggerDelay?: number;
+  /** Initial delay before first item animates */
+  initialDelay?: number;
+  /** Whether to trigger animation when element enters viewport */
+  viewport?: boolean;
+  /** How much of container must be visible to trigger */
+  viewportAmount?: number;
+  /** Whether animation should only trigger once */
+  once?: boolean;
+  /** Additional CSS classes for the container */
+  className?: string;
+  /** Additional CSS classes for each item wrapper */
+  itemClassName?: string;
+}
+
+function getDirectionOffset(
+  direction: StaggerDirection,
+  distance: number,
+): { x: number; y: number } {
+  switch (direction) {
+    case "up":
+      return { x: 0, y: distance };
+    case "down":
+      return { x: 0, y: -distance };
+    case "left":
+      return { x: distance, y: 0 };
+    case "right":
+      return { x: -distance, y: 0 };
+    case "none":
+    default:
+      return { x: 0, y: 0 };
+  }
+}
+
+/**
+ * Animates a list of children with staggered fade-in effects.
+ * Each child appears sequentially with a configurable delay.
+ * Respects user's reduced motion preferences.
+ */
+export function StaggeredList({
+  children,
+  direction = "up",
+  distance = 20,
+  duration = 0.4,
+  staggerDelay = 0.1,
+  initialDelay = 0,
+  viewport = true,
+  viewportAmount = 0.1,
+  once = true,
+  className,
+  itemClassName,
+}: StaggeredListProps) {
+  const shouldReduceMotion = useReducedMotion();
+  const offset = getDirectionOffset(direction, distance);
+
+  // If user prefers reduced motion, render without animation
+  if (shouldReduceMotion) {
+    return (
+      <div className={className}>
+        {children.map((child, index) => (
+          <div key={index} className={itemClassName}>
+            {child}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  const containerVariants: Variants = {
+    hidden: {},
+    visible: {
+      transition: {
+        staggerChildren: staggerDelay,
+        delayChildren: initialDelay,
+      },
+    },
+  };
+
+  const itemVariants: Variants = {
+    hidden: {
+      opacity: 0,
+      x: offset.x,
+      y: offset.y,
+    },
+    visible: {
+      opacity: 1,
+      x: 0,
+      y: 0,
+      transition: {
+        duration,
+        ease: [0.25, 0.1, 0.25, 1],
+      },
+    },
+  };
+
+  return (
+    <motion.div
+      className={cn(className)}
+      initial="hidden"
+      animate={viewport ? undefined : "visible"}
+      whileInView={viewport ? "visible" : undefined}
+      viewport={viewport ? { once, amount: viewportAmount } : undefined}
+      variants={containerVariants}
+    >
+      {children.map((child, index) => (
+        <motion.div key={index} className={itemClassName} variants={itemVariants}>
+          {child}
+        </motion.div>
+      ))}
+    </motion.div>
+  );
+}

autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/CredentialField/components/CredentialFieldTitle.tsx

@@ -35,13 +35,12 @@ export const CredentialFieldTitle = (props: {
     uiOptions,
   );
 
-  const provider = getCredentialProviderFromSchema(
-    useNodeStore.getState().getHardCodedValues(nodeId),
-    schema as BlockIOCredentialsSubSchema,
+  const credentialProvider = toDisplayName(
+    getCredentialProviderFromSchema(
+      useNodeStore.getState().getHardCodedValues(nodeId),
+      schema as BlockIOCredentialsSubSchema,
+    ) ?? "",
   );
-  const credentialProvider = provider
-    ? `${toDisplayName(provider)} credential`
-    : "credential";
 
   const updatedUiSchema = updateUiOption(uiSchema, {
     showHandles: false,

autogpt_platform/frontend/src/lib/dexie/draft-utils.ts

@@ -5,7 +5,7 @@ import isEqual from "lodash/isEqual";
 export function cleanNode(node: CustomNode) {
   return {
     id: node.id,
-    // Note: position is intentionally excluded to prevent draft saves when dragging nodes
+    position: node.position,
     data: {
       hardcodedValues: node.data.hardcodedValues,
       title: node.data.title,