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/agent_generator/core.py

@@ -218,7 +218,6 @@ async def save_agent_to_library(
     library_agents = await library_db.create_library_agent(
         graph=created_graph,
         user_id=user_id,
-        sensitive_action_safe_mode=True,
         create_library_agents_for_sub_graphs=False,
     )
 

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/backend/backend/api/features/library/db.py

@@ -401,11 +401,27 @@ async def add_generated_agent_image(
     )
 
 
+def _initialize_graph_settings(graph: graph_db.GraphModel) -> GraphSettings:
+    """
+    Initialize GraphSettings based on graph content.
+
+    Args:
+        graph: The graph to analyze
+
+    Returns:
+        GraphSettings with appropriate human_in_the_loop_safe_mode value
+    """
+    if graph.has_human_in_the_loop:
+        # Graph has HITL blocks - set safe mode to True by default
+        return GraphSettings(human_in_the_loop_safe_mode=True)
+    else:
+        # Graph has no HITL blocks - keep None
+        return GraphSettings(human_in_the_loop_safe_mode=None)
+
+
 async def create_library_agent(
     graph: graph_db.GraphModel,
     user_id: str,
-    hitl_safe_mode: bool = True,
-    sensitive_action_safe_mode: bool = False,
     create_library_agents_for_sub_graphs: bool = True,
 ) -> list[library_model.LibraryAgent]:
     """
@@ -414,8 +430,6 @@ async def create_library_agent(
     Args:
         agent: The agent/Graph to add to the library.
         user_id: The user to whom the agent will be added.
-        hitl_safe_mode: Whether HITL blocks require manual review (default True).
-        sensitive_action_safe_mode: Whether sensitive action blocks require review.
         create_library_agents_for_sub_graphs: If True, creates LibraryAgent records for sub-graphs as well.
 
     Returns:
@@ -451,11 +465,7 @@ async def create_library_agent(
                             }
                         },
                         settings=SafeJson(
-                            GraphSettings.from_graph(
-                                graph_entry,
-                                hitl_safe_mode=hitl_safe_mode,
-                                sensitive_action_safe_mode=sensitive_action_safe_mode,
-                            ).model_dump()
+                            _initialize_graph_settings(graph_entry).model_dump()
                         ),
                     ),
                     include=library_agent_include(
@@ -617,6 +627,33 @@ async def update_library_agent(
         raise DatabaseError("Failed to update library agent") from e
 
 
+async def update_library_agent_settings(
+    user_id: str,
+    agent_id: str,
+    settings: GraphSettings,
+) -> library_model.LibraryAgent:
+    """
+    Updates the settings for a specific LibraryAgent.
+
+    Args:
+        user_id: The owner of the LibraryAgent.
+        agent_id: The ID of the LibraryAgent to update.
+        settings: New GraphSettings to apply.
+
+    Returns:
+        The updated LibraryAgent.
+
+    Raises:
+        NotFoundError: If the specified LibraryAgent does not exist.
+        DatabaseError: If there's an error in the update operation.
+    """
+    return await update_library_agent(
+        library_agent_id=agent_id,
+        user_id=user_id,
+        settings=settings,
+    )
+
+
 async def delete_library_agent(
     library_agent_id: str, user_id: str, soft_delete: bool = True
 ) -> None:
@@ -801,7 +838,7 @@ async def add_store_agent_to_library(
                 "isCreatedByUser": False,
                 "useGraphIsActiveVersion": False,
                 "settings": SafeJson(
-                    GraphSettings.from_graph(graph_model).model_dump()
+                    _initialize_graph_settings(graph_model).model_dump()
                 ),
             },
             include=library_agent_include(
@@ -1191,15 +1228,8 @@ async def fork_library_agent(
         )
         new_graph = await on_graph_activate(new_graph, user_id=user_id)
 
-        # Create a library agent for the new graph, preserving safe mode settings
-        return (
-            await create_library_agent(
-                new_graph,
-                user_id,
-                hitl_safe_mode=original_agent.settings.human_in_the_loop_safe_mode,
-                sensitive_action_safe_mode=original_agent.settings.sensitive_action_safe_mode,
-            )
-        )[0]
+        # Create a library agent for the new graph
+        return (await create_library_agent(new_graph, user_id))[0]
     except prisma.errors.PrismaError as e:
         logger.error(f"Database error cloning library agent: {e}")
         raise DatabaseError("Failed to fork library agent") from e

autogpt_platform/backend/backend/api/features/library/model.py

@@ -73,12 +73,6 @@ class LibraryAgent(pydantic.BaseModel):
     has_external_trigger: bool = pydantic.Field(
         description="Whether the agent has an external trigger (e.g. webhook) node"
     )
-    has_human_in_the_loop: bool = pydantic.Field(
-        description="Whether the agent has human-in-the-loop blocks"
-    )
-    has_sensitive_action: bool = pydantic.Field(
-        description="Whether the agent has sensitive action blocks"
-    )
     trigger_setup_info: Optional[GraphTriggerInfo] = None
 
     # Indicates whether there's a new output (based on recent runs)
@@ -186,8 +180,6 @@ class LibraryAgent(pydantic.BaseModel):
                 graph.credentials_input_schema if sub_graphs is not None else None
             ),
             has_external_trigger=graph.has_external_trigger,
-            has_human_in_the_loop=graph.has_human_in_the_loop,
-            has_sensitive_action=graph.has_sensitive_action,
             trigger_setup_info=graph.trigger_setup_info,
             new_output=new_output,
             can_access_graph=can_access_graph,

autogpt_platform/backend/backend/api/features/library/routes_test.py

@@ -52,8 +52,6 @@ async def test_get_library_agents_success(
                 output_schema={"type": "object", "properties": {}},
                 credentials_input_schema={"type": "object", "properties": {}},
                 has_external_trigger=False,
-                has_human_in_the_loop=False,
-                has_sensitive_action=False,
                 status=library_model.LibraryAgentStatus.COMPLETED,
                 recommended_schedule_cron=None,
                 new_output=False,
@@ -77,8 +75,6 @@ async def test_get_library_agents_success(
                 output_schema={"type": "object", "properties": {}},
                 credentials_input_schema={"type": "object", "properties": {}},
                 has_external_trigger=False,
-                has_human_in_the_loop=False,
-                has_sensitive_action=False,
                 status=library_model.LibraryAgentStatus.COMPLETED,
                 recommended_schedule_cron=None,
                 new_output=False,
@@ -154,8 +150,6 @@ async def test_get_favorite_library_agents_success(
                 output_schema={"type": "object", "properties": {}},
                 credentials_input_schema={"type": "object", "properties": {}},
                 has_external_trigger=False,
-                has_human_in_the_loop=False,
-                has_sensitive_action=False,
                 status=library_model.LibraryAgentStatus.COMPLETED,
                 recommended_schedule_cron=None,
                 new_output=False,
@@ -224,8 +218,6 @@ def test_add_agent_to_library_success(
         output_schema={"type": "object", "properties": {}},
         credentials_input_schema={"type": "object", "properties": {}},
         has_external_trigger=False,
-        has_human_in_the_loop=False,
-        has_sensitive_action=False,
         status=library_model.LibraryAgentStatus.COMPLETED,
         new_output=False,
         can_access_graph=True,

autogpt_platform/backend/backend/api/features/store/embeddings.py

@@ -154,16 +154,15 @@ async def store_content_embedding(
 
         # Upsert the embedding
         # WHERE clause in DO UPDATE prevents PostgreSQL 15 bug with NULLS NOT DISTINCT
-        # Use {pgvector_schema}.vector for explicit pgvector type qualification
         await execute_raw_with_schema(
             """
             INSERT INTO {schema_prefix}"UnifiedContentEmbedding" (
                 "id", "contentType", "contentId", "userId", "embedding", "searchableText", "metadata", "createdAt", "updatedAt"
             )
-            VALUES (gen_random_uuid()::text, $1::{schema_prefix}"ContentType", $2, $3, $4::{pgvector_schema}.vector, $5, $6::jsonb, NOW(), NOW())
+            VALUES (gen_random_uuid()::text, $1::{schema_prefix}"ContentType", $2, $3, $4::vector, $5, $6::jsonb, NOW(), NOW())
             ON CONFLICT ("contentType", "contentId", "userId")
             DO UPDATE SET
-                "embedding" = $4::{pgvector_schema}.vector,
+                "embedding" = $4::vector,
                 "searchableText" = $5,
                 "metadata" = $6::jsonb,
                 "updatedAt" = NOW()
@@ -178,6 +177,7 @@ async def store_content_embedding(
             searchable_text,
             metadata_json,
             client=client,
+            set_public_search_path=True,
         )
 
         logger.info(f"Stored embedding for {content_type}:{content_id}")
@@ -236,6 +236,7 @@ async def get_content_embedding(
             content_type,
             content_id,
             user_id,
+            set_public_search_path=True,
         )
 
         if result and len(result) > 0:
@@ -870,46 +871,31 @@ async def semantic_search(
         # Add content type parameters and build placeholders dynamically
         content_type_start_idx = len(params) + 1
         content_type_placeholders = ", ".join(
-            "$" + str(content_type_start_idx + i) + '::{schema_prefix}"ContentType"'
+            f'${content_type_start_idx + i}::{{{{schema_prefix}}}}"ContentType"'
             for i in range(len(content_types))
         )
         params.extend([ct.value for ct in content_types])
 
-        # Build min_similarity param index before appending
-        min_similarity_idx = len(params) + 1
-        params.append(min_similarity)
-
-        # Use regular string (not f-string) for template to preserve {schema_prefix} and {schema} placeholders
-        # Use OPERATOR({pgvector_schema}.<=>) for explicit operator schema qualification
-        sql = (
-            """
+        sql = f"""
             SELECT
                 "contentId" as content_id,
                 "contentType" as content_type,
                 "searchableText" as searchable_text,
                 metadata,
-                1 - (embedding OPERATOR({pgvector_schema}.<=>) '"""
-            + embedding_str
-            + """'::{pgvector_schema}.vector) as similarity
-            FROM {schema_prefix}"UnifiedContentEmbedding"
-            WHERE "contentType" IN ("""
-            + content_type_placeholders
-            + """)
-            """
-            + user_filter
-            + """
-            AND 1 - (embedding OPERATOR({pgvector_schema}.<=>) '"""
-            + embedding_str
-            + """'::{pgvector_schema}.vector) >= $"""
-            + str(min_similarity_idx)
-            + """
+                1 - (embedding <=> '{embedding_str}'::vector) as similarity
+            FROM {{{{schema_prefix}}}}"UnifiedContentEmbedding"
+            WHERE "contentType" IN ({content_type_placeholders})
+            {user_filter}
+            AND 1 - (embedding <=> '{embedding_str}'::vector) >= ${len(params) + 1}
             ORDER BY similarity DESC
             LIMIT $1
         """
-        )
+        params.append(min_similarity)
 
         try:
-            results = await query_raw_with_schema(sql, *params)
+            results = await query_raw_with_schema(
+                sql, *params, set_public_search_path=True
+            )
             return [
                 {
                     "content_id": row["content_id"],
@@ -936,41 +922,31 @@ async def semantic_search(
     # Add content type parameters and build placeholders dynamically
     content_type_start_idx = len(params_lexical) + 1
     content_type_placeholders_lexical = ", ".join(
-        "$" + str(content_type_start_idx + i) + '::{schema_prefix}"ContentType"'
+        f'${content_type_start_idx + i}::{{{{schema_prefix}}}}"ContentType"'
         for i in range(len(content_types))
     )
     params_lexical.extend([ct.value for ct in content_types])
 
-    # Build query param index before appending
-    query_param_idx = len(params_lexical) + 1
-    params_lexical.append(f"%{query}%")
-
-    # Use regular string (not f-string) for template to preserve {schema_prefix} placeholders
-    sql_lexical = (
-        """
+    sql_lexical = f"""
         SELECT
             "contentId" as content_id,
             "contentType" as content_type,
             "searchableText" as searchable_text,
             metadata,
             0.0 as similarity
-        FROM {schema_prefix}"UnifiedContentEmbedding"
-        WHERE "contentType" IN ("""
-        + content_type_placeholders_lexical
-        + """)
-        """
-        + user_filter
-        + """
-        AND "searchableText" ILIKE $"""
-        + str(query_param_idx)
-        + """
+        FROM {{{{schema_prefix}}}}"UnifiedContentEmbedding"
+        WHERE "contentType" IN ({content_type_placeholders_lexical})
+        {user_filter}
+        AND "searchableText" ILIKE ${len(params_lexical) + 1}
         ORDER BY "updatedAt" DESC
         LIMIT $1
     """
-    )
+    params_lexical.append(f"%{query}%")
 
     try:
-        results = await query_raw_with_schema(sql_lexical, *params_lexical)
+        results = await query_raw_with_schema(
+            sql_lexical, *params_lexical, set_public_search_path=True
+        )
         return [
             {
                 "content_id": row["content_id"],

autogpt_platform/backend/backend/api/features/store/embeddings_test.py

@@ -155,14 +155,18 @@ async def test_store_embedding_success(mocker):
     )
 
     assert result is True
-    # execute_raw is called once for INSERT (no separate SET search_path needed)
-    assert mock_client.execute_raw.call_count == 1
+    # execute_raw is called twice: once for SET search_path, once for INSERT
+    assert mock_client.execute_raw.call_count == 2
 
-    # Verify the INSERT query with the actual data
-    call_args = mock_client.execute_raw.call_args_list[0][0]
-    assert "test-version-id" in call_args
-    assert "[0.1,0.2,0.3]" in call_args
-    assert None in call_args  # userId should be None for store agents
+    # First call: SET search_path
+    first_call_args = mock_client.execute_raw.call_args_list[0][0]
+    assert "SET search_path" in first_call_args[0]
+
+    # Second call: INSERT query with the actual data
+    second_call_args = mock_client.execute_raw.call_args_list[1][0]
+    assert "test-version-id" in second_call_args
+    assert "[0.1,0.2,0.3]" in second_call_args
+    assert None in second_call_args  # userId should be None for store agents
 
 
 @pytest.mark.asyncio(loop_scope="session")

autogpt_platform/backend/backend/api/features/store/hybrid_search.py

@@ -12,7 +12,7 @@ from dataclasses import dataclass
 from typing import Any, Literal
 
 from prisma.enums import ContentType
-from rank_bm25 import BM25Okapi  # type: ignore[import-untyped]
+from rank_bm25 import BM25Okapi
 
 from backend.api.features.store.embeddings import (
     EMBEDDING_DIM,
@@ -295,7 +295,7 @@ async def unified_hybrid_search(
                 FROM {{schema_prefix}}"UnifiedContentEmbedding" uce
                 WHERE uce."contentType" = ANY({content_types_param}::{{schema_prefix}}"ContentType"[])
                 {user_filter}
-                ORDER BY uce.embedding OPERATOR({{pgvector_schema}}.<=>)  {embedding_param}::{{pgvector_schema}}.vector
+                ORDER BY uce.embedding <=> {embedding_param}::vector
                 LIMIT 200
             )
         ),
@@ -307,7 +307,7 @@ async def unified_hybrid_search(
                 uce.metadata,
                 uce."updatedAt" as updated_at,
                 -- Semantic score: cosine similarity (1 - distance)
-                COALESCE(1 - (uce.embedding OPERATOR({{pgvector_schema}}.<=>)  {embedding_param}::{{pgvector_schema}}.vector), 0) as semantic_score,
+                COALESCE(1 - (uce.embedding <=> {embedding_param}::vector), 0) as semantic_score,
                 -- Lexical score: ts_rank_cd
                 COALESCE(ts_rank_cd(uce.search, plainto_tsquery('english', {query_param})), 0) as lexical_raw,
                 -- Category match from metadata
@@ -363,7 +363,9 @@ async def unified_hybrid_search(
         LIMIT {limit_param} OFFSET {offset_param}
     """
 
-    results = await query_raw_with_schema(sql_query, *params)
+    results = await query_raw_with_schema(
+        sql_query, *params, set_public_search_path=True
+    )
 
     total = results[0]["total_count"] if results else 0
     # Apply BM25 reranking
@@ -583,7 +585,7 @@ async def hybrid_search(
                 WHERE uce."contentType" = 'STORE_AGENT'::{{schema_prefix}}"ContentType"
                 AND uce."userId" IS NULL
                 AND {where_clause}
-                ORDER BY uce.embedding OPERATOR({{pgvector_schema}}.<=>)  {embedding_param}::{{pgvector_schema}}.vector
+                ORDER BY uce.embedding <=> {embedding_param}::vector
                 LIMIT 200
             ) uce
         ),
@@ -605,7 +607,7 @@ async def hybrid_search(
                 -- Searchable text for BM25 reranking
                 COALESCE(sa.agent_name, '') || ' ' || COALESCE(sa.sub_heading, '') || ' ' || COALESCE(sa.description, '') as searchable_text,
                 -- Semantic score
-                COALESCE(1 - (uce.embedding OPERATOR({{pgvector_schema}}.<=>)  {embedding_param}::{{pgvector_schema}}.vector), 0) as semantic_score,
+                COALESCE(1 - (uce.embedding <=> {embedding_param}::vector), 0) as semantic_score,
                 -- Lexical score (raw, will normalize)
                 COALESCE(ts_rank_cd(uce.search, plainto_tsquery('english', {query_param})), 0) as lexical_raw,
                 -- Category match
@@ -686,7 +688,9 @@ async def hybrid_search(
         LIMIT {limit_param} OFFSET {offset_param}
     """
 
-    results = await query_raw_with_schema(sql_query, *params)
+    results = await query_raw_with_schema(
+        sql_query, *params, set_public_search_path=True
+    )
 
     total = results[0]["total_count"] if results else 0
 

autogpt_platform/backend/backend/api/features/v1.py

@@ -761,8 +761,10 @@ async def create_new_graph(
     graph.reassign_ids(user_id=user_id, reassign_graph_id=True)
     graph.validate_graph(for_run=False)
 
+    # The return value of the create graph & library function is intentionally not used here,
+    # as the graph already valid and no sub-graphs are returned back.
     await graph_db.create_graph(graph, user_id=user_id)
-    await library_db.create_library_agent(graph, user_id)
+    await library_db.create_library_agent(graph, user_id=user_id)
     activated_graph = await on_graph_activate(graph, user_id=user_id)
 
     if create_graph.source == "builder":
@@ -886,19 +888,21 @@ async def set_graph_active_version(
 async def _update_library_agent_version_and_settings(
     user_id: str, agent_graph: graph_db.GraphModel
 ) -> library_model.LibraryAgent:
+    # Keep the library agent up to date with the new active version
     library = await library_db.update_agent_version_in_library(
         user_id, agent_graph.id, agent_graph.version
     )
-    updated_settings = GraphSettings.from_graph(
-        graph=agent_graph,
-        hitl_safe_mode=library.settings.human_in_the_loop_safe_mode,
-        sensitive_action_safe_mode=library.settings.sensitive_action_safe_mode,
-    )
-    if updated_settings != library.settings:
-        library = await library_db.update_library_agent(
-            library_agent_id=library.id,
+    # If the graph has HITL node, initialize the setting if it's not already set.
+    if (
+        agent_graph.has_human_in_the_loop
+        and library.settings.human_in_the_loop_safe_mode is None
+    ):
+        await library_db.update_library_agent_settings(
             user_id=user_id,
-            settings=updated_settings,
+            agent_id=library.id,
+            settings=library.settings.model_copy(
+                update={"human_in_the_loop_safe_mode": True}
+            ),
         )
     return library
 
@@ -915,18 +919,21 @@ async def update_graph_settings(
     user_id: Annotated[str, Security(get_user_id)],
 ) -> GraphSettings:
     """Update graph settings for the user's library agent."""
+    # Get the library agent for this graph
     library_agent = await library_db.get_library_agent_by_graph_id(
         graph_id=graph_id, user_id=user_id
     )
     if not library_agent:
         raise HTTPException(404, f"Graph #{graph_id} not found in user's library")
 
-    updated_agent = await library_db.update_library_agent(
-        library_agent_id=library_agent.id,
+    # Update the library agent settings
+    updated_agent = await library_db.update_library_agent_settings(
         user_id=user_id,
+        agent_id=library_agent.id,
         settings=settings,
     )
 
+    # Return the updated settings
     return GraphSettings.model_validate(updated_agent.settings)
 
 

autogpt_platform/backend/backend/blocks/data_manipulation.py

@@ -680,58 +680,3 @@ class ListIsEmptyBlock(Block):
 
     async def run(self, input_data: Input, **kwargs) -> BlockOutput:
         yield "is_empty", len(input_data.list) == 0
-
-
-class ConcatenateListsBlock(Block):
-    class Input(BlockSchemaInput):
-        lists: List[List[Any]] = SchemaField(
-            description="A list of lists to concatenate together. All lists will be combined in order into a single list.",
-            placeholder="e.g., [[1, 2], [3, 4], [5, 6]]",
-        )
-
-    class Output(BlockSchemaOutput):
-        concatenated_list: List[Any] = SchemaField(
-            description="The concatenated list containing all elements from all input lists in order."
-        )
-        error: str = SchemaField(
-            description="Error message if concatenation failed due to invalid input types."
-        )
-
-    def __init__(self):
-        super().__init__(
-            id="3cf9298b-5817-4141-9d80-7c2cc5199c8e",
-            description="Concatenates multiple lists into a single list. All elements from all input lists are combined in order.",
-            categories={BlockCategory.BASIC},
-            input_schema=ConcatenateListsBlock.Input,
-            output_schema=ConcatenateListsBlock.Output,
-            test_input=[
-                {"lists": [[1, 2, 3], [4, 5, 6]]},
-                {"lists": [["a", "b"], ["c"], ["d", "e", "f"]]},
-                {"lists": [[1, 2], []]},
-                {"lists": []},
-            ],
-            test_output=[
-                ("concatenated_list", [1, 2, 3, 4, 5, 6]),
-                ("concatenated_list", ["a", "b", "c", "d", "e", "f"]),
-                ("concatenated_list", [1, 2]),
-                ("concatenated_list", []),
-            ],
-        )
-
-    async def run(self, input_data: Input, **kwargs) -> BlockOutput:
-        concatenated = []
-        for idx, lst in enumerate(input_data.lists):
-            if lst is None:
-                # Skip None values to avoid errors
-                continue
-            if not isinstance(lst, list):
-                # Type validation: each item must be a list
-                # Strings are iterable and would cause extend() to iterate character-by-character
-                # Non-iterable types would raise TypeError
-                yield "error", (
-                    f"Invalid input at index {idx}: expected a list, got {type(lst).__name__}. "
-                    f"All items in 'lists' must be lists (e.g., [[1, 2], [3, 4]])."
-                )
-                return
-            concatenated.extend(lst)
-        yield "concatenated_list", concatenated

autogpt_platform/backend/backend/blocks/helpers/review.py

@@ -84,7 +84,7 @@ class HITLReviewHelper:
             Exception: If review creation or status update fails
         """
         # Skip review if safe mode is disabled - return auto-approved result
-        if not execution_context.human_in_the_loop_safe_mode:
+        if not execution_context.safe_mode:
             logger.info(
                 f"Block {block_name} skipping review for node {node_exec_id} - safe mode disabled"
             )

autogpt_platform/backend/backend/blocks/human_in_the_loop.py

@@ -104,7 +104,7 @@ class HumanInTheLoopBlock(Block):
         execution_context: ExecutionContext,
         **_kwargs,
     ) -> BlockOutput:
-        if not execution_context.human_in_the_loop_safe_mode:
+        if not execution_context.safe_mode:
             logger.info(
                 f"HITL block skipping review for node {node_exec_id} - safe mode disabled"
             )

autogpt_platform/backend/backend/blocks/llm.py

@@ -79,10 +79,6 @@ class ModelMetadata(NamedTuple):
     provider: str
     context_window: int
     max_output_tokens: int | None
-    display_name: str
-    provider_name: str
-    creator_name: str
-    price_tier: Literal[1, 2, 3]
 
 
 class LlmModelMeta(EnumMeta):
@@ -175,26 +171,6 @@ class LlmModel(str, Enum, metaclass=LlmModelMeta):
     V0_1_5_LG = "v0-1.5-lg"
     V0_1_0_MD = "v0-1.0-md"
 
-    @classmethod
-    def __get_pydantic_json_schema__(cls, schema, handler):
-        json_schema = handler(schema)
-        llm_model_metadata = {}
-        for model in cls:
-            model_name = model.value
-            metadata = model.metadata
-            llm_model_metadata[model_name] = {
-                "creator": metadata.creator_name,
-                "creator_name": metadata.creator_name,
-                "title": metadata.display_name,
-                "provider": metadata.provider,
-                "provider_name": metadata.provider_name,
-                "name": model_name,
-                "price_tier": metadata.price_tier,
-            }
-        json_schema["llm_model"] = True
-        json_schema["llm_model_metadata"] = llm_model_metadata
-        return json_schema
-
     @property
     def metadata(self) -> ModelMetadata:
         return MODEL_METADATA[self]
@@ -214,291 +190,119 @@ class LlmModel(str, Enum, metaclass=LlmModelMeta):
 
 MODEL_METADATA = {
     # https://platform.openai.com/docs/models
-    LlmModel.O3: ModelMetadata("openai", 200000, 100000, "O3", "OpenAI", "OpenAI", 2),
-    LlmModel.O3_MINI: ModelMetadata(
-        "openai", 200000, 100000, "O3 Mini", "OpenAI", "OpenAI", 1
-    ),  # o3-mini-2025-01-31
-    LlmModel.O1: ModelMetadata(
-        "openai", 200000, 100000, "O1", "OpenAI", "OpenAI", 3
-    ),  # o1-2024-12-17
-    LlmModel.O1_MINI: ModelMetadata(
-        "openai", 128000, 65536, "O1 Mini", "OpenAI", "OpenAI", 2
-    ),  # o1-mini-2024-09-12
+    LlmModel.O3: ModelMetadata("openai", 200000, 100000),
+    LlmModel.O3_MINI: ModelMetadata("openai", 200000, 100000),  # o3-mini-2025-01-31
+    LlmModel.O1: ModelMetadata("openai", 200000, 100000),  # o1-2024-12-17
+    LlmModel.O1_MINI: ModelMetadata("openai", 128000, 65536),  # o1-mini-2024-09-12
     # GPT-5 models
-    LlmModel.GPT5_2: ModelMetadata(
-        "openai", 400000, 128000, "GPT-5.2", "OpenAI", "OpenAI", 3
-    ),
-    LlmModel.GPT5_1: ModelMetadata(
-        "openai", 400000, 128000, "GPT-5.1", "OpenAI", "OpenAI", 2
-    ),
-    LlmModel.GPT5: ModelMetadata(
-        "openai", 400000, 128000, "GPT-5", "OpenAI", "OpenAI", 1
-    ),
-    LlmModel.GPT5_MINI: ModelMetadata(
-        "openai", 400000, 128000, "GPT-5 Mini", "OpenAI", "OpenAI", 1
-    ),
-    LlmModel.GPT5_NANO: ModelMetadata(
-        "openai", 400000, 128000, "GPT-5 Nano", "OpenAI", "OpenAI", 1
-    ),
-    LlmModel.GPT5_CHAT: ModelMetadata(
-        "openai", 400000, 16384, "GPT-5 Chat Latest", "OpenAI", "OpenAI", 2
-    ),
-    LlmModel.GPT41: ModelMetadata(
-        "openai", 1047576, 32768, "GPT-4.1", "OpenAI", "OpenAI", 1
-    ),
-    LlmModel.GPT41_MINI: ModelMetadata(
-        "openai", 1047576, 32768, "GPT-4.1 Mini", "OpenAI", "OpenAI", 1
-    ),
+    LlmModel.GPT5_2: ModelMetadata("openai", 400000, 128000),
+    LlmModel.GPT5_1: ModelMetadata("openai", 400000, 128000),
+    LlmModel.GPT5: ModelMetadata("openai", 400000, 128000),
+    LlmModel.GPT5_MINI: ModelMetadata("openai", 400000, 128000),
+    LlmModel.GPT5_NANO: ModelMetadata("openai", 400000, 128000),
+    LlmModel.GPT5_CHAT: ModelMetadata("openai", 400000, 16384),
+    LlmModel.GPT41: ModelMetadata("openai", 1047576, 32768),
+    LlmModel.GPT41_MINI: ModelMetadata("openai", 1047576, 32768),
     LlmModel.GPT4O_MINI: ModelMetadata(
-        "openai", 128000, 16384, "GPT-4o Mini", "OpenAI", "OpenAI", 1
+        "openai", 128000, 16384
     ),  # gpt-4o-mini-2024-07-18
-    LlmModel.GPT4O: ModelMetadata(
-        "openai", 128000, 16384, "GPT-4o", "OpenAI", "OpenAI", 2
-    ),  # gpt-4o-2024-08-06
+    LlmModel.GPT4O: ModelMetadata("openai", 128000, 16384),  # gpt-4o-2024-08-06
     LlmModel.GPT4_TURBO: ModelMetadata(
-        "openai", 128000, 4096, "GPT-4 Turbo", "OpenAI", "OpenAI", 3
+        "openai", 128000, 4096
     ),  # gpt-4-turbo-2024-04-09
-    LlmModel.GPT3_5_TURBO: ModelMetadata(
-        "openai", 16385, 4096, "GPT-3.5 Turbo", "OpenAI", "OpenAI", 1
-    ),  # gpt-3.5-turbo-0125
+    LlmModel.GPT3_5_TURBO: ModelMetadata("openai", 16385, 4096),  # gpt-3.5-turbo-0125
     # https://docs.anthropic.com/en/docs/about-claude/models
     LlmModel.CLAUDE_4_1_OPUS: ModelMetadata(
-        "anthropic", 200000, 32000, "Claude Opus 4.1", "Anthropic", "Anthropic", 3
+        "anthropic", 200000, 32000
     ),  # claude-opus-4-1-20250805
     LlmModel.CLAUDE_4_OPUS: ModelMetadata(
-        "anthropic", 200000, 32000, "Claude Opus 4", "Anthropic", "Anthropic", 3
+        "anthropic", 200000, 32000
     ),  # claude-4-opus-20250514
     LlmModel.CLAUDE_4_SONNET: ModelMetadata(
-        "anthropic", 200000, 64000, "Claude Sonnet 4", "Anthropic", "Anthropic", 2
+        "anthropic", 200000, 64000
     ),  # claude-4-sonnet-20250514
     LlmModel.CLAUDE_4_5_OPUS: ModelMetadata(
-        "anthropic", 200000, 64000, "Claude Opus 4.5", "Anthropic", "Anthropic", 3
+        "anthropic", 200000, 64000
     ),  # claude-opus-4-5-20251101
     LlmModel.CLAUDE_4_5_SONNET: ModelMetadata(
-        "anthropic", 200000, 64000, "Claude Sonnet 4.5", "Anthropic", "Anthropic", 3
+        "anthropic", 200000, 64000
     ),  # claude-sonnet-4-5-20250929
     LlmModel.CLAUDE_4_5_HAIKU: ModelMetadata(
-        "anthropic", 200000, 64000, "Claude Haiku 4.5", "Anthropic", "Anthropic", 2
+        "anthropic", 200000, 64000
     ),  # claude-haiku-4-5-20251001
     LlmModel.CLAUDE_3_7_SONNET: ModelMetadata(
-        "anthropic", 200000, 64000, "Claude 3.7 Sonnet", "Anthropic", "Anthropic", 2
+        "anthropic", 200000, 64000
     ),  # claude-3-7-sonnet-20250219
     LlmModel.CLAUDE_3_HAIKU: ModelMetadata(
-        "anthropic", 200000, 4096, "Claude 3 Haiku", "Anthropic", "Anthropic", 1
+        "anthropic", 200000, 4096
     ),  # claude-3-haiku-20240307
     # https://docs.aimlapi.com/api-overview/model-database/text-models
-    LlmModel.AIML_API_QWEN2_5_72B: ModelMetadata(
-        "aiml_api", 32000, 8000, "Qwen 2.5 72B Instruct Turbo", "AI/ML", "Qwen", 1
-    ),
-    LlmModel.AIML_API_LLAMA3_1_70B: ModelMetadata(
-        "aiml_api",
-        128000,
-        40000,
-        "Llama 3.1 Nemotron 70B Instruct",
-        "AI/ML",
-        "Nvidia",
-        1,
-    ),
-    LlmModel.AIML_API_LLAMA3_3_70B: ModelMetadata(
-        "aiml_api", 128000, None, "Llama 3.3 70B Instruct Turbo", "AI/ML", "Meta", 1
-    ),
-    LlmModel.AIML_API_META_LLAMA_3_1_70B: ModelMetadata(
-        "aiml_api", 131000, 2000, "Llama 3.1 70B Instruct Turbo", "AI/ML", "Meta", 1
-    ),
-    LlmModel.AIML_API_LLAMA_3_2_3B: ModelMetadata(
-        "aiml_api", 128000, None, "Llama 3.2 3B Instruct Turbo", "AI/ML", "Meta", 1
-    ),
+    LlmModel.AIML_API_QWEN2_5_72B: ModelMetadata("aiml_api", 32000, 8000),
+    LlmModel.AIML_API_LLAMA3_1_70B: ModelMetadata("aiml_api", 128000, 40000),
+    LlmModel.AIML_API_LLAMA3_3_70B: ModelMetadata("aiml_api", 128000, None),
+    LlmModel.AIML_API_META_LLAMA_3_1_70B: ModelMetadata("aiml_api", 131000, 2000),
+    LlmModel.AIML_API_LLAMA_3_2_3B: ModelMetadata("aiml_api", 128000, None),
     # https://console.groq.com/docs/models
-    LlmModel.LLAMA3_3_70B: ModelMetadata(
-        "groq", 128000, 32768, "Llama 3.3 70B Versatile", "Groq", "Meta", 1
-    ),
-    LlmModel.LLAMA3_1_8B: ModelMetadata(
-        "groq", 128000, 8192, "Llama 3.1 8B Instant", "Groq", "Meta", 1
-    ),
+    LlmModel.LLAMA3_3_70B: ModelMetadata("groq", 128000, 32768),
+    LlmModel.LLAMA3_1_8B: ModelMetadata("groq", 128000, 8192),
     # https://ollama.com/library
-    LlmModel.OLLAMA_LLAMA3_3: ModelMetadata(
-        "ollama", 8192, None, "Llama 3.3", "Ollama", "Meta", 1
-    ),
-    LlmModel.OLLAMA_LLAMA3_2: ModelMetadata(
-        "ollama", 8192, None, "Llama 3.2", "Ollama", "Meta", 1
-    ),
-    LlmModel.OLLAMA_LLAMA3_8B: ModelMetadata(
-        "ollama", 8192, None, "Llama 3", "Ollama", "Meta", 1
-    ),
-    LlmModel.OLLAMA_LLAMA3_405B: ModelMetadata(
-        "ollama", 8192, None, "Llama 3.1 405B", "Ollama", "Meta", 1
-    ),
-    LlmModel.OLLAMA_DOLPHIN: ModelMetadata(
-        "ollama", 32768, None, "Dolphin Mistral Latest", "Ollama", "Mistral AI", 1
-    ),
+    LlmModel.OLLAMA_LLAMA3_3: ModelMetadata("ollama", 8192, None),
+    LlmModel.OLLAMA_LLAMA3_2: ModelMetadata("ollama", 8192, None),
+    LlmModel.OLLAMA_LLAMA3_8B: ModelMetadata("ollama", 8192, None),
+    LlmModel.OLLAMA_LLAMA3_405B: ModelMetadata("ollama", 8192, None),
+    LlmModel.OLLAMA_DOLPHIN: ModelMetadata("ollama", 32768, None),
     # https://openrouter.ai/models
-    LlmModel.GEMINI_2_5_PRO: ModelMetadata(
-        "open_router",
-        1050000,
-        8192,
-        "Gemini 2.5 Pro Preview 03.25",
-        "OpenRouter",
-        "Google",
-        2,
-    ),
-    LlmModel.GEMINI_3_PRO_PREVIEW: ModelMetadata(
-        "open_router", 1048576, 65535, "Gemini 3 Pro Preview", "OpenRouter", "Google", 2
-    ),
-    LlmModel.GEMINI_2_5_FLASH: ModelMetadata(
-        "open_router", 1048576, 65535, "Gemini 2.5 Flash", "OpenRouter", "Google", 1
-    ),
-    LlmModel.GEMINI_2_0_FLASH: ModelMetadata(
-        "open_router", 1048576, 8192, "Gemini 2.0 Flash 001", "OpenRouter", "Google", 1
-    ),
+    LlmModel.GEMINI_2_5_PRO: ModelMetadata("open_router", 1050000, 8192),
+    LlmModel.GEMINI_3_PRO_PREVIEW: ModelMetadata("open_router", 1048576, 65535),
+    LlmModel.GEMINI_2_5_FLASH: ModelMetadata("open_router", 1048576, 65535),
+    LlmModel.GEMINI_2_0_FLASH: ModelMetadata("open_router", 1048576, 8192),
     LlmModel.GEMINI_2_5_FLASH_LITE_PREVIEW: ModelMetadata(
-        "open_router",
-        1048576,
-        65535,
-        "Gemini 2.5 Flash Lite Preview 06.17",
-        "OpenRouter",
-        "Google",
-        1,
-    ),
-    LlmModel.GEMINI_2_0_FLASH_LITE: ModelMetadata(
-        "open_router",
-        1048576,
-        8192,
-        "Gemini 2.0 Flash Lite 001",
-        "OpenRouter",
-        "Google",
-        1,
-    ),
-    LlmModel.MISTRAL_NEMO: ModelMetadata(
-        "open_router", 128000, 4096, "Mistral Nemo", "OpenRouter", "Mistral AI", 1
-    ),
-    LlmModel.COHERE_COMMAND_R_08_2024: ModelMetadata(
-        "open_router", 128000, 4096, "Command R 08.2024", "OpenRouter", "Cohere", 1
-    ),
-    LlmModel.COHERE_COMMAND_R_PLUS_08_2024: ModelMetadata(
-        "open_router", 128000, 4096, "Command R Plus 08.2024", "OpenRouter", "Cohere", 2
-    ),
-    LlmModel.DEEPSEEK_CHAT: ModelMetadata(
-        "open_router", 64000, 2048, "DeepSeek Chat", "OpenRouter", "DeepSeek", 1
-    ),
-    LlmModel.DEEPSEEK_R1_0528: ModelMetadata(
-        "open_router", 163840, 163840, "DeepSeek R1 0528", "OpenRouter", "DeepSeek", 1
-    ),
-    LlmModel.PERPLEXITY_SONAR: ModelMetadata(
-        "open_router", 127000, 8000, "Sonar", "OpenRouter", "Perplexity", 1
-    ),
-    LlmModel.PERPLEXITY_SONAR_PRO: ModelMetadata(
-        "open_router", 200000, 8000, "Sonar Pro", "OpenRouter", "Perplexity", 2
+        "open_router", 1048576, 65535
     ),
+    LlmModel.GEMINI_2_0_FLASH_LITE: ModelMetadata("open_router", 1048576, 8192),
+    LlmModel.MISTRAL_NEMO: ModelMetadata("open_router", 128000, 4096),
+    LlmModel.COHERE_COMMAND_R_08_2024: ModelMetadata("open_router", 128000, 4096),
+    LlmModel.COHERE_COMMAND_R_PLUS_08_2024: ModelMetadata("open_router", 128000, 4096),
+    LlmModel.DEEPSEEK_CHAT: ModelMetadata("open_router", 64000, 2048),
+    LlmModel.DEEPSEEK_R1_0528: ModelMetadata("open_router", 163840, 163840),
+    LlmModel.PERPLEXITY_SONAR: ModelMetadata("open_router", 127000, 8000),
+    LlmModel.PERPLEXITY_SONAR_PRO: ModelMetadata("open_router", 200000, 8000),
     LlmModel.PERPLEXITY_SONAR_DEEP_RESEARCH: ModelMetadata(
         "open_router",
         128000,
         16000,
-        "Sonar Deep Research",
-        "OpenRouter",
-        "Perplexity",
-        3,
     ),
     LlmModel.NOUSRESEARCH_HERMES_3_LLAMA_3_1_405B: ModelMetadata(
-        "open_router",
-        131000,
-        4096,
-        "Hermes 3 Llama 3.1 405B",
-        "OpenRouter",
-        "Nous Research",
-        1,
+        "open_router", 131000, 4096
     ),
     LlmModel.NOUSRESEARCH_HERMES_3_LLAMA_3_1_70B: ModelMetadata(
-        "open_router",
-        12288,
-        12288,
-        "Hermes 3 Llama 3.1 70B",
-        "OpenRouter",
-        "Nous Research",
-        1,
-    ),
-    LlmModel.OPENAI_GPT_OSS_120B: ModelMetadata(
-        "open_router", 131072, 131072, "GPT-OSS 120B", "OpenRouter", "OpenAI", 1
-    ),
-    LlmModel.OPENAI_GPT_OSS_20B: ModelMetadata(
-        "open_router", 131072, 32768, "GPT-OSS 20B", "OpenRouter", "OpenAI", 1
-    ),
-    LlmModel.AMAZON_NOVA_LITE_V1: ModelMetadata(
-        "open_router", 300000, 5120, "Nova Lite V1", "OpenRouter", "Amazon", 1
-    ),
-    LlmModel.AMAZON_NOVA_MICRO_V1: ModelMetadata(
-        "open_router", 128000, 5120, "Nova Micro V1", "OpenRouter", "Amazon", 1
-    ),
-    LlmModel.AMAZON_NOVA_PRO_V1: ModelMetadata(
-        "open_router", 300000, 5120, "Nova Pro V1", "OpenRouter", "Amazon", 1
-    ),
-    LlmModel.MICROSOFT_WIZARDLM_2_8X22B: ModelMetadata(
-        "open_router", 65536, 4096, "WizardLM 2 8x22B", "OpenRouter", "Microsoft", 1
-    ),
-    LlmModel.GRYPHE_MYTHOMAX_L2_13B: ModelMetadata(
-        "open_router", 4096, 4096, "MythoMax L2 13B", "OpenRouter", "Gryphe", 1
-    ),
-    LlmModel.META_LLAMA_4_SCOUT: ModelMetadata(
-        "open_router", 131072, 131072, "Llama 4 Scout", "OpenRouter", "Meta", 1
-    ),
-    LlmModel.META_LLAMA_4_MAVERICK: ModelMetadata(
-        "open_router", 1048576, 1000000, "Llama 4 Maverick", "OpenRouter", "Meta", 1
-    ),
-    LlmModel.GROK_4: ModelMetadata(
-        "open_router", 256000, 256000, "Grok 4", "OpenRouter", "xAI", 3
-    ),
-    LlmModel.GROK_4_FAST: ModelMetadata(
-        "open_router", 2000000, 30000, "Grok 4 Fast", "OpenRouter", "xAI", 1
-    ),
-    LlmModel.GROK_4_1_FAST: ModelMetadata(
-        "open_router", 2000000, 30000, "Grok 4.1 Fast", "OpenRouter", "xAI", 1
-    ),
-    LlmModel.GROK_CODE_FAST_1: ModelMetadata(
-        "open_router", 256000, 10000, "Grok Code Fast 1", "OpenRouter", "xAI", 1
-    ),
-    LlmModel.KIMI_K2: ModelMetadata(
-        "open_router", 131000, 131000, "Kimi K2", "OpenRouter", "Moonshot AI", 1
-    ),
-    LlmModel.QWEN3_235B_A22B_THINKING: ModelMetadata(
-        "open_router",
-        262144,
-        262144,
-        "Qwen 3 235B A22B Thinking 2507",
-        "OpenRouter",
-        "Qwen",
-        1,
-    ),
-    LlmModel.QWEN3_CODER: ModelMetadata(
-        "open_router", 262144, 262144, "Qwen 3 Coder", "OpenRouter", "Qwen", 3
+        "open_router", 12288, 12288
     ),
+    LlmModel.OPENAI_GPT_OSS_120B: ModelMetadata("open_router", 131072, 131072),
+    LlmModel.OPENAI_GPT_OSS_20B: ModelMetadata("open_router", 131072, 32768),
+    LlmModel.AMAZON_NOVA_LITE_V1: ModelMetadata("open_router", 300000, 5120),
+    LlmModel.AMAZON_NOVA_MICRO_V1: ModelMetadata("open_router", 128000, 5120),
+    LlmModel.AMAZON_NOVA_PRO_V1: ModelMetadata("open_router", 300000, 5120),
+    LlmModel.MICROSOFT_WIZARDLM_2_8X22B: ModelMetadata("open_router", 65536, 4096),
+    LlmModel.GRYPHE_MYTHOMAX_L2_13B: ModelMetadata("open_router", 4096, 4096),
+    LlmModel.META_LLAMA_4_SCOUT: ModelMetadata("open_router", 131072, 131072),
+    LlmModel.META_LLAMA_4_MAVERICK: ModelMetadata("open_router", 1048576, 1000000),
+    LlmModel.GROK_4: ModelMetadata("open_router", 256000, 256000),
+    LlmModel.GROK_4_FAST: ModelMetadata("open_router", 2000000, 30000),
+    LlmModel.GROK_4_1_FAST: ModelMetadata("open_router", 2000000, 30000),
+    LlmModel.GROK_CODE_FAST_1: ModelMetadata("open_router", 256000, 10000),
+    LlmModel.KIMI_K2: ModelMetadata("open_router", 131000, 131000),
+    LlmModel.QWEN3_235B_A22B_THINKING: ModelMetadata("open_router", 262144, 262144),
+    LlmModel.QWEN3_CODER: ModelMetadata("open_router", 262144, 262144),
     # Llama API models
-    LlmModel.LLAMA_API_LLAMA_4_SCOUT: ModelMetadata(
-        "llama_api",
-        128000,
-        4028,
-        "Llama 4 Scout 17B 16E Instruct FP8",
-        "Llama API",
-        "Meta",
-        1,
-    ),
-    LlmModel.LLAMA_API_LLAMA4_MAVERICK: ModelMetadata(
-        "llama_api",
-        128000,
-        4028,
-        "Llama 4 Maverick 17B 128E Instruct FP8",
-        "Llama API",
-        "Meta",
-        1,
-    ),
-    LlmModel.LLAMA_API_LLAMA3_3_8B: ModelMetadata(
-        "llama_api", 128000, 4028, "Llama 3.3 8B Instruct", "Llama API", "Meta", 1
-    ),
-    LlmModel.LLAMA_API_LLAMA3_3_70B: ModelMetadata(
-        "llama_api", 128000, 4028, "Llama 3.3 70B Instruct", "Llama API", "Meta", 1
-    ),
+    LlmModel.LLAMA_API_LLAMA_4_SCOUT: ModelMetadata("llama_api", 128000, 4028),
+    LlmModel.LLAMA_API_LLAMA4_MAVERICK: ModelMetadata("llama_api", 128000, 4028),
+    LlmModel.LLAMA_API_LLAMA3_3_8B: ModelMetadata("llama_api", 128000, 4028),
+    LlmModel.LLAMA_API_LLAMA3_3_70B: ModelMetadata("llama_api", 128000, 4028),
     # v0 by Vercel models
-    LlmModel.V0_1_5_MD: ModelMetadata("v0", 128000, 64000, "v0 1.5 MD", "V0", "V0", 1),
-    LlmModel.V0_1_5_LG: ModelMetadata("v0", 512000, 64000, "v0 1.5 LG", "V0", "V0", 1),
-    LlmModel.V0_1_0_MD: ModelMetadata("v0", 128000, 64000, "v0 1.0 MD", "V0", "V0", 1),
+    LlmModel.V0_1_5_MD: ModelMetadata("v0", 128000, 64000),
+    LlmModel.V0_1_5_LG: ModelMetadata("v0", 512000, 64000),
+    LlmModel.V0_1_0_MD: ModelMetadata("v0", 128000, 64000),
 }
 
 DEFAULT_LLM_MODEL = LlmModel.GPT5_2

autogpt_platform/backend/backend/blocks/test/test_smart_decision_maker.py

@@ -242,7 +242,7 @@ async def test_smart_decision_maker_tracks_llm_stats():
         outputs = {}
         # Create execution context
 
-        mock_execution_context = ExecutionContext(human_in_the_loop_safe_mode=False)
+        mock_execution_context = ExecutionContext(safe_mode=False)
 
         # Create a mock execution processor for tests
 
@@ -343,7 +343,7 @@ async def test_smart_decision_maker_parameter_validation():
 
         # Create execution context
 
-        mock_execution_context = ExecutionContext(human_in_the_loop_safe_mode=False)
+        mock_execution_context = ExecutionContext(safe_mode=False)
 
         # Create a mock execution processor for tests
 
@@ -409,7 +409,7 @@ async def test_smart_decision_maker_parameter_validation():
 
         # Create execution context
 
-        mock_execution_context = ExecutionContext(human_in_the_loop_safe_mode=False)
+        mock_execution_context = ExecutionContext(safe_mode=False)
 
         # Create a mock execution processor for tests
 
@@ -471,7 +471,7 @@ async def test_smart_decision_maker_parameter_validation():
         outputs = {}
         # Create execution context
 
-        mock_execution_context = ExecutionContext(human_in_the_loop_safe_mode=False)
+        mock_execution_context = ExecutionContext(safe_mode=False)
 
         # Create a mock execution processor for tests
 
@@ -535,7 +535,7 @@ async def test_smart_decision_maker_parameter_validation():
         outputs = {}
         # Create execution context
 
-        mock_execution_context = ExecutionContext(human_in_the_loop_safe_mode=False)
+        mock_execution_context = ExecutionContext(safe_mode=False)
 
         # Create a mock execution processor for tests
 
@@ -658,7 +658,7 @@ async def test_smart_decision_maker_raw_response_conversion():
         outputs = {}
         # Create execution context
 
-        mock_execution_context = ExecutionContext(human_in_the_loop_safe_mode=False)
+        mock_execution_context = ExecutionContext(safe_mode=False)
 
         # Create a mock execution processor for tests
 
@@ -730,7 +730,7 @@ async def test_smart_decision_maker_raw_response_conversion():
         outputs = {}
         # Create execution context
 
-        mock_execution_context = ExecutionContext(human_in_the_loop_safe_mode=False)
+        mock_execution_context = ExecutionContext(safe_mode=False)
 
         # Create a mock execution processor for tests
 
@@ -786,7 +786,7 @@ async def test_smart_decision_maker_raw_response_conversion():
         outputs = {}
         # Create execution context
 
-        mock_execution_context = ExecutionContext(human_in_the_loop_safe_mode=False)
+        mock_execution_context = ExecutionContext(safe_mode=False)
 
         # Create a mock execution processor for tests
 
@@ -905,7 +905,7 @@ async def test_smart_decision_maker_agent_mode():
         # Create a mock execution context
 
         mock_execution_context = ExecutionContext(
-            human_in_the_loop_safe_mode=False,
+            safe_mode=False,
         )
 
         # Create a mock execution processor for agent mode tests
@@ -1027,7 +1027,7 @@ async def test_smart_decision_maker_traditional_mode_default():
 
         # Create execution context
 
-        mock_execution_context = ExecutionContext(human_in_the_loop_safe_mode=False)
+        mock_execution_context = ExecutionContext(safe_mode=False)
 
         # Create a mock execution processor for tests
 

autogpt_platform/backend/backend/blocks/test/test_smart_decision_maker_dynamic_fields.py

@@ -386,7 +386,7 @@ async def test_output_yielding_with_dynamic_fields():
             outputs = {}
             from backend.data.execution import ExecutionContext
 
-            mock_execution_context = ExecutionContext(human_in_the_loop_safe_mode=False)
+            mock_execution_context = ExecutionContext(safe_mode=False)
             mock_execution_processor = MagicMock()
 
             async for output_name, output_value in block.run(
@@ -609,9 +609,7 @@ async def test_validation_errors_dont_pollute_conversation():
                 outputs = {}
                 from backend.data.execution import ExecutionContext
 
-                mock_execution_context = ExecutionContext(
-                    human_in_the_loop_safe_mode=False
-                )
+                mock_execution_context = ExecutionContext(safe_mode=False)
 
                 # Create a proper mock execution processor for agent mode
                 from collections import defaultdict

autogpt_platform/backend/backend/data/block.py

@@ -474,7 +474,7 @@ class Block(ABC, Generic[BlockSchemaInputType, BlockSchemaOutputType]):
         self.block_type = block_type
         self.webhook_config = webhook_config
         self.execution_stats: NodeExecutionStats = NodeExecutionStats()
-        self.is_sensitive_action: bool = False
+        self.requires_human_review: bool = False
 
         if self.webhook_config:
             if isinstance(self.webhook_config, BlockWebhookConfig):
@@ -637,9 +637,8 @@ class Block(ABC, Generic[BlockSchemaInputType, BlockSchemaOutputType]):
             - should_pause: True if execution should be paused for review
             - input_data_to_use: The input data to use (may be modified by reviewer)
         """
-        if not (
-            self.is_sensitive_action and execution_context.sensitive_action_safe_mode
-        ):
+        # Skip review if not required or safe mode is disabled
+        if not self.requires_human_review or not execution_context.safe_mode:
             return False, input_data
 
         from backend.blocks.helpers.review import HITLReviewHelper

autogpt_platform/backend/backend/data/block_cost_config.py

@@ -99,15 +99,10 @@ MODEL_COST: dict[LlmModel, int] = {
     LlmModel.OPENAI_GPT_OSS_20B: 1,
     LlmModel.GEMINI_2_5_PRO: 4,
     LlmModel.GEMINI_3_PRO_PREVIEW: 5,
-    LlmModel.GEMINI_2_5_FLASH: 1,
-    LlmModel.GEMINI_2_0_FLASH: 1,
-    LlmModel.GEMINI_2_5_FLASH_LITE_PREVIEW: 1,
-    LlmModel.GEMINI_2_0_FLASH_LITE: 1,
     LlmModel.MISTRAL_NEMO: 1,
     LlmModel.COHERE_COMMAND_R_08_2024: 1,
     LlmModel.COHERE_COMMAND_R_PLUS_08_2024: 3,
     LlmModel.DEEPSEEK_CHAT: 2,
-    LlmModel.DEEPSEEK_R1_0528: 1,
     LlmModel.PERPLEXITY_SONAR: 1,
     LlmModel.PERPLEXITY_SONAR_PRO: 5,
     LlmModel.PERPLEXITY_SONAR_DEEP_RESEARCH: 10,
@@ -131,6 +126,11 @@ MODEL_COST: dict[LlmModel, int] = {
     LlmModel.KIMI_K2: 1,
     LlmModel.QWEN3_235B_A22B_THINKING: 1,
     LlmModel.QWEN3_CODER: 9,
+    LlmModel.GEMINI_2_5_FLASH: 1,
+    LlmModel.GEMINI_2_0_FLASH: 1,
+    LlmModel.GEMINI_2_5_FLASH_LITE_PREVIEW: 1,
+    LlmModel.GEMINI_2_0_FLASH_LITE: 1,
+    LlmModel.DEEPSEEK_R1_0528: 1,
     # v0 by Vercel models
     LlmModel.V0_1_5_MD: 1,
     LlmModel.V0_1_5_LG: 2,

autogpt_platform/backend/backend/data/db.py

@@ -38,6 +38,20 @@ POOL_TIMEOUT = os.getenv("DB_POOL_TIMEOUT")
 if POOL_TIMEOUT:
     DATABASE_URL = add_param(DATABASE_URL, "pool_timeout", POOL_TIMEOUT)
 
+# Add public schema to search_path for pgvector type access
+# The vector extension is in public schema, but search_path is determined by schema parameter
+# Extract the schema from DATABASE_URL or default to 'public' (matching get_database_schema())
+parsed_url = urlparse(DATABASE_URL)
+url_params = dict(parse_qsl(parsed_url.query))
+db_schema = url_params.get("schema", "public")
+# Build search_path, avoiding duplicates if db_schema is already 'public'
+search_path_schemas = list(
+    dict.fromkeys([db_schema, "public"])
+)  # Preserves order, removes duplicates
+search_path = ",".join(search_path_schemas)
+# This allows using ::vector without schema qualification
+DATABASE_URL = add_param(DATABASE_URL, "options", f"-c search_path={search_path}")
+
 HTTP_TIMEOUT = int(POOL_TIMEOUT) if POOL_TIMEOUT else None
 
 prisma = Prisma(
@@ -113,48 +127,38 @@ async def _raw_with_schema(
     *args,
     execute: bool = False,
     client: Prisma | None = None,
+    set_public_search_path: bool = False,
 ) -> list[dict] | int:
     """Internal: Execute raw SQL with proper schema handling.
 
     Use query_raw_with_schema() or execute_raw_with_schema() instead.
 
-    Supports placeholders:
-        - {schema_prefix}: Table/type prefix (e.g., "platform".)
-        - {schema}: Raw schema name for application tables (e.g., platform)
-        - {pgvector_schema}: Schema where pgvector is installed (defaults to "public")
-
     Args:
-        query_template: SQL query with {schema_prefix}, {schema}, and/or {pgvector_schema} placeholders
+        query_template: SQL query with {schema_prefix} placeholder
         *args: Query parameters
         execute: If False, executes SELECT query. If True, executes INSERT/UPDATE/DELETE.
         client: Optional Prisma client for transactions (only used when execute=True).
+        set_public_search_path: If True, sets search_path to include public schema.
+                                Needed for pgvector types and other public schema objects.
 
     Returns:
         - list[dict] if execute=False (query results)
         - int if execute=True (number of affected rows)
-
-    Example with vector type:
-        await execute_raw_with_schema(
-            'INSERT INTO {schema_prefix}"Embedding" (vec) VALUES ($1::{pgvector_schema}.vector)',
-            embedding_data
-        )
     """
     schema = get_database_schema()
     schema_prefix = f'"{schema}".' if schema != "public" else ""
-    # pgvector extension is typically installed in "public" schema
-    # On Supabase it may be in "extensions" but "public" is the common default
-    pgvector_schema = "public"
-
-    formatted_query = query_template.format(
-        schema_prefix=schema_prefix,
-        schema=schema,
-        pgvector_schema=pgvector_schema,
-    )
+    formatted_query = query_template.format(schema_prefix=schema_prefix)
 
     import prisma as prisma_module
 
     db_client = client if client else prisma_module.get_client()
 
+    # Set search_path to include public schema if requested
+    # Prisma doesn't support the 'options' connection parameter, so we set it per-session
+    # This is idempotent and safe to call multiple times
+    if set_public_search_path:
+        await db_client.execute_raw(f"SET search_path = {schema}, public")  # type: ignore
+
     if execute:
         result = await db_client.execute_raw(formatted_query, *args)  # type: ignore
     else:
@@ -163,12 +167,16 @@ async def _raw_with_schema(
     return result
 
 
-async def query_raw_with_schema(query_template: str, *args) -> list[dict]:
+async def query_raw_with_schema(
+    query_template: str, *args, set_public_search_path: bool = False
+) -> list[dict]:
     """Execute raw SQL SELECT query with proper schema handling.
 
     Args:
-        query_template: SQL query with {schema_prefix} and/or {schema} placeholders
+        query_template: SQL query with {schema_prefix} placeholder
         *args: Query parameters
+        set_public_search_path: If True, sets search_path to include public schema.
+                                Needed for pgvector types and other public schema objects.
 
     Returns:
         List of result rows as dictionaries
@@ -179,20 +187,23 @@ async def query_raw_with_schema(query_template: str, *args) -> list[dict]:
             user_id
         )
     """
-    return await _raw_with_schema(query_template, *args, execute=False)  # type: ignore
+    return await _raw_with_schema(query_template, *args, execute=False, set_public_search_path=set_public_search_path)  # type: ignore
 
 
 async def execute_raw_with_schema(
     query_template: str,
     *args,
     client: Prisma | None = None,
+    set_public_search_path: bool = False,
 ) -> int:
     """Execute raw SQL command (INSERT/UPDATE/DELETE) with proper schema handling.
 
     Args:
-        query_template: SQL query with {schema_prefix} and/or {schema} placeholders
+        query_template: SQL query with {schema_prefix} placeholder
         *args: Query parameters
         client: Optional Prisma client for transactions
+        set_public_search_path: If True, sets search_path to include public schema.
+                                Needed for pgvector types and other public schema objects.
 
     Returns:
         Number of affected rows
@@ -204,7 +215,7 @@ async def execute_raw_with_schema(
             client=tx  # Optional transaction client
         )
     """
-    return await _raw_with_schema(query_template, *args, execute=True, client=client)  # type: ignore
+    return await _raw_with_schema(query_template, *args, execute=True, client=client, set_public_search_path=set_public_search_path)  # type: ignore
 
 
 class BaseDbModel(BaseModel):

autogpt_platform/backend/backend/data/execution.py

@@ -81,8 +81,7 @@ class ExecutionContext(BaseModel):
     This includes information needed by blocks, sub-graphs, and execution management.
     """
 
-    human_in_the_loop_safe_mode: bool = True
-    sensitive_action_safe_mode: bool = False
+    safe_mode: bool = True
     user_timezone: str = "UTC"
     root_execution_id: Optional[str] = None
     parent_execution_id: Optional[str] = None

autogpt_platform/backend/backend/data/graph.py

@@ -3,7 +3,7 @@ import logging
 import uuid
 from collections import defaultdict
 from datetime import datetime, timezone
-from typing import TYPE_CHECKING, Annotated, Any, Literal, Optional, cast
+from typing import TYPE_CHECKING, Any, Literal, Optional, cast
 
 from prisma.enums import SubmissionStatus
 from prisma.models import (
@@ -20,7 +20,7 @@ from prisma.types import (
     AgentNodeLinkCreateInput,
     StoreListingVersionWhereInput,
 )
-from pydantic import BaseModel, BeforeValidator, Field, create_model
+from pydantic import BaseModel, Field, create_model
 from pydantic.fields import computed_field
 
 from backend.blocks.agent import AgentExecutorBlock
@@ -62,29 +62,7 @@ logger = logging.getLogger(__name__)
 
 
 class GraphSettings(BaseModel):
-    # Use Annotated with BeforeValidator to coerce None to default values.
-    # This handles cases where the database has null values for these fields.
-    human_in_the_loop_safe_mode: Annotated[
-        bool, BeforeValidator(lambda v: v if v is not None else True)
-    ] = True
-    sensitive_action_safe_mode: Annotated[
-        bool, BeforeValidator(lambda v: v if v is not None else False)
-    ] = False
-
-    @classmethod
-    def from_graph(
-        cls,
-        graph: "GraphModel",
-        hitl_safe_mode: bool | None = None,
-        sensitive_action_safe_mode: bool = False,
-    ) -> "GraphSettings":
-        # Default to True if not explicitly set
-        if hitl_safe_mode is None:
-            hitl_safe_mode = True
-        return cls(
-            human_in_the_loop_safe_mode=hitl_safe_mode,
-            sensitive_action_safe_mode=sensitive_action_safe_mode,
-        )
+    human_in_the_loop_safe_mode: bool | None = None
 
 
 class Link(BaseDbModel):
@@ -266,14 +244,10 @@ class BaseGraph(BaseDbModel):
         return any(
             node.block_id
             for node in self.nodes
-            if node.block.block_type == BlockType.HUMAN_IN_THE_LOOP
-        )
-
-    @computed_field
-    @property
-    def has_sensitive_action(self) -> bool:
-        return any(
-            node.block_id for node in self.nodes if node.block.is_sensitive_action
+            if (
+                node.block.block_type == BlockType.HUMAN_IN_THE_LOOP
+                or node.block.requires_human_review
+            )
         )
 
     @property

autogpt_platform/backend/backend/executor/scheduler.py

@@ -309,7 +309,7 @@ def ensure_embeddings_coverage():
 
         # Process in batches until no more missing embeddings
         while True:
-            result = db_client.backfill_missing_embeddings(batch_size=100)
+            result = db_client.backfill_missing_embeddings(batch_size=10)
 
             total_processed += result["processed"]
             total_success += result["success"]

autogpt_platform/backend/backend/executor/utils.py

@@ -873,8 +873,11 @@ async def add_graph_execution(
         settings = await gdb.get_graph_settings(user_id=user_id, graph_id=graph_id)
 
         execution_context = ExecutionContext(
-            human_in_the_loop_safe_mode=settings.human_in_the_loop_safe_mode,
-            sensitive_action_safe_mode=settings.sensitive_action_safe_mode,
+            safe_mode=(
+                settings.human_in_the_loop_safe_mode
+                if settings.human_in_the_loop_safe_mode is not None
+                else True
+            ),
             user_timezone=(
                 user.timezone if user.timezone != USER_TIMEZONE_NOT_SET else "UTC"
             ),

autogpt_platform/backend/backend/executor/utils_test.py

@@ -386,7 +386,6 @@ async def test_add_graph_execution_is_repeatable(mocker: MockerFixture):
     mock_user.timezone = "UTC"
     mock_settings = mocker.MagicMock()
     mock_settings.human_in_the_loop_safe_mode = True
-    mock_settings.sensitive_action_safe_mode = False
 
     mock_udb.get_user_by_id = mocker.AsyncMock(return_value=mock_user)
     mock_gdb.get_graph_settings = mocker.AsyncMock(return_value=mock_settings)
@@ -652,7 +651,6 @@ async def test_add_graph_execution_with_nodes_to_skip(mocker: MockerFixture):
     mock_user.timezone = "UTC"
     mock_settings = mocker.MagicMock()
     mock_settings.human_in_the_loop_safe_mode = True
-    mock_settings.sensitive_action_safe_mode = False
 
     mock_udb.get_user_by_id = mocker.AsyncMock(return_value=mock_user)
     mock_gdb.get_graph_settings = mocker.AsyncMock(return_value=mock_settings)

autogpt_platform/backend/snapshots/grph_single

@@ -11,7 +11,6 @@
   "forked_from_version": null,
   "has_external_trigger": false,
   "has_human_in_the_loop": false,
-  "has_sensitive_action": false,
   "id": "graph-123",
   "input_schema": {
     "properties": {},

autogpt_platform/backend/snapshots/grphs_all

@@ -11,7 +11,6 @@
     "forked_from_version": null,
     "has_external_trigger": false,
     "has_human_in_the_loop": false,
-    "has_sensitive_action": false,
     "id": "graph-123",
     "input_schema": {
       "properties": {},

autogpt_platform/backend/snapshots/lib_agts_search

@@ -27,8 +27,6 @@
         "properties": {}
       },
       "has_external_trigger": false,
-      "has_human_in_the_loop": false,
-      "has_sensitive_action": false,
       "trigger_setup_info": null,
       "new_output": false,
       "can_access_graph": true,
@@ -36,8 +34,7 @@
       "is_favorite": false,
       "recommended_schedule_cron": null,
       "settings": {
-        "human_in_the_loop_safe_mode": true,
-        "sensitive_action_safe_mode": false
+        "human_in_the_loop_safe_mode": null
       },
       "marketplace_listing": null
     },
@@ -68,8 +65,6 @@
         "properties": {}
       },
       "has_external_trigger": false,
-      "has_human_in_the_loop": false,
-      "has_sensitive_action": false,
       "trigger_setup_info": null,
       "new_output": false,
       "can_access_graph": false,
@@ -77,8 +72,7 @@
       "is_favorite": false,
       "recommended_schedule_cron": null,
       "settings": {
-        "human_in_the_loop_safe_mode": true,
-        "sensitive_action_safe_mode": false
+        "human_in_the_loop_safe_mode": null
       },
       "marketplace_listing": null
     }

autogpt_platform/frontend/.env.default

@@ -29,4 +29,4 @@ NEXT_PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY=
 NEXT_PUBLIC_TURNSTILE=disabled
 
 # PR previews
-NEXT_PUBLIC_PREVIEW_STEALING_DEV=
+NEXT_PUBLIC_PREVIEW_STEALING_DEV=

autogpt_platform/frontend/orval.config.ts

@@ -16,12 +16,6 @@ export default defineConfig({
       client: "react-query",
       httpClient: "fetch",
       indexFiles: false,
-      mock: {
-        type: "msw",
-        baseUrl: "http://localhost:3000/api/proxy",
-        generateEachHttpStatus: true,
-        delay: 0,
-      },
       override: {
         mutator: {
           path: "./mutators/custom-mutator.ts",

autogpt_platform/frontend/package.json

@@ -15,8 +15,6 @@
     "types": "tsc --noEmit",
     "test": "NEXT_PUBLIC_PW_TEST=true next build --turbo && playwright test",
     "test-ui": "NEXT_PUBLIC_PW_TEST=true next build --turbo && playwright test --ui",
-    "test:unit": "vitest run",
-    "test:unit:watch": "vitest",
     "test:no-build": "playwright test",
     "gentests": "playwright codegen http://localhost:3000",
     "storybook": "storybook dev -p 6006",
@@ -120,7 +118,6 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "4.1.2",
-    "happy-dom": "20.3.4",
     "@opentelemetry/instrumentation": "0.209.0",
     "@playwright/test": "1.56.1",
     "@storybook/addon-a11y": "9.1.5",
@@ -130,8 +127,6 @@
     "@storybook/nextjs": "9.1.5",
     "@tanstack/eslint-plugin-query": "5.91.2",
     "@tanstack/react-query-devtools": "5.90.2",
-    "@testing-library/dom": "10.4.1",
-    "@testing-library/react": "16.3.2",
     "@types/canvas-confetti": "1.9.0",
     "@types/lodash": "4.17.20",
     "@types/negotiator": "0.6.4",
@@ -140,7 +135,6 @@
     "@types/react-dom": "18.3.5",
     "@types/react-modal": "3.16.3",
     "@types/react-window": "1.8.8",
-    "@vitejs/plugin-react": "5.1.2",
     "axe-playwright": "2.2.2",
     "chromatic": "13.3.3",
     "concurrently": "9.2.1",
@@ -159,9 +153,7 @@
     "require-in-the-middle": "8.0.1",
     "storybook": "9.1.5",
     "tailwindcss": "3.4.17",
-    "typescript": "5.9.3",
-    "vite-tsconfig-paths": "6.0.4",
-    "vitest": "4.0.17"
+    "typescript": "5.9.3"
   },
   "msw": {
     "workerDirectory": [

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/FloatingSafeModeToogle.tsx

@@ -18,118 +18,69 @@ interface Props {
   fullWidth?: boolean;
 }
 
-interface SafeModeButtonProps {
-  isEnabled: boolean;
-  label: string;
-  tooltipEnabled: string;
-  tooltipDisabled: string;
-  onToggle: () => void;
-  isPending: boolean;
-  fullWidth?: boolean;
-}
-
-function SafeModeButton({
-  isEnabled,
-  label,
-  tooltipEnabled,
-  tooltipDisabled,
-  onToggle,
-  isPending,
-  fullWidth = false,
-}: SafeModeButtonProps) {
-  return (
-    <Tooltip delayDuration={100}>
-      <TooltipTrigger asChild>
-        <Button
-          variant={isEnabled ? "primary" : "outline"}
-          size="small"
-          onClick={onToggle}
-          disabled={isPending}
-          className={cn("justify-start", fullWidth ? "w-full" : "")}
-        >
-          {isEnabled ? (
-            <>
-              <ShieldCheckIcon weight="bold" size={16} />
-              <Text variant="body" className="text-zinc-200">
-                {label}: ON
-              </Text>
-            </>
-          ) : (
-            <>
-              <ShieldIcon weight="bold" size={16} />
-              <Text variant="body" className="text-zinc-600">
-                {label}: OFF
-              </Text>
-            </>
-          )}
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent>
-        <div className="text-center">
-          <div className="font-medium">
-            {label}: {isEnabled ? "ON" : "OFF"}
-          </div>
-          <div className="mt-1 text-xs text-muted-foreground">
-            {isEnabled ? tooltipEnabled : tooltipDisabled}
-          </div>
-        </div>
-      </TooltipContent>
-    </Tooltip>
-  );
-}
-
 export function FloatingSafeModeToggle({
   graph,
   className,
   fullWidth = false,
 }: Props) {
   const {
-    currentHITLSafeMode,
-    showHITLToggle,
-    isHITLStateUndetermined,
-    handleHITLToggle,
-    currentSensitiveActionSafeMode,
-    showSensitiveActionToggle,
-    handleSensitiveActionToggle,
+    currentSafeMode,
     isPending,
     shouldShowToggle,
+    isStateUndetermined,
+    handleToggle,
   } = useAgentSafeMode(graph);
 
-  if (!shouldShowToggle || isPending) {
-    return null;
-  }
-
-  const showHITL = showHITLToggle && !isHITLStateUndetermined;
-  const showSensitive = showSensitiveActionToggle;
-
-  if (!showHITL && !showSensitive) {
+  if (!shouldShowToggle || isStateUndetermined || isPending) {
     return null;
   }
 
   return (
-    <div className={cn("fixed z-50 flex flex-col gap-2", className)}>
-      {showHITL && (
-        <SafeModeButton
-          isEnabled={currentHITLSafeMode}
-          label="Human in the loop block approval"
-          tooltipEnabled="The agent will pause at human-in-the-loop blocks and wait for your approval"
-          tooltipDisabled="Human in the loop blocks will proceed automatically"
-          onToggle={handleHITLToggle}
-          isPending={isPending}
-          fullWidth={fullWidth}
-        />
-      )}
-      {showSensitive && (
-        <SafeModeButton
-          isEnabled={currentSensitiveActionSafeMode}
-          label="Sensitive actions blocks approval"
-          tooltipEnabled="The agent will pause at sensitive action blocks and wait for your approval"
-          tooltipDisabled="Sensitive action blocks will proceed automatically"
-          onToggle={handleSensitiveActionToggle}
-          isPending={isPending}
-          fullWidth={fullWidth}
-        />
-      )}
+    <div className={cn("fixed z-50", className)}>
+      <Tooltip delayDuration={100}>
+        <TooltipTrigger asChild>
+          <Button
+            variant={currentSafeMode! ? "primary" : "outline"}
+            key={graph.id}
+            size="small"
+            title={
+              currentSafeMode!
+                ? "Safe Mode: ON. Human in the loop blocks require manual review"
+                : "Safe Mode: OFF. Human in the loop blocks proceed automatically"
+            }
+            onClick={handleToggle}
+            className={cn(fullWidth ? "w-full" : "")}
+          >
+            {currentSafeMode! ? (
+              <>
+                <ShieldCheckIcon weight="bold" size={16} />
+                <Text variant="body" className="text-zinc-200">
+                  Safe Mode: ON
+                </Text>
+              </>
+            ) : (
+              <>
+                <ShieldIcon weight="bold" size={16} />
+                <Text variant="body" className="text-zinc-600">
+                  Safe Mode: OFF
+                </Text>
+              </>
+            )}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <div className="text-center">
+            <div className="font-medium">
+              Safe Mode: {currentSafeMode! ? "ON" : "OFF"}
+            </div>
+            <div className="mt-1 text-xs text-muted-foreground">
+              {currentSafeMode!
+                ? "Human in the loop blocks require manual review"
+                : "Human in the loop blocks proceed automatically"}
+            </div>
+          </div>
+        </TooltipContent>
+      </Tooltip>
     </div>
   );
 }

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/agents/[id]/components/NewAgentLibraryView/components/modals/AgentSettingsModal/AgentSettingsModal.tsx

@@ -31,18 +31,10 @@ export function AgentSettingsModal({
     }
   }
 
-  const {
-    currentHITLSafeMode,
-    showHITLToggle,
-    handleHITLToggle,
-    currentSensitiveActionSafeMode,
-    showSensitiveActionToggle,
-    handleSensitiveActionToggle,
-    isPending,
-    shouldShowToggle,
-  } = useAgentSafeMode(agent);
+  const { currentSafeMode, isPending, hasHITLBlocks, handleToggle } =
+    useAgentSafeMode(agent);
 
-  if (!shouldShowToggle) return null;
+  if (!hasHITLBlocks) return null;
 
   return (
     <Dialog
@@ -65,48 +57,23 @@ export function AgentSettingsModal({
       )}
       <Dialog.Content>
         <div className="space-y-6">
-          {showHITLToggle && (
-            <div className="flex w-full flex-col items-start gap-4 rounded-xl border border-zinc-100 bg-white p-6">
-              <div className="flex w-full items-start justify-between gap-4">
-                <div className="flex-1">
-                  <Text variant="large-semibold">
-                    Human-in-the-loop approval
-                  </Text>
-                  <Text variant="large" className="mt-1 text-zinc-900">
-                    The agent will pause at human-in-the-loop blocks and wait
-                    for your review before continuing
-                  </Text>
-                </div>
-                <Switch
-                  checked={currentHITLSafeMode || false}
-                  onCheckedChange={handleHITLToggle}
-                  disabled={isPending}
-                  className="mt-1"
-                />
+          <div className="flex w-full flex-col items-start gap-4 rounded-xl border border-zinc-100 bg-white p-6">
+            <div className="flex w-full items-start justify-between gap-4">
+              <div className="flex-1">
+                <Text variant="large-semibold">Require human approval</Text>
+                <Text variant="large" className="mt-1 text-zinc-900">
+                  The agent will pause and wait for your review before
+                  continuing
+                </Text>
               </div>
+              <Switch
+                checked={currentSafeMode || false}
+                onCheckedChange={handleToggle}
+                disabled={isPending}
+                className="mt-1"
+              />
             </div>
-          )}
-          {showSensitiveActionToggle && (
-            <div className="flex w-full flex-col items-start gap-4 rounded-xl border border-zinc-100 bg-white p-6">
-              <div className="flex w-full items-start justify-between gap-4">
-                <div className="flex-1">
-                  <Text variant="large-semibold">
-                    Sensitive action approval
-                  </Text>
-                  <Text variant="large" className="mt-1 text-zinc-900">
-                    The agent will pause at sensitive action blocks and wait for
-                    your review before continuing
-                  </Text>
-                </div>
-                <Switch
-                  checked={currentSensitiveActionSafeMode}
-                  onCheckedChange={handleSensitiveActionToggle}
-                  disabled={isPending}
-                  className="mt-1"
-                />
-              </div>
-            </div>
-          )}
+          </div>
         </div>
       </Dialog.Content>
     </Dialog>

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

@@ -5,112 +5,48 @@ import { Graph } from "@/lib/autogpt-server-api/types";
 import { cn } from "@/lib/utils";
 import { ShieldCheckIcon, ShieldIcon } from "@phosphor-icons/react";
 import { useAgentSafeMode } from "@/hooks/useAgentSafeMode";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/atoms/Tooltip/BaseTooltip";
 
 interface Props {
   graph: GraphModel | LibraryAgent | Graph;
   className?: string;
+  fullWidth?: boolean;
 }
 
-interface SafeModeIconButtonProps {
-  isEnabled: boolean;
-  label: string;
-  tooltipEnabled: string;
-  tooltipDisabled: string;
-  onToggle: () => void;
-  isPending: boolean;
-}
-
-function SafeModeIconButton({
-  isEnabled,
-  label,
-  tooltipEnabled,
-  tooltipDisabled,
-  onToggle,
-  isPending,
-}: SafeModeIconButtonProps) {
-  return (
-    <Tooltip delayDuration={100}>
-      <TooltipTrigger asChild>
-        <Button
-          variant="icon"
-          size="icon"
-          aria-label={`${label}: ${isEnabled ? "ON" : "OFF"}. ${isEnabled ? tooltipEnabled : tooltipDisabled}`}
-          onClick={onToggle}
-          disabled={isPending}
-          className={cn(isPending ? "opacity-0" : "opacity-100")}
-        >
-          {isEnabled ? (
-            <ShieldCheckIcon weight="bold" size={16} />
-          ) : (
-            <ShieldIcon weight="bold" size={16} />
-          )}
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent>
-        <div className="text-center">
-          <div className="font-medium">
-            {label}: {isEnabled ? "ON" : "OFF"}
-          </div>
-          <div className="mt-1 text-xs text-muted-foreground">
-            {isEnabled ? tooltipEnabled : tooltipDisabled}
-          </div>
-        </div>
-      </TooltipContent>
-    </Tooltip>
-  );
-}
-
-export function SafeModeToggle({ graph, className }: Props) {
+export function SafeModeToggle({ graph }: Props) {
   const {
-    currentHITLSafeMode,
-    showHITLToggle,
-    isHITLStateUndetermined,
-    handleHITLToggle,
-    currentSensitiveActionSafeMode,
-    showSensitiveActionToggle,
-    handleSensitiveActionToggle,
+    currentSafeMode,
     isPending,
     shouldShowToggle,
+    isStateUndetermined,
+    handleToggle,
   } = useAgentSafeMode(graph);
 
-  if (!shouldShowToggle || isHITLStateUndetermined) {
-    return null;
-  }
-
-  const showHITL = showHITLToggle && !isHITLStateUndetermined;
-  const showSensitive = showSensitiveActionToggle;
-
-  if (!showHITL && !showSensitive) {
+  if (!shouldShowToggle || isStateUndetermined) {
     return null;
   }
 
   return (
-    <div className={cn("flex gap-1", className)}>
-      {showHITL && (
-        <SafeModeIconButton
-          isEnabled={currentHITLSafeMode}
-          label="Human-in-the-loop"
-          tooltipEnabled="The agent will pause at human-in-the-loop blocks and wait for your approval"
-          tooltipDisabled="Human-in-the-loop blocks will proceed automatically"
-          onToggle={handleHITLToggle}
-          isPending={isPending}
-        />
+    <Button
+      variant="icon"
+      key={graph.id}
+      size="icon"
+      aria-label={
+        currentSafeMode!
+          ? "Safe Mode: ON. Human in the loop blocks require manual review"
+          : "Safe Mode: OFF. Human in the loop blocks proceed automatically"
+      }
+      onClick={handleToggle}
+      className={cn(isPending ? "opacity-0" : "opacity-100")}
+    >
+      {currentSafeMode! ? (
+        <>
+          <ShieldCheckIcon weight="bold" size={16} />
+        </>
+      ) : (
+        <>
+          <ShieldIcon weight="bold" size={16} />
+        </>
       )}
-      {showSensitive && (
-        <SafeModeIconButton
-          isEnabled={currentSensitiveActionSafeMode}
-          label="Sensitive actions"
-          tooltipEnabled="The agent will pause at sensitive action blocks and wait for your approval"
-          tooltipDisabled="Sensitive action blocks will proceed automatically"
-          onToggle={handleSensitiveActionToggle}
-          isPending={isPending}
-        />
-      )}
-    </div>
+    </Button>
   );
 }

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

@@ -13,16 +13,8 @@ interface Props {
 }
 
 export function SelectedSettingsView({ agent, onClearSelectedRun }: Props) {
-  const {
-    currentHITLSafeMode,
-    showHITLToggle,
-    handleHITLToggle,
-    currentSensitiveActionSafeMode,
-    showSensitiveActionToggle,
-    handleSensitiveActionToggle,
-    isPending,
-    shouldShowToggle,
-  } = useAgentSafeMode(agent);
+  const { currentSafeMode, isPending, hasHITLBlocks, handleToggle } =
+    useAgentSafeMode(agent);
 
   return (
     <SelectedViewLayout agent={agent}>
@@ -42,51 +34,24 @@ export function SelectedSettingsView({ agent, onClearSelectedRun }: Props) {
         </div>
 
         <div className={`${AGENT_LIBRARY_SECTION_PADDING_X} space-y-6`}>
-          {shouldShowToggle ? (
-            <>
-              {showHITLToggle && (
-                <div className="flex w-full max-w-2xl flex-col items-start gap-4 rounded-xl border border-zinc-100 bg-white p-6">
-                  <div className="flex w-full items-start justify-between gap-4">
-                    <div className="flex-1">
-                      <Text variant="large-semibold">
-                        Human-in-the-loop approval
-                      </Text>
-                      <Text variant="large" className="mt-1 text-zinc-900">
-                        The agent will pause at human-in-the-loop blocks and
-                        wait for your review before continuing
-                      </Text>
-                    </div>
-                    <Switch
-                      checked={currentHITLSafeMode || false}
-                      onCheckedChange={handleHITLToggle}
-                      disabled={isPending}
-                      className="mt-1"
-                    />
-                  </div>
+          {hasHITLBlocks ? (
+            <div className="flex w-full max-w-2xl flex-col items-start gap-4 rounded-xl border border-zinc-100 bg-white p-6">
+              <div className="flex w-full items-start justify-between gap-4">
+                <div className="flex-1">
+                  <Text variant="large-semibold">Require human approval</Text>
+                  <Text variant="large" className="mt-1 text-zinc-900">
+                    The agent will pause and wait for your review before
+                    continuing
+                  </Text>
                 </div>
-              )}
-              {showSensitiveActionToggle && (
-                <div className="flex w-full max-w-2xl flex-col items-start gap-4 rounded-xl border border-zinc-100 bg-white p-6">
-                  <div className="flex w-full items-start justify-between gap-4">
-                    <div className="flex-1">
-                      <Text variant="large-semibold">
-                        Sensitive action approval
-                      </Text>
-                      <Text variant="large" className="mt-1 text-zinc-900">
-                        The agent will pause at sensitive action blocks and wait
-                        for your review before continuing
-                      </Text>
-                    </div>
-                    <Switch
-                      checked={currentSensitiveActionSafeMode}
-                      onCheckedChange={handleSensitiveActionToggle}
-                      disabled={isPending}
-                      className="mt-1"
-                    />
-                  </div>
-                </div>
-              )}
-            </>
+                <Switch
+                  checked={currentSafeMode || false}
+                  onCheckedChange={handleToggle}
+                  disabled={isPending}
+                  className="mt-1"
+                />
+              </div>
+            </div>
           ) : (
             <div className="rounded-xl border border-zinc-100 bg-white p-6">
               <Text variant="body" className="text-muted-foreground">

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-draft-view.tsx

@@ -1,15 +1,8 @@
 "use client";
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 
 import {
   CredentialsMetaInput,
-  CredentialsType,
   GraphExecutionID,
   GraphMeta,
   LibraryAgentPreset,
@@ -36,11 +29,7 @@ import {
 } from "@/components/__legacy__/ui/icons";
 import { Input } from "@/components/__legacy__/ui/input";
 import { Button } from "@/components/atoms/Button/Button";
-import { CredentialsGroupedView } from "@/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView";
-import {
-  findSavedCredentialByProviderAndType,
-  findSavedUserCredentialByProviderAndType,
-} from "@/components/contextual/CredentialsInput/components/CredentialsGroupedView/helpers";
+import { CredentialsInput } from "@/components/contextual/CredentialsInput/CredentialsInput";
 import { InformationTooltip } from "@/components/molecules/InformationTooltip/InformationTooltip";
 import {
   useToast,
@@ -48,7 +37,6 @@ import {
 } from "@/components/molecules/Toast/use-toast";
 import { humanizeCronExpression } from "@/lib/cron-expression-utils";
 import { cn, isEmpty } from "@/lib/utils";
-import { CredentialsProvidersContext } from "@/providers/agent-credentials/credentials-provider";
 import { ClockIcon, CopyIcon, InfoIcon } from "@phosphor-icons/react";
 import { CalendarClockIcon, Trash2Icon } from "lucide-react";
 
@@ -102,7 +90,6 @@ export function AgentRunDraftView({
   const api = useBackendAPI();
   const { toast } = useToast();
   const toastOnFail = useToastOnFail();
-  const allProviders = useContext(CredentialsProvidersContext);
 
   const [inputValues, setInputValues] = useState<Record<string, any>>({});
   const [inputCredentials, setInputCredentials] = useState<
@@ -141,77 +128,6 @@ export function AgentRunDraftView({
     () => graph.credentials_input_schema.properties,
     [graph],
   );
-  const credentialFields = useMemo(
-    function getCredentialFields() {
-      return Object.entries(agentCredentialsInputFields);
-    },
-    [agentCredentialsInputFields],
-  );
-  const requiredCredentials = useMemo(
-    function getRequiredCredentials() {
-      return new Set(
-        (graph.credentials_input_schema?.required as string[]) || [],
-      );
-    },
-    [graph.credentials_input_schema?.required],
-  );
-
-  useEffect(
-    function initializeDefaultCredentials() {
-      if (!allProviders) return;
-      if (!graph.credentials_input_schema?.properties) return;
-      if (requiredCredentials.size === 0) return;
-
-      setInputCredentials(function updateCredentials(currentCreds) {
-        const next = { ...currentCreds };
-        let didAdd = false;
-
-        for (const key of requiredCredentials) {
-          if (next[key]) continue;
-          const schema = graph.credentials_input_schema.properties[key];
-          if (!schema) continue;
-
-          const providerNames = schema.credentials_provider || [];
-          const credentialTypes = schema.credentials_types || [];
-          const requiredScopes = schema.credentials_scopes;
-
-          const userCredential = findSavedUserCredentialByProviderAndType(
-            providerNames,
-            credentialTypes,
-            requiredScopes,
-            allProviders,
-          );
-
-          const savedCredential =
-            userCredential ||
-            findSavedCredentialByProviderAndType(
-              providerNames,
-              credentialTypes,
-              requiredScopes,
-              allProviders,
-            );
-
-          if (!savedCredential) continue;
-
-          next[key] = {
-            id: savedCredential.id,
-            provider: savedCredential.provider,
-            type: savedCredential.type as CredentialsType,
-            title: savedCredential.title,
-          };
-          didAdd = true;
-        }
-
-        if (!didAdd) return currentCreds;
-        return next;
-      });
-    },
-    [
-      allProviders,
-      graph.credentials_input_schema?.properties,
-      requiredCredentials,
-    ],
-  );
 
   const [allRequiredInputsAreSet, missingInputs] = useMemo(() => {
     const nonEmptyInputs = new Set(
@@ -229,35 +145,18 @@ export function AgentRunDraftView({
     );
     return [isSuperset, difference];
   }, [agentInputSchema.required, inputValues]);
-  const [allCredentialsAreSet, missingCredentials] = useMemo(
-    function getCredentialStatus() {
-      const missing = Array.from(requiredCredentials).filter((key) => {
-        const cred = inputCredentials[key];
-        return !cred || !cred.id;
-      });
-      return [missing.length === 0, missing];
-    },
-    [requiredCredentials, inputCredentials],
-  );
-  function addChangedCredentials(prev: Set<keyof LibraryAgentPresetUpdatable>) {
-    const next = new Set(prev);
-    next.add("credentials");
-    return next;
-  }
-
-  function handleCredentialChange(key: string, value?: CredentialsMetaInput) {
-    setInputCredentials(function updateInputCredentials(currentCreds) {
-      const next = { ...currentCreds };
-      if (value === undefined) {
-        delete next[key];
-        return next;
-      }
-      next[key] = value;
-      return next;
-    });
-    setChangedPresetAttributes(addChangedCredentials);
-  }
-
+  const [allCredentialsAreSet, missingCredentials] = useMemo(() => {
+    const availableCredentials = new Set(Object.keys(inputCredentials));
+    const allCredentials = new Set(Object.keys(agentCredentialsInputFields));
+    // Backwards-compatible implementation of isSupersetOf and difference
+    const isSuperset = Array.from(allCredentials).every((item) =>
+      availableCredentials.has(item),
+    );
+    const difference = Array.from(allCredentials).filter(
+      (item) => !availableCredentials.has(item),
+    );
+    return [isSuperset, difference];
+  }, [agentCredentialsInputFields, inputCredentials]);
   const notifyMissingInputs = useCallback(
     (needPresetName: boolean = true) => {
       const allMissingFields = (
@@ -750,6 +649,35 @@ export function AgentRunDraftView({
               </>
             )}
 
+            {/* Credentials inputs */}
+            {Object.entries(agentCredentialsInputFields).map(
+              ([key, inputSubSchema]) => (
+                <CredentialsInput
+                  key={key}
+                  schema={{ ...inputSubSchema, discriminator: undefined }}
+                  selectedCredentials={
+                    inputCredentials[key] ?? inputSubSchema.default
+                  }
+                  onSelectCredentials={(value) => {
+                    setInputCredentials((obj) => {
+                      const newObj = { ...obj };
+                      if (value === undefined) {
+                        delete newObj[key];
+                        return newObj;
+                      }
+                      return {
+                        ...obj,
+                        [key]: value,
+                      };
+                    });
+                    setChangedPresetAttributes((prev) =>
+                      prev.add("credentials"),
+                    );
+                  }}
+                />
+              ),
+            )}
+
             {/* Regular inputs */}
             {Object.entries(agentInputFields).map(([key, inputSubSchema]) => (
               <RunAgentInputs
@@ -767,17 +695,6 @@ export function AgentRunDraftView({
                 data-testid={`agent-input-${key}`}
               />
             ))}
-
-            {/* Credentials inputs */}
-            {credentialFields.length > 0 && (
-              <CredentialsGroupedView
-                credentialFields={credentialFields}
-                requiredCredentials={requiredCredentials}
-                inputCredentials={inputCredentials}
-                inputValues={inputValues}
-                onCredentialChange={handleCredentialChange}
-              />
-            )}
           </CardContent>
         </Card>
       </div>

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/app/api/openapi.json

@@ -6383,11 +6383,6 @@
             "title": "Has Human In The Loop",
             "readOnly": true
           },
-          "has_sensitive_action": {
-            "type": "boolean",
-            "title": "Has Sensitive Action",
-            "readOnly": true
-          },
           "trigger_setup_info": {
             "anyOf": [
               { "$ref": "#/components/schemas/GraphTriggerInfo" },
@@ -6404,7 +6399,6 @@
           "output_schema",
           "has_external_trigger",
           "has_human_in_the_loop",
-          "has_sensitive_action",
           "trigger_setup_info"
         ],
         "title": "BaseGraph"
@@ -7635,11 +7629,6 @@
             "title": "Has Human In The Loop",
             "readOnly": true
           },
-          "has_sensitive_action": {
-            "type": "boolean",
-            "title": "Has Sensitive Action",
-            "readOnly": true
-          },
           "trigger_setup_info": {
             "anyOf": [
               { "$ref": "#/components/schemas/GraphTriggerInfo" },
@@ -7663,7 +7652,6 @@
           "output_schema",
           "has_external_trigger",
           "has_human_in_the_loop",
-          "has_sensitive_action",
           "trigger_setup_info",
           "credentials_input_schema"
         ],
@@ -7742,11 +7730,6 @@
             "title": "Has Human In The Loop",
             "readOnly": true
           },
-          "has_sensitive_action": {
-            "type": "boolean",
-            "title": "Has Sensitive Action",
-            "readOnly": true
-          },
           "trigger_setup_info": {
             "anyOf": [
               { "$ref": "#/components/schemas/GraphTriggerInfo" },
@@ -7771,7 +7754,6 @@
           "output_schema",
           "has_external_trigger",
           "has_human_in_the_loop",
-          "has_sensitive_action",
           "trigger_setup_info",
           "credentials_input_schema"
         ],
@@ -7780,14 +7762,8 @@
       "GraphSettings": {
         "properties": {
           "human_in_the_loop_safe_mode": {
-            "type": "boolean",
-            "title": "Human In The Loop Safe Mode",
-            "default": true
-          },
-          "sensitive_action_safe_mode": {
-            "type": "boolean",
-            "title": "Sensitive Action Safe Mode",
-            "default": false
+            "anyOf": [{ "type": "boolean" }, { "type": "null" }],
+            "title": "Human In The Loop Safe Mode"
           }
         },
         "type": "object",
@@ -7945,16 +7921,6 @@
             "title": "Has External Trigger",
             "description": "Whether the agent has an external trigger (e.g. webhook) node"
           },
-          "has_human_in_the_loop": {
-            "type": "boolean",
-            "title": "Has Human In The Loop",
-            "description": "Whether the agent has human-in-the-loop blocks"
-          },
-          "has_sensitive_action": {
-            "type": "boolean",
-            "title": "Has Sensitive Action",
-            "description": "Whether the agent has sensitive action blocks"
-          },
           "trigger_setup_info": {
             "anyOf": [
               { "$ref": "#/components/schemas/GraphTriggerInfo" },
@@ -8001,8 +7967,6 @@
           "output_schema",
           "credentials_input_schema",
           "has_external_trigger",
-          "has_human_in_the_loop",
-          "has_sensitive_action",
           "new_output",
           "can_access_graph",
           "is_latest_version",

autogpt_platform/frontend/src/components/atoms/Badge/Badge.test.tsx

@@ -0,0 +1,81 @@
+// import { render, screen } from "@testing-library/react";
+// import { describe, expect, it } from "vitest";
+// import { Badge } from "./Badge";
+
+// describe("Badge Component", () => {
+//   it("renders badge with content", () => {
+//     render(<Badge variant="success">Success</Badge>);
+
+//     expect(screen.getByText("Success")).toBeInTheDocument();
+//   });
+
+//   it("applies correct variant styles", () => {
+//     const { rerender } = render(<Badge variant="success">Success</Badge>);
+//     let badge = screen.getByText("Success");
+//     expect(badge).toHaveClass("bg-green-100", "text-green-800");
+
+//     rerender(<Badge variant="error">Error</Badge>);
+//     badge = screen.getByText("Error");
+//     expect(badge).toHaveClass("bg-red-100", "text-red-800");
+
+//     rerender(<Badge variant="info">Info</Badge>);
+//     badge = screen.getByText("Info");
+//     expect(badge).toHaveClass("bg-slate-100", "text-slate-800");
+//   });
+
+//   it("applies custom className", () => {
+//     render(
+//       <Badge variant="success" className="custom-class">
+//         Success
+//       </Badge>,
+//     );
+
+//     const badge = screen.getByText("Success");
+//     expect(badge).toHaveClass("custom-class");
+//   });
+
+//   it("renders as span element", () => {
+//     render(<Badge variant="success">Success</Badge>);
+
+//     const badge = screen.getByText("Success");
+//     expect(badge.tagName).toBe("SPAN");
+//   });
+
+//   it("renders children correctly", () => {
+//     render(
+//       <Badge variant="success">
+//         <span>Custom</span> Content
+//       </Badge>,
+//     );
+
+//     expect(screen.getByText("Custom")).toBeInTheDocument();
+//     expect(screen.getByText("Content")).toBeInTheDocument();
+//   });
+
+//   it("supports all badge variants", () => {
+//     const variants = ["success", "error", "info"] as const;
+
+//     variants.forEach((variant) => {
+//       const { unmount } = render(
+//         <Badge variant={variant} data-testid={`badge-${variant}`}>
+//           {variant}
+//         </Badge>,
+//       );
+
+//       expect(screen.getByTestId(`badge-${variant}`)).toBeInTheDocument();
+//       unmount();
+//     });
+//   });
+
+//   it("handles long text content", () => {
+//     render(
+//       <Badge variant="info">
+//         Very long text that should be handled properly by the component
+//       </Badge>,
+//     );
+
+//     const badge = screen.getByText(/Very long text/);
+//     expect(badge).toBeInTheDocument();
+//     expect(badge).toHaveClass("overflow-hidden", "text-ellipsis");
+//   });
+// });

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/contextual/CredentialsInput/components/CredentialsGroupedView/helpers.ts

@@ -1,5 +1,5 @@
 import { CredentialsProvidersContextType } from "@/providers/agent-credentials/credentials-provider";
-import { filterSystemCredentials, getSystemCredentials } from "../../helpers";
+import { getSystemCredentials } from "../../helpers";
 
 export type CredentialField = [string, any];
 
@@ -208,42 +208,3 @@ export function findSavedCredentialByProviderAndType(
 
   return undefined;
 }
-
-export function findSavedUserCredentialByProviderAndType(
-  providerNames: string[],
-  credentialTypes: string[],
-  requiredScopes: string[] | undefined,
-  allProviders: CredentialsProvidersContextType | null,
-): SavedCredential | undefined {
-  for (const providerName of providerNames) {
-    const providerData = allProviders?.[providerName];
-    if (!providerData) continue;
-
-    const userCredentials = filterSystemCredentials(
-      providerData.savedCredentials ?? [],
-    );
-
-    const matchingCredentials: SavedCredential[] = [];
-
-    for (const credential of userCredentials) {
-      const typeMatches =
-        credentialTypes.length === 0 ||
-        credentialTypes.includes(credential.type);
-      const scopesMatch = hasRequiredScopes(credential, requiredScopes);
-
-      if (!typeMatches) continue;
-      if (!scopesMatch) continue;
-
-      matchingCredentials.push(credential as SavedCredential);
-    }
-
-    if (matchingCredentials.length === 1) {
-      return matchingCredentials[0];
-    }
-    if (matchingCredentials.length > 1) {
-      return undefined;
-    }
-  }
-
-  return undefined;
-}

autogpt_platform/frontend/src/components/contextual/CredentialsInput/useCredentialsInput.ts

@@ -98,20 +98,24 @@ export function useCredentialsInput({
 
   // Auto-select the first available credential on initial mount
   // Once a user has made a selection, we don't override it
-  useEffect(
-    function autoSelectCredential() {
-      if (readOnly) return;
-      if (!credentials || !("savedCredentials" in credentials)) return;
-      if (selectedCredential?.id) return;
+  useEffect(() => {
+    if (readOnly) return;
+    if (!credentials || !("savedCredentials" in credentials)) return;
 
-      const savedCreds = credentials.savedCredentials;
-      if (savedCreds.length === 0) return;
+    // If already selected, don't auto-select
+    if (selectedCredential?.id) return;
 
-      if (hasAttemptedAutoSelect.current) return;
-      hasAttemptedAutoSelect.current = true;
+    // Only attempt auto-selection once
+    if (hasAttemptedAutoSelect.current) return;
+    hasAttemptedAutoSelect.current = true;
 
-      if (isOptional) return;
+    // If optional, don't auto-select (user can choose "None")
+    if (isOptional) return;
 
+    const savedCreds = credentials.savedCredentials;
+
+    // Auto-select the first credential if any are available
+    if (savedCreds.length > 0) {
       const cred = savedCreds[0];
       onSelectCredential({
         id: cred.id,
@@ -119,15 +123,14 @@ export function useCredentialsInput({
         provider: credentials.provider,
         title: (cred as any).title,
       });
-    },
-    [
-      credentials,
-      selectedCredential?.id,
-      readOnly,
-      isOptional,
-      onSelectCredential,
-    ],
-  );
+    }
+  }, [
+    credentials,
+    selectedCredential?.id,
+    readOnly,
+    isOptional,
+    onSelectCredential,
+  ]);
 
   if (
     !credentials ||

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/Popover/Popover.tsx

@@ -1,33 +0,0 @@
-"use client";
-
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const Popover = PopoverPrimitive.Root;
-
-const PopoverTrigger = PopoverPrimitive.Trigger;
-
-const PopoverAnchor = PopoverPrimitive.Anchor;
-
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 w-72 rounded-lg border border-zinc-200 bg-white p-4 text-zinc-900 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className,
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
-export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

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/components/renderers/InputRenderer/custom/LlmModelField/LlmModelField.tsx

@@ -1,92 +0,0 @@
-"use client";
-
-import {
-  descriptionId,
-  FieldProps,
-  getTemplate,
-  RJSFSchema,
-  titleId,
-} from "@rjsf/utils";
-import { useMemo } from "react";
-import { LlmModelPicker } from "./components/LlmModelPicker";
-import { LlmModelMetadataMap } from "./types";
-import { updateUiOption } from "../../helpers";
-
-type LlmModelSchema = RJSFSchema & {
-  llm_model_metadata?: LlmModelMetadataMap;
-};
-
-export function LlmModelField(props: FieldProps) {
-  const { schema, formData, onChange, disabled, readonly, fieldPathId } = props;
-
-  const metadata = useMemo(() => {
-    return (schema as LlmModelSchema)?.llm_model_metadata ?? {};
-  }, [schema]);
-
-  const models = useMemo(() => {
-    return Object.values(metadata);
-  }, [metadata]);
-
-  const selectedName =
-    typeof formData === "string"
-      ? formData
-      : typeof schema.default === "string"
-        ? schema.default
-        : "";
-
-  const selectedModel = selectedName
-    ? (metadata[selectedName] ??
-      models.find((model) => model.name === selectedName))
-    : undefined;
-
-  const recommendedName =
-    typeof schema.default === "string" ? schema.default : models[0]?.name;
-
-  const recommendedModel =
-    recommendedName && metadata[recommendedName]
-      ? metadata[recommendedName]
-      : undefined;
-
-  if (models.length === 0) {
-    return null;
-  }
-
-  const TitleFieldTemplate = getTemplate("TitleFieldTemplate", props.registry);
-  const DescriptionFieldTemplate = getTemplate(
-    "DescriptionFieldTemplate",
-    props.registry,
-  );
-
-  const updatedUiSchema = updateUiOption(props.uiSchema, {
-    showHandles: false,
-  });
-
-  return (
-    <>
-      <div className="flex items-center gap-2">
-        <TitleFieldTemplate
-          id={titleId(fieldPathId)}
-          title={schema.title || ""}
-          required={true}
-          schema={schema}
-          uiSchema={updatedUiSchema}
-          registry={props.registry}
-        />
-        <DescriptionFieldTemplate
-          id={descriptionId(fieldPathId)}
-          description={schema.description || ""}
-          schema={schema}
-          registry={props.registry}
-        />
-      </div>
-
-      <LlmModelPicker
-        models={models}
-        selectedModel={selectedModel}
-        recommendedModel={recommendedModel}
-        onSelect={(value) => onChange(value, fieldPathId?.path)}
-        disabled={disabled || readonly}
-      />
-    </>
-  );
-}

autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/LlmModelField/components/LlmIcon.tsx

@@ -1,66 +0,0 @@
-"use client";
-
-import Image from "next/image";
-import { Text } from "@/components/atoms/Text/Text";
-
-const creatorIconMap: Record<string, string> = {
-  anthropic: "/integrations/anthropic-color.png",
-  openai: "/integrations/openai.png",
-  google: "/integrations/gemini.png",
-  nvidia: "/integrations/nvidia.png",
-  groq: "/integrations/groq.png",
-  ollama: "/integrations/ollama.png",
-  openrouter: "/integrations/open_router.png",
-  v0: "/integrations/v0.png",
-  xai: "/integrations/xai.webp",
-  meta: "/integrations/llama_api.png",
-  amazon: "/integrations/amazon.png",
-  cohere: "/integrations/cohere.png",
-  deepseek: "/integrations/deepseek.png",
-  gryphe: "/integrations/gryphe.png",
-  microsoft: "/integrations/microsoft.webp",
-  moonshotai: "/integrations/moonshot.png",
-  mistral: "/integrations/mistral.png",
-  mistralai: "/integrations/mistral.png",
-  nousresearch: "/integrations/nousresearch.avif",
-  perplexity: "/integrations/perplexity.webp",
-  qwen: "/integrations/qwen.png",
-};
-
-type Props = {
-  value: string;
-  size?: number;
-};
-
-export function LlmIcon({ value, size = 20 }: Props) {
-  const normalized = value.trim().toLowerCase().replace(/\s+/g, "");
-  const src = creatorIconMap[normalized];
-  if (src) {
-    return (
-      <div
-        className="flex items-center justify-center overflow-hidden rounded-xsmall"
-        style={{ width: size, height: size }}
-      >
-        <Image
-          src={src}
-          alt={value}
-          width={size}
-          height={size}
-          className="h-full w-full object-cover"
-        />
-      </div>
-    );
-  }
-
-  const fallback = value?.trim().slice(0, 1).toUpperCase() || "?";
-  return (
-    <div
-      className="flex items-center justify-center rounded-xsmall bg-zinc-100"
-      style={{ width: size, height: size }}
-    >
-      <Text variant="small" className="text-zinc-500">
-        {fallback}
-      </Text>
-    </div>
-  );
-}

autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/LlmModelField/components/LlmMenuHeader.tsx

@@ -1,24 +0,0 @@
-"use client";
-
-import { ArrowLeftIcon } from "@phosphor-icons/react";
-import { Text } from "@/components/atoms/Text/Text";
-
-type Props = {
-  label: string;
-  onBack: () => void;
-};
-
-export function LlmMenuHeader({ label, onBack }: Props) {
-  return (
-    <button
-      type="button"
-      onClick={onBack}
-      className="flex w-full items-center gap-2 px-2 py-2 text-left hover:bg-zinc-100"
-    >
-      <ArrowLeftIcon className="h-4 w-4 text-zinc-800" weight="bold" />
-      <Text variant="body" className="text-zinc-900">
-        {label}
-      </Text>
-    </button>
-  );
-}

autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/LlmModelField/components/LlmMenuItem.tsx

@@ -1,61 +0,0 @@
-"use client";
-
-import { CaretRightIcon, CheckIcon } from "@phosphor-icons/react";
-import { Text } from "@/components/atoms/Text/Text";
-import { cn } from "@/lib/utils";
-
-type Props = {
-  title: string;
-  subtitle?: string;
-  icon?: React.ReactNode;
-  showChevron?: boolean;
-  rightSlot?: React.ReactNode;
-  onClick: () => void;
-  isActive?: boolean;
-};
-
-export function LlmMenuItem({
-  title,
-  subtitle,
-  icon,
-  showChevron,
-  rightSlot,
-  onClick,
-  isActive,
-}: Props) {
-  const hasIcon = Boolean(icon);
-
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={cn("w-full py-1 pl-2 pr-4 text-left hover:bg-zinc-100")}
-    >
-      <div className="flex items-center justify-between gap-3">
-        <div className="flex items-center gap-2">
-          {icon}
-          <Text variant="body" className="text-zinc-900">
-            {title}
-          </Text>
-        </div>
-        <div className="flex items-center gap-2">
-          {isActive && (
-            <CheckIcon className="h-4 w-4 text-emerald-600" weight="bold" />
-          )}
-          {rightSlot}
-          {showChevron && (
-            <CaretRightIcon className="h-4 w-4 text-zinc-900" weight="bold" />
-          )}
-        </div>
-      </div>
-      {subtitle && (
-        <Text
-          variant="small"
-          className={cn("mb-1 text-zinc-500", hasIcon && "pl-0")}
-        >
-          {subtitle}
-        </Text>
-      )}
-    </button>
-  );
-}

autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/LlmModelField/components/LlmModelPicker.tsx

@@ -1,235 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { CaretDownIcon } from "@phosphor-icons/react";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/molecules/Popover/Popover";
-import { Text } from "@/components/atoms/Text/Text";
-import { cn } from "@/lib/utils";
-import {
-  getCreatorDisplayName,
-  getModelDisplayName,
-  getProviderDisplayName,
-  groupByCreator,
-  groupByTitle,
-} from "../helpers";
-import { LlmModelMetadata } from "../types";
-import { LlmIcon } from "./LlmIcon";
-import { LlmMenuHeader } from "./LlmMenuHeader";
-import { LlmMenuItem } from "./LlmMenuItem";
-import { LlmPriceTier } from "./LlmPriceTier";
-
-type MenuView = "creator" | "model" | "provider";
-
-type Props = {
-  models: LlmModelMetadata[];
-  selectedModel?: LlmModelMetadata;
-  recommendedModel?: LlmModelMetadata;
-  onSelect: (value: string) => void;
-  disabled?: boolean;
-};
-
-export function LlmModelPicker({
-  models,
-  selectedModel,
-  recommendedModel,
-  onSelect,
-  disabled,
-}: Props) {
-  const [open, setOpen] = useState(false);
-  const [view, setView] = useState<MenuView>("creator");
-  const [activeCreator, setActiveCreator] = useState<string | null>(null);
-  const [activeTitle, setActiveTitle] = useState<string | null>(null);
-
-  const modelsByCreator = useMemo(() => groupByCreator(models), [models]);
-
-  const creators = useMemo(() => {
-    return Array.from(modelsByCreator.keys()).sort((a, b) =>
-      a.localeCompare(b),
-    );
-  }, [modelsByCreator]);
-
-  const creatorIconValues = useMemo(() => {
-    const map = new Map<string, string>();
-    for (const [creator, entries] of modelsByCreator.entries()) {
-      map.set(creator, entries[0]?.creator ?? creator);
-    }
-    return map;
-  }, [modelsByCreator]);
-
-  useEffect(() => {
-    if (!open) {
-      return;
-    }
-    setView("creator");
-    setActiveCreator(
-      selectedModel
-        ? getCreatorDisplayName(selectedModel)
-        : (creators[0] ?? null),
-    );
-    setActiveTitle(selectedModel ? getModelDisplayName(selectedModel) : null);
-  }, [open, selectedModel, creators]);
-
-  const currentCreator = activeCreator ?? creators[0] ?? null;
-
-  const currentModels = useMemo(() => {
-    return currentCreator ? (modelsByCreator.get(currentCreator) ?? []) : [];
-  }, [currentCreator, modelsByCreator]);
-
-  const currentCreatorIcon = useMemo(() => {
-    return currentModels[0]?.creator ?? currentCreator;
-  }, [currentModels, currentCreator]);
-
-  const modelsByTitle = useMemo(
-    () => groupByTitle(currentModels),
-    [currentModels],
-  );
-
-  const modelEntries = useMemo(() => {
-    return Array.from(modelsByTitle.entries())
-      .map(([title, entries]) => {
-        const providers = new Set(entries.map((entry) => entry.provider));
-        return {
-          title,
-          entries,
-          providerCount: providers.size,
-        };
-      })
-      .sort((a, b) => a.title.localeCompare(b.title));
-  }, [modelsByTitle]);
-
-  const providerEntries = useMemo(() => {
-    if (!activeTitle) {
-      return [];
-    }
-    return modelsByTitle.get(activeTitle) ?? [];
-  }, [activeTitle, modelsByTitle]);
-
-  const handleSelectModel = useCallback(
-    (modelName: string) => {
-      onSelect(modelName);
-      setOpen(false);
-    },
-    [onSelect],
-  );
-
-  const triggerModel = selectedModel ?? recommendedModel ?? models[0];
-  const triggerTitle = triggerModel
-    ? getModelDisplayName(triggerModel)
-    : "Select model";
-  const triggerCreator = triggerModel?.creator ?? "";
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <button
-          type="button"
-          disabled={disabled}
-          className={cn(
-            "flex w-full min-w-[15rem] items-center rounded-lg border border-zinc-200 bg-white px-3 py-2 text-left",
-            "hover:border-zinc-300 focus:outline-none focus:ring-2 focus:ring-zinc-200",
-            disabled && "cursor-not-allowed opacity-60",
-          )}
-        >
-          <LlmIcon value={triggerCreator} />
-          <Text variant="body" className="ml-1 flex-1 text-zinc-900">
-            {triggerTitle}
-          </Text>
-          <CaretDownIcon className="h-3 w-3 text-zinc-900" weight="bold" />
-        </button>
-      </PopoverTrigger>
-      <PopoverContent
-        align="start"
-        sideOffset={4}
-        className="max-h-[45vh] w-[--radix-popover-trigger-width] min-w-[16rem] overflow-y-auto rounded-md border border-zinc-200 bg-white p-0 shadow-[0px_1px_4px_rgba(12,12,13,0.12)]"
-      >
-        {view === "creator" && (
-          <div className="flex flex-col">
-            {recommendedModel && (
-              <>
-                <LlmMenuItem
-                  title={getModelDisplayName(recommendedModel)}
-                  subtitle="Recommended"
-                  icon={<LlmIcon value={recommendedModel.creator} />}
-                  onClick={() => handleSelectModel(recommendedModel.name)}
-                />
-                <div className="border-b border-zinc-200" />
-              </>
-            )}
-            {creators.map((creator) => (
-              <LlmMenuItem
-                key={creator}
-                title={creator}
-                icon={
-                  <LlmIcon value={creatorIconValues.get(creator) ?? creator} />
-                }
-                showChevron={true}
-                isActive={
-                  selectedModel
-                    ? getCreatorDisplayName(selectedModel) === creator
-                    : false
-                }
-                onClick={() => {
-                  setActiveCreator(creator);
-                  setView("model");
-                }}
-              />
-            ))}
-          </div>
-        )}
-        {view === "model" && currentCreator && (
-          <div className="flex flex-col">
-            <LlmMenuHeader
-              label={currentCreator}
-              onBack={() => setView("creator")}
-            />
-            <div className="border-b border-zinc-200" />
-            {modelEntries.map((entry) => (
-              <LlmMenuItem
-                key={entry.title}
-                title={entry.title}
-                icon={<LlmIcon value={currentCreatorIcon} />}
-                rightSlot={<LlmPriceTier tier={entry.entries[0]?.price_tier} />}
-                showChevron={entry.providerCount > 1}
-                isActive={
-                  selectedModel
-                    ? getModelDisplayName(selectedModel) === entry.title
-                    : false
-                }
-                onClick={() => {
-                  if (entry.providerCount > 1) {
-                    setActiveTitle(entry.title);
-                    setView("provider");
-                    return;
-                  }
-                  handleSelectModel(entry.entries[0].name);
-                }}
-              />
-            ))}
-          </div>
-        )}
-        {view === "provider" && activeTitle && (
-          <div className="flex flex-col">
-            <LlmMenuHeader
-              label={activeTitle}
-              onBack={() => setView("model")}
-            />
-            <div className="border-b border-zinc-200" />
-            {providerEntries.map((entry) => (
-              <LlmMenuItem
-                key={`${entry.title}-${entry.provider}`}
-                title={getProviderDisplayName(entry)}
-                icon={<LlmIcon value={entry.provider} />}
-                isActive={selectedModel?.provider === entry.provider}
-                onClick={() => handleSelectModel(entry.name)}
-              />
-            ))}
-          </div>
-        )}
-      </PopoverContent>
-    </Popover>
-  );
-}

autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/LlmModelField/components/LlmPriceTier.tsx

@@ -1,25 +0,0 @@
-"use client";
-
-import { CurrencyDollarSimpleIcon } from "@phosphor-icons/react";
-
-type Props = {
-  tier?: number;
-};
-
-export function LlmPriceTier({ tier }: Props) {
-  if (!tier || tier <= 0) {
-    return null;
-  }
-  const clamped = Math.min(3, Math.max(1, tier));
-  return (
-    <div className="flex items-center text-zinc-900">
-      {Array.from({ length: clamped }).map((_, index) => (
-        <CurrencyDollarSimpleIcon
-          key={`price-${index}`}
-          className="-mr-0.5 h-3 w-3"
-          weight="bold"
-        />
-      ))}
-    </div>
-  );
-}

autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/LlmModelField/helpers.ts

@@ -1,35 +0,0 @@
-import { LlmModelMetadata } from "./types";
-
-export function groupByCreator(models: LlmModelMetadata[]) {
-  const map = new Map<string, LlmModelMetadata[]>();
-  for (const model of models) {
-    const key = getCreatorDisplayName(model);
-    const existing = map.get(key) ?? [];
-    existing.push(model);
-    map.set(key, existing);
-  }
-  return map;
-}
-
-export function groupByTitle(models: LlmModelMetadata[]) {
-  const map = new Map<string, LlmModelMetadata[]>();
-  for (const model of models) {
-    const displayName = getModelDisplayName(model);
-    const existing = map.get(displayName) ?? [];
-    existing.push(model);
-    map.set(displayName, existing);
-  }
-  return map;
-}
-
-export function getCreatorDisplayName(model: LlmModelMetadata): string {
-  return model.creator_name || model.creator || "";
-}
-
-export function getModelDisplayName(model: LlmModelMetadata): string {
-  return model.title || model.name || "";
-}
-
-export function getProviderDisplayName(model: LlmModelMetadata): string {
-  return model.provider_name || model.provider || "";
-}

autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/LlmModelField/types.ts

@@ -1,11 +0,0 @@
-export type LlmModelMetadata = {
-  creator: string;
-  creator_name: string;
-  title: string;
-  provider: string;
-  provider_name: string;
-  name: string;
-  price_tier?: number;
-};
-
-export type LlmModelMetadataMap = Record<string, LlmModelMetadata>;

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

@@ -8,7 +8,6 @@ import {
   isMultiSelectSchema,
 } from "../utils/schema-utils";
 import { TableField } from "./TableField/TableField";
-import { LlmModelField } from "./LlmModelField/LlmModelField";
 
 export interface CustomFieldDefinition {
   id: string;
@@ -58,15 +57,6 @@ export const CUSTOM_FIELDS: CustomFieldDefinition[] = [
     },
     component: TableField,
   },
-  {
-    id: "custom/llm_model_field",
-    matcher: (schema: any) => {
-      return (
-        typeof schema === "object" && schema !== null && "llm_model" in schema
-      );
-    },
-    component: LlmModelField,
-  },
 ];
 
 export function findCustomFieldId(schema: any): string | null {

autogpt_platform/frontend/src/hooks/useAgentSafeMode.ts

@@ -20,15 +20,11 @@ function hasHITLBlocks(graph: GraphModel | LibraryAgent | Graph): boolean {
   if ("has_human_in_the_loop" in graph) {
     return !!graph.has_human_in_the_loop;
   }
-  return false;
-}
 
-function hasSensitiveActionBlocks(
-  graph: GraphModel | LibraryAgent | Graph,
-): boolean {
-  if ("has_sensitive_action" in graph) {
-    return !!graph.has_sensitive_action;
+  if (isLibraryAgent(graph)) {
+    return graph.settings?.human_in_the_loop_safe_mode !== null;
   }
+
   return false;
 }
 
@@ -44,9 +40,7 @@ export function useAgentSafeMode(graph: GraphModel | LibraryAgent | Graph) {
 
   const graphId = getGraphId(graph);
   const isAgent = isLibraryAgent(graph);
-  const showHITLToggle = hasHITLBlocks(graph);
-  const showSensitiveActionToggle = hasSensitiveActionBlocks(graph);
-  const shouldShowToggle = showHITLToggle || showSensitiveActionToggle;
+  const shouldShowToggle = hasHITLBlocks(graph);
 
   const { mutateAsync: updateGraphSettings, isPending } =
     usePatchV1UpdateGraphSettings();
@@ -62,37 +56,27 @@ export function useAgentSafeMode(graph: GraphModel | LibraryAgent | Graph) {
     },
   );
 
-  const [localHITLSafeMode, setLocalHITLSafeMode] = useState<boolean>(true);
-  const [localSensitiveActionSafeMode, setLocalSensitiveActionSafeMode] =
-    useState<boolean>(false);
-  const [isLocalStateLoaded, setIsLocalStateLoaded] = useState<boolean>(false);
+  const [localSafeMode, setLocalSafeMode] = useState<boolean | null>(null);
 
   useEffect(() => {
     if (!isAgent && libraryAgent) {
-      setLocalHITLSafeMode(
-        libraryAgent.settings?.human_in_the_loop_safe_mode ?? true,
-      );
-      setLocalSensitiveActionSafeMode(
-        libraryAgent.settings?.sensitive_action_safe_mode ?? false,
-      );
-      setIsLocalStateLoaded(true);
+      const backendValue = libraryAgent.settings?.human_in_the_loop_safe_mode;
+      if (backendValue !== undefined) {
+        setLocalSafeMode(backendValue);
+      }
     }
   }, [isAgent, libraryAgent]);
 
-  const currentHITLSafeMode = isAgent
-    ? (graph.settings?.human_in_the_loop_safe_mode ?? true)
-    : localHITLSafeMode;
+  const currentSafeMode = isAgent
+    ? graph.settings?.human_in_the_loop_safe_mode
+    : localSafeMode;
 
-  const currentSensitiveActionSafeMode = isAgent
-    ? (graph.settings?.sensitive_action_safe_mode ?? false)
-    : localSensitiveActionSafeMode;
+  const isStateUndetermined = isAgent
+    ? graph.settings?.human_in_the_loop_safe_mode == null
+    : isLoading || localSafeMode === null;
 
-  const isHITLStateUndetermined = isAgent
-    ? false
-    : isLoading || !isLocalStateLoaded;
-
-  const handleHITLToggle = useCallback(async () => {
-    const newSafeMode = !currentHITLSafeMode;
+  const handleToggle = useCallback(async () => {
+    const newSafeMode = !currentSafeMode;
 
     try {
       await updateGraphSettings({
@@ -101,7 +85,7 @@ export function useAgentSafeMode(graph: GraphModel | LibraryAgent | Graph) {
       });
 
       if (!isAgent) {
-        setLocalHITLSafeMode(newSafeMode);
+        setLocalSafeMode(newSafeMode);
       }
 
       if (isAgent) {
@@ -117,62 +101,37 @@ export function useAgentSafeMode(graph: GraphModel | LibraryAgent | Graph) {
       queryClient.invalidateQueries({ queryKey: ["v2", "executions"] });
 
       toast({
-        title: `HITL safe mode ${newSafeMode ? "enabled" : "disabled"}`,
+        title: `Safe mode ${newSafeMode ? "enabled" : "disabled"}`,
         description: newSafeMode
           ? "Human-in-the-loop blocks will require manual review"
           : "Human-in-the-loop blocks will proceed automatically",
         duration: 2000,
       });
     } catch (error) {
-      handleToggleError(error, isAgent, toast);
-    }
-  }, [
-    currentHITLSafeMode,
-    graphId,
-    isAgent,
-    graph.id,
-    updateGraphSettings,
-    queryClient,
-    toast,
-  ]);
+      const isNotFoundError =
+        error instanceof Error &&
+        (error.message.includes("404") || error.message.includes("not found"));
 
-  const handleSensitiveActionToggle = useCallback(async () => {
-    const newSafeMode = !currentSensitiveActionSafeMode;
-
-    try {
-      await updateGraphSettings({
-        graphId,
-        data: { sensitive_action_safe_mode: newSafeMode },
-      });
-
-      if (!isAgent) {
-        setLocalSensitiveActionSafeMode(newSafeMode);
-      }
-
-      if (isAgent) {
-        queryClient.invalidateQueries({
-          queryKey: getGetV2GetLibraryAgentQueryOptions(graph.id.toString())
-            .queryKey,
+      if (!isAgent && isNotFoundError) {
+        toast({
+          title: "Safe mode not available",
+          description:
+            "To configure safe mode, please save this graph to your library first.",
+          variant: "destructive",
+        });
+      } else {
+        toast({
+          title: "Failed to update safe mode",
+          description:
+            error instanceof Error
+              ? error.message
+              : "An unexpected error occurred.",
+          variant: "destructive",
         });
       }
-
-      queryClient.invalidateQueries({
-        queryKey: ["v1", "graphs", graphId, "executions"],
-      });
-      queryClient.invalidateQueries({ queryKey: ["v2", "executions"] });
-
-      toast({
-        title: `Sensitive action safe mode ${newSafeMode ? "enabled" : "disabled"}`,
-        description: newSafeMode
-          ? "Sensitive action blocks will require manual review"
-          : "Sensitive action blocks will proceed automatically",
-        duration: 2000,
-      });
-    } catch (error) {
-      handleToggleError(error, isAgent, toast);
     }
   }, [
-    currentSensitiveActionSafeMode,
+    currentSafeMode,
     graphId,
     isAgent,
     graph.id,
@@ -182,53 +141,11 @@ export function useAgentSafeMode(graph: GraphModel | LibraryAgent | Graph) {
   ]);
 
   return {
-    // HITL safe mode
-    currentHITLSafeMode,
-    showHITLToggle,
-    isHITLStateUndetermined,
-    handleHITLToggle,
-
-    // Sensitive action safe mode
-    currentSensitiveActionSafeMode,
-    showSensitiveActionToggle,
-    handleSensitiveActionToggle,
-
-    // General
+    currentSafeMode,
     isPending,
     shouldShowToggle,
-
-    // Backwards compatibility
-    currentSafeMode: currentHITLSafeMode,
-    isStateUndetermined: isHITLStateUndetermined,
-    handleToggle: handleHITLToggle,
-    hasHITLBlocks: showHITLToggle,
+    isStateUndetermined,
+    handleToggle,
+    hasHITLBlocks: shouldShowToggle,
   };
 }
-
-function handleToggleError(
-  error: unknown,
-  isAgent: boolean,
-  toast: ReturnType<typeof useToast>["toast"],
-) {
-  const isNotFoundError =
-    error instanceof Error &&
-    (error.message.includes("404") || error.message.includes("not found"));
-
-  if (!isAgent && isNotFoundError) {
-    toast({
-      title: "Safe mode not available",
-      description:
-        "To configure safe mode, please save this graph to your library first.",
-      variant: "destructive",
-    });
-  } else {
-    toast({
-      title: "Failed to update safe mode",
-      description:
-        error instanceof Error
-          ? error.message
-          : "An unexpected error occurred.",
-      variant: "destructive",
-    });
-  }
-}

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,

autogpt_platform/frontend/src/lib/timezone-utils.ts

@@ -106,14 +106,9 @@ export function getTimezoneDisplayName(timezone: string): string {
     const parts = timezone.split("/");
     const city = parts[parts.length - 1].replace(/_/g, " ");
     const abbr = getTimezoneAbbreviation(timezone);
-    if (abbr && abbr !== timezone) {
-      return `${city} (${abbr})`;
-    }
-    // If abbreviation is same as timezone or not found, show timezone with underscores replaced
-    const timezoneDisplay = timezone.replace(/_/g, " ");
-    return `${city} (${timezoneDisplay})`;
+    return abbr ? `${city} (${abbr})` : city;
   } catch {
-    return timezone.replace(/_/g, " ");
+    return timezone;
   }
 }
 

autogpt_platform/frontend/src/mocks/index.ts

@@ -1,13 +0,0 @@
-// We are not using this for tests because Vitest runs our tests in a Node.js environment.
-// However, we can use it for development purposes to test our UI in the browser with fake data.
-export async function initMocks() {
-  if (typeof window === "undefined") {
-    const { server } = await import("./mock-server");
-    server.listen({ onUnhandledRequest: "bypass" });
-    console.log("[MSW] Server mock initialized");
-  } else {
-    const { worker } = await import("./mock-browser");
-    await worker.start({ onUnhandledRequest: "bypass" });
-    console.log("[MSW] Browser mock initialized");
-  }
-}

autogpt_platform/frontend/src/mocks/mock-browser.ts

@@ -1,4 +0,0 @@
-import { setupWorker } from "msw/browser";
-import { mockHandlers } from "./mock-handlers";
-
-export const worker = setupWorker(...mockHandlers);