refactor(tests): enhance agent activity tests for new flow editor

### Summary
- Updated `agent-activity.spec.ts` to utilize the new flow editor's methods for adding blocks, improving test reliability and alignment with the current UI.
- Refactored `BuildPage` methods in `build.page.ts` to streamline block interactions and improve visibility checks, ensuring tests accurately reflect user actions.

### Impact
These changes enhance the robustness of the test suite, ensuring it remains functional and relevant with the latest UI updates.

### Testing
- Verified that all updated tests pass successfully, confirming the new interactions work as intended.

autogpt_platform/backend/backend/api/features/chat/tools/agent_generator/dummy.py

@@ -1,154 +0,0 @@
-"""Dummy Agent Generator for testing.
-
-Returns mock responses matching the format expected from the external service.
-Enable via AGENTGENERATOR_USE_DUMMY=true in settings.
-
-WARNING: This is for testing only. Do not use in production.
-"""
-
-import asyncio
-import logging
-import uuid
-from typing import Any
-
-logger = logging.getLogger(__name__)
-
-# Dummy decomposition result (instructions type)
-DUMMY_DECOMPOSITION_RESULT: dict[str, Any] = {
-    "type": "instructions",
-    "steps": [
-        {
-            "description": "Get input from user",
-            "action": "input",
-            "block_name": "AgentInputBlock",
-        },
-        {
-            "description": "Process the input",
-            "action": "process",
-            "block_name": "TextFormatterBlock",
-        },
-        {
-            "description": "Return output to user",
-            "action": "output",
-            "block_name": "AgentOutputBlock",
-        },
-    ],
-}
-
-# Block IDs from backend/blocks/io.py
-AGENT_INPUT_BLOCK_ID = "c0a8e994-ebf1-4a9c-a4d8-89d09c86741b"
-AGENT_OUTPUT_BLOCK_ID = "363ae599-353e-4804-937e-b2ee3cef3da4"
-
-
-def _generate_dummy_agent_json() -> dict[str, Any]:
-    """Generate a minimal valid agent JSON for testing."""
-    input_node_id = str(uuid.uuid4())
-    output_node_id = str(uuid.uuid4())
-
-    return {
-        "id": str(uuid.uuid4()),
-        "version": 1,
-        "is_active": True,
-        "name": "Dummy Test Agent",
-        "description": "A dummy agent generated for testing purposes",
-        "nodes": [
-            {
-                "id": input_node_id,
-                "block_id": AGENT_INPUT_BLOCK_ID,
-                "input_default": {
-                    "name": "input",
-                    "title": "Input",
-                    "description": "Enter your input",
-                    "placeholder_values": [],
-                },
-                "metadata": {"position": {"x": 0, "y": 0}},
-            },
-            {
-                "id": output_node_id,
-                "block_id": AGENT_OUTPUT_BLOCK_ID,
-                "input_default": {
-                    "name": "output",
-                    "title": "Output",
-                    "description": "Agent output",
-                    "format": "{output}",
-                },
-                "metadata": {"position": {"x": 400, "y": 0}},
-            },
-        ],
-        "links": [
-            {
-                "id": str(uuid.uuid4()),
-                "source_id": input_node_id,
-                "sink_id": output_node_id,
-                "source_name": "result",
-                "sink_name": "value",
-                "is_static": False,
-            },
-        ],
-    }
-
-
-async def decompose_goal_dummy(
-    description: str,
-    context: str = "",
-    library_agents: list[dict[str, Any]] | None = None,
-) -> dict[str, Any]:
-    """Return dummy decomposition result."""
-    logger.info("Using dummy agent generator for decompose_goal")
-    return DUMMY_DECOMPOSITION_RESULT.copy()
-
-
-async def generate_agent_dummy(
-    instructions: dict[str, Any],
-    library_agents: list[dict[str, Any]] | None = None,
-    operation_id: str | None = None,
-    task_id: str | None = None,
-) -> dict[str, Any]:
-    """Return dummy agent JSON after a simulated delay."""
-    logger.info("Using dummy agent generator for generate_agent (30s delay)")
-    await asyncio.sleep(30)
-    return _generate_dummy_agent_json()
-
-
-async def generate_agent_patch_dummy(
-    update_request: str,
-    current_agent: dict[str, Any],
-    library_agents: list[dict[str, Any]] | None = None,
-    operation_id: str | None = None,
-    task_id: str | None = None,
-) -> dict[str, Any]:
-    """Return dummy patched agent (returns the current agent with updated description)."""
-    logger.info("Using dummy agent generator for generate_agent_patch")
-    patched = current_agent.copy()
-    patched["description"] = (
-        f"{current_agent.get('description', '')} (updated: {update_request})"
-    )
-    return patched
-
-
-async def customize_template_dummy(
-    template_agent: dict[str, Any],
-    modification_request: str,
-    context: str = "",
-) -> dict[str, Any]:
-    """Return dummy customized template (returns template with updated description)."""
-    logger.info("Using dummy agent generator for customize_template")
-    customized = template_agent.copy()
-    customized["description"] = (
-        f"{template_agent.get('description', '')} (customized: {modification_request})"
-    )
-    return customized
-
-
-async def get_blocks_dummy() -> list[dict[str, Any]]:
-    """Return dummy blocks list."""
-    logger.info("Using dummy agent generator for get_blocks")
-    return [
-        {"id": AGENT_INPUT_BLOCK_ID, "name": "AgentInputBlock"},
-        {"id": AGENT_OUTPUT_BLOCK_ID, "name": "AgentOutputBlock"},
-    ]
-
-
-async def health_check_dummy() -> bool:
-    """Always returns healthy for dummy service."""
-    return True

autogpt_platform/backend/backend/api/features/chat/tools/agent_generator/service.py

@@ -12,19 +12,8 @@ import httpx
 
 from backend.util.settings import Settings
 
-from .dummy import (
-    customize_template_dummy,
-    decompose_goal_dummy,
-    generate_agent_dummy,
-    generate_agent_patch_dummy,
-    get_blocks_dummy,
-    health_check_dummy,
-)
-
 logger = logging.getLogger(__name__)
 
-_dummy_mode_warned = False
-
 
 def _create_error_response(
     error_message: str,
@@ -101,26 +90,10 @@ def _get_settings() -> Settings:
     return _settings
 
 
-def _is_dummy_mode() -> bool:
-    """Check if dummy mode is enabled for testing."""
-    global _dummy_mode_warned
-    settings = _get_settings()
-    is_dummy = bool(settings.config.agentgenerator_use_dummy)
-    if is_dummy and not _dummy_mode_warned:
-        logger.warning(
-            "Agent Generator running in DUMMY MODE - returning mock responses. "
-            "Do not use in production!"
-        )
-        _dummy_mode_warned = True
-    return is_dummy
-
-
 def is_external_service_configured() -> bool:
-    """Check if external Agent Generator service is configured (or dummy mode)."""
+    """Check if external Agent Generator service is configured."""
     settings = _get_settings()
-    return bool(settings.config.agentgenerator_host) or bool(
-        settings.config.agentgenerator_use_dummy
-    )
+    return bool(settings.config.agentgenerator_host)
 
 
 def _get_base_url() -> str:
@@ -164,9 +137,6 @@ async def decompose_goal_external(
         - {"type": "error", "error": "...", "error_type": "..."} on error
         Or None on unexpected error
     """
-    if _is_dummy_mode():
-        return await decompose_goal_dummy(description, context, library_agents)
-
     client = _get_client()
 
     if context:
@@ -256,11 +226,6 @@ async def generate_agent_external(
     Returns:
         Agent JSON dict, {"status": "accepted"} for async, or error dict {"type": "error", ...} on error
     """
-    if _is_dummy_mode():
-        return await generate_agent_dummy(
-            instructions, library_agents, operation_id, task_id
-        )
-
     client = _get_client()
 
     # Build request payload
@@ -332,11 +297,6 @@ async def generate_agent_patch_external(
     Returns:
         Updated agent JSON, clarifying questions dict, {"status": "accepted"} for async, or error dict on error
     """
-    if _is_dummy_mode():
-        return await generate_agent_patch_dummy(
-            update_request, current_agent, library_agents, operation_id, task_id
-        )
-
     client = _get_client()
 
     # Build request payload
@@ -423,11 +383,6 @@ async def customize_template_external(
     Returns:
         Customized agent JSON, clarifying questions dict, or error dict on error
     """
-    if _is_dummy_mode():
-        return await customize_template_dummy(
-            template_agent, modification_request, context
-        )
-
     client = _get_client()
 
     request = modification_request
@@ -490,9 +445,6 @@ async def get_blocks_external() -> list[dict[str, Any]] | None:
     Returns:
         List of block info dicts or None on error
     """
-    if _is_dummy_mode():
-        return await get_blocks_dummy()
-
     client = _get_client()
 
     try:
@@ -526,9 +478,6 @@ async def health_check() -> bool:
     if not is_external_service_configured():
         return False
 
-    if _is_dummy_mode():
-        return await health_check_dummy()
-
     client = _get_client()
 
     try:

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

@@ -7,7 +7,6 @@ import prisma.errors
 import prisma.models
 import prisma.types
 
-from backend.api.features.library.exceptions import FolderValidationError
 import backend.api.features.store.exceptions as store_exceptions
 import backend.api.features.store.image_gen as store_image_gen
 import backend.api.features.store.media as store_media
@@ -43,8 +42,6 @@ async def list_library_agents(
     page: int = 1,
     page_size: int = 50,
     include_executions: bool = False,
-    folder_id: Optional[str] = None,
-    include_root_only: bool = False,
 ) -> library_model.LibraryAgentResponse:
     """
     Retrieves a paginated list of LibraryAgent records for a given user.
@@ -55,8 +52,6 @@ async def list_library_agents(
         sort_by: Sorting field (createdAt, updatedAt, isFavorite, isCreatedByUser).
         page: Current page (1-indexed).
         page_size: Number of items per page.
-        folder_id: Filter by folder ID. If provided, only returns agents in this folder.
-        include_root_only: If True, only returns agents without a folder (root-level).
         include_executions: Whether to include execution data for status calculation.
             Defaults to False for performance (UI fetches status separately).
             Set to True when accurate status/metrics are needed (e.g., agent generator).
@@ -87,13 +82,6 @@ async def list_library_agents(
         "isArchived": False,
     }
 
-    # Apply folder filter
-    if folder_id is not None:
-        where_clause["folderId"] = folder_id
-    elif include_root_only:
-        where_clause["folderId"] = None
-
-    # Build search filter if applicable
     if search_term:
         where_clause["OR"] = [
             {
@@ -646,7 +634,6 @@ async def update_library_agent(
     is_archived: Optional[bool] = None,
     is_deleted: Optional[Literal[False]] = None,
     settings: Optional[GraphSettings] = None,
-    folder_id: Optional[str] = None,
 ) -> library_model.LibraryAgent:
     """
     Updates the specified LibraryAgent record.
@@ -659,7 +646,6 @@ async def update_library_agent(
         is_favorite: Whether this agent is marked as a favorite.
         is_archived: Whether this agent is archived.
         settings: User-specific settings for this library agent.
-        folder_id: Folder ID to move agent to (empty string "" for root, None to skip).
 
     Returns:
         The updated LibraryAgent.
@@ -687,7 +673,13 @@ async def update_library_agent(
             )
         update_fields["isDeleted"] = is_deleted
     if settings is not None:
-        update_fields["settings"] = SafeJson(settings.model_dump())
+        existing_agent = await get_library_agent(id=library_agent_id, user_id=user_id)
+        current_settings_dict = (
+            existing_agent.settings.model_dump() if existing_agent.settings else {}
+        )
+        new_settings = settings.model_dump(exclude_unset=True)
+        merged_settings = {**current_settings_dict, **new_settings}
+        update_fields["settings"] = SafeJson(merged_settings)
 
     try:
         # If graph_version is provided, update to that specific version
@@ -926,788 +918,6 @@ async def add_store_agent_to_library(
         raise DatabaseError("Failed to add agent to library") from e
 
 
-##############################################
-############ Folder DB Functions #############
-##############################################
-
-MAX_FOLDER_DEPTH = 5
-
-
-async def list_folders(
-    user_id: str,
-    parent_id: Optional[str] = None,
-    include_counts: bool = True,
-) -> list[library_model.LibraryFolder]:
-    """
-    Lists folders for a user, optionally filtered by parent.
-
-    Args:
-        user_id: The ID of the user.
-        parent_id: If provided, only returns folders with this parent.
-                   If None, returns root-level folders.
-        include_counts: Whether to include agent and subfolder counts.
-
-    Returns:
-        A list of LibraryFolder objects.
-    """
-    logger.debug(f"Listing folders for user #{user_id}, parent_id={parent_id}")
-
-    try:
-        where_clause: prisma.types.LibraryFolderWhereInput = {
-            "userId": user_id,
-            "isDeleted": False,
-            "parentId": parent_id,
-        }
-
-        folders = await prisma.models.LibraryFolder.prisma().find_many(
-            where=where_clause,
-            order={"createdAt": "asc"},
-            include=(
-                {
-                    "LibraryAgents": {"where": {"isDeleted": False}},
-                    "Children": {"where": {"isDeleted": False}},
-                }
-                if include_counts
-                else None
-            ),
-        )
-
-        result = []
-        for folder in folders:
-            agent_count = len(folder.LibraryAgents) if folder.LibraryAgents else 0
-            subfolder_count = len(folder.Children) if folder.Children else 0
-            result.append(
-                library_model.LibraryFolder.from_db(
-                    folder,
-                    agent_count=agent_count,
-                    subfolder_count=subfolder_count,
-                )
-            )
-
-        return result
-
-    except prisma.errors.PrismaError as e:
-        logger.error(f"Database error listing folders: {e}")
-        raise DatabaseError("Failed to list folders") from e
-
-
-async def get_folder_tree(
-    user_id: str,
-) -> list[library_model.LibraryFolderTree]:
-    """
-    Gets the full folder tree for a user.
-
-    Args:
-        user_id: The ID of the user.
-
-    Returns:
-        A list of LibraryFolderTree objects (root folders with nested children).
-    """
-    logger.debug(f"Getting folder tree for user #{user_id}")
-
-    try:
-        # Fetch all folders for the user
-        all_folders = await prisma.models.LibraryFolder.prisma().find_many(
-            where={
-                "userId": user_id,
-                "isDeleted": False,
-            },
-            order={"createdAt": "asc"},
-            include={
-                "LibraryAgents": {"where": {"isDeleted": False}},
-                "Children": {"where": {"isDeleted": False}},
-            },
-        )
-
-        # Build a map of folder ID to folder data
-        folder_map: dict[str, library_model.LibraryFolderTree] = {}
-        for folder in all_folders:
-            agent_count = len(folder.LibraryAgents) if folder.LibraryAgents else 0
-            subfolder_count = len(folder.Children) if folder.Children else 0
-            folder_map[folder.id] = library_model.LibraryFolderTree(
-                **library_model.LibraryFolder.from_db(
-                    folder,
-                    agent_count=agent_count,
-                    subfolder_count=subfolder_count,
-                ).model_dump(),
-                children=[],
-            )
-
-        # Build the tree structure
-        root_folders: list[library_model.LibraryFolderTree] = []
-        for folder in all_folders:
-            tree_folder = folder_map[folder.id]
-            if folder.parentId and folder.parentId in folder_map:
-                folder_map[folder.parentId].children.append(tree_folder)
-            else:
-                root_folders.append(tree_folder)
-
-        return root_folders
-
-    except prisma.errors.PrismaError as e:
-        logger.error(f"Database error getting folder tree: {e}")
-        raise DatabaseError("Failed to get folder tree") from e
-
-
-async def get_folder(
-    folder_id: str,
-    user_id: str,
-) -> library_model.LibraryFolder:
-    """
-    Gets a single folder by ID.
-
-    Args:
-        folder_id: The ID of the folder.
-        user_id: The ID of the user (for ownership verification).
-
-    Returns:
-        The LibraryFolder object.
-
-    Raises:
-        NotFoundError: If the folder doesn't exist or doesn't belong to the user.
-    """
-    try:
-        folder = await prisma.models.LibraryFolder.prisma().find_first(
-            where={
-                "id": folder_id,
-                "userId": user_id,
-                "isDeleted": False,
-            },
-            include={
-                "LibraryAgents": {"where": {"isDeleted": False}},
-                "Children": {"where": {"isDeleted": False}},
-            },
-        )
-
-        if not folder:
-            raise NotFoundError(f"Folder #{folder_id} not found")
-
-        agent_count = len(folder.LibraryAgents) if folder.LibraryAgents else 0
-        subfolder_count = len(folder.Children) if folder.Children else 0
-
-        return library_model.LibraryFolder.from_db(
-            folder,
-            agent_count=agent_count,
-            subfolder_count=subfolder_count,
-        )
-
-    except prisma.errors.PrismaError as e:
-        logger.error(f"Database error getting folder: {e}")
-        raise DatabaseError("Failed to get folder") from e
-
-
-async def get_folder_depth(folder_id: str, user_id: str) -> int:
-    """
-    Calculate the depth of a folder in the hierarchy (root=0).
-
-    Args:
-        folder_id: The ID of the folder.
-        user_id: The ID of the user.
-
-    Returns:
-        The depth of the folder (0 for root-level folders).
-    """
-    depth = 0
-    current_id: str | None = folder_id
-
-    while current_id:
-        folder = await prisma.models.LibraryFolder.prisma().find_first(
-            where={
-                "id": current_id,
-                "userId": user_id,
-                "isDeleted": False,
-            }
-        )
-        if not folder:
-            break
-        if folder.parentId:
-            depth += 1
-            current_id = folder.parentId
-        else:
-            break
-
-    return depth
-
-
-async def is_descendant_of(
-    folder_id: str,
-    potential_ancestor_id: str,
-    user_id: str,
-) -> bool:
-    """
-    Check if folder_id is a descendant of potential_ancestor_id.
-
-    Args:
-        folder_id: The ID of the folder to check.
-        potential_ancestor_id: The ID of the potential ancestor.
-        user_id: The ID of the user.
-
-    Returns:
-        True if folder_id is a descendant of potential_ancestor_id.
-    """
-    current_id: str | None = folder_id
-
-    while current_id:
-        if current_id == potential_ancestor_id:
-            return True
-
-        folder = await prisma.models.LibraryFolder.prisma().find_first(
-            where={
-                "id": current_id,
-                "userId": user_id,
-                "isDeleted": False,
-            }
-        )
-        if not folder or not folder.parentId:
-            break
-        current_id = folder.parentId
-
-    return False
-
-
-async def validate_folder_operation(
-    folder_id: Optional[str],
-    target_parent_id: Optional[str],
-    user_id: str,
-    max_depth: int = MAX_FOLDER_DEPTH,
-) -> None:
-    """
-    Validate that a folder move/create operation is valid.
-
-    Args:
-        folder_id: The ID of the folder being moved (None for create).
-        target_parent_id: The target parent ID (None for root).
-        user_id: The ID of the user.
-        max_depth: Maximum allowed nesting depth.
-
-    Raises:
-        FolderValidationError: If the operation is invalid.
-    """
-    # Cannot move folder into itself
-    if folder_id and folder_id == target_parent_id:
-        raise FolderValidationError("Cannot move folder into itself")
-
-    # Check for circular reference
-    if folder_id and target_parent_id:
-        if await is_descendant_of(target_parent_id, folder_id, user_id):
-            raise FolderValidationError("Cannot move folder into its own descendant")
-
-    # Check depth limit
-    if target_parent_id:
-        parent_depth = await get_folder_depth(target_parent_id, user_id)
-        if parent_depth + 1 >= max_depth:
-            raise FolderValidationError(
-                f"Maximum folder nesting depth of {max_depth} exceeded"
-            )
-
-
-async def create_folder(
-    user_id: str,
-    name: str,
-    parent_id: Optional[str] = None,
-    icon: Optional[str] = None,
-    color: Optional[str] = None,
-) -> library_model.LibraryFolder:
-    """
-    Creates a new folder for the user.
-
-    Args:
-        user_id: The ID of the user.
-        name: The folder name.
-        parent_id: Optional parent folder ID.
-        icon: Optional icon identifier.
-        color: Optional hex color code.
-
-    Returns:
-        The created LibraryFolder.
-
-    Raises:
-        FolderValidationError: If validation fails.
-        DatabaseError: If there's a database error.
-    """
-    logger.debug(f"Creating folder '{name}' for user #{user_id}")
-
-    try:
-        # Validate operation
-        await validate_folder_operation(
-            folder_id=None,
-            target_parent_id=parent_id,
-            user_id=user_id,
-        )
-
-        # Verify parent exists if provided
-        if parent_id:
-            parent = await prisma.models.LibraryFolder.prisma().find_first(
-                where={
-                    "id": parent_id,
-                    "userId": user_id,
-                    "isDeleted": False,
-                }
-            )
-            if not parent:
-                raise NotFoundError(f"Parent folder #{parent_id} not found")
-
-        # Build data dict conditionally - don't include Parent key if no parent_id
-        create_data: dict = {
-            "name": name,
-            "User": {"connect": {"id": user_id}},
-        }
-        if icon is not None:
-            create_data["icon"] = icon
-        if color is not None:
-            create_data["color"] = color
-        if parent_id:
-            create_data["Parent"] = {"connect": {"id": parent_id}}
-
-        folder = await prisma.models.LibraryFolder.prisma().create(data=create_data)
-
-        return library_model.LibraryFolder.from_db(folder)
-
-    except prisma.errors.UniqueViolationError:
-        raise FolderValidationError(
-            "A folder with this name already exists in this location"
-        )
-    except prisma.errors.PrismaError as e:
-        logger.error(f"Database error creating folder: {e}")
-        raise DatabaseError("Failed to create folder") from e
-
-
-async def create_folder_with_unique_name(
-    user_id: str,
-    base_name: str,
-    parent_id: Optional[str] = None,
-    icon: Optional[str] = None,
-    color: Optional[str] = None,
-) -> library_model.LibraryFolder:
-    """
-    Creates a folder, appending (2), (3), etc. if name exists.
-
-    Args:
-        user_id: The ID of the user.
-        base_name: The base folder name.
-        parent_id: Optional parent folder ID.
-        icon: Optional icon identifier.
-        color: Optional hex color code.
-
-    Returns:
-        The created LibraryFolder.
-    """
-    name = base_name
-    suffix = 1
-
-    while True:
-        try:
-            return await create_folder(
-                user_id=user_id,
-                name=name,
-                parent_id=parent_id,
-                icon=icon,
-                color=color,
-            )
-        except FolderValidationError as e:
-            if "already exists" in str(e):
-                suffix += 1
-                name = f"{base_name} ({suffix})"
-            else:
-                raise
-
-
-async def update_folder(
-    folder_id: str,
-    user_id: str,
-    name: Optional[str] = None,
-    icon: Optional[str] = None,
-    color: Optional[str] = None,
-) -> library_model.LibraryFolder:
-    """
-    Updates a folder's properties.
-
-    Args:
-        folder_id: The ID of the folder to update.
-        user_id: The ID of the user.
-        name: New folder name.
-        icon: New icon identifier.
-        color: New hex color code.
-
-    Returns:
-        The updated LibraryFolder.
-
-    Raises:
-        NotFoundError: If the folder doesn't exist.
-        DatabaseError: If there's a database error.
-    """
-    logger.debug(f"Updating folder #{folder_id} for user #{user_id}")
-
-    try:
-        # Verify folder exists and belongs to user
-        existing = await prisma.models.LibraryFolder.prisma().find_first(
-            where={
-                "id": folder_id,
-                "userId": user_id,
-                "isDeleted": False,
-            }
-        )
-        if not existing:
-            raise NotFoundError(f"Folder #{folder_id} not found")
-
-        update_data: prisma.types.LibraryFolderUpdateInput = {}
-        if name is not None:
-            update_data["name"] = name
-        if icon is not None:
-            update_data["icon"] = icon
-        if color is not None:
-            update_data["color"] = color
-
-        if not update_data:
-            return await get_folder(folder_id, user_id)
-
-        folder = await prisma.models.LibraryFolder.prisma().update(
-            where={"id": folder_id},
-            data=update_data,
-            include={
-                "LibraryAgents": {"where": {"isDeleted": False}},
-                "Children": {"where": {"isDeleted": False}},
-            },
-        )
-
-        if not folder:
-            raise NotFoundError(f"Folder #{folder_id} not found")
-
-        agent_count = len(folder.LibraryAgents) if folder.LibraryAgents else 0
-        subfolder_count = len(folder.Children) if folder.Children else 0
-
-        return library_model.LibraryFolder.from_db(
-            folder,
-            agent_count=agent_count,
-            subfolder_count=subfolder_count,
-        )
-
-    except prisma.errors.UniqueViolationError:
-        raise FolderValidationError(
-            "A folder with this name already exists in this location"
-        )
-    except prisma.errors.PrismaError as e:
-        logger.error(f"Database error updating folder: {e}")
-        raise DatabaseError("Failed to update folder") from e
-
-
-async def move_folder(
-    folder_id: str,
-    user_id: str,
-    target_parent_id: Optional[str],
-) -> library_model.LibraryFolder:
-    """
-    Moves a folder to a new parent.
-
-    Args:
-        folder_id: The ID of the folder to move.
-        user_id: The ID of the user.
-        target_parent_id: The target parent ID (None for root).
-
-    Returns:
-        The moved LibraryFolder.
-
-    Raises:
-        FolderValidationError: If the move is invalid.
-        NotFoundError: If the folder doesn't exist.
-        DatabaseError: If there's a database error.
-    """
-    logger.debug(f"Moving folder #{folder_id} to parent #{target_parent_id}")
-
-    try:
-        # Validate operation
-        await validate_folder_operation(
-            folder_id=folder_id,
-            target_parent_id=target_parent_id,
-            user_id=user_id,
-        )
-
-        # Verify folder exists
-        existing = await prisma.models.LibraryFolder.prisma().find_first(
-            where={
-                "id": folder_id,
-                "userId": user_id,
-                "isDeleted": False,
-            }
-        )
-        if not existing:
-            raise NotFoundError(f"Folder #{folder_id} not found")
-
-        # Verify target parent exists if provided
-        if target_parent_id:
-            parent = await prisma.models.LibraryFolder.prisma().find_first(
-                where={
-                    "id": target_parent_id,
-                    "userId": user_id,
-                    "isDeleted": False,
-                }
-            )
-            if not parent:
-                raise NotFoundError(
-                    f"Target parent folder #{target_parent_id} not found"
-                )
-
-        folder = await prisma.models.LibraryFolder.prisma().update(
-            where={"id": folder_id},
-            data={
-                "parentId": target_parent_id,
-            },
-            include={
-                "LibraryAgents": {"where": {"isDeleted": False}},
-                "Children": {"where": {"isDeleted": False}},
-            },
-        )
-
-        if not folder:
-            raise NotFoundError(f"Folder #{folder_id} not found")
-
-        agent_count = len(folder.LibraryAgents) if folder.LibraryAgents else 0
-        subfolder_count = len(folder.Children) if folder.Children else 0
-
-        return library_model.LibraryFolder.from_db(
-            folder,
-            agent_count=agent_count,
-            subfolder_count=subfolder_count,
-        )
-
-    except prisma.errors.UniqueViolationError:
-        raise FolderValidationError(
-            "A folder with this name already exists in this location"
-        )
-    except prisma.errors.PrismaError as e:
-        logger.error(f"Database error moving folder: {e}")
-        raise DatabaseError("Failed to move folder") from e
-
-
-async def delete_folder(
-    folder_id: str,
-    user_id: str,
-    soft_delete: bool = True,
-) -> None:
-    """
-    Deletes a folder and all its contents (cascade).
-
-    Args:
-        folder_id: The ID of the folder to delete.
-        user_id: The ID of the user.
-        soft_delete: If True, soft-deletes; otherwise hard-deletes.
-
-    Raises:
-        NotFoundError: If the folder doesn't exist.
-        DatabaseError: If there's a database error.
-    """
-    logger.debug(f"Deleting folder #{folder_id} for user #{user_id}")
-
-    try:
-        # Verify folder exists
-        existing = await prisma.models.LibraryFolder.prisma().find_first(
-            where={
-                "id": folder_id,
-                "userId": user_id,
-                "isDeleted": False,
-            }
-        )
-        if not existing:
-            raise NotFoundError(f"Folder #{folder_id} not found")
-
-        async with transaction() as tx:
-            # Get all descendant folders recursively
-            descendant_ids = await _get_descendant_folder_ids(folder_id, user_id, tx)
-            all_folder_ids = [folder_id] + descendant_ids
-
-            if soft_delete:
-                # Soft-delete all agents in these folders
-                await prisma.models.LibraryAgent.prisma(tx).update_many(
-                    where={
-                        "folderId": {"in": all_folder_ids},
-                        "userId": user_id,
-                    },
-                    data={"isDeleted": True},
-                )
-
-                # Soft-delete all folders
-                await prisma.models.LibraryFolder.prisma(tx).update_many(
-                    where={
-                        "id": {"in": all_folder_ids},
-                        "userId": user_id,
-                    },
-                    data={"isDeleted": True},
-                )
-            else:
-                # Move agents to root (or could hard-delete them)
-                await prisma.models.LibraryAgent.prisma(tx).update_many(
-                    where={
-                        "folderId": {"in": all_folder_ids},
-                        "userId": user_id,
-                    },
-                    data={"folderId": None},
-                )
-
-                # Hard-delete folders (children first due to FK constraints)
-                for fid in reversed(all_folder_ids):
-                    await prisma.models.LibraryFolder.prisma(tx).delete(
-                        where={"id": fid}
-                    )
-
-    except prisma.errors.PrismaError as e:
-        logger.error(f"Database error deleting folder: {e}")
-        raise DatabaseError("Failed to delete folder") from e
-
-
-async def _get_descendant_folder_ids(
-    folder_id: str,
-    user_id: str,
-    tx: Optional[prisma.Prisma] = None,
-) -> list[str]:
-    """
-    Recursively get all descendant folder IDs.
-
-    Args:
-        folder_id: The ID of the parent folder.
-        user_id: The ID of the user.
-        tx: Optional transaction.
-
-    Returns:
-        A list of descendant folder IDs.
-    """
-    prisma_client = prisma.models.LibraryFolder.prisma(tx)
-    children = await prisma_client.find_many(
-        where={
-            "parentId": folder_id,
-            "userId": user_id,
-            "isDeleted": False,
-        }
-    )
-
-    result: list[str] = []
-    for child in children:
-        result.append(child.id)
-        result.extend(await _get_descendant_folder_ids(child.id, user_id, tx))
-
-    return result
-
-
-async def move_agent_to_folder(
-    library_agent_id: str,
-    folder_id: Optional[str],
-    user_id: str,
-) -> library_model.LibraryAgent:
-    """
-    Moves a library agent to a folder.
-
-    Args:
-        library_agent_id: The ID of the library agent.
-        folder_id: The target folder ID (None for root).
-        user_id: The ID of the user.
-
-    Returns:
-        The updated LibraryAgent.
-
-    Raises:
-        NotFoundError: If the agent or folder doesn't exist.
-        DatabaseError: If there's a database error.
-    """
-    logger.debug(f"Moving agent #{library_agent_id} to folder #{folder_id}")
-
-    try:
-        # Verify agent exists
-        agent = await prisma.models.LibraryAgent.prisma().find_first(
-            where={
-                "id": library_agent_id,
-                "userId": user_id,
-                "isDeleted": False,
-            }
-        )
-        if not agent:
-            raise NotFoundError(f"Library agent #{library_agent_id} not found")
-
-        # Verify folder exists if provided
-        if folder_id:
-            folder = await prisma.models.LibraryFolder.prisma().find_first(
-                where={
-                    "id": folder_id,
-                    "userId": user_id,
-                    "isDeleted": False,
-                }
-            )
-            if not folder:
-                raise NotFoundError(f"Folder #{folder_id} not found")
-
-        await prisma.models.LibraryAgent.prisma().update(
-            where={"id": library_agent_id},
-            data={"folderId": folder_id},
-        )
-
-        return await get_library_agent(library_agent_id, user_id)
-
-    except prisma.errors.PrismaError as e:
-        logger.error(f"Database error moving agent to folder: {e}")
-        raise DatabaseError("Failed to move agent to folder") from e
-
-
-async def bulk_move_agents_to_folder(
-    agent_ids: list[str],
-    folder_id: Optional[str],
-    user_id: str,
-) -> list[library_model.LibraryAgent]:
-    """
-    Moves multiple library agents to a folder.
-
-    Args:
-        agent_ids: The IDs of the library agents.
-        folder_id: The target folder ID (None for root).
-        user_id: The ID of the user.
-
-    Returns:
-        The updated LibraryAgents.
-
-    Raises:
-        NotFoundError: If any agent or the folder doesn't exist.
-        DatabaseError: If there's a database error.
-    """
-    logger.debug(f"Bulk moving {len(agent_ids)} agents to folder #{folder_id}")
-
-    try:
-        # Verify folder exists if provided
-        if folder_id:
-            folder = await prisma.models.LibraryFolder.prisma().find_first(
-                where={
-                    "id": folder_id,
-                    "userId": user_id,
-                    "isDeleted": False,
-                }
-            )
-            if not folder:
-                raise NotFoundError(f"Folder #{folder_id} not found")
-
-        # Update all agents
-        await prisma.models.LibraryAgent.prisma().update_many(
-            where={
-                "id": {"in": agent_ids},
-                "userId": user_id,
-                "isDeleted": False,
-            },
-            data={"folderId": folder_id},
-        )
-
-        # Fetch and return updated agents
-        agents = await prisma.models.LibraryAgent.prisma().find_many(
-            where={
-                "id": {"in": agent_ids},
-                "userId": user_id,
-            },
-            include=library_agent_include(
-                user_id, include_nodes=False, include_executions=False
-            ),
-        )
-
-        return [library_model.LibraryAgent.from_db(agent) for agent in agents]
-
-    except prisma.errors.PrismaError as e:
-        logger.error(f"Database error bulk moving agents to folder: {e}")
-        raise DatabaseError("Failed to bulk move agents to folder") from e
-
-
 ##############################################
 ########### Presets DB Functions #############
 ##############################################

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

@@ -1,4 +0,0 @@
-class FolderValidationError(Exception):
-    """Raised when folder operations fail validation."""
-
-    pass

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

@@ -26,95 +26,6 @@ class LibraryAgentStatus(str, Enum):
     ERROR = "ERROR"
 
 
-# === Folder Models ===
-
-
-class LibraryFolder(pydantic.BaseModel):
-    """Represents a folder for organizing library agents."""
-
-    id: str
-    user_id: str
-    name: str
-    icon: str | None = None
-    color: str | None = None
-    parent_id: str | None = None
-    created_at: datetime.datetime
-    updated_at: datetime.datetime
-    agent_count: int = 0  # Direct agents in folder
-    subfolder_count: int = 0  # Direct child folders
-
-    @staticmethod
-    def from_db(
-        folder: prisma.models.LibraryFolder,
-        agent_count: int = 0,
-        subfolder_count: int = 0,
-    ) -> "LibraryFolder":
-        """Factory method that constructs a LibraryFolder from a Prisma model."""
-        return LibraryFolder(
-            id=folder.id,
-            user_id=folder.userId,
-            name=folder.name,
-            icon=folder.icon,
-            color=folder.color,
-            parent_id=folder.parentId,
-            created_at=folder.createdAt,
-            updated_at=folder.updatedAt,
-            agent_count=agent_count,
-            subfolder_count=subfolder_count,
-        )
-
-
-class LibraryFolderTree(LibraryFolder):
-    """Folder with nested children for tree view."""
-
-    children: list["LibraryFolderTree"] = []
-
-
-class FolderCreateRequest(pydantic.BaseModel):
-    """Request model for creating a folder."""
-
-    name: str = pydantic.Field(..., min_length=1, max_length=100)
-    icon: str | None = None
-    color: str | None = pydantic.Field(
-        None, pattern=r"^#[0-9A-Fa-f]{6}$", description="Hex color code (#RRGGBB)"
-    )
-    parent_id: str | None = None
-
-
-class FolderUpdateRequest(pydantic.BaseModel):
-    """Request model for updating a folder."""
-
-    name: str | None = pydantic.Field(None, min_length=1, max_length=100)
-    icon: str | None = None
-    color: str | None = None
-
-
-class FolderMoveRequest(pydantic.BaseModel):
-    """Request model for moving a folder to a new parent."""
-
-    target_parent_id: str | None = None  # None = move to root
-
-
-class BulkMoveAgentsRequest(pydantic.BaseModel):
-    """Request model for moving multiple agents to a folder."""
-
-    agent_ids: list[str]
-    folder_id: str | None = None  # None = move to root
-
-
-class FolderListResponse(pydantic.BaseModel):
-    """Response schema for a list of folders."""
-
-    folders: list[LibraryFolder]
-    pagination: Pagination
-
-
-class FolderTreeResponse(pydantic.BaseModel):
-    """Response schema for folder tree structure."""
-
-    tree: list[LibraryFolderTree]
-
-
 class MarketplaceListingCreator(pydantic.BaseModel):
     """Creator information for a marketplace listing."""
 
@@ -209,9 +120,6 @@ class LibraryAgent(pydantic.BaseModel):
     can_access_graph: bool
     is_latest_version: bool
     is_favorite: bool
-    folder_id: str | None = None
-    folder_name: str | None = None  # Denormalized for display
-
     recommended_schedule_cron: str | None = None
     settings: GraphSettings = pydantic.Field(default_factory=GraphSettings)
     marketplace_listing: Optional["MarketplaceListing"] = None
@@ -320,10 +228,6 @@ class LibraryAgent(pydantic.BaseModel):
                 creator=creator_data,
             )
 
-        # Folder information
-        folder_id = agent.folderId
-        folder_name = agent.Folder.name if agent.Folder else None
-
         return LibraryAgent(
             id=agent.id,
             graph_id=agent.agentGraphId,
@@ -355,8 +259,6 @@ class LibraryAgent(pydantic.BaseModel):
             can_access_graph=can_access_graph,
             is_latest_version=is_latest_version,
             is_favorite=agent.isFavorite,
-            folder_id=folder_id,
-            folder_name=folder_name,
             recommended_schedule_cron=agent.AgentGraph.recommendedScheduleCron,
             settings=_parse_settings(agent.settings),
             marketplace_listing=marketplace_listing_data,
@@ -568,7 +470,3 @@ class LibraryAgentUpdateRequest(pydantic.BaseModel):
     settings: Optional[GraphSettings] = pydantic.Field(
         default=None, description="User-specific settings for this library agent"
     )
-    folder_id: Optional[str] = pydantic.Field(
-        default=None,
-        description="Folder ID to move agent to (empty string for root)",
-    )

autogpt_platform/backend/backend/api/features/library/routes/__init__.py

@@ -1,11 +1,9 @@
 import fastapi
 
 from .agents import router as agents_router
-from .folders import router as folders_router
 from .presets import router as presets_router
 
 router = fastapi.APIRouter()
 
 router.include_router(presets_router)
-router.include_router(folders_router)
 router.include_router(agents_router)

autogpt_platform/backend/backend/api/features/library/routes/agents.py

@@ -41,34 +41,17 @@ async def list_library_agents(
         ge=1,
         description="Number of agents per page (must be >= 1)",
     ),
-    folder_id: Optional[str] = Query(
-        None,
-        description="Filter by folder ID",
-    ),
-    include_root_only: bool = Query(
-        False,
-        description="Only return agents without a folder (root-level agents)",
-    ),
 ) -> library_model.LibraryAgentResponse:
     """
     Get all agents in the user's library (both created and saved).
     """
-    try:
-        return await library_db.list_library_agents(
-            user_id=user_id,
-            search_term=search_term,
-            sort_by=sort_by,
-            page=page,
-            page_size=page_size,
-            folder_id=folder_id,
-            include_root_only=include_root_only,
-        )
-    except Exception as e:
-        logger.error(f"Could not list library agents for user #{user_id}: {e}")
-        raise HTTPException(
-            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
-            detail=str(e),
-        ) from e
+    return await library_db.list_library_agents(
+        user_id=user_id,
+        search_term=search_term,
+        sort_by=sort_by,
+        page=page,
+        page_size=page_size,
+    )
 
 
 @router.get(
@@ -177,34 +160,15 @@ async def update_library_agent(
     """
     Update the library agent with the given fields.
     """
-    try:
-        return await library_db.update_library_agent(
-            library_agent_id=library_agent_id,
-            user_id=user_id,
-            auto_update_version=payload.auto_update_version,
-            graph_version=payload.graph_version,
-            is_favorite=payload.is_favorite,
-            is_archived=payload.is_archived,
-            settings=payload.settings,
-            folder_id=payload.folder_id,
-        )
-    except NotFoundError as e:
-        raise HTTPException(
-            status_code=status.HTTP_404_NOT_FOUND,
-            detail=str(e),
-        ) from e
-    except DatabaseError as e:
-        logger.error(f"Database error while updating library agent: {e}")
-        raise HTTPException(
-            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
-            detail={"message": str(e), "hint": "Verify DB connection."},
-        ) from e
-    except Exception as e:
-        logger.error(f"Unexpected error while updating library agent: {e}")
-        raise HTTPException(
-            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
-            detail={"message": str(e), "hint": "Check server logs."},
-        ) from e
+    return await library_db.update_library_agent(
+        library_agent_id=library_agent_id,
+        user_id=user_id,
+        auto_update_version=payload.auto_update_version,
+        graph_version=payload.graph_version,
+        is_favorite=payload.is_favorite,
+        is_archived=payload.is_archived,
+        settings=payload.settings,
+    )
 
 
 @router.delete(

autogpt_platform/backend/backend/api/features/library/routes/folders.py

@@ -1,408 +0,0 @@
-import logging
-from typing import Optional
-
-import autogpt_libs.auth as autogpt_auth_lib
-from fastapi import APIRouter, HTTPException, Query, Security, status
-from fastapi.responses import Response
-
-from backend.util.exceptions import DatabaseError, NotFoundError
-
-from .. import db as library_db
-from .. import model as library_model
-
-logger = logging.getLogger(__name__)
-
-router = APIRouter(
-    prefix="/folders",
-    tags=["library", "folders", "private"],
-    dependencies=[Security(autogpt_auth_lib.requires_user)],
-)
-
-
-@router.get(
-    "",
-    summary="List Library Folders",
-    response_model=library_model.FolderListResponse,
-    responses={
-        200: {"description": "List of folders"},
-        500: {"description": "Server error"},
-    },
-)
-async def list_folders(
-    user_id: str = Security(autogpt_auth_lib.get_user_id),
-    parent_id: Optional[str] = Query(
-        None,
-        description="Filter by parent folder ID. If not provided, returns root-level folders.",
-    ),
-    include_counts: bool = Query(
-        True,
-        description="Include agent and subfolder counts",
-    ),
-) -> library_model.FolderListResponse:
-    """
-    List folders for the authenticated user.
-
-    Args:
-        user_id: ID of the authenticated user.
-        parent_id: Optional parent folder ID to filter by.
-        include_counts: Whether to include agent and subfolder counts.
-
-    Returns:
-        A FolderListResponse containing folders.
-    """
-    try:
-        folders = await library_db.list_folders(
-            user_id=user_id,
-            parent_id=parent_id,
-            include_counts=include_counts,
-        )
-        return library_model.FolderListResponse(
-            folders=folders,
-            pagination=library_model.Pagination(
-                total_items=len(folders),
-                total_pages=1,
-                current_page=1,
-                page_size=len(folders),
-            ),
-        )
-    except Exception as e:
-        logger.error(f"Could not list folders for user #{user_id}: {e}")
-        raise HTTPException(
-            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
-            detail=str(e),
-        ) from e
-
-
-@router.get(
-    "/tree",
-    summary="Get Folder Tree",
-    response_model=library_model.FolderTreeResponse,
-    responses={
-        200: {"description": "Folder tree structure"},
-        500: {"description": "Server error"},
-    },
-)
-async def get_folder_tree(
-    user_id: str = Security(autogpt_auth_lib.get_user_id),
-) -> library_model.FolderTreeResponse:
-    """
-    Get the full folder tree for the authenticated user.
-
-    Args:
-        user_id: ID of the authenticated user.
-
-    Returns:
-        A FolderTreeResponse containing the nested folder structure.
-    """
-    try:
-        tree = await library_db.get_folder_tree(user_id=user_id)
-        return library_model.FolderTreeResponse(tree=tree)
-    except Exception as e:
-        logger.error(f"Could not get folder tree for user #{user_id}: {e}")
-        raise HTTPException(
-            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
-            detail=str(e),
-        ) from e
-
-
-@router.get(
-    "/{folder_id}",
-    summary="Get Folder",
-    response_model=library_model.LibraryFolder,
-    responses={
-        200: {"description": "Folder details"},
-        404: {"description": "Folder not found"},
-        500: {"description": "Server error"},
-    },
-)
-async def get_folder(
-    folder_id: str,
-    user_id: str = Security(autogpt_auth_lib.get_user_id),
-) -> library_model.LibraryFolder:
-    """
-    Get a specific folder.
-
-    Args:
-        folder_id: ID of the folder to retrieve.
-        user_id: ID of the authenticated user.
-
-    Returns:
-        The requested LibraryFolder.
-    """
-    try:
-        return await library_db.get_folder(folder_id=folder_id, user_id=user_id)
-    except NotFoundError as e:
-        raise HTTPException(
-            status_code=status.HTTP_404_NOT_FOUND,
-            detail=str(e),
-        ) from e
-    except Exception as e:
-        logger.error(f"Could not get folder #{folder_id}: {e}")
-        raise HTTPException(
-            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
-            detail=str(e),
-        ) from e
-
-
-@router.post(
-    "",
-    summary="Create Folder",
-    status_code=status.HTTP_201_CREATED,
-    response_model=library_model.LibraryFolder,
-    responses={
-        201: {"description": "Folder created successfully"},
-        400: {"description": "Validation error"},
-        404: {"description": "Parent folder not found"},
-        409: {"description": "Folder name conflict"},
-        500: {"description": "Server error"},
-    },
-)
-async def create_folder(
-    payload: library_model.FolderCreateRequest,
-    user_id: str = Security(autogpt_auth_lib.get_user_id),
-) -> library_model.LibraryFolder:
-    """
-    Create a new folder.
-
-    Args:
-        payload: The folder creation request.
-        user_id: ID of the authenticated user.
-
-    Returns:
-        The created LibraryFolder.
-    """
-    try:
-        return await library_db.create_folder(
-            user_id=user_id,
-            name=payload.name,
-            parent_id=payload.parent_id,
-            icon=payload.icon,
-            color=payload.color,
-        )
-    except library_db.FolderValidationError as e:
-        if "already exists" in str(e):
-            raise HTTPException(
-                status_code=status.HTTP_409_CONFLICT,
-                detail=str(e),
-            ) from e
-        raise HTTPException(
-            status_code=status.HTTP_400_BAD_REQUEST,
-            detail=str(e),
-        ) from e
-    except NotFoundError as e:
-        raise HTTPException(
-            status_code=status.HTTP_404_NOT_FOUND,
-            detail=str(e),
-        ) from e
-    except DatabaseError as e:
-        logger.error(f"Database error creating folder: {e}")
-        raise HTTPException(
-            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
-            detail=str(e),
-        ) from e
-
-
-@router.patch(
-    "/{folder_id}",
-    summary="Update Folder",
-    response_model=library_model.LibraryFolder,
-    responses={
-        200: {"description": "Folder updated successfully"},
-        400: {"description": "Validation error"},
-        404: {"description": "Folder not found"},
-        409: {"description": "Folder name conflict"},
-        500: {"description": "Server error"},
-    },
-)
-async def update_folder(
-    folder_id: str,
-    payload: library_model.FolderUpdateRequest,
-    user_id: str = Security(autogpt_auth_lib.get_user_id),
-) -> library_model.LibraryFolder:
-    """
-    Update a folder's properties.
-
-    Args:
-        folder_id: ID of the folder to update.
-        payload: The folder update request.
-        user_id: ID of the authenticated user.
-
-    Returns:
-        The updated LibraryFolder.
-    """
-    try:
-        return await library_db.update_folder(
-            folder_id=folder_id,
-            user_id=user_id,
-            name=payload.name,
-            icon=payload.icon,
-            color=payload.color,
-        )
-    except library_db.FolderValidationError as e:
-        if "already exists" in str(e):
-            raise HTTPException(
-                status_code=status.HTTP_409_CONFLICT,
-                detail=str(e),
-            ) from e
-        raise HTTPException(
-            status_code=status.HTTP_400_BAD_REQUEST,
-            detail=str(e),
-        ) from e
-    except NotFoundError as e:
-        raise HTTPException(
-            status_code=status.HTTP_404_NOT_FOUND,
-            detail=str(e),
-        ) from e
-    except DatabaseError as e:
-        logger.error(f"Database error updating folder #{folder_id}: {e}")
-        raise HTTPException(
-            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
-            detail=str(e),
-        ) from e
-
-
-@router.post(
-    "/{folder_id}/move",
-    summary="Move Folder",
-    response_model=library_model.LibraryFolder,
-    responses={
-        200: {"description": "Folder moved successfully"},
-        400: {"description": "Validation error (circular reference, depth exceeded)"},
-        404: {"description": "Folder or target parent not found"},
-        409: {"description": "Folder name conflict in target location"},
-        500: {"description": "Server error"},
-    },
-)
-async def move_folder(
-    folder_id: str,
-    payload: library_model.FolderMoveRequest,
-    user_id: str = Security(autogpt_auth_lib.get_user_id),
-) -> library_model.LibraryFolder:
-    """
-    Move a folder to a new parent.
-
-    Args:
-        folder_id: ID of the folder to move.
-        payload: The move request with target parent.
-        user_id: ID of the authenticated user.
-
-    Returns:
-        The moved LibraryFolder.
-    """
-    try:
-        return await library_db.move_folder(
-            folder_id=folder_id,
-            user_id=user_id,
-            target_parent_id=payload.target_parent_id,
-        )
-    except library_db.FolderValidationError as e:
-        if "already exists" in str(e):
-            raise HTTPException(
-                status_code=status.HTTP_409_CONFLICT,
-                detail=str(e),
-            ) from e
-        raise HTTPException(
-            status_code=status.HTTP_400_BAD_REQUEST,
-            detail=str(e),
-        ) from e
-    except NotFoundError as e:
-        raise HTTPException(
-            status_code=status.HTTP_404_NOT_FOUND,
-            detail=str(e),
-        ) from e
-    except DatabaseError as e:
-        logger.error(f"Database error moving folder #{folder_id}: {e}")
-        raise HTTPException(
-            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
-            detail=str(e),
-        ) from e
-
-
-@router.delete(
-    "/{folder_id}",
-    summary="Delete Folder",
-    status_code=status.HTTP_204_NO_CONTENT,
-    responses={
-        204: {"description": "Folder deleted successfully"},
-        404: {"description": "Folder not found"},
-        500: {"description": "Server error"},
-    },
-)
-async def delete_folder(
-    folder_id: str,
-    user_id: str = Security(autogpt_auth_lib.get_user_id),
-) -> Response:
-    """
-    Soft-delete a folder and all its contents.
-
-    Args:
-        folder_id: ID of the folder to delete.
-        user_id: ID of the authenticated user.
-
-    Returns:
-        204 No Content if successful.
-    """
-    try:
-        await library_db.delete_folder(
-            folder_id=folder_id,
-            user_id=user_id,
-            soft_delete=True,
-        )
-        return Response(status_code=status.HTTP_204_NO_CONTENT)
-    except NotFoundError as e:
-        raise HTTPException(
-            status_code=status.HTTP_404_NOT_FOUND,
-            detail=str(e),
-        ) from e
-    except DatabaseError as e:
-        logger.error(f"Database error deleting folder #{folder_id}: {e}")
-        raise HTTPException(
-            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
-            detail=str(e),
-        ) from e
-
-
-# === Bulk Agent Operations ===
-
-
-@router.post(
-    "/agents/bulk-move",
-    summary="Bulk Move Agents",
-    response_model=list[library_model.LibraryAgent],
-    responses={
-        200: {"description": "Agents moved successfully"},
-        404: {"description": "Folder not found"},
-        500: {"description": "Server error"},
-    },
-)
-async def bulk_move_agents(
-    payload: library_model.BulkMoveAgentsRequest,
-    user_id: str = Security(autogpt_auth_lib.get_user_id),
-) -> list[library_model.LibraryAgent]:
-    """
-    Move multiple agents to a folder.
-
-    Args:
-        payload: The bulk move request with agent IDs and target folder.
-        user_id: ID of the authenticated user.
-
-    Returns:
-        The updated LibraryAgents.
-    """
-    try:
-        return await library_db.bulk_move_agents_to_folder(
-            agent_ids=payload.agent_ids,
-            folder_id=payload.folder_id,
-            user_id=user_id,
-        )
-    except NotFoundError as e:
-        raise HTTPException(
-            status_code=status.HTTP_404_NOT_FOUND,
-            detail=str(e),
-        ) from e
-    except DatabaseError as e:
-        logger.error(f"Database error bulk moving agents: {e}")
-        raise HTTPException(
-            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
-            detail=str(e),
-        ) from e

autogpt_platform/backend/backend/blocks/claude_code.py

@@ -1,10 +1,10 @@
 import json
 import shlex
 import uuid
-from typing import TYPE_CHECKING, Literal, Optional
+from typing import Literal, Optional
 
 from e2b import AsyncSandbox as BaseAsyncSandbox
-from pydantic import SecretStr
+from pydantic import BaseModel, SecretStr
 
 from backend.blocks._base import (
     Block,
@@ -20,13 +20,6 @@ from backend.data.model import (
     SchemaField,
 )
 from backend.integrations.providers import ProviderName
-from backend.util.sandbox_files import (
-    SandboxFileOutput,
-    extract_and_store_sandbox_files,
-)
-
-if TYPE_CHECKING:
-    from backend.executor.utils import ExecutionContext
 
 
 class ClaudeCodeExecutionError(Exception):
@@ -181,15 +174,22 @@ class ClaudeCodeBlock(Block):
             advanced=True,
         )
 
+    class FileOutput(BaseModel):
+        """A file extracted from the sandbox."""
+
+        path: str
+        relative_path: str  # Path relative to working directory (for GitHub, etc.)
+        name: str
+        content: str
+
     class Output(BlockSchemaOutput):
         response: str = SchemaField(
             description="The output/response from Claude Code execution"
         )
-        files: list[SandboxFileOutput] = SchemaField(
+        files: list["ClaudeCodeBlock.FileOutput"] = SchemaField(
             description=(
                 "List of text files created/modified by Claude Code during this execution. "
-                "Each file has 'path', 'relative_path', 'name', 'content', and 'workspace_ref' fields. "
-                "workspace_ref contains a workspace:// URI if the file was stored to workspace."
+                "Each file has 'path', 'relative_path', 'name', and 'content' fields."
             )
         )
         conversation_history: str = SchemaField(
@@ -252,7 +252,6 @@ class ClaudeCodeBlock(Block):
                             "relative_path": "index.html",
                             "name": "index.html",
                             "content": "<html>Hello World</html>",
-                            "workspace_ref": None,
                         }
                     ],
                 ),
@@ -268,12 +267,11 @@ class ClaudeCodeBlock(Block):
                 "execute_claude_code": lambda *args, **kwargs: (
                     "Created index.html with hello world content",  # response
                     [
-                        SandboxFileOutput(
+                        ClaudeCodeBlock.FileOutput(
                             path="/home/user/index.html",
                             relative_path="index.html",
                             name="index.html",
                             content="<html>Hello World</html>",
-                            workspace_ref=None,
                         )
                     ],  # files
                     "User: Create a hello world HTML file\n"
@@ -296,8 +294,7 @@ class ClaudeCodeBlock(Block):
         existing_sandbox_id: str,
         conversation_history: str,
         dispose_sandbox: bool,
-        execution_context: "ExecutionContext",
-    ) -> tuple[str, list[SandboxFileOutput], str, str, str]:
+    ) -> tuple[str, list["ClaudeCodeBlock.FileOutput"], str, str, str]:
         """
         Execute Claude Code in an E2B sandbox.
 
@@ -452,18 +449,14 @@ class ClaudeCodeBlock(Block):
                 else:
                     new_conversation_history = turn_entry
 
-            # Extract files created/modified during this run and store to workspace
-            sandbox_files = await extract_and_store_sandbox_files(
-                sandbox=sandbox,
-                working_directory=working_directory,
-                execution_context=execution_context,
-                since_timestamp=start_timestamp,
-                text_only=True,
+            # Extract files created/modified during this run
+            files = await self._extract_files(
+                sandbox, working_directory, start_timestamp
             )
 
             return (
                 response,
-                sandbox_files,  # Already SandboxFileOutput objects
+                files,
                 new_conversation_history,
                 current_session_id,
                 sandbox_id,
@@ -478,6 +471,140 @@ class ClaudeCodeBlock(Block):
             if dispose_sandbox and sandbox:
                 await sandbox.kill()
 
+    async def _extract_files(
+        self,
+        sandbox: BaseAsyncSandbox,
+        working_directory: str,
+        since_timestamp: str | None = None,
+    ) -> list["ClaudeCodeBlock.FileOutput"]:
+        """
+        Extract text files created/modified during this Claude Code execution.
+
+        Args:
+            sandbox: The E2B sandbox instance
+            working_directory: Directory to search for files
+            since_timestamp: ISO timestamp - only return files modified after this time
+
+        Returns:
+            List of FileOutput objects with path, relative_path, name, and content
+        """
+        files: list[ClaudeCodeBlock.FileOutput] = []
+
+        # Text file extensions we can safely read as text
+        text_extensions = {
+            ".txt",
+            ".md",
+            ".html",
+            ".htm",
+            ".css",
+            ".js",
+            ".ts",
+            ".jsx",
+            ".tsx",
+            ".json",
+            ".xml",
+            ".yaml",
+            ".yml",
+            ".toml",
+            ".ini",
+            ".cfg",
+            ".conf",
+            ".py",
+            ".rb",
+            ".php",
+            ".java",
+            ".c",
+            ".cpp",
+            ".h",
+            ".hpp",
+            ".cs",
+            ".go",
+            ".rs",
+            ".swift",
+            ".kt",
+            ".scala",
+            ".sh",
+            ".bash",
+            ".zsh",
+            ".sql",
+            ".graphql",
+            ".env",
+            ".gitignore",
+            ".dockerfile",
+            "Dockerfile",
+            ".vue",
+            ".svelte",
+            ".astro",
+            ".mdx",
+            ".rst",
+            ".tex",
+            ".csv",
+            ".log",
+        }
+
+        try:
+            # List files recursively using find command
+            # Exclude node_modules and .git directories, but allow hidden files
+            # like .env and .gitignore (they're filtered by text_extensions later)
+            # Filter by timestamp to only get files created/modified during this run
+            safe_working_dir = shlex.quote(working_directory)
+            timestamp_filter = ""
+            if since_timestamp:
+                timestamp_filter = f"-newermt {shlex.quote(since_timestamp)} "
+            find_result = await sandbox.commands.run(
+                f"find {safe_working_dir} -type f "
+                f"{timestamp_filter}"
+                f"-not -path '*/node_modules/*' "
+                f"-not -path '*/.git/*' "
+                f"2>/dev/null"
+            )
+
+            if find_result.stdout:
+                for file_path in find_result.stdout.strip().split("\n"):
+                    if not file_path:
+                        continue
+
+                    # Check if it's a text file we can read
+                    is_text = any(
+                        file_path.endswith(ext) for ext in text_extensions
+                    ) or file_path.endswith("Dockerfile")
+
+                    if is_text:
+                        try:
+                            content = await sandbox.files.read(file_path)
+                            # Handle bytes or string
+                            if isinstance(content, bytes):
+                                content = content.decode("utf-8", errors="replace")
+
+                            # Extract filename from path
+                            file_name = file_path.split("/")[-1]
+
+                            # Calculate relative path by stripping working directory
+                            relative_path = file_path
+                            if file_path.startswith(working_directory):
+                                relative_path = file_path[len(working_directory) :]
+                                # Remove leading slash if present
+                                if relative_path.startswith("/"):
+                                    relative_path = relative_path[1:]
+
+                            files.append(
+                                ClaudeCodeBlock.FileOutput(
+                                    path=file_path,
+                                    relative_path=relative_path,
+                                    name=file_name,
+                                    content=content,
+                                )
+                            )
+                        except Exception:
+                            # Skip files that can't be read
+                            pass
+
+        except Exception:
+            # If file extraction fails, return empty results
+            pass
+
+        return files
+
     def _escape_prompt(self, prompt: str) -> str:
         """Escape the prompt for safe shell execution."""
         # Use single quotes and escape any single quotes in the prompt
@@ -490,7 +617,6 @@ class ClaudeCodeBlock(Block):
         *,
         e2b_credentials: APIKeyCredentials,
         anthropic_credentials: APIKeyCredentials,
-        execution_context: "ExecutionContext",
         **kwargs,
     ) -> BlockOutput:
         try:
@@ -511,7 +637,6 @@ class ClaudeCodeBlock(Block):
                 existing_sandbox_id=input_data.sandbox_id,
                 conversation_history=input_data.conversation_history,
                 dispose_sandbox=input_data.dispose_sandbox,
-                execution_context=execution_context,
             )
 
             yield "response", response

autogpt_platform/backend/backend/blocks/code_executor.py

@@ -1,5 +1,5 @@
 from enum import Enum
-from typing import TYPE_CHECKING, Any, Literal, Optional
+from typing import Any, Literal, Optional
 
 from e2b_code_interpreter import AsyncSandbox
 from e2b_code_interpreter import Result as E2BExecutionResult
@@ -20,13 +20,6 @@ from backend.data.model import (
     SchemaField,
 )
 from backend.integrations.providers import ProviderName
-from backend.util.sandbox_files import (
-    SandboxFileOutput,
-    extract_and_store_sandbox_files,
-)
-
-if TYPE_CHECKING:
-    from backend.executor.utils import ExecutionContext
 
 TEST_CREDENTIALS = APIKeyCredentials(
     id="01234567-89ab-cdef-0123-456789abcdef",
@@ -92,9 +85,6 @@ class CodeExecutionResult(MainCodeExecutionResult):
 class BaseE2BExecutorMixin:
     """Shared implementation methods for E2B executor blocks."""
 
-    # Default working directory in E2B sandboxes
-    WORKING_DIR = "/home/user"
-
     async def execute_code(
         self,
         api_key: str,
@@ -105,21 +95,14 @@ class BaseE2BExecutorMixin:
         timeout: Optional[int] = None,
         sandbox_id: Optional[str] = None,
         dispose_sandbox: bool = False,
-        execution_context: Optional["ExecutionContext"] = None,
-        extract_files: bool = False,
     ):
         """
         Unified code execution method that handles all three use cases:
         1. Create new sandbox and execute (ExecuteCodeBlock)
         2. Create new sandbox, execute, and return sandbox_id (InstantiateCodeSandboxBlock)
         3. Connect to existing sandbox and execute (ExecuteCodeStepBlock)
-
-        Args:
-            extract_files: If True and execution_context provided, extract files
-                           created/modified during execution and store to workspace.
         """  # noqa
         sandbox = None
-        files: list[SandboxFileOutput] = []
         try:
             if sandbox_id:
                 # Connect to existing sandbox (ExecuteCodeStepBlock case)
@@ -135,12 +118,6 @@ class BaseE2BExecutorMixin:
                     for cmd in setup_commands:
                         await sandbox.commands.run(cmd)
 
-            # Capture timestamp before execution to scope file extraction
-            start_timestamp = None
-            if extract_files:
-                ts_result = await sandbox.commands.run("date -u +%Y-%m-%dT%H:%M:%S")
-                start_timestamp = ts_result.stdout.strip() if ts_result.stdout else None
-
             # Execute the code
             execution = await sandbox.run_code(
                 code,
@@ -156,24 +133,7 @@ class BaseE2BExecutorMixin:
             stdout_logs = "".join(execution.logs.stdout)
             stderr_logs = "".join(execution.logs.stderr)
 
-            # Extract files created/modified during this execution
-            if extract_files and execution_context:
-                files = await extract_and_store_sandbox_files(
-                    sandbox=sandbox,
-                    working_directory=self.WORKING_DIR,
-                    execution_context=execution_context,
-                    since_timestamp=start_timestamp,
-                    text_only=False,  # Include binary files too
-                )
-
-            return (
-                results,
-                text_output,
-                stdout_logs,
-                stderr_logs,
-                sandbox.sandbox_id,
-                files,
-            )
+            return results, text_output, stdout_logs, stderr_logs, sandbox.sandbox_id
         finally:
             # Dispose of sandbox if requested to reduce usage costs
             if dispose_sandbox and sandbox:
@@ -278,12 +238,6 @@ class ExecuteCodeBlock(Block, BaseE2BExecutorMixin):
             description="Standard output logs from execution"
         )
         stderr_logs: str = SchemaField(description="Standard error logs from execution")
-        files: list[SandboxFileOutput] = SchemaField(
-            description=(
-                "Files created or modified during execution. "
-                "Each file has path, name, content, and workspace_ref (if stored)."
-            ),
-        )
 
     def __init__(self):
         super().__init__(
@@ -305,30 +259,23 @@ class ExecuteCodeBlock(Block, BaseE2BExecutorMixin):
                 ("results", []),
                 ("response", "Hello World"),
                 ("stdout_logs", "Hello World\n"),
-                ("files", []),
             ],
             test_mock={
-                "execute_code": lambda api_key, code, language, template_id, setup_commands, timeout, dispose_sandbox, execution_context, extract_files: (  # noqa
+                "execute_code": lambda api_key, code, language, template_id, setup_commands, timeout, dispose_sandbox: (  # noqa
                     [],  # results
                     "Hello World",  # text_output
                     "Hello World\n",  # stdout_logs
                     "",  # stderr_logs
                     "sandbox_id",  # sandbox_id
-                    [],  # files
                 ),
             },
         )
 
     async def run(
-        self,
-        input_data: Input,
-        *,
-        credentials: APIKeyCredentials,
-        execution_context: "ExecutionContext",
-        **kwargs,
+        self, input_data: Input, *, credentials: APIKeyCredentials, **kwargs
     ) -> BlockOutput:
         try:
-            results, text_output, stdout, stderr, _, files = await self.execute_code(
+            results, text_output, stdout, stderr, _ = await self.execute_code(
                 api_key=credentials.api_key.get_secret_value(),
                 code=input_data.code,
                 language=input_data.language,
@@ -336,8 +283,6 @@ class ExecuteCodeBlock(Block, BaseE2BExecutorMixin):
                 setup_commands=input_data.setup_commands,
                 timeout=input_data.timeout,
                 dispose_sandbox=input_data.dispose_sandbox,
-                execution_context=execution_context,
-                extract_files=True,
             )
 
             # Determine result object shape & filter out empty formats
@@ -351,8 +296,6 @@ class ExecuteCodeBlock(Block, BaseE2BExecutorMixin):
                 yield "stdout_logs", stdout
             if stderr:
                 yield "stderr_logs", stderr
-            # Always yield files (empty list if none)
-            yield "files", [f.model_dump() for f in files]
         except Exception as e:
             yield "error", str(e)
 
@@ -450,7 +393,6 @@ class InstantiateCodeSandboxBlock(Block, BaseE2BExecutorMixin):
                     "Hello World\n",  # stdout_logs
                     "",  # stderr_logs
                     "sandbox_id",  # sandbox_id
-                    [],  # files
                 ),
             },
         )
@@ -459,7 +401,7 @@ class InstantiateCodeSandboxBlock(Block, BaseE2BExecutorMixin):
         self, input_data: Input, *, credentials: APIKeyCredentials, **kwargs
     ) -> BlockOutput:
         try:
-            _, text_output, stdout, stderr, sandbox_id, _ = await self.execute_code(
+            _, text_output, stdout, stderr, sandbox_id = await self.execute_code(
                 api_key=credentials.api_key.get_secret_value(),
                 code=input_data.setup_code,
                 language=input_data.language,
@@ -558,7 +500,6 @@ class ExecuteCodeStepBlock(Block, BaseE2BExecutorMixin):
                     "Hello World\n",  # stdout_logs
                     "",  # stderr_logs
                     sandbox_id,  # sandbox_id
-                    [],  # files
                 ),
             },
         )
@@ -567,7 +508,7 @@ class ExecuteCodeStepBlock(Block, BaseE2BExecutorMixin):
         self, input_data: Input, *, credentials: APIKeyCredentials, **kwargs
     ) -> BlockOutput:
         try:
-            results, text_output, stdout, stderr, _, _ = await self.execute_code(
+            results, text_output, stdout, stderr, _ = await self.execute_code(
                 api_key=credentials.api_key.get_secret_value(),
                 code=input_data.step_code,
                 language=input_data.language,

autogpt_platform/backend/backend/data/includes.py

@@ -105,7 +105,6 @@ def library_agent_include(
     """
     result: prisma.types.LibraryAgentInclude = {
         "Creator": True,  # Always needed for creator info
-        "Folder": True,  # Always needed for folder info
     }
 
     # Build AgentGraph include based on requested options

autogpt_platform/backend/backend/util/sandbox_files.py

@@ -1,288 +0,0 @@
-"""
-Shared utilities for extracting and storing files from E2B sandboxes.
-
-This module provides common file extraction and workspace storage functionality
-for blocks that run code in E2B sandboxes (Claude Code, Code Executor, etc.).
-"""
-
-import base64
-import logging
-import mimetypes
-import shlex
-from dataclasses import dataclass
-from typing import TYPE_CHECKING
-
-from pydantic import BaseModel
-
-from backend.util.file import store_media_file
-from backend.util.type import MediaFileType
-
-if TYPE_CHECKING:
-    from e2b import AsyncSandbox as BaseAsyncSandbox
-
-    from backend.executor.utils import ExecutionContext
-
-logger = logging.getLogger(__name__)
-
-# Text file extensions that can be safely read and stored as text
-TEXT_EXTENSIONS = {
-    ".txt",
-    ".md",
-    ".html",
-    ".htm",
-    ".css",
-    ".js",
-    ".ts",
-    ".jsx",
-    ".tsx",
-    ".json",
-    ".xml",
-    ".yaml",
-    ".yml",
-    ".toml",
-    ".ini",
-    ".cfg",
-    ".conf",
-    ".py",
-    ".rb",
-    ".php",
-    ".java",
-    ".c",
-    ".cpp",
-    ".h",
-    ".hpp",
-    ".cs",
-    ".go",
-    ".rs",
-    ".swift",
-    ".kt",
-    ".scala",
-    ".sh",
-    ".bash",
-    ".zsh",
-    ".sql",
-    ".graphql",
-    ".env",
-    ".gitignore",
-    ".dockerfile",
-    "Dockerfile",
-    ".vue",
-    ".svelte",
-    ".astro",
-    ".mdx",
-    ".rst",
-    ".tex",
-    ".csv",
-    ".log",
-}
-
-
-class SandboxFileOutput(BaseModel):
-    """A file extracted from a sandbox and optionally stored in workspace."""
-
-    path: str
-    """Full path in the sandbox."""
-
-    relative_path: str
-    """Path relative to the working directory."""
-
-    name: str
-    """Filename only."""
-
-    content: str
-    """File content as text (for backward compatibility)."""
-
-    workspace_ref: str | None = None
-    """Workspace reference (workspace://{id}#mime) if stored, None otherwise."""
-
-
-@dataclass
-class ExtractedFile:
-    """Internal representation of an extracted file before storage."""
-
-    path: str
-    relative_path: str
-    name: str
-    content: bytes
-    is_text: bool
-
-
-async def extract_sandbox_files(
-    sandbox: "BaseAsyncSandbox",
-    working_directory: str,
-    since_timestamp: str | None = None,
-    text_only: bool = True,
-) -> list[ExtractedFile]:
-    """
-    Extract files from an E2B sandbox.
-
-    Args:
-        sandbox: The E2B sandbox instance
-        working_directory: Directory to search for files
-        since_timestamp: ISO timestamp - only return files modified after this time
-        text_only: If True, only extract text files (default). If False, extract all files.
-
-    Returns:
-        List of ExtractedFile objects with path, content, and metadata
-    """
-    files: list[ExtractedFile] = []
-
-    try:
-        # Build find command
-        safe_working_dir = shlex.quote(working_directory)
-        timestamp_filter = ""
-        if since_timestamp:
-            timestamp_filter = f"-newermt {shlex.quote(since_timestamp)} "
-
-        find_result = await sandbox.commands.run(
-            f"find {safe_working_dir} -type f "
-            f"{timestamp_filter}"
-            f"-not -path '*/node_modules/*' "
-            f"-not -path '*/.git/*' "
-            f"2>/dev/null"
-        )
-
-        if not find_result.stdout:
-            return files
-
-        for file_path in find_result.stdout.strip().split("\n"):
-            if not file_path:
-                continue
-
-            # Check if it's a text file
-            is_text = any(file_path.endswith(ext) for ext in TEXT_EXTENSIONS)
-
-            # Skip non-text files if text_only mode
-            if text_only and not is_text:
-                continue
-
-            try:
-                # Read file content as bytes
-                content = await sandbox.files.read(file_path, format="bytes")
-                if isinstance(content, str):
-                    content = content.encode("utf-8")
-                elif isinstance(content, bytearray):
-                    content = bytes(content)
-
-                # Extract filename from path
-                file_name = file_path.split("/")[-1]
-
-                # Calculate relative path
-                relative_path = file_path
-                if file_path.startswith(working_directory):
-                    relative_path = file_path[len(working_directory) :]
-                    if relative_path.startswith("/"):
-                        relative_path = relative_path[1:]
-
-                files.append(
-                    ExtractedFile(
-                        path=file_path,
-                        relative_path=relative_path,
-                        name=file_name,
-                        content=content,
-                        is_text=is_text,
-                    )
-                )
-            except Exception as e:
-                logger.debug(f"Failed to read file {file_path}: {e}")
-                continue
-
-    except Exception as e:
-        logger.warning(f"File extraction failed: {e}")
-
-    return files
-
-
-async def store_sandbox_files(
-    extracted_files: list[ExtractedFile],
-    execution_context: "ExecutionContext",
-) -> list[SandboxFileOutput]:
-    """
-    Store extracted sandbox files to workspace and return output objects.
-
-    Args:
-        extracted_files: List of files extracted from sandbox
-        execution_context: Execution context for workspace storage
-
-    Returns:
-        List of SandboxFileOutput objects with workspace refs
-    """
-    outputs: list[SandboxFileOutput] = []
-
-    for file in extracted_files:
-        # Decode content for text files (for backward compat content field)
-        if file.is_text:
-            try:
-                content_str = file.content.decode("utf-8", errors="replace")
-            except Exception:
-                content_str = ""
-        else:
-            content_str = f"[Binary file: {len(file.content)} bytes]"
-
-        # Build data URI (needed for storage and as binary fallback)
-        mime_type = mimetypes.guess_type(file.name)[0] or "application/octet-stream"
-        data_uri = f"data:{mime_type};base64,{base64.b64encode(file.content).decode()}"
-
-        # Try to store in workspace
-        workspace_ref: str | None = None
-        try:
-            result = await store_media_file(
-                file=MediaFileType(data_uri),
-                execution_context=execution_context,
-                return_format="for_block_output",
-            )
-            if result.startswith("workspace://"):
-                workspace_ref = result
-            elif not file.is_text:
-                # Non-workspace context (graph execution): store_media_file
-                # returned a data URI — use it as content so binary data isn't lost.
-                content_str = result
-        except Exception as e:
-            logger.warning(f"Failed to store file {file.name} to workspace: {e}")
-            # For binary files, fall back to data URI to prevent data loss
-            if not file.is_text:
-                content_str = data_uri
-
-        outputs.append(
-            SandboxFileOutput(
-                path=file.path,
-                relative_path=file.relative_path,
-                name=file.name,
-                content=content_str,
-                workspace_ref=workspace_ref,
-            )
-        )
-
-    return outputs
-
-
-async def extract_and_store_sandbox_files(
-    sandbox: "BaseAsyncSandbox",
-    working_directory: str,
-    execution_context: "ExecutionContext",
-    since_timestamp: str | None = None,
-    text_only: bool = True,
-) -> list[SandboxFileOutput]:
-    """
-    Extract files from sandbox and store them in workspace.
-
-    This is the main entry point combining extraction and storage.
-
-    Args:
-        sandbox: The E2B sandbox instance
-        working_directory: Directory to search for files
-        execution_context: Execution context for workspace storage
-        since_timestamp: ISO timestamp - only return files modified after this time
-        text_only: If True, only extract text files
-
-    Returns:
-        List of SandboxFileOutput objects with content and workspace refs
-    """
-    extracted = await extract_sandbox_files(
-        sandbox=sandbox,
-        working_directory=working_directory,
-        since_timestamp=since_timestamp,
-        text_only=text_only,
-    )
-
-    return await store_sandbox_files(extracted, execution_context)

autogpt_platform/backend/backend/util/settings.py

@@ -368,10 +368,6 @@ class Config(UpdateTrackingModel["Config"], BaseSettings):
         default=600,
         description="The timeout in seconds for Agent Generator service requests (includes retries for rate limits)",
     )
-    agentgenerator_use_dummy: bool = Field(
-        default=False,
-        description="Use dummy agent generator responses for testing (bypasses external service)",
-    )
 
     enable_example_blocks: bool = Field(
         default=False,

autogpt_platform/backend/migrations/20260123110033_add_folders_in_library/migration.sql

@@ -1,50 +0,0 @@
-/*
-  Warnings:
-
-  - You are about to drop the column `search` on the `StoreListingVersion` table. All the data in the column will be lost.
-
-*/
--- DropIndex
-DROP INDEX "UnifiedContentEmbedding_search_idx";
-
--- AlterTable
-ALTER TABLE "LibraryAgent" ADD COLUMN     "folderId" TEXT;
-
--- AlterTable
-ALTER TABLE "StoreListingVersion" DROP COLUMN "search";
-
--- CreateTable
-CREATE TABLE "LibraryFolder" (
-    "id" TEXT NOT NULL,
-    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "userId" TEXT NOT NULL,
-    "name" TEXT NOT NULL,
-    "icon" TEXT,
-    "color" TEXT,
-    "parentId" TEXT,
-    "isDeleted" BOOLEAN NOT NULL DEFAULT false,
-
-    CONSTRAINT "LibraryFolder_pkey" PRIMARY KEY ("id")
-);
-
--- CreateIndex
-CREATE INDEX "LibraryFolder_userId_isDeleted_idx" ON "LibraryFolder"("userId", "isDeleted");
-
--- CreateIndex
-CREATE INDEX "LibraryFolder_parentId_idx" ON "LibraryFolder"("parentId");
-
--- CreateIndex
-CREATE UNIQUE INDEX "LibraryFolder_userId_parentId_name_key" ON "LibraryFolder"("userId", "parentId", "name");
-
--- CreateIndex
-CREATE INDEX "LibraryAgent_folderId_idx" ON "LibraryAgent"("folderId");
-
--- AddForeignKey
-ALTER TABLE "LibraryAgent" ADD CONSTRAINT "LibraryAgent_folderId_fkey" FOREIGN KEY ("folderId") REFERENCES "LibraryFolder"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
-
--- AddForeignKey
-ALTER TABLE "LibraryFolder" ADD CONSTRAINT "LibraryFolder_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
-
--- AddForeignKey
-ALTER TABLE "LibraryFolder" ADD CONSTRAINT "LibraryFolder_parentId_fkey" FOREIGN KEY ("parentId") REFERENCES "LibraryFolder"("id") ON DELETE CASCADE ON UPDATE CASCADE;

autogpt_platform/backend/schema.prisma

@@ -51,7 +51,6 @@ model User {
   ChatSessions         ChatSession[]
   AgentPresets         AgentPreset[]
   LibraryAgents        LibraryAgent[]
-  LibraryFolders       LibraryFolder[]
 
   Profile               Profile[]
   UserOnboarding        UserOnboarding?
@@ -396,9 +395,6 @@ model LibraryAgent {
   creatorId String?
   Creator   Profile? @relation(fields: [creatorId], references: [id])
 
-  folderId String?
-  Folder   LibraryFolder? @relation(fields: [folderId], references: [id], onDelete: Restrict)
-
   useGraphIsActiveVersion Boolean @default(false)
 
   isFavorite      Boolean @default(false)
@@ -411,32 +407,6 @@ model LibraryAgent {
   @@unique([userId, agentGraphId, agentGraphVersion])
   @@index([agentGraphId, agentGraphVersion])
   @@index([creatorId])
-  @@index([folderId])
-}
-
-model LibraryFolder {
-  id        String   @id @default(uuid())
-  createdAt DateTime @default(now())
-  updatedAt DateTime @default(now()) @updatedAt
-
-  userId String
-  User   User   @relation(fields: [userId], references: [id], onDelete: Cascade)
-
-  name  String
-  icon  String?
-  color String?
-
-  parentId String?
-  Parent   LibraryFolder?  @relation("FolderHierarchy", fields: [parentId], references: [id], onDelete: Cascade)
-  Children LibraryFolder[] @relation("FolderHierarchy")
-
-  isDeleted Boolean @default(false)
-
-  LibraryAgents LibraryAgent[]
-
-  @@unique([userId, parentId, name]) // Name unique per parent per user
-  @@index([userId, isDeleted])
-  @@index([parentId])
 }
 
 ////////////////////////////////////////////////////////////

autogpt_platform/backend/test/agent_generator/test_service.py

@@ -25,7 +25,6 @@ class TestServiceConfiguration:
         """Test that external service is not configured when host is empty."""
         mock_settings = MagicMock()
         mock_settings.config.agentgenerator_host = ""
-        mock_settings.config.agentgenerator_use_dummy = False
 
         with patch.object(service, "_get_settings", return_value=mock_settings):
             assert service.is_external_service_configured() is False

autogpt_platform/frontend/instrumentation-client.ts

@@ -22,11 +22,6 @@ Sentry.init({
 
   enabled: shouldEnable,
 
-  // Suppress cross-origin stylesheet errors from Sentry Replay (rrweb)
-  // serializing DOM snapshots with cross-origin stylesheets
-  // (e.g., from browser extensions or CDN-loaded CSS)
-  ignoreErrors: [/Not allowed to access cross-origin stylesheet/],
-
   // Add optional integrations for additional features
   integrations: [
     Sentry.captureConsoleIntegration(),

autogpt_platform/frontend/package.json

@@ -32,7 +32,6 @@
   "dependencies": {
     "@ai-sdk/react": "3.0.61",
     "@faker-js/faker": "10.0.0",
-    "@ferrucc-io/emoji-picker": "0.0.48",
     "@hookform/resolvers": "5.2.2",
     "@next/third-parties": "15.4.6",
     "@phosphor-icons/react": "2.1.10",

autogpt_platform/frontend/pnpm-lock.yaml

@@ -18,9 +18,6 @@ importers:
       '@faker-js/faker':
         specifier: 10.0.0
         version: 10.0.0
-      '@ferrucc-io/emoji-picker':
-        specifier: 0.0.48
-        version: 0.0.48(@babel/core@7.28.5)(@babel/template@7.27.2)(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.17)
       '@hookform/resolvers':
         specifier: 5.2.2
         version: 5.2.2(react-hook-form@7.66.0(react@18.3.1))
@@ -1510,14 +1507,6 @@ packages:
     resolution: {integrity: sha512-UollFEUkVXutsaP+Vndjxar40Gs5JL2HeLcl8xO1QAjJgOdhc3OmBFWyEylS+RddWaaBiAzH+5/17PLQJwDiLw==}
     engines: {node: ^20.19.0 || ^22.13.0 || ^23.5.0 || >=24.0.0, npm: '>=10'}
 
-  '@ferrucc-io/emoji-picker@0.0.48':
-    resolution: {integrity: sha512-DJ5u+6VLF9OK7x+S/luwrVb5CHC6W16jL5b8vBUYNpxKWSuFgyliDHVtw1SGe6+dr5RUbf8WQwPJdKZmU3Ittg==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      react: ^18.2.0 || ^19.0.0
-      react-dom: ^18.2.0 || ^19.0.0
-      tailwindcss: '>=3.0.0'
-
   '@floating-ui/core@1.7.3':
     resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
 
@@ -3125,10 +3114,6 @@ packages:
   '@shikijs/vscode-textmate@10.0.2':
     resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
 
-  '@sindresorhus/is@4.6.0':
-    resolution: {integrity: sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==}
-    engines: {node: '>=10'}
-
   '@standard-schema/spec@1.0.0':
     resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
 
@@ -3396,19 +3381,10 @@ packages:
       react: '>=16.8'
       react-dom: '>=16.8'
 
-  '@tanstack/react-virtual@3.13.18':
-    resolution: {integrity: sha512-dZkhyfahpvlaV0rIKnvQiVoWPyURppl6w4m9IwMDpuIjcJ1sD9YGWrt0wISvgU7ewACXx2Ct46WPgI6qAD4v6A==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
   '@tanstack/table-core@8.21.3':
     resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
     engines: {node: '>=12'}
 
-  '@tanstack/virtual-core@3.13.18':
-    resolution: {integrity: sha512-Mx86Hqu1k39icq2Zusq+Ey2J6dDWTjDvEv43PJtRCoEYTLyfaPnxIQ6iy7YAOK0NV/qOEmZQ/uCufrppZxTgcg==}
-
   '@testing-library/dom@10.4.1':
     resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
     engines: {node: '>=18'}
@@ -4402,10 +4378,6 @@ packages:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
-  char-regex@1.0.2:
-    resolution: {integrity: sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==}
-    engines: {node: '>=10'}
-
   character-entities-html4@2.1.0:
     resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
 
@@ -5023,9 +4995,6 @@ packages:
   emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
-  emojilib@2.4.0:
-    resolution: {integrity: sha512-5U0rVMU5Y2n2+ykNLQqMoqklN9ICBT/KsvC1Gz6vqHbz2AXXGkG+Pm5rMWk/8Vjrr/mY9985Hi8DYzn1F09Nyw==}
-
   emojis-list@3.0.0:
     resolution: {integrity: sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==}
     engines: {node: '>= 4'}
@@ -6006,24 +5975,6 @@ packages:
     resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
     hasBin: true
 
-  jotai@2.17.1:
-    resolution: {integrity: sha512-TFNZZDa/0ewCLQyRC/Sq9crtixNj/Xdf/wmj9631xxMuKToVJZDbqcHIYN0OboH+7kh6P6tpIK7uKWClj86PKw==}
-    engines: {node: '>=12.20.0'}
-    peerDependencies:
-      '@babel/core': '>=7.0.0'
-      '@babel/template': '>=7.0.0'
-      '@types/react': '>=17.0.0'
-      react: '>=17.0.0'
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
-      '@babel/template':
-        optional: true
-      '@types/react':
-        optional: true
-      react:
-        optional: true
-
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -6642,10 +6593,6 @@ packages:
   node-abort-controller@3.1.1:
     resolution: {integrity: sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ==}
 
-  node-emoji@2.2.0:
-    resolution: {integrity: sha512-Z3lTE9pLaJF47NyMhd4ww1yFTAP8YhYI8SleJiHzM46Fgpm5cnNzSl9XfzFNqbaz+VlJrIj3fXQ4DeN1Rjm6cw==}
-    engines: {node: '>=18'}
-
   node-fetch-h2@2.3.0:
     resolution: {integrity: sha512-ofRW94Ab0T4AOh5Fk8t0h8OBWrmjb0SSB20xh1H8YnPV9EJ+f5AMoYSUQ2zgJ4Iq2HAK0I2l5/Nequ8YzFS3Hg==}
     engines: {node: 4.x || >=6.0.0}
@@ -7744,10 +7691,6 @@ packages:
     resolution: {integrity: sha512-LH7FpTAkeD+y5xQC4fzS+tFtaNlvt3Ib1zKzvhjv/Y+cioV4zIuw4IZr2yhRLu67CWL7FR9/6KXKnjRoZTvGGQ==}
     engines: {node: '>=12'}
 
-  skin-tone@2.0.0:
-    resolution: {integrity: sha512-kUMbT1oBJCpgrnKoSr0o6wPtvRWT9W9UKvGLwfJYO2WuahZRHOpEyL1ckyMGgMWh0UdpmaoFqKKD29WTomNEGA==}
-    engines: {node: '>=8'}
-
   slash@3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
@@ -8225,13 +8168,6 @@ packages:
     resolution: {integrity: sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==}
     engines: {node: '>=4'}
 
-  unicode-emoji-json@0.8.0:
-    resolution: {integrity: sha512-3wDXXvp6YGoKGhS2O2H7+V+bYduOBydN1lnI0uVfr1cIdY02uFFiEH1i3kE5CCE4l6UqbLKVmEFW9USxTAMD1g==}
-
-  unicode-emoji-modifier-base@1.0.0:
-    resolution: {integrity: sha512-yLSH4py7oFH3oG/9K+XWrz1pSi3dfUrWEnInbxMfArOfc1+33BlGPQtLsOYwvdMy11AwUBetYuaRxSPqgkq+8g==}
-    engines: {node: '>=4'}
-
   unicode-match-property-ecmascript@2.0.0:
     resolution: {integrity: sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==}
     engines: {node: '>=4'}
@@ -9841,22 +9777,6 @@ snapshots:
 
   '@faker-js/faker@10.0.0': {}
 
-  '@ferrucc-io/emoji-picker@0.0.48(@babel/core@7.28.5)(@babel/template@7.27.2)(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.17)':
-    dependencies:
-      '@tanstack/react-virtual': 3.13.18(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      clsx: 2.1.1
-      jotai: 2.17.1(@babel/core@7.28.5)(@babel/template@7.27.2)(@types/react@18.3.17)(react@18.3.1)
-      node-emoji: 2.2.0
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      tailwind-merge: 2.6.0
-      tailwindcss: 3.4.17
-      unicode-emoji-json: 0.8.0
-    transitivePeerDependencies:
-      - '@babel/core'
-      - '@babel/template'
-      - '@types/react'
-
   '@floating-ui/core@1.7.3':
     dependencies:
       '@floating-ui/utils': 0.2.10
@@ -11618,8 +11538,6 @@ snapshots:
 
   '@shikijs/vscode-textmate@10.0.2': {}
 
-  '@sindresorhus/is@4.6.0': {}
-
   '@standard-schema/spec@1.0.0': {}
 
   '@standard-schema/spec@1.1.0': {}
@@ -12093,16 +12011,8 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@tanstack/react-virtual@3.13.18(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@tanstack/virtual-core': 3.13.18
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-
   '@tanstack/table-core@8.21.3': {}
 
-  '@tanstack/virtual-core@3.13.18': {}
-
   '@testing-library/dom@10.4.1':
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -13194,8 +13104,6 @@ snapshots:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
-  char-regex@1.0.2: {}
-
   character-entities-html4@2.1.0: {}
 
   character-entities-legacy@3.0.0: {}
@@ -13839,8 +13747,6 @@ snapshots:
 
   emoji-regex@9.2.2: {}
 
-  emojilib@2.4.0: {}
-
   emojis-list@3.0.0: {}
 
   endent@2.1.0:
@@ -15122,13 +15028,6 @@ snapshots:
 
   jiti@2.6.1: {}
 
-  jotai@2.17.1(@babel/core@7.28.5)(@babel/template@7.27.2)(@types/react@18.3.17)(react@18.3.1):
-    optionalDependencies:
-      '@babel/core': 7.28.5
-      '@babel/template': 7.27.2
-      '@types/react': 18.3.17
-      react: 18.3.1
-
   js-tokens@4.0.0: {}
 
   js-yaml@4.1.0:
@@ -15997,13 +15896,6 @@ snapshots:
 
   node-abort-controller@3.1.1: {}
 
-  node-emoji@2.2.0:
-    dependencies:
-      '@sindresorhus/is': 4.6.0
-      char-regex: 1.0.2
-      emojilib: 2.4.0
-      skin-tone: 2.0.0
-
   node-fetch-h2@2.3.0:
     dependencies:
       http2-client: 1.3.5
@@ -17304,10 +17196,6 @@ snapshots:
     dependencies:
       jsep: 1.4.0
 
-  skin-tone@2.0.0:
-    dependencies:
-      unicode-emoji-modifier-base: 1.0.0
-
   slash@3.0.0: {}
 
   sonner@2.0.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
@@ -17823,10 +17711,6 @@ snapshots:
 
   unicode-canonical-property-names-ecmascript@2.0.1: {}
 
-  unicode-emoji-json@0.8.0: {}
-
-  unicode-emoji-modifier-base@1.0.0: {}
-
   unicode-match-property-ecmascript@2.0.0:
     dependencies:
       unicode-canonical-property-names-ecmascript: 2.0.1

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

@@ -1,100 +1,30 @@
-// import { Separator } from "@/components/__legacy__/ui/separator";
 import { cn } from "@/lib/utils";
 import React, { memo } from "react";
 import { BlockMenu } from "./NewBlockMenu/BlockMenu/BlockMenu";
 import { useNewControlPanel } from "./useNewControlPanel";
-// import { NewSaveControl } from "../SaveControl/NewSaveControl";
-import { GraphExecutionID } from "@/lib/autogpt-server-api";
-// import { ControlPanelButton } from "../ControlPanelButton";
-// import { GraphSearchMenu } from "../GraphMenu/GraphMenu";
 import { Separator } from "@/components/__legacy__/ui/separator";
-import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
-import { CustomNode } from "../FlowEditor/nodes/CustomNode/CustomNode";
 import { NewSaveControl } from "./NewSaveControl/NewSaveControl";
 import { UndoRedoButtons } from "./UndoRedoButtons";
 
-export type Control = {
-  icon: React.ReactNode;
-  label: string;
-  disabled?: boolean;
-  onClick: () => void;
-};
+export const NewControlPanel = memo(() => {
+  useNewControlPanel({});
 
-export type NewControlPanelProps = {
-  flowExecutionID?: GraphExecutionID | undefined;
-  visualizeBeads?: "no" | "static" | "animate";
-  pinSavePopover?: boolean;
-  pinBlocksPopover?: boolean;
-  nodes?: CustomNode[];
-  onNodeSelect?: (nodeId: string) => void;
-  onNodeHover?: (nodeId: string) => void;
-};
-export const NewControlPanel = memo(
-  ({
-    flowExecutionID: _flowExecutionID,
-    visualizeBeads: _visualizeBeads,
-    pinSavePopover: _pinSavePopover,
-    pinBlocksPopover: _pinBlocksPopover,
-    nodes: _nodes,
-    onNodeSelect: _onNodeSelect,
-    onNodeHover: _onNodeHover,
-  }: NewControlPanelProps) => {
-    const _isGraphSearchEnabled = useGetFlag(Flag.GRAPH_SEARCH);
-
-    const {
-      // agentDescription,
-      // setAgentDescription,
-      // saveAgent,
-      // agentName,
-      // setAgentName,
-      // savedAgent,
-      // isSaving,
-      // isRunning,
-      // isStopping,
-    } = useNewControlPanel({});
-
-    return (
-      <section
-        className={cn(
-          "absolute left-4 top-10 z-10 overflow-hidden rounded-[1rem] border-none bg-white p-0 shadow-[0_1px_5px_0_rgba(0,0,0,0.1)]",
-        )}
-      >
-        <div className="flex flex-col items-center justify-center rounded-[1rem] p-0">
-          <BlockMenu />
-          {/* <Separator className="text-[#E1E1E1]" />
-        {isGraphSearchEnabled && (
-          <>
-            <GraphSearchMenu
-              nodes={nodes}
-              blockMenuSelected={blockMenuSelected}
-              setBlockMenuSelected={setBlockMenuSelected}
-              onNodeSelect={onNodeSelect}
-              onNodeHover={onNodeHover}
-            />
-            <Separator className="text-[#E1E1E1]" />
-          </>
-        )}
-        {controls.map((control, index) => (
-          <ControlPanelButton
-            key={index}
-            onClick={() => control.onClick()}
-            data-id={`control-button-${index}`}
-            data-testid={`blocks-control-${control.label.toLowerCase()}-button`}
-            disabled={control.disabled || false}
-            className="rounded-none"
-          >
-            {control.icon}
-          </ControlPanelButton>
-        ))} */}
-          <Separator className="text-[#E1E1E1]" />
-          <NewSaveControl />
-          <Separator className="text-[#E1E1E1]" />
-          <UndoRedoButtons />
-        </div>
-      </section>
-    );
-  },
-);
+  return (
+    <section
+      className={cn(
+        "absolute left-4 top-10 z-10 overflow-hidden rounded-[1rem] border-none bg-white p-0 shadow-[0_1px_5px_0_rgba(0,0,0,0.1)]",
+      )}
+    >
+      <div className="flex flex-col items-center justify-center rounded-[1rem] p-0">
+        <BlockMenu />
+        <Separator className="text-[#E1E1E1]" />
+        <NewSaveControl />
+        <Separator className="text-[#E1E1E1]" />
+        <UndoRedoButtons />
+      </div>
+    </section>
+  );
+});
 
 export default NewControlPanel;
 

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

@@ -1,4 +1,4 @@
-import { CustomNode } from "@/app/(platform)/build/components/legacy-builder/CustomNode/CustomNode";
+import { CustomNode } from "../../../FlowEditor/nodes/CustomNode/CustomNode";
 import {
   Popover,
   PopoverContent,

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewSearchGraph/GraphMenu/useGraphMenu.ts

@@ -1,5 +1,5 @@
 import { useGraphSearch } from "../GraphMenuSearchBar/useGraphMenuSearchBar";
-import { CustomNode } from "@/app/(platform)/build/components/legacy-builder/CustomNode/CustomNode";
+import { CustomNode } from "../../../FlowEditor/nodes/CustomNode/CustomNode";
 
 interface UseGraphMenuProps {
   nodes: CustomNode[];

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { Separator } from "@/components/__legacy__/ui/separator";
 import { ScrollArea } from "@/components/__legacy__/ui/scroll-area";
-import { beautifyString, getPrimaryCategoryColor } from "@/lib/utils";
+import { beautifyString, categoryColorMap } from "@/lib/utils";
 import { SearchableNode } from "../GraphMenuSearchBar/useGraphMenuSearchBar";
 import { TextRenderer } from "@/components/__legacy__/ui/render";
 import {
@@ -73,14 +73,12 @@ export const GraphSearchContent: React.FC<GraphSearchContentProps> = ({
               }
 
               const nodeTitle =
-                node.data?.metadata?.customized_name ||
-                beautifyString(node.data?.blockType || "").replace(
-                  / Block$/,
-                  "",
-                );
-              const nodeType = beautifyString(
-                node.data?.blockType || "",
-              ).replace(/ Block$/, "");
+                (node.data?.metadata?.customized_name as string) ||
+                beautifyString(node.data?.title || "").replace(/ Block$/, "");
+              const nodeType = beautifyString(node.data?.title || "").replace(
+                / Block$/,
+                "",
+              );
 
               return (
                 <TooltipProvider key={node.id}>
@@ -100,7 +98,13 @@ export const GraphSearchContent: React.FC<GraphSearchContentProps> = ({
                         onMouseLeave={() => onNodeHover?.(null)}
                       >
                         <div
-                          className={`h-full w-3 rounded-l-[7px] ${getPrimaryCategoryColor(node.data?.categories)}`}
+                          className={`h-full w-3 rounded-l-[7px] ${
+                            (node.data?.categories?.[0]?.category &&
+                              categoryColorMap[
+                                node.data.categories[0].category
+                              ]) ||
+                            "bg-gray-300 dark:bg-slate-700"
+                          }`}
                         />
                         <div className="mx-3 flex flex-1 items-center justify-between">
                           <div className="mr-2 min-w-0">
@@ -129,9 +133,10 @@ export const GraphSearchContent: React.FC<GraphSearchContentProps> = ({
                         <div className="font-semibold">
                           Node Type: {nodeType}
                         </div>
-                        {node.data?.metadata?.customized_name && (
+                        {!!node.data?.metadata?.customized_name && (
                           <div className="text-xs text-gray-500">
-                            Custom Name: {node.data.metadata.customized_name}
+                            Custom Name:{" "}
+                            {String(node.data.metadata.customized_name)}
                           </div>
                         )}
                       </div>

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewSearchGraph/GraphMenuSearchBar/useGraphMenuSearchBar.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo, useDeferredValue } from "react";
-import { CustomNode } from "@/app/(platform)/build/components/legacy-builder/CustomNode/CustomNode";
+import { CustomNode } from "../../../FlowEditor/nodes/CustomNode/CustomNode";
 import { beautifyString } from "@/lib/utils";
 import jaro from "jaro-winkler";
 
@@ -67,10 +67,10 @@ function calculateNodeScore(
   const nodeTitle = (node.data?.title || "").toLowerCase(); // This includes the ID
   const nodeId = (node.id || "").toLowerCase();
   const nodeDescription = (node.data?.description || "").toLowerCase();
-  const blockType = (node.data?.blockType || "").toLowerCase();
+  const blockType = (node.data?.title || "").toLowerCase();
   const beautifiedBlockType = beautifyString(blockType).toLowerCase();
-  const customizedName = (
-    node.data?.metadata?.customized_name || ""
+  const customizedName = String(
+    node.data?.metadata?.customized_name || "",
   ).toLowerCase();
 
   // Get input and output names with defensive checks

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/useNewControlPanel.ts

@@ -1,54 +1,18 @@
-import { GraphID } from "@/lib/autogpt-server-api";
-import { useSearchParams } from "next/navigation";
 import { useState } from "react";
 
 export interface NewControlPanelProps {
-  // flowExecutionID: GraphExecutionID | undefined;
   visualizeBeads?: "no" | "static" | "animate";
 }
 
 export const useNewControlPanel = ({
-  // flowExecutionID,
   visualizeBeads: _visualizeBeads,
 }: NewControlPanelProps) => {
   const [blockMenuSelected, setBlockMenuSelected] = useState<
     "save" | "block" | "search" | ""
   >("");
-  const query = useSearchParams();
-  const _graphVersion = query.get("flowVersion");
-  const _graphVersionParsed = _graphVersion
-    ? parseInt(_graphVersion)
-    : undefined;
-
-  const _flowID = (query.get("flowID") as GraphID | null) ?? undefined;
-  // const {
-  //   agentDescription,
-  //   setAgentDescription,
-  //   saveAgent,
-  //   agentName,
-  //   setAgentName,
-  //   savedAgent,
-  //   isSaving,
-  //   isRunning,
-  //   isStopping,
-  // } = useAgentGraph(
-  //   flowID,
-  //   graphVersion,
-  //   flowExecutionID,
-  //   visualizeBeads !== "no",
-  // );
 
   return {
     blockMenuSelected,
     setBlockMenuSelected,
-    // agentDescription,
-    // setAgentDescription,
-    // saveAgent,
-    // agentName,
-    // setAgentName,
-    // savedAgent,
-    // isSaving,
-    // isRunning,
-    // isStopping,
   };
 };

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/BlocksControl.tsx

@@ -1,443 +0,0 @@
-import React, { useCallback, useMemo, useState, useDeferredValue } from "react";
-import { Card, CardContent, CardHeader } from "@/components/__legacy__/ui/card";
-import { Label } from "@/components/__legacy__/ui/label";
-import { Button } from "@/components/__legacy__/ui/button";
-import { Input } from "@/components/__legacy__/ui/input";
-import { TextRenderer } from "@/components/__legacy__/ui/render";
-import { ScrollArea } from "@/components/__legacy__/ui/scroll-area";
-import { CustomNode } from "@/app/(platform)/build/components/legacy-builder/CustomNode/CustomNode";
-import { beautifyString } from "@/lib/utils";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/__legacy__/ui/popover";
-import {
-  Block,
-  BlockIORootSchema,
-  BlockUIType,
-  GraphInputSchema,
-  GraphOutputSchema,
-  SpecialBlockID,
-} from "@/lib/autogpt-server-api";
-import { MagnifyingGlassIcon, PlusIcon } from "@radix-ui/react-icons";
-import { IconToyBrick } from "@/components/__legacy__/ui/icons";
-import { getPrimaryCategoryColor } from "@/lib/utils";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/atoms/Tooltip/BaseTooltip";
-import { GraphMeta } from "@/lib/autogpt-server-api";
-import jaro from "jaro-winkler";
-import { getV1GetSpecificGraph } from "@/app/api/__generated__/endpoints/graphs/graphs";
-import { okData } from "@/app/api/helpers";
-
-type _Block = Omit<Block, "inputSchema" | "outputSchema"> & {
-  uiKey?: string;
-  inputSchema: BlockIORootSchema | GraphInputSchema;
-  outputSchema: BlockIORootSchema | GraphOutputSchema;
-  hardcodedValues?: Record<string, any>;
-  _cached?: {
-    blockName: string;
-    beautifiedName: string;
-    description: string;
-  };
-};
-
-// Hook to preprocess blocks with cached expensive operations
-const useSearchableBlocks = (blocks: _Block[]): _Block[] => {
-  return useMemo(
-    () =>
-      blocks.map((block) => {
-        if (!block._cached) {
-          block._cached = {
-            blockName: block.name.toLowerCase(),
-            beautifiedName: beautifyString(block.name).toLowerCase(),
-            description: block.description.toLowerCase(),
-          };
-        }
-        return block;
-      }),
-    [blocks],
-  );
-};
-
-interface BlocksControlProps {
-  blocks: _Block[];
-  addBlock: (
-    id: string,
-    name: string,
-    hardcodedValues: Record<string, any>,
-  ) => void;
-  pinBlocksPopover: boolean;
-  flows: GraphMeta[];
-  nodes: CustomNode[];
-}
-
-/**
- * A React functional component that displays a control for managing blocks.
- *
- * @component
- * @param {Object} BlocksControlProps - The properties for the BlocksControl component.
- * @param {Block[]} BlocksControlProps.blocks - An array of blocks to be displayed and filtered.
- * @param {(id: string, name: string) => void} BlocksControlProps.addBlock - A function to call when a block is added.
- * @returns The rendered BlocksControl component.
- */
-export function BlocksControl({
-  blocks: _blocks,
-  addBlock,
-  pinBlocksPopover,
-  flows,
-  nodes,
-}: BlocksControlProps) {
-  const [searchQuery, setSearchQuery] = useState("");
-  const deferredSearchQuery = useDeferredValue(searchQuery);
-  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
-
-  const blocks = useSearchableBlocks(_blocks);
-
-  const graphHasWebhookNodes = nodes.some((n) =>
-    [BlockUIType.WEBHOOK, BlockUIType.WEBHOOK_MANUAL].includes(n.data.uiType),
-  );
-  const graphHasInputNodes = nodes.some(
-    (n) => n.data.uiType == BlockUIType.INPUT,
-  );
-
-  const filteredAvailableBlocks = useMemo(() => {
-    const blockList = blocks
-      .filter((b) => b.uiType !== BlockUIType.AGENT)
-      .sort((a, b) => a.name.localeCompare(b.name));
-
-    // Agent blocks are created from GraphMeta which doesn't include schemas.
-    // Schemas will be fetched on-demand when the block is actually added.
-    const agentBlockList = flows
-      .map((flow): _Block => {
-        return {
-          id: SpecialBlockID.AGENT,
-          name: flow.name,
-          description:
-            `Ver.${flow.version}` +
-            (flow.description ? ` | ${flow.description}` : ""),
-          categories: [{ category: "AGENT", description: "" }],
-          // Empty schemas - will be populated when block is added
-          inputSchema: { type: "object", properties: {} },
-          outputSchema: { type: "object", properties: {} },
-          staticOutput: false,
-          uiType: BlockUIType.AGENT,
-          costs: [],
-          uiKey: flow.id,
-          hardcodedValues: {
-            graph_id: flow.id,
-            graph_version: flow.version,
-            // Schemas will be fetched on-demand when block is added
-          },
-        };
-      })
-      .map(
-        (agentBlock): _Block => ({
-          ...agentBlock,
-          _cached: {
-            blockName: agentBlock.name.toLowerCase(),
-            beautifiedName: beautifyString(agentBlock.name).toLowerCase(),
-            description: agentBlock.description.toLowerCase(),
-          },
-        }),
-      );
-
-    return blockList
-      .concat(agentBlockList)
-      .map((block) => ({
-        block,
-        score: blockScoreForQuery(block, deferredSearchQuery),
-      }))
-      .filter(
-        ({ block, score }) =>
-          score > 0 &&
-          (!selectedCategory ||
-            block.categories.some((cat) => cat.category === selectedCategory)),
-      )
-      .sort((a, b) => b.score - a.score)
-      .map(({ block }) => ({
-        ...block,
-        notAvailable:
-          (block.uiType == BlockUIType.WEBHOOK &&
-            graphHasWebhookNodes &&
-            "Agents can only have one webhook-triggered block") ||
-          (block.uiType == BlockUIType.WEBHOOK &&
-            graphHasInputNodes &&
-            "Webhook-triggered blocks can't be used together with input blocks") ||
-          (block.uiType == BlockUIType.INPUT &&
-            graphHasWebhookNodes &&
-            "Input blocks can't be used together with a webhook-triggered block") ||
-          null,
-      }));
-  }, [
-    blocks,
-    flows,
-    selectedCategory,
-    deferredSearchQuery,
-    graphHasInputNodes,
-    graphHasWebhookNodes,
-  ]);
-
-  const resetFilters = useCallback(() => {
-    setSearchQuery("");
-    setSelectedCategory(null);
-  }, []);
-
-  // Handler to add a block, fetching graph data on-demand for agent blocks
-  const handleAddBlock = useCallback(
-    async (block: _Block & { notAvailable: string | null }) => {
-      if (block.notAvailable) return;
-
-      // For agent blocks, fetch the full graph to get schemas
-      if (block.uiType === BlockUIType.AGENT && block.hardcodedValues) {
-        const graphID = block.hardcodedValues.graph_id as string;
-        const graphVersion = block.hardcodedValues.graph_version as number;
-        const graphData = okData(
-          await getV1GetSpecificGraph(graphID, { version: graphVersion }),
-        );
-
-        if (graphData) {
-          addBlock(block.id, block.name, {
-            ...block.hardcodedValues,
-            input_schema: graphData.input_schema,
-            output_schema: graphData.output_schema,
-          });
-        } else {
-          // Fallback: add without schemas (will be incomplete)
-          console.error("Failed to fetch graph data for agent block");
-          addBlock(block.id, block.name, block.hardcodedValues || {});
-        }
-      } else {
-        addBlock(block.id, block.name, block.hardcodedValues || {});
-      }
-    },
-    [addBlock],
-  );
-
-  // Extract unique categories from blocks
-  const categories = useMemo(() => {
-    return Array.from(
-      new Set([
-        null,
-        ...blocks
-          .flatMap((block) => block.categories.map((cat) => cat.category))
-          .sort(),
-      ]),
-    );
-  }, [blocks]);
-
-  return (
-    <Popover
-      open={pinBlocksPopover ? true : undefined}
-      onOpenChange={(open) => open || resetFilters()}
-    >
-      <Tooltip delayDuration={500}>
-        <TooltipTrigger asChild>
-          <PopoverTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              data-id="blocks-control-popover-trigger"
-              data-testid="blocks-control-blocks-button"
-              name="Blocks"
-              className="dark:hover:bg-slate-800"
-            >
-              <IconToyBrick />
-            </Button>
-          </PopoverTrigger>
-        </TooltipTrigger>
-        <TooltipContent side="right">Blocks</TooltipContent>
-      </Tooltip>
-      <PopoverContent
-        side="right"
-        sideOffset={22}
-        align="start"
-        className="absolute -top-3 w-[17rem] rounded-xl border-none p-0 shadow-none md:w-[30rem]"
-        data-id="blocks-control-popover-content"
-      >
-        <Card className="p-3 pb-0 dark:bg-slate-900">
-          <CardHeader className="flex flex-col gap-x-8 gap-y-1 p-3 px-2">
-            <div className="items-center justify-between">
-              <Label
-                htmlFor="search-blocks"
-                className="whitespace-nowrap text-base font-bold text-black dark:text-white 2xl:text-xl"
-                data-id="blocks-control-label"
-                data-testid="blocks-control-blocks-label"
-              >
-                Blocks
-              </Label>
-            </div>
-            <div className="relative flex items-center">
-              <MagnifyingGlassIcon className="absolute m-2 h-5 w-5 text-gray-500 dark:text-gray-400" />
-              <Input
-                id="search-blocks"
-                type="text"
-                placeholder="Search blocks"
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                className="rounded-lg px-8 py-5 dark:bg-slate-800 dark:text-white"
-                data-id="blocks-control-search-input"
-                autoComplete="off"
-              />
-            </div>
-            <div
-              className="mt-2 flex flex-wrap gap-2"
-              data-testid="blocks-categories-list"
-            >
-              {categories.map((category) => {
-                const color = getPrimaryCategoryColor([
-                  { category: category || "All", description: "" },
-                ]);
-                const colorClass =
-                  selectedCategory === category ? `${color}` : "";
-                return (
-                  <div
-                    key={category}
-                    data-testid="blocks-category"
-                    role="button"
-                    className={`cursor-pointer rounded-xl border px-2 py-2 text-xs font-medium dark:border-slate-700 dark:text-white ${colorClass}`}
-                    onClick={() =>
-                      setSelectedCategory(
-                        selectedCategory === category ? null : category,
-                      )
-                    }
-                  >
-                    {beautifyString((category || "All").toLowerCase())}
-                  </div>
-                );
-              })}
-            </div>
-          </CardHeader>
-          <CardContent className="overflow-scroll border-t border-t-gray-200 p-0 dark:border-t-slate-700">
-            <ScrollArea
-              className="h-[60vh] w-full"
-              data-id="blocks-control-scroll-area"
-            >
-              {filteredAvailableBlocks.map((block) => (
-                <Card
-                  key={block.uiKey || block.id}
-                  className={`m-2 my-4 flex h-20 shadow-none dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700 ${
-                    block.notAvailable
-                      ? "cursor-not-allowed opacity-50"
-                      : "cursor-move hover:shadow-lg"
-                  }`}
-                  data-id={`block-card-${block.id}`}
-                  draggable={!block.notAvailable}
-                  onDragStart={(e) => {
-                    if (block.notAvailable) return;
-                    e.dataTransfer.effectAllowed = "copy";
-                    e.dataTransfer.setData(
-                      "application/reactflow",
-                      JSON.stringify({
-                        blockId: block.id,
-                        blockName: block.name,
-                        hardcodedValues: block?.hardcodedValues || {},
-                      }),
-                    );
-                  }}
-                  onClick={() => handleAddBlock(block)}
-                  title={block.notAvailable ?? undefined}
-                >
-                  <div
-                    className={`-ml-px h-full w-3 rounded-l-xl ${getPrimaryCategoryColor(block.categories)}`}
-                  ></div>
-
-                  <div className="mx-3 flex flex-1 items-center justify-between">
-                    <div className="mr-2 min-w-0">
-                      <span
-                        className="block truncate pb-1 text-sm font-semibold dark:text-white"
-                        data-id={`block-name-${block.id}`}
-                        data-type={block.uiType}
-                        data-testid={`block-name-${block.id}`}
-                      >
-                        <TextRenderer
-                          value={beautifyString(block.name).replace(
-                            / Block$/,
-                            "",
-                          )}
-                          truncateLengthLimit={45}
-                        />
-                      </span>
-                      <span
-                        className="block break-all text-xs font-normal text-gray-500 dark:text-gray-400"
-                        data-testid={`block-description-${block.id}`}
-                      >
-                        <TextRenderer
-                          value={block.description}
-                          truncateLengthLimit={165}
-                        />
-                      </span>
-                    </div>
-                    <div
-                      className="flex flex-shrink-0 items-center gap-1"
-                      data-id={`block-tooltip-${block.id}`}
-                      data-testid={`block-add`}
-                    >
-                      <PlusIcon className="h-6 w-6 rounded-lg bg-gray-200 stroke-black stroke-[0.5px] p-1 dark:bg-gray-700 dark:stroke-white" />
-                    </div>
-                  </div>
-                </Card>
-              ))}
-            </ScrollArea>
-          </CardContent>
-        </Card>
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-/**
- * Evaluates how well a block matches the search query and returns a relevance score.
- * The scoring algorithm works as follows:
- * - Returns 1 if no query (all blocks match equally)
- * - Normalized query for case-insensitive matching
- * - Returns 3 for exact substring matches in block name (highest priority)
- * - Returns 2 when all query words appear in the block name (regardless of order)
- * - Returns 1.X for blocks with names similar to query using Jaro-Winkler distance (X is similarity score)
- * - Returns 0.5 when all query words appear in the block description (lowest priority)
- * - Returns 0 for no match
- *
- * Higher scores will appear first in search results.
- */
-function blockScoreForQuery(block: _Block, query: string): number {
-  if (!query) return 1;
-  const normalizedQuery = query.toLowerCase().trim();
-  const queryWords = normalizedQuery.split(/\s+/);
-
-  // Use cached values for performance
-  const { blockName, beautifiedName, description } = block._cached!;
-
-  // 1. Exact match in name (highest priority)
-  if (
-    blockName.includes(normalizedQuery) ||
-    beautifiedName.includes(normalizedQuery)
-  ) {
-    return 3;
-  }
-
-  // 2. All query words in name (regardless of order)
-  const allWordsInName = queryWords.every(
-    (word) => blockName.includes(word) || beautifiedName.includes(word),
-  );
-  if (allWordsInName) return 2;
-
-  // 3. Similarity with name (Jaro-Winkler)
-  const similarityThreshold = 0.65;
-  const nameSimilarity = jaro(blockName, normalizedQuery);
-  const beautifiedSimilarity = jaro(beautifiedName, normalizedQuery);
-  const maxSimilarity = Math.max(nameSimilarity, beautifiedSimilarity);
-  if (maxSimilarity > similarityThreshold) {
-    return 1 + maxSimilarity; // Score between 1 and 2
-  }
-
-  // 4. All query words in description (lower priority)
-  const allWordsInDescription = queryWords.every((word) =>
-    description.includes(word),
-  );
-  if (allWordsInDescription) return 0.5;
-
-  return 0;
-}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/BuildActionBar.tsx

@@ -1,119 +0,0 @@
-import React from "react";
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/__legacy__/ui/button";
-import { LogOut } from "lucide-react";
-import { ClockIcon, WarningIcon } from "@phosphor-icons/react";
-import { IconPlay, IconSquare } from "@/components/__legacy__/ui/icons";
-
-interface Props {
-  onClickAgentOutputs?: () => void;
-  onClickRunAgent?: () => void;
-  onClickStopRun: () => void;
-  onClickScheduleButton?: () => void;
-  isRunning: boolean;
-  isDisabled: boolean;
-  className?: string;
-  resolutionModeActive?: boolean;
-}
-
-export const BuildActionBar: React.FC<Props> = ({
-  onClickAgentOutputs,
-  onClickRunAgent,
-  onClickStopRun,
-  onClickScheduleButton,
-  isRunning,
-  isDisabled,
-  className,
-  resolutionModeActive = false,
-}) => {
-  const buttonClasses =
-    "flex items-center gap-2 text-sm font-medium md:text-lg";
-
-  // Show resolution mode message instead of action buttons
-  if (resolutionModeActive) {
-    return (
-      <div
-        className={cn(
-          "flex w-fit select-none items-center justify-center p-4",
-          className,
-        )}
-      >
-        <div className="flex items-center gap-3 rounded-lg border border-amber-300 bg-amber-50 px-4 py-3 dark:border-amber-700 dark:bg-amber-900/30">
-          <WarningIcon className="size-5 text-amber-600 dark:text-amber-400" />
-          <span className="text-sm font-medium text-amber-800 dark:text-amber-200">
-            Remove incompatible connections to continue
-          </span>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={cn(
-        "flex w-fit select-none items-center justify-center p-4",
-        className,
-      )}
-    >
-      <div className="flex gap-1 md:gap-4">
-        {onClickAgentOutputs && (
-          <Button
-            className={buttonClasses}
-            variant="outline"
-            size="primary"
-            onClick={onClickAgentOutputs}
-            title="View agent outputs"
-          >
-            <LogOut className="hidden size-5 md:flex" /> Agent Outputs
-          </Button>
-        )}
-
-        {!isRunning ? (
-          <Button
-            className={cn(
-              buttonClasses,
-              onClickRunAgent && isDisabled
-                ? "cursor-default opacity-50 hover:bg-accent"
-                : "",
-            )}
-            variant="accent"
-            size="primary"
-            onClick={onClickRunAgent}
-            disabled={!onClickRunAgent}
-            title="Run the agent"
-            aria-label="Run the agent"
-            data-testid="primary-action-run-agent"
-            data-tutorial-id="primary-action-run-agent"
-          >
-            <IconPlay /> Run
-          </Button>
-        ) : (
-          <Button
-            className={buttonClasses}
-            variant="destructive"
-            size="primary"
-            onClick={onClickStopRun}
-            title="Stop the agent"
-            data-id="primary-action-stop-agent"
-          >
-            <IconSquare /> Stop
-          </Button>
-        )}
-
-        {onClickScheduleButton && (
-          <Button
-            className={buttonClasses}
-            variant="outline"
-            size="primary"
-            onClick={onClickScheduleButton}
-            title="Set up a run schedule for the agent"
-            data-id="primary-action-schedule-agent"
-          >
-            <ClockIcon className="hidden h-5 w-5 md:flex" />
-            Schedule Run
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-};

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/ConnectionLine.tsx

@@ -1,33 +0,0 @@
-import {
-  BaseEdge,
-  ConnectionLineComponentProps,
-  Node,
-  getBezierPath,
-  Position,
-} from "@xyflow/react";
-
-export default function ConnectionLine<NodeType extends Node>({
-  fromPosition,
-  fromHandle,
-  fromX,
-  fromY,
-  toPosition,
-  toX,
-  toY,
-}: ConnectionLineComponentProps<NodeType>) {
-  const sourceX =
-    fromPosition === Position.Right
-      ? fromX + ((fromHandle?.width ?? 0) / 2 - 5)
-      : fromX - ((fromHandle?.width ?? 0) / 2 - 5);
-
-  const [path] = getBezierPath({
-    sourceX: sourceX,
-    sourceY: fromY,
-    sourcePosition: fromPosition,
-    targetX: toX,
-    targetY: toY,
-    targetPosition: toPosition,
-  });
-
-  return <BaseEdge path={path} style={{ strokeWidth: 2, stroke: "#555" }} />;
-}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/ControlPanel.tsx

@@ -1,86 +0,0 @@
-import { Card, CardContent } from "@/components/__legacy__/ui/card";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/atoms/Tooltip/BaseTooltip";
-import { Button } from "@/components/__legacy__/ui/button";
-import { Separator } from "@/components/__legacy__/ui/separator";
-import { cn } from "@/lib/utils";
-import React from "react";
-
-/**
- * Represents a control element for the ControlPanel Component.
- * @type {Object} Control
- * @property {React.ReactNode} icon - The icon of the control from lucide-react https://lucide.dev/icons/
- * @property {string} label - The label of the control, to be leveraged by ToolTip.
- * @property {onclick} onClick - The function to be executed when the control is clicked.
- */
-export type Control = {
-  icon: React.ReactNode;
-  label: string;
-  disabled?: boolean;
-  onClick: () => void;
-};
-
-interface ControlPanelProps {
-  controls: Control[];
-  topChildren?: React.ReactNode;
-  botChildren?: React.ReactNode;
-  className?: string;
-}
-
-/**
- * ControlPanel component displays a panel with controls as icons.tsx with the ability to take in children.
- * @param {Object} ControlPanelProps - The properties of the control panel component.
- * @param {Array} ControlPanelProps.controls - An array of control objects representing actions to be preformed.
- * @param {Array} ControlPanelProps.children - The child components of the control panel.
- * @param {string} ControlPanelProps.className - Additional CSS class names for the control panel.
- * @returns The rendered control panel component.
- */
-export const ControlPanel = ({
-  controls,
-  topChildren,
-  botChildren,
-  className,
-}: ControlPanelProps) => {
-  return (
-    <Card className={cn("m-4 mt-24 w-14 dark:bg-slate-900", className)}>
-      <CardContent className="p-0">
-        <div className="flex flex-col items-center gap-3 rounded-xl py-3">
-          {topChildren}
-          <Separator className="dark:bg-slate-700" />
-          {controls.map((control, index) => (
-            <Tooltip key={index} delayDuration={500}>
-              <TooltipTrigger asChild>
-                <div>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    onClick={() => control.onClick()}
-                    data-id={`control-button-${index}`}
-                    data-testid={`blocks-control-${control.label.toLowerCase()}-button`}
-                    disabled={control.disabled || false}
-                    className="dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
-                  >
-                    {control.icon}
-                    <span className="sr-only">{control.label}</span>
-                  </Button>
-                </div>
-              </TooltipTrigger>
-              <TooltipContent
-                side="right"
-                className="dark:bg-slate-800 dark:text-slate-100"
-              >
-                {control.label}
-              </TooltipContent>
-            </Tooltip>
-          ))}
-          <Separator className="dark:bg-slate-700" />
-          {botChildren}
-        </div>
-      </CardContent>
-    </Card>
-  );
-};
-export default ControlPanel;

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/CustomEdge/CustomEdge.tsx

@@ -1,240 +0,0 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-  useRef,
-} from "react";
-import {
-  BaseEdge,
-  EdgeLabelRenderer,
-  EdgeProps,
-  useReactFlow,
-  XYPosition,
-  Edge,
-  Node,
-} from "@xyflow/react";
-import "./customedge.css";
-import { X } from "lucide-react";
-import { BuilderContext } from "../Flow/Flow";
-import { NodeExecutionResult } from "@/lib/autogpt-server-api";
-import { useCustomEdge } from "./useCustomEdge";
-
-export type CustomEdgeData = {
-  edgeColor: string;
-  sourcePos?: XYPosition;
-  isStatic?: boolean;
-  beadUp: number;
-  beadDown: number;
-  beadData?: Map<string, NodeExecutionResult["status"]>;
-};
-
-type Bead = {
-  t: number;
-  targetT: number;
-  startTime: number;
-};
-
-export type CustomEdge = Edge<CustomEdgeData, "custom">;
-
-export function CustomEdge({
-  id,
-  data,
-  selected,
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
-  markerEnd,
-}: EdgeProps<CustomEdge>) {
-  const [beads, setBeads] = useState<{
-    beads: Bead[];
-    created: number;
-    destroyed: number;
-  }>({ beads: [], created: 0, destroyed: 0 });
-  const beadsRef = useRef(beads);
-  const { svgPath, length, getPointForT, getTForDistance } = useCustomEdge(
-    sourceX - 5,
-    sourceY - 5,
-    targetX + 3,
-    targetY - 5,
-  );
-  const { deleteElements } = useReactFlow<Node, CustomEdge>();
-  const builderContext = useContext(BuilderContext);
-  const { visualizeBeads } = builderContext ?? {
-    visualizeBeads: "no",
-  };
-
-  // Check if this edge is broken (during resolution mode)
-  const isBroken =
-    builderContext?.resolutionMode?.active &&
-    builderContext?.resolutionMode?.brokenEdgeIds?.includes(id);
-
-  const onEdgeRemoveClick = () => {
-    deleteElements({ edges: [{ id }] });
-  };
-
-  const animationDuration = 500; // Duration in milliseconds for bead to travel the curve
-  const beadDiameter = 12;
-  const deltaTime = 16;
-
-  const setTargetPositions = useCallback(
-    (beads: Bead[]) => {
-      const distanceBetween = Math.min(
-        (length - beadDiameter) / (beads.length + 1),
-        beadDiameter,
-      );
-
-      return beads.map((bead, index) => {
-        const distanceFromEnd = beadDiameter * 1.35;
-        const targetPosition = distanceBetween * index + distanceFromEnd;
-        const t = getTForDistance(-targetPosition);
-
-        return {
-          ...bead,
-          t: visualizeBeads === "animate" ? bead.t : t,
-          targetT: t,
-        } as Bead;
-      });
-    },
-    [getTForDistance, length, visualizeBeads],
-  );
-
-  beadsRef.current = beads;
-  useEffect(() => {
-    const beadUp: number = data?.beadUp ?? 0;
-    const beadDown: number = data?.beadDown ?? 0;
-
-    if (
-      beadUp === 0 &&
-      beadDown === 0 &&
-      (beads.created > 0 || beads.destroyed > 0)
-    ) {
-      setBeads({ beads: [], created: 0, destroyed: 0 });
-      return;
-    }
-
-    // Add beads
-    if (beadUp > beads.created) {
-      setBeads(({ beads, created, destroyed }) => {
-        const newBeads = [];
-        for (let i = 0; i < beadUp - created; i++) {
-          newBeads.push({ t: 0, targetT: 0, startTime: Date.now() });
-        }
-
-        const b = setTargetPositions([...beads, ...newBeads]);
-        return { beads: b, created: beadUp, destroyed };
-      });
-    }
-
-    // Animate and remove beads
-    const interval = setInterval(
-      ({ current: beads }) => {
-        // If there are no beads visible or moving, stop re-rendering
-        if (
-          (beadUp === beads.created && beads.created === beads.destroyed) ||
-          beads.beads.every((bead) => bead.t >= bead.targetT)
-        ) {
-          clearInterval(interval);
-          return;
-        }
-
-        setBeads(({ beads, created, destroyed }) => {
-          let destroyedCount = 0;
-
-          const newBeads = beads
-            .map((bead) => {
-              const progressIncrement = deltaTime / animationDuration;
-              const t = Math.min(
-                bead.t + bead.targetT * progressIncrement,
-                bead.targetT,
-              );
-
-              return { ...bead, t };
-            })
-            .filter((bead, index) => {
-              const removeCount = beadDown - destroyed;
-              if (bead.t >= bead.targetT && index < removeCount) {
-                destroyedCount++;
-                return false;
-              }
-              return true;
-            });
-
-          return {
-            beads: setTargetPositions(newBeads),
-            created,
-            destroyed: destroyed + destroyedCount,
-          };
-        });
-      },
-      deltaTime,
-      beadsRef,
-    );
-
-    return () => clearInterval(interval);
-  }, [data?.beadUp, data?.beadDown, setTargetPositions, visualizeBeads]);
-
-  const middle = getPointForT(0.5);
-
-  // Determine edge color - red for broken edges
-  const baseColor = data?.edgeColor ?? "#555555";
-  const edgeColor = isBroken ? "#ef4444" : baseColor;
-  // Add opacity to hex color (99 = 60% opacity, 80 = 50% opacity)
-  const strokeColor = isBroken
-    ? `${edgeColor}99`
-    : selected
-      ? edgeColor
-      : `${edgeColor}80`;
-
-  return (
-    <>
-      <BaseEdge
-        path={svgPath}
-        markerEnd={markerEnd}
-        style={{
-          stroke: strokeColor,
-          strokeWidth: data?.isStatic ? 2.5 : 2,
-          strokeDasharray: data?.isStatic ? "5 3" : undefined,
-        }}
-        className="data-sentry-unmask transition-all duration-200"
-      />
-      <path
-        d={svgPath}
-        fill="none"
-        strokeOpacity={0}
-        strokeWidth={20}
-        className="data-sentry-unmask react-flow__edge-interaction"
-      />
-      <EdgeLabelRenderer>
-        <div
-          style={{
-            position: "absolute",
-            transform: `translate(-50%, -50%) translate(${middle.x}px,${middle.y}px)`,
-            pointerEvents: "all",
-          }}
-          className="edge-label-renderer"
-        >
-          <button
-            className="edge-label-button opacity-0 transition-opacity duration-200 hover:opacity-100"
-            onClick={onEdgeRemoveClick}
-          >
-            <X className="size-4" />
-          </button>
-        </div>
-      </EdgeLabelRenderer>
-      {beads.beads.map((bead, index) => {
-        const pos = getPointForT(bead.t);
-        return (
-          <circle
-            key={index}
-            cx={pos.x}
-            cy={pos.y}
-            r={beadDiameter / 2} // Bead radius
-            fill={data?.edgeColor ?? "#555555"}
-          />
-        );
-      })}
-    </>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/CustomEdge/customedge.css

@@ -1,48 +0,0 @@
-.edge-label-renderer {
-  position: absolute;
-  pointer-events: all;
-}
-
-.edge-label-button {
-  width: 20px;
-  height: 20px;
-  background: #eee;
-  border: 1px solid #fff;
-  cursor: pointer;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0;
-  color: #555;
-  opacity: 0;
-  transition:
-    opacity 0.2s ease-in-out,
-    background-color 0.2s ease-in-out;
-}
-
-.edge-label-button.visible {
-  opacity: 1;
-}
-
-.edge-label-button:hover {
-  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.08);
-  background: #f0f0f0;
-}
-
-.edge-label-button svg {
-  width: 14px;
-  height: 14px;
-}
-
-.react-flow__edge-interaction {
-  cursor: pointer;
-}
-
-.react-flow__edges > svg:has(> g.selected) {
-  z-index: 10 !important;
-}
-
-.react-flow__edgelabel-renderer {
-  z-index: 11 !important;
-}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/CustomEdge/useCustomEdge.ts

@@ -1,157 +0,0 @@
-import { useCallback, useMemo } from "react";
-
-type XYPosition = {
-  x: number;
-  y: number;
-};
-
-export type BezierPath = {
-  sourcePosition: XYPosition;
-  control1: XYPosition;
-  control2: XYPosition;
-  targetPosition: XYPosition;
-};
-
-export function useCustomEdge(
-  sourceX: number,
-  sourceY: number,
-  targetX: number,
-  targetY: number,
-) {
-  const path: BezierPath = useMemo(() => {
-    const xDifference = Math.abs(sourceX - targetX);
-    const yDifference = Math.abs(sourceY - targetY);
-    const xControlDistance =
-      sourceX < targetX ? 64 : Math.max(xDifference / 2, 64);
-    const yControlDistance = yDifference < 128 && sourceX > targetX ? -64 : 0;
-
-    return {
-      sourcePosition: { x: sourceX, y: sourceY },
-      control1: {
-        x: sourceX + xControlDistance,
-        y: sourceY + yControlDistance,
-      },
-      control2: {
-        x: targetX - xControlDistance,
-        y: targetY + yControlDistance,
-      },
-      targetPosition: { x: targetX, y: targetY },
-    };
-  }, [sourceX, sourceY, targetX, targetY]);
-
-  const svgPath = useMemo(
-    () =>
-      `M ${path.sourcePosition.x} ${path.sourcePosition.y} ` +
-      `C ${path.control1.x} ${path.control1.y} ${path.control2.x} ${path.control2.y} ` +
-      `${path.targetPosition.x}, ${path.targetPosition.y}`,
-    [path],
-  );
-
-  const getPointForT = useCallback(
-    (t: number) => {
-      // Bezier formula: (1-t)^3 * p0 + 3*(1-t)^2*t*p1 + 3*(1-t)*t^2*p2 + t^3*p3
-      const x =
-        Math.pow(1 - t, 3) * path.sourcePosition.x +
-        3 * Math.pow(1 - t, 2) * t * path.control1.x +
-        3 * (1 - t) * Math.pow(t, 2) * path.control2.x +
-        Math.pow(t, 3) * path.targetPosition.x;
-
-      const y =
-        Math.pow(1 - t, 3) * path.sourcePosition.y +
-        3 * Math.pow(1 - t, 2) * t * path.control1.y +
-        3 * (1 - t) * Math.pow(t, 2) * path.control2.y +
-        Math.pow(t, 3) * path.targetPosition.y;
-
-      return { x, y };
-    },
-    [path],
-  );
-
-  const getArcLength = useCallback(
-    (t: number, samples: number = 100) => {
-      let length = 0;
-      let prevPoint = getPointForT(0);
-
-      for (let i = 1; i <= samples; i++) {
-        const currT = (i / samples) * t;
-        const currPoint = getPointForT(currT);
-        length += Math.sqrt(
-          Math.pow(currPoint.x - prevPoint.x, 2) +
-            Math.pow(currPoint.y - prevPoint.y, 2),
-        );
-        prevPoint = currPoint;
-      }
-
-      return length;
-    },
-    [getPointForT],
-  );
-
-  const length = useMemo(() => {
-    return getArcLength(1);
-  }, [getArcLength]);
-
-  const getBezierDerivative = useCallback(
-    (t: number) => {
-      const mt = 1 - t;
-      const x =
-        3 *
-        (mt * mt * (path.control1.x - path.sourcePosition.x) +
-          2 * mt * t * (path.control2.x - path.control1.x) +
-          t * t * (path.targetPosition.x - path.control2.x));
-      const y =
-        3 *
-        (mt * mt * (path.control1.y - path.sourcePosition.y) +
-          2 * mt * t * (path.control2.y - path.control1.y) +
-          t * t * (path.targetPosition.y - path.control2.y));
-      return { x, y };
-    },
-    [path],
-  );
-
-  const getTForDistance = useCallback(
-    (distance: number, epsilon: number = 0.0001) => {
-      if (distance < 0) {
-        distance = length + distance; // If distance is negative, calculate from the end of the curve
-      }
-
-      let t = distance / getArcLength(1);
-      let prevT = 0;
-
-      while (Math.abs(t - prevT) > epsilon) {
-        prevT = t;
-        const length = getArcLength(t);
-        const derivative = Math.sqrt(
-          Math.pow(getBezierDerivative(t).x, 2) +
-            Math.pow(getBezierDerivative(t).y, 2),
-        );
-        t -= (length - distance) / derivative;
-        t = Math.max(0, Math.min(1, t)); // Clamp t between 0 and 1
-      }
-
-      return t;
-    },
-    [getArcLength, getBezierDerivative, length],
-  );
-
-  const getPointAtDistance = useCallback(
-    (distance: number) => {
-      if (distance < 0) {
-        distance = length + distance; // If distance is negative, calculate from the end of the curve
-      }
-
-      const t = getTForDistance(distance);
-      return getPointForT(t);
-    },
-    [getTForDistance, getPointForT, length],
-  );
-
-  return {
-    path,
-    svgPath,
-    length,
-    getPointForT,
-    getTForDistance,
-    getPointAtDistance,
-  };
-}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/CustomNode/IncompatibilityDialog.tsx

@@ -1,244 +0,0 @@
-import React from "react";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/__legacy__/ui/dialog";
-import { Button } from "@/components/__legacy__/ui/button";
-import { AlertTriangle, XCircle, PlusCircle } from "lucide-react";
-import { IncompatibilityInfo } from "../../../hooks/useSubAgentUpdate/types";
-import { beautifyString } from "@/lib/utils";
-import { Alert, AlertDescription } from "@/components/molecules/Alert/Alert";
-
-interface IncompatibilityDialogProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onConfirm: () => void;
-  currentVersion: number;
-  latestVersion: number;
-  agentName: string;
-  incompatibilities: IncompatibilityInfo;
-}
-
-export const IncompatibilityDialog: React.FC<IncompatibilityDialogProps> = ({
-  isOpen,
-  onClose,
-  onConfirm,
-  currentVersion,
-  latestVersion,
-  agentName,
-  incompatibilities,
-}) => {
-  const hasMissingInputs = incompatibilities.missingInputs.length > 0;
-  const hasMissingOutputs = incompatibilities.missingOutputs.length > 0;
-  const hasNewInputs = incompatibilities.newInputs.length > 0;
-  const hasNewOutputs = incompatibilities.newOutputs.length > 0;
-  const hasNewRequired = incompatibilities.newRequiredInputs.length > 0;
-  const hasTypeMismatches = incompatibilities.inputTypeMismatches.length > 0;
-
-  const hasInputChanges = hasMissingInputs || hasNewInputs;
-  const hasOutputChanges = hasMissingOutputs || hasNewOutputs;
-
-  return (
-    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
-      <DialogContent className="max-w-lg">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <AlertTriangle className="h-5 w-5 text-amber-500" />
-            Incompatible Update
-          </DialogTitle>
-          <DialogDescription>
-            Updating <strong>{beautifyString(agentName)}</strong> from v
-            {currentVersion} to v{latestVersion} will break some connections.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-4 py-2">
-          {/* Input changes - two column layout */}
-          {hasInputChanges && (
-            <TwoColumnSection
-              title="Input Changes"
-              leftIcon={<XCircle className="h-4 w-4 text-red-500" />}
-              leftTitle="Removed"
-              leftItems={incompatibilities.missingInputs}
-              rightIcon={<PlusCircle className="h-4 w-4 text-green-500" />}
-              rightTitle="Added"
-              rightItems={incompatibilities.newInputs}
-            />
-          )}
-
-          {/* Output changes - two column layout */}
-          {hasOutputChanges && (
-            <TwoColumnSection
-              title="Output Changes"
-              leftIcon={<XCircle className="h-4 w-4 text-red-500" />}
-              leftTitle="Removed"
-              leftItems={incompatibilities.missingOutputs}
-              rightIcon={<PlusCircle className="h-4 w-4 text-green-500" />}
-              rightTitle="Added"
-              rightItems={incompatibilities.newOutputs}
-            />
-          )}
-
-          {hasTypeMismatches && (
-            <SingleColumnSection
-              icon={<XCircle className="h-4 w-4 text-red-500" />}
-              title="Type Changed"
-              description="These connected inputs have a different type:"
-              items={incompatibilities.inputTypeMismatches.map(
-                (m) => `${m.name} (${m.oldType} → ${m.newType})`,
-              )}
-            />
-          )}
-
-          {hasNewRequired && (
-            <SingleColumnSection
-              icon={<PlusCircle className="h-4 w-4 text-amber-500" />}
-              title="New Required Inputs"
-              description="These inputs are now required:"
-              items={incompatibilities.newRequiredInputs}
-            />
-          )}
-        </div>
-
-        <Alert variant="warning">
-          <AlertDescription>
-            If you proceed, you&apos;ll need to remove the broken connections
-            before you can save or run your agent.
-          </AlertDescription>
-        </Alert>
-
-        <DialogFooter className="gap-2 sm:gap-0">
-          <Button variant="outline" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button
-            variant="destructive"
-            onClick={onConfirm}
-            className="bg-amber-600 hover:bg-amber-700"
-          >
-            Update Anyway
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-interface TwoColumnSectionProps {
-  title: string;
-  leftIcon: React.ReactNode;
-  leftTitle: string;
-  leftItems: string[];
-  rightIcon: React.ReactNode;
-  rightTitle: string;
-  rightItems: string[];
-}
-
-const TwoColumnSection: React.FC<TwoColumnSectionProps> = ({
-  title,
-  leftIcon,
-  leftTitle,
-  leftItems,
-  rightIcon,
-  rightTitle,
-  rightItems,
-}) => (
-  <div className="rounded-md border border-gray-200 p-3 dark:border-gray-700">
-    <span className="font-medium">{title}</span>
-    <div className="mt-2 grid grid-cols-2 items-start gap-4">
-      {/* Left column - Breaking changes */}
-      <div className="min-w-0">
-        <div className="flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400">
-          {leftIcon}
-          <span>{leftTitle}</span>
-        </div>
-        <ul className="mt-1.5 space-y-1">
-          {leftItems.length > 0 ? (
-            leftItems.map((item) => (
-              <li
-                key={item}
-                className="text-sm text-gray-700 dark:text-gray-300"
-              >
-                <code className="rounded bg-red-50 px-1 py-0.5 font-mono text-xs text-red-700 dark:bg-red-900/30 dark:text-red-300">
-                  {item}
-                </code>
-              </li>
-            ))
-          ) : (
-            <li className="text-sm italic text-gray-400 dark:text-gray-500">
-              None
-            </li>
-          )}
-        </ul>
-      </div>
-
-      {/* Right column - Possible solutions */}
-      <div className="min-w-0">
-        <div className="flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400">
-          {rightIcon}
-          <span>{rightTitle}</span>
-        </div>
-        <ul className="mt-1.5 space-y-1">
-          {rightItems.length > 0 ? (
-            rightItems.map((item) => (
-              <li
-                key={item}
-                className="text-sm text-gray-700 dark:text-gray-300"
-              >
-                <code className="rounded bg-green-50 px-1 py-0.5 font-mono text-xs text-green-700 dark:bg-green-900/30 dark:text-green-300">
-                  {item}
-                </code>
-              </li>
-            ))
-          ) : (
-            <li className="text-sm italic text-gray-400 dark:text-gray-500">
-              None
-            </li>
-          )}
-        </ul>
-      </div>
-    </div>
-  </div>
-);
-
-interface SingleColumnSectionProps {
-  icon: React.ReactNode;
-  title: string;
-  description: string;
-  items: string[];
-}
-
-const SingleColumnSection: React.FC<SingleColumnSectionProps> = ({
-  icon,
-  title,
-  description,
-  items,
-}) => (
-  <div className="rounded-md border border-gray-200 p-3 dark:border-gray-700">
-    <div className="flex items-center gap-2">
-      {icon}
-      <span className="font-medium">{title}</span>
-    </div>
-    <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
-      {description}
-    </p>
-    <ul className="mt-2 space-y-1">
-      {items.map((item) => (
-        <li
-          key={item}
-          className="ml-4 list-disc text-sm text-gray-700 dark:text-gray-300"
-        >
-          <code className="rounded bg-gray-100 px-1 py-0.5 font-mono text-xs dark:bg-gray-800">
-            {item}
-          </code>
-        </li>
-      ))}
-    </ul>
-  </div>
-);
-
-export default IncompatibilityDialog;

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/CustomNode/SubAgentUpdateBar.tsx

@@ -1,130 +0,0 @@
-import React from "react";
-import { Button } from "@/components/__legacy__/ui/button";
-import { ArrowUp, AlertTriangle, Info } from "lucide-react";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/atoms/Tooltip/BaseTooltip";
-import { IncompatibilityInfo } from "../../../hooks/useSubAgentUpdate/types";
-import { cn } from "@/lib/utils";
-
-interface SubAgentUpdateBarProps {
-  currentVersion: number;
-  latestVersion: number;
-  isCompatible: boolean;
-  incompatibilities: IncompatibilityInfo | null;
-  onUpdate: () => void;
-  isInResolutionMode?: boolean;
-}
-
-export const SubAgentUpdateBar: React.FC<SubAgentUpdateBarProps> = ({
-  currentVersion,
-  latestVersion,
-  isCompatible,
-  incompatibilities,
-  onUpdate,
-  isInResolutionMode = false,
-}) => {
-  if (isInResolutionMode) {
-    return <ResolutionModeBar incompatibilities={incompatibilities} />;
-  }
-
-  return (
-    <div className="flex items-center justify-between gap-2 rounded-t-lg bg-blue-50 px-3 py-2 dark:bg-blue-900/30">
-      <div className="flex items-center gap-2">
-        <ArrowUp className="h-4 w-4 text-blue-600 dark:text-blue-400" />
-        <span className="text-sm text-blue-700 dark:text-blue-300">
-          Update available (v{currentVersion} → v{latestVersion})
-        </span>
-        {!isCompatible && (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <AlertTriangle className="h-4 w-4 text-amber-500" />
-            </TooltipTrigger>
-            <TooltipContent className="max-w-xs">
-              <p className="font-medium">Incompatible changes detected</p>
-              <p className="text-xs text-gray-400">
-                Click Update to see details
-              </p>
-            </TooltipContent>
-          </Tooltip>
-        )}
-      </div>
-      <Button
-        size="sm"
-        variant={isCompatible ? "default" : "outline"}
-        onClick={onUpdate}
-        className={cn(
-          "h-7 text-xs",
-          !isCompatible && "border-amber-500 text-amber-600 hover:bg-amber-50",
-        )}
-      >
-        Update
-      </Button>
-    </div>
-  );
-};
-
-interface ResolutionModeBarProps {
-  incompatibilities: IncompatibilityInfo | null;
-}
-
-const ResolutionModeBar: React.FC<ResolutionModeBarProps> = ({
-  incompatibilities,
-}) => {
-  const formatIncompatibilities = () => {
-    if (!incompatibilities) return "No incompatibilities";
-
-    const items: string[] = [];
-
-    if (incompatibilities.missingInputs.length > 0) {
-      items.push(
-        `Missing inputs: ${incompatibilities.missingInputs.join(", ")}`,
-      );
-    }
-    if (incompatibilities.missingOutputs.length > 0) {
-      items.push(
-        `Missing outputs: ${incompatibilities.missingOutputs.join(", ")}`,
-      );
-    }
-    if (incompatibilities.newRequiredInputs.length > 0) {
-      items.push(
-        `New required inputs: ${incompatibilities.newRequiredInputs.join(", ")}`,
-      );
-    }
-    if (incompatibilities.inputTypeMismatches.length > 0) {
-      const mismatches = incompatibilities.inputTypeMismatches
-        .map((m) => `${m.name} (${m.oldType} → ${m.newType})`)
-        .join(", ");
-      items.push(`Type changed: ${mismatches}`);
-    }
-
-    return items.join("\n");
-  };
-
-  return (
-    <div className="flex items-center justify-between gap-2 rounded-t-lg bg-amber-50 px-3 py-2 dark:bg-amber-900/30">
-      <div className="flex items-center gap-2">
-        <AlertTriangle className="h-4 w-4 text-amber-600 dark:text-amber-400" />
-        <span className="text-sm text-amber-700 dark:text-amber-300">
-          Remove incompatible connections
-        </span>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Info className="h-4 w-4 cursor-help text-amber-500" />
-          </TooltipTrigger>
-          <TooltipContent className="max-w-sm whitespace-pre-line">
-            <p className="font-medium">Incompatible changes:</p>
-            <p className="mt-1 text-xs">{formatIncompatibilities()}</p>
-            <p className="mt-2 text-xs text-gray-400">
-              Delete the red connections to continue
-            </p>
-          </TooltipContent>
-        </Tooltip>
-      </div>
-    </div>
-  );
-};
-
-export default SubAgentUpdateBar;

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/CustomNode/customnode.css

@@ -1,131 +0,0 @@
-.custom-node {
-  color: #000000;
-  box-sizing: border-box;
-  transition: border-color 0.3s ease-in-out;
-}
-
-.custom-node .custom-switch {
-  padding: 0.5rem 1.25rem;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.error-message {
-  color: #d9534f;
-  font-size: 13px;
-  padding-left: 0.5rem;
-}
-
-/* Existing styles */
-.handle-container {
-  display: flex;
-  position: relative;
-  margin-bottom: 0px;
-  padding: 5px;
-  min-height: 44px;
-  height: 100%;
-}
-
-.react-flow__handle {
-  background: transparent;
-  width: auto;
-  height: auto;
-  border: 0;
-  position: relative;
-  transform: none;
-}
-
-.border-error {
-  border: 1px solid #d9534f;
-}
-
-.select-input {
-  width: 100%;
-  padding: 5px;
-  border-radius: 4px;
-  border: 1px solid #000;
-  background: #fff;
-  color: #000;
-}
-
-.radio-label {
-  display: block;
-  margin: 5px 0;
-  color: #000;
-}
-
-.number-input {
-  width: 100%;
-  padding: 5px;
-  border-radius: 4px;
-  background: #fff;
-  color: #000;
-}
-
-.array-item-container {
-  display: flex;
-  align-items: center;
-  margin-bottom: 5px;
-}
-
-.array-item-input {
-  flex-grow: 1;
-  padding: 5px;
-  border-radius: 4px;
-  border: 1px solid #000;
-  background: #fff;
-  color: #000;
-}
-
-.array-item-remove {
-  background: #d9534f;
-  border: none;
-  color: white;
-  cursor: pointer;
-  margin-left: 5px;
-  border-radius: 4px;
-  padding: 5px 10px;
-}
-
-.array-item-add {
-  background: #5bc0de;
-  border: none;
-  color: white;
-  cursor: pointer;
-  border-radius: 4px;
-  padding: 5px 10px;
-  margin-top: 5px;
-}
-
-.error-message {
-  color: #d9534f;
-  font-size: 13px;
-  margin-top: 5px;
-  margin-left: 5px;
-}
-
-/* Styles for node states */
-.completed {
-  border-color: #27ae60; /* Green border for completed nodes */
-}
-
-.running {
-  border-color: #f39c12; /* Orange border for running nodes */
-}
-
-.failed {
-  border-color: #c0392b; /* Red border for failed nodes */
-}
-
-.incomplete {
-  border-color: #9f14ab; /* Pink border for incomplete nodes */
-}
-
-.queued {
-  border-color: #25e6e6; /* Cyan border for queued nodes */
-}
-
-.custom-switch {
-  padding-left: 2px;
-}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/DataTable.tsx

@@ -1,166 +0,0 @@
-import { beautifyString } from "@/lib/utils";
-import { Clipboard, Maximize2 } from "lucide-react";
-import React, { useMemo, useState } from "react";
-import { Button } from "../../../../../components/__legacy__/ui/button";
-import { ContentRenderer } from "../../../../../components/__legacy__/ui/render";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "../../../../../components/__legacy__/ui/table";
-import type { OutputMetadata } from "@/components/contextual/OutputRenderers";
-import {
-  globalRegistry,
-  OutputItem,
-} from "@/components/contextual/OutputRenderers";
-import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
-import { useToast } from "../../../../../components/molecules/Toast/use-toast";
-import ExpandableOutputDialog from "./ExpandableOutputDialog";
-
-type DataTableProps = {
-  title?: string;
-  truncateLongData?: boolean;
-  data: { [key: string]: Array<any> };
-};
-
-export default function DataTable({
-  title,
-  truncateLongData,
-  data,
-}: DataTableProps) {
-  const { toast } = useToast();
-  const enableEnhancedOutputHandling = useGetFlag(
-    Flag.ENABLE_ENHANCED_OUTPUT_HANDLING,
-  );
-  const [expandedDialog, setExpandedDialog] = useState<{
-    isOpen: boolean;
-    execId: string;
-    pinName: string;
-    data: any[];
-  } | null>(null);
-
-  // Prepare renderers for each item when enhanced mode is enabled
-  const getItemRenderer = useMemo(() => {
-    if (!enableEnhancedOutputHandling) return null;
-    return (item: unknown) => {
-      const metadata: OutputMetadata = {};
-      return globalRegistry.getRenderer(item, metadata);
-    };
-  }, [enableEnhancedOutputHandling]);
-
-  const copyData = (pin: string, data: string) => {
-    navigator.clipboard.writeText(data).then(() => {
-      toast({
-        title: `"${pin}" data copied to clipboard!`,
-        duration: 2000,
-      });
-    });
-  };
-
-  const openExpandedView = (pinName: string, pinData: any[]) => {
-    setExpandedDialog({
-      isOpen: true,
-      execId: title || "Unknown Execution",
-      pinName,
-      data: pinData,
-    });
-  };
-
-  const closeExpandedView = () => {
-    setExpandedDialog(null);
-  };
-
-  return (
-    <>
-      {title && <strong className="mt-2 flex justify-center">{title}</strong>}
-      <Table className="cursor-default select-text">
-        <TableHeader>
-          <TableRow>
-            <TableHead>Pin</TableHead>
-            <TableHead>Data</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {Object.entries(data).map(([key, value]) => (
-            <TableRow className="group" key={key}>
-              <TableCell className="cursor-text">
-                {beautifyString(key)}
-              </TableCell>
-              <TableCell className="cursor-text">
-                <div className="flex min-h-9 items-center whitespace-pre-wrap">
-                  <div className="absolute right-1 top-auto m-1 hidden gap-1 group-hover:flex">
-                    <Button
-                      variant="outline"
-                      size="icon"
-                      onClick={() => openExpandedView(key, value)}
-                      title="Expand Full View"
-                    >
-                      <Maximize2 size={18} />
-                    </Button>
-                    <Button
-                      variant="outline"
-                      size="icon"
-                      onClick={() =>
-                        copyData(
-                          beautifyString(key),
-                          value
-                            .map((i) =>
-                              typeof i === "object"
-                                ? JSON.stringify(i, null, 2)
-                                : String(i),
-                            )
-                            .join(", "),
-                        )
-                      }
-                      title="Copy Data"
-                    >
-                      <Clipboard size={18} />
-                    </Button>
-                  </div>
-                  {value.map((item, index) => {
-                    const renderer = getItemRenderer?.(item);
-                    if (enableEnhancedOutputHandling && renderer) {
-                      const metadata: OutputMetadata = {};
-                      return (
-                        <React.Fragment key={index}>
-                          <OutputItem
-                            value={item}
-                            metadata={metadata}
-                            renderer={renderer}
-                          />
-                          {index < value.length - 1 && ", "}
-                        </React.Fragment>
-                      );
-                    }
-                    return (
-                      <React.Fragment key={index}>
-                        <ContentRenderer
-                          value={item}
-                          truncateLongData={truncateLongData}
-                        />
-                        {index < value.length - 1 && ", "}
-                      </React.Fragment>
-                    );
-                  })}
-                </div>
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-
-      {expandedDialog && (
-        <ExpandableOutputDialog
-          isOpen={expandedDialog.isOpen}
-          onClose={closeExpandedView}
-          execId={expandedDialog.execId}
-          pinName={expandedDialog.pinName}
-          data={expandedDialog.data}
-        />
-      )}
-    </>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/ExpandableOutputDialog.tsx

@@ -1,269 +0,0 @@
-import type { OutputMetadata } from "@/components/contextual/OutputRenderers";
-import {
-  globalRegistry,
-  OutputActions,
-  OutputItem,
-} from "@/components/contextual/OutputRenderers";
-import { Dialog } from "@/components/molecules/Dialog/Dialog";
-import { beautifyString } from "@/lib/utils";
-import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
-import { Clipboard, Maximize2 } from "lucide-react";
-import React, { FC, useMemo, useState } from "react";
-import { Button } from "../../../../../components/__legacy__/ui/button";
-import { ContentRenderer } from "../../../../../components/__legacy__/ui/render";
-import { ScrollArea } from "../../../../../components/__legacy__/ui/scroll-area";
-import { Separator } from "../../../../../components/__legacy__/ui/separator";
-import { Switch } from "../../../../../components/atoms/Switch/Switch";
-import { useToast } from "../../../../../components/molecules/Toast/use-toast";
-
-interface ExpandableOutputDialogProps {
-  isOpen: boolean;
-  onClose: () => void;
-  execId: string;
-  pinName: string;
-  data: any[];
-}
-
-const ExpandableOutputDialog: FC<ExpandableOutputDialogProps> = ({
-  isOpen,
-  onClose,
-  execId,
-  pinName,
-  data,
-}) => {
-  const { toast } = useToast();
-  const enableEnhancedOutputHandling = useGetFlag(
-    Flag.ENABLE_ENHANCED_OUTPUT_HANDLING,
-  );
-  const [useEnhancedRenderer, setUseEnhancedRenderer] = useState(false);
-
-  // Prepare items for the enhanced renderer system
-  const outputItems = useMemo(() => {
-    if (!data || !useEnhancedRenderer) return [];
-
-    const items: Array<{
-      key: string;
-      label: string;
-      value: unknown;
-      metadata?: OutputMetadata;
-      renderer: any;
-    }> = [];
-
-    data.forEach((value, index) => {
-      const metadata: OutputMetadata = {};
-
-      // Extract metadata from the value if it's an object
-      if (
-        typeof value === "object" &&
-        value !== null &&
-        !React.isValidElement(value)
-      ) {
-        const objValue = value as any;
-        if (objValue.type) metadata.type = objValue.type;
-        if (objValue.mimeType) metadata.mimeType = objValue.mimeType;
-        if (objValue.filename) metadata.filename = objValue.filename;
-        if (objValue.language) metadata.language = objValue.language;
-      }
-
-      const renderer = globalRegistry.getRenderer(value, metadata);
-      if (renderer) {
-        items.push({
-          key: `item-${index}`,
-          label: index === 0 ? beautifyString(pinName) : "",
-          value,
-          metadata,
-          renderer,
-        });
-      } else {
-        // Fallback to text renderer
-        const textRenderer = globalRegistry
-          .getAllRenderers()
-          .find((r) => r.name === "TextRenderer");
-        if (textRenderer) {
-          items.push({
-            key: `item-${index}`,
-            label: index === 0 ? beautifyString(pinName) : "",
-            value:
-              typeof value === "string"
-                ? value
-                : JSON.stringify(value, null, 2),
-            metadata,
-            renderer: textRenderer,
-          });
-        }
-      }
-    });
-
-    return items;
-  }, [data, useEnhancedRenderer, pinName]);
-
-  const copyData = () => {
-    const formattedData = data
-      .map((item) =>
-        typeof item === "object" ? JSON.stringify(item, null, 2) : String(item),
-      )
-      .join("\n\n");
-
-    navigator.clipboard.writeText(formattedData).then(() => {
-      toast({
-        title: `"${beautifyString(pinName)}" data copied to clipboard!`,
-        duration: 2000,
-      });
-    });
-  };
-
-  return (
-    <Dialog
-      title={
-        <div className="flex items-center justify-between pr-8">
-          <div className="flex items-center gap-2">
-            <Maximize2 size={20} />
-            Full Output Preview
-          </div>
-          {enableEnhancedOutputHandling && (
-            <div className="flex items-center gap-3">
-              <label
-                htmlFor="enhanced-rendering-toggle"
-                className="cursor-pointer select-none text-sm font-normal text-gray-600"
-              >
-                Enhanced Rendering
-              </label>
-              <Switch
-                id="enhanced-rendering-toggle"
-                checked={useEnhancedRenderer}
-                onCheckedChange={setUseEnhancedRenderer}
-              />
-            </div>
-          )}
-        </div>
-      }
-      controlled={{
-        isOpen,
-        set: (open) => {
-          if (!open) onClose();
-        },
-      }}
-      onClose={onClose}
-      styling={{
-        maxWidth: "56rem",
-        width: "90vw",
-        height: "90vh",
-      }}
-    >
-      <Dialog.Content>
-        <div className="flex h-full flex-col">
-          <div className="pb-4">
-            <p className="text-sm text-zinc-600">
-              Execution ID: <span className="font-mono text-xs">{execId}</span>
-              <br />
-              Pin:{" "}
-              <span className="font-semibold">{beautifyString(pinName)}</span>
-            </p>
-          </div>
-
-          <div className="flex flex-1 flex-col overflow-hidden">
-            {useEnhancedRenderer && outputItems.length > 0 && (
-              <div className="border-b px-4 py-2">
-                <OutputActions
-                  items={outputItems.map((item) => ({
-                    value: item.value,
-                    metadata: item.metadata,
-                    renderer: item.renderer,
-                  }))}
-                />
-              </div>
-            )}
-            <ScrollArea className="h-full">
-              <div className="p-4">
-                {data.length > 0 ? (
-                  useEnhancedRenderer ? (
-                    <div className="space-y-4">
-                      {outputItems.map((item) => (
-                        <OutputItem
-                          key={item.key}
-                          value={item.value}
-                          metadata={item.metadata}
-                          renderer={item.renderer}
-                          label={item.label}
-                        />
-                      ))}
-                    </div>
-                  ) : (
-                    <div className="space-y-4">
-                      {data.map((item, index) => (
-                        <div
-                          key={index}
-                          className="rounded-lg border bg-gray-50 p-4"
-                        >
-                          <div className="mb-2 flex items-center justify-between">
-                            <span className="text-sm font-medium text-gray-600">
-                              Item {index + 1} of {data.length}
-                            </span>
-                            <Button
-                              variant="outline"
-                              size="sm"
-                              onClick={() => {
-                                const itemData =
-                                  typeof item === "object"
-                                    ? JSON.stringify(item, null, 2)
-                                    : String(item);
-                                navigator.clipboard
-                                  .writeText(itemData)
-                                  .then(() => {
-                                    toast({
-                                      title: `Item ${index + 1} copied to clipboard!`,
-                                      duration: 2000,
-                                    });
-                                  });
-                              }}
-                              className="flex items-center gap-1"
-                            >
-                              <Clipboard size={14} />
-                              Copy Item
-                            </Button>
-                          </div>
-                          <Separator className="mb-3" />
-                          <div className="whitespace-pre-wrap break-words font-mono text-sm">
-                            <ContentRenderer
-                              value={item}
-                              truncateLongData={false}
-                            />
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  )
-                ) : (
-                  <div className="py-8 text-center text-gray-500">
-                    No data available
-                  </div>
-                )}
-              </div>
-            </ScrollArea>
-          </div>
-
-          <Dialog.Footer className="flex justify-between">
-            <div className="text-sm text-gray-600">
-              {data.length} item{data.length !== 1 ? "s" : ""} total
-            </div>
-            <div className="flex gap-2">
-              {!useEnhancedRenderer && (
-                <Button
-                  variant="outline"
-                  onClick={copyData}
-                  className="flex items-center gap-1"
-                >
-                  <Clipboard size={16} />
-                  Copy All
-                </Button>
-              )}
-              <Button onClick={onClose}>Close</Button>
-            </div>
-          </Dialog.Footer>
-        </div>
-      </Dialog.Content>
-    </Dialog>
-  );
-};
-
-export default ExpandableOutputDialog;

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/Flow/flow.css

@@ -1,103 +0,0 @@
-/* flow.css or index.css */
-
-body {
-  font-family:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
-    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-}
-
-code {
-  font-family:
-    source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
-}
-
-.modal {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  right: auto;
-  bottom: auto;
-  margin-right: -50%;
-  transform: translate(-50%, -50%);
-  background: #ffffff;
-  padding: 20px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  color: #000000;
-}
-
-.overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.75);
-}
-
-.modal h2 {
-  margin-top: 0;
-}
-
-.modal button {
-  margin-right: 10px;
-}
-
-.modal form {
-  display: flex;
-  flex-direction: column;
-}
-
-.modal form div {
-  margin-bottom: 15px;
-}
-
-.sidebar {
-  position: fixed;
-  top: 0;
-  left: -600px;
-  width: 350px;
-  height: calc(100vh - 68px); /* Full height minus top offset */
-  background-color: #ffffff;
-  color: #000000;
-  padding: 20px;
-  transition: left 0.3s ease;
-  z-index: 1000;
-  overflow-y: auto;
-  margin-top: 68px; /* Margin to push content below the top fixed area */
-}
-
-.sidebar.open {
-  left: 0;
-}
-
-.sidebar h3 {
-  margin: 0 0 10px;
-}
-
-.sidebar input {
-  margin: 0 0 10px;
-}
-
-.sidebarNodeRowStyle {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: #e2e2e2;
-  padding: 10px;
-  margin-bottom: 10px;
-  border-radius: 10px;
-  cursor: grab;
-}
-
-.sidebarNodeRowStyle.dragging {
-  opacity: 0.5;
-}
-
-.flow-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/GraphSearchControl.tsx

@@ -1,82 +0,0 @@
-import React from "react";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/__legacy__/ui/popover";
-import { Button } from "@/components/atoms/Button/Button";
-import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
-import { CustomNode } from "@/app/(platform)/build/components/legacy-builder/CustomNode/CustomNode";
-import { GraphSearchContent } from "../NewControlPanel/NewSearchGraph/GraphMenuContent/GraphContent";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/atoms/Tooltip/BaseTooltip";
-import { useGraphMenu } from "../NewControlPanel/NewSearchGraph/GraphMenu/useGraphMenu";
-
-interface GraphSearchControlProps {
-  nodes: CustomNode[];
-  onNodeSelect: (nodeId: string) => void;
-  onNodeHover?: (nodeId: string | null) => void;
-}
-
-export function GraphSearchControl({
-  nodes,
-  onNodeSelect,
-  onNodeHover,
-}: GraphSearchControlProps) {
-  // Use the same hook as GraphSearchMenu for consistency
-  const {
-    open,
-    searchQuery,
-    setSearchQuery,
-    filteredNodes,
-    handleNodeSelect,
-    handleOpenChange,
-  } = useGraphMenu({
-    nodes,
-    blockMenuSelected: "", // We don't need to track this in the old control panel
-    setBlockMenuSelected: () => {}, // Not needed in this context
-    onNodeSelect,
-  });
-
-  return (
-    <Popover open={open} onOpenChange={handleOpenChange}>
-      <Tooltip delayDuration={500}>
-        <TooltipTrigger asChild>
-          <PopoverTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              data-id="graph-search-control-trigger"
-              data-testid="graph-search-control-button"
-              name="Search"
-              className="dark:hover:bg-slate-800"
-            >
-              <MagnifyingGlassIcon className="h-5 w-5" />
-            </Button>
-          </PopoverTrigger>
-        </TooltipTrigger>
-        <TooltipContent side="right">Search Graph</TooltipContent>
-      </Tooltip>
-
-      <PopoverContent
-        side="right"
-        sideOffset={22}
-        align="start"
-        alignOffset={-50} // Offset upward to align with control panel top
-        className="absolute -top-3 w-[17rem] rounded-xl border-none p-0 shadow-none md:w-[30rem]"
-        data-id="graph-search-popover-content"
-      >
-        <GraphSearchContent
-          searchQuery={searchQuery}
-          onSearchChange={setSearchQuery}
-          filteredNodes={filteredNodes}
-          onNodeSelect={handleNodeSelect}
-          onNodeHover={onNodeHover}
-        />
-      </PopoverContent>
-    </Popover>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/InputModalComponent.tsx

@@ -1,107 +0,0 @@
-import React, { FC, useEffect, useState } from "react";
-import { Button } from "../../../../../components/__legacy__/ui/button";
-import { Textarea } from "../../../../../components/__legacy__/ui/textarea";
-import { Maximize2, Minimize2, Clipboard } from "lucide-react";
-import { createPortal } from "react-dom";
-import { toast } from "../../../../../components/molecules/Toast/use-toast";
-
-interface ModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onSave: (value: string) => void;
-  title?: string;
-  defaultValue: string;
-}
-
-const InputModalComponent: FC<ModalProps> = ({
-  isOpen,
-  onClose,
-  onSave,
-  title,
-  defaultValue,
-}) => {
-  const [tempValue, setTempValue] = useState(defaultValue);
-  const [isMaximized, setIsMaximized] = useState(false);
-
-  useEffect(() => {
-    if (isOpen) {
-      setTempValue(defaultValue);
-      setIsMaximized(false);
-    }
-  }, [isOpen, defaultValue]);
-
-  const handleSave = () => {
-    onSave(tempValue);
-    onClose();
-  };
-
-  const toggleSize = () => {
-    setIsMaximized(!isMaximized);
-  };
-
-  const copyValue = () => {
-    navigator.clipboard.writeText(tempValue).then(() => {
-      toast({
-        title: "Input value copied to clipboard!",
-        duration: 2000,
-      });
-    });
-  };
-
-  if (!isOpen) {
-    return null;
-  }
-
-  const modalContent = (
-    <div
-      id="modal-content"
-      className={`fixed rounded-lg border-[1.5px] bg-white p-5 ${
-        isMaximized ? "inset-[128px] flex flex-col" : `w-[90%] max-w-[800px]`
-      }`}
-    >
-      <h2 className="mb-4 text-center text-lg font-semibold">
-        {title || "Enter input text"}
-      </h2>
-      <div className="nowheel relative flex-grow">
-        <Textarea
-          className="h-full min-h-[200px] w-full resize-none"
-          value={tempValue}
-          onChange={(e) => setTempValue(e.target.value)}
-        />
-        <div className="absolute bottom-2 right-2 flex space-x-2">
-          <Button onClick={copyValue} size="icon" variant="outline">
-            <Clipboard size={18} />
-          </Button>
-          <Button onClick={toggleSize} size="icon" variant="outline">
-            {isMaximized ? <Minimize2 size={18} /> : <Maximize2 size={18} />}
-          </Button>
-        </div>
-      </div>
-      <div className="mt-4 flex justify-end space-x-2">
-        <Button onClick={onClose} variant="outline">
-          Cancel
-        </Button>
-        <Button onClick={handleSave}>Save</Button>
-      </div>
-    </div>
-  );
-
-  return (
-    <>
-      {isMaximized ? (
-        createPortal(
-          <div className="fixed inset-0 flex items-center justify-center bg-white bg-opacity-60">
-            {modalContent}
-          </div>,
-          document.body,
-        )
-      ) : (
-        <div className="nodrag fixed inset-0 flex items-center justify-center bg-white bg-opacity-60">
-          {modalContent}
-        </div>
-      )}
-    </>
-  );
-};
-
-export default InputModalComponent;

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/NodeHandle.tsx

@@ -1,163 +0,0 @@
-import { BlockIOSubSchema } from "@/lib/autogpt-server-api/types";
-import {
-  cn,
-  beautifyString,
-  getTypeBgColor,
-  getTypeTextColor,
-  getEffectiveType,
-} from "@/lib/utils";
-import { FC, memo, useCallback } from "react";
-import { Handle, Position } from "@xyflow/react";
-import { InformationTooltip } from "@/components/molecules/InformationTooltip/InformationTooltip";
-
-type HandleProps = {
-  keyName: string;
-  schema: BlockIOSubSchema;
-  isConnected: boolean;
-  isRequired?: boolean;
-  side: "left" | "right";
-  title?: string;
-  className?: string;
-  isBroken?: boolean;
-};
-
-// Move the constant out of the component to avoid re-creation on every render.
-const TYPE_NAME: Record<string, string> = {
-  string: "text",
-  number: "number",
-  integer: "integer",
-  boolean: "true/false",
-  object: "object",
-  array: "list",
-  null: "null",
-};
-
-// Extract and memoize the Dot component so that it doesn't re-render unnecessarily.
-const Dot: FC<{ isConnected: boolean; type?: string; isBroken?: boolean }> =
-  memo(({ isConnected, type, isBroken }) => {
-    const color = isBroken
-      ? "border-red-500 bg-red-100 dark:bg-red-900/30"
-      : isConnected
-        ? getTypeBgColor(type || "any")
-        : "border-gray-300 dark:border-gray-600";
-    return (
-      <div
-        className={cn(
-          "m-1 h-4 w-4 rounded-full border-2 bg-white transition-colors duration-100 group-hover:bg-gray-300 dark:bg-slate-800 dark:group-hover:bg-gray-700",
-          color,
-          isBroken && "opacity-50",
-        )}
-      />
-    );
-  });
-Dot.displayName = "Dot";
-
-const NodeHandle: FC<HandleProps> = ({
-  keyName,
-  schema,
-  isConnected,
-  isRequired,
-  side,
-  title,
-  className,
-  isBroken = false,
-}) => {
-  // Extract effective type from schema (handles anyOf/oneOf/allOf wrappers)
-  const effectiveType = getEffectiveType(schema);
-
-  const typeClass = `text-sm ${getTypeTextColor(effectiveType || "any")} ${
-    side === "left" ? "text-left" : "text-right"
-  }`;
-
-  const label = (
-    <div className={cn("flex flex-grow flex-row", isBroken && "opacity-50")}>
-      <span
-        className={cn(
-          "data-sentry-unmask text-m green flex items-end pr-2 text-gray-900 dark:text-gray-100",
-          className,
-          isBroken && "text-red-500 line-through",
-        )}
-      >
-        {title || schema.title || beautifyString(keyName.toLowerCase())}
-        {isRequired ? "*" : ""}
-      </span>
-      <span
-        className={cn(
-          `${typeClass} data-sentry-unmask flex items-end`,
-          isBroken && "text-red-400",
-        )}
-      >
-        ({TYPE_NAME[effectiveType as keyof typeof TYPE_NAME] || "any"})
-      </span>
-    </div>
-  );
-
-  // Use a native HTML onContextMenu handler instead of wrapping a large node with a Radix ContextMenu trigger.
-  const handleContextMenu = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      e.preventDefault();
-      // Optionally, you can trigger a custom, lightweight context menu here.
-    },
-    [],
-  );
-
-  if (side === "left") {
-    return (
-      <div
-        key={keyName}
-        className={cn("handle-container", isBroken && "pointer-events-none")}
-        onContextMenu={handleContextMenu}
-      >
-        <Handle
-          type="target"
-          data-testid={`input-handle-${keyName}`}
-          position={Position.Left}
-          id={keyName}
-          className={cn("group -ml-[38px]", isBroken && "cursor-not-allowed")}
-          isConnectable={!isBroken}
-        >
-          <div className="pointer-events-none flex items-center">
-            <Dot
-              isConnected={isConnected}
-              type={effectiveType}
-              isBroken={isBroken}
-            />
-            {label}
-          </div>
-        </Handle>
-        <InformationTooltip description={schema.description} />
-      </div>
-    );
-  } else {
-    return (
-      <div
-        key={keyName}
-        className={cn(
-          "handle-container justify-end",
-          isBroken && "pointer-events-none",
-        )}
-        onContextMenu={handleContextMenu}
-      >
-        <Handle
-          type="source"
-          data-testid={`output-handle-${keyName}`}
-          position={Position.Right}
-          id={keyName}
-          className={cn("group -mr-[38px]", isBroken && "cursor-not-allowed")}
-          isConnectable={!isBroken}
-        >
-          <div className="pointer-events-none flex items-center">
-            {label}
-            <Dot
-              isConnected={isConnected}
-              type={effectiveType}
-              isBroken={isBroken}
-            />
-          </div>
-        </Handle>
-      </div>
-    );
-  }
-};
-
-export default memo(NodeHandle);

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/NodeOutputs.tsx

@@ -1,158 +0,0 @@
-import React, { useContext, useMemo, useState } from "react";
-import { Button } from "@/components/__legacy__/ui/button";
-import { Maximize2 } from "lucide-react";
-import * as Separator from "@radix-ui/react-separator";
-import { ContentRenderer } from "@/components/__legacy__/ui/render";
-import type { OutputMetadata } from "@/components/contextual/OutputRenderers";
-import {
-  globalRegistry,
-  OutputItem,
-} from "@/components/contextual/OutputRenderers";
-import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
-
-import { beautifyString } from "@/lib/utils";
-
-import { BuilderContext } from "./Flow/Flow";
-import ExpandableOutputDialog from "./ExpandableOutputDialog";
-
-type NodeOutputsProps = {
-  title?: string;
-  truncateLongData?: boolean;
-  data: { [key: string]: Array<any> };
-};
-
-export default function NodeOutputs({
-  title,
-  truncateLongData,
-  data,
-}: NodeOutputsProps) {
-  const builderContext = useContext(BuilderContext);
-  const enableEnhancedOutputHandling = useGetFlag(
-    Flag.ENABLE_ENHANCED_OUTPUT_HANDLING,
-  );
-
-  const [expandedDialog, setExpandedDialog] = useState<{
-    isOpen: boolean;
-    execId: string;
-    pinName: string;
-    data: any[];
-  } | null>(null);
-
-  if (!builderContext) {
-    throw new Error(
-      "BuilderContext consumer must be inside FlowEditor component",
-    );
-  }
-
-  const { getNodeTitle } = builderContext;
-
-  // Prepare renderers for each item when enhanced mode is enabled
-  const getItemRenderer = useMemo(() => {
-    if (!enableEnhancedOutputHandling) return null;
-    return (item: unknown) => {
-      const metadata: OutputMetadata = {};
-      return globalRegistry.getRenderer(item, metadata);
-    };
-  }, [enableEnhancedOutputHandling]);
-
-  const getBeautifiedPinName = (pin: string) => {
-    if (!pin.startsWith("tools_^_")) {
-      return beautifyString(pin);
-    }
-    // Special handling for tool pins: replace node ID with node title
-    const toolNodeID = pin.slice(8).split("_~_")[0]; // tools_^_{node_id}_~_{field}
-    const toolNodeTitle = getNodeTitle(toolNodeID);
-    return toolNodeTitle
-      ? beautifyString(pin.replace(toolNodeID, toolNodeTitle))
-      : beautifyString(pin);
-  };
-
-  const openExpandedView = (pinName: string, pinData: any[]) => {
-    setExpandedDialog({
-      isOpen: true,
-      execId: title || "Node Output",
-      pinName,
-      data: pinData,
-    });
-  };
-
-  const closeExpandedView = () => {
-    setExpandedDialog(null);
-  };
-  return (
-    <div className="m-4 space-y-4">
-      {title && <strong className="mt-2flex">{title}</strong>}
-      {Object.entries(data).map(([pin, dataArray]) => (
-        <div key={pin} className="group">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center">
-              <strong className="mr-2">Pin:</strong>
-              <span>{getBeautifiedPinName(pin)}</span>
-            </div>
-            {(truncateLongData || dataArray.length > 10) && (
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => openExpandedView(pin, dataArray)}
-                className="hidden items-center gap-1 group-hover:flex"
-                title="Expand Full View"
-              >
-                <Maximize2 size={14} />
-                Expand
-              </Button>
-            )}
-          </div>
-          <div className="mt-2">
-            <strong className="mr-2">Data:</strong>
-            <div className="mt-1">
-              {dataArray.slice(0, 10).map((item, index) => {
-                const renderer = getItemRenderer?.(item);
-                if (enableEnhancedOutputHandling && renderer) {
-                  const metadata: OutputMetadata = {};
-                  return (
-                    <React.Fragment key={index}>
-                      <OutputItem
-                        value={item}
-                        metadata={metadata}
-                        renderer={renderer}
-                      />
-                      {index < Math.min(dataArray.length, 10) - 1 && ", "}
-                    </React.Fragment>
-                  );
-                }
-                return (
-                  <React.Fragment key={index}>
-                    <ContentRenderer
-                      value={item}
-                      truncateLongData={truncateLongData}
-                    />
-                    {index < Math.min(dataArray.length, 10) - 1 && ", "}
-                  </React.Fragment>
-                );
-              })}
-              {dataArray.length > 10 && (
-                <span style={{ color: "#888" }}>
-                  <br />
-                  <b>⋮</b>
-                  <br />
-                  <span>and {dataArray.length - 10} more</span>
-                </span>
-              )}
-            </div>
-            <Separator.Root className="my-4 h-[1px] bg-gray-300" />
-          </div>
-        </div>
-      ))}
-
-      {expandedDialog && (
-        <ExpandableOutputDialog
-          isOpen={expandedDialog.isOpen}
-          onClose={closeExpandedView}
-          execId={expandedDialog.execId}
-          pinName={expandedDialog.pinName}
-          data={expandedDialog.data}
-        />
-      )}
-    </div>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/NodeTableInput.tsx

@@ -1,205 +0,0 @@
-import { FC, useCallback, useEffect, useState } from "react";
-
-import NodeHandle from "@/app/(platform)/build/components/legacy-builder/NodeHandle";
-import type {
-  BlockIOTableSubSchema,
-  TableCellValue,
-  TableRow,
-} from "@/lib/autogpt-server-api/types";
-import type { ConnectedEdge } from "./CustomNode/CustomNode";
-import { cn } from "@/lib/utils";
-import { PlusIcon, XIcon } from "@phosphor-icons/react";
-import { Button } from "@/components/atoms/Button/Button";
-import { Input } from "@/components/atoms/Input/Input";
-
-interface NodeTableInputProps {
-  /** Unique identifier for the node in the builder graph */
-  nodeId: string;
-  /** Key identifier for this specific input field within the node */
-  selfKey: string;
-  /** Schema definition for the table structure */
-  schema: BlockIOTableSubSchema;
-  /** Column headers for the table */
-  headers: string[];
-  /** Initial row data for the table */
-  rows?: TableRow[];
-  /** Validation errors mapped by field key */
-  errors: { [key: string]: string | undefined };
-  /** Graph connections between nodes in the builder */
-  connections: ConnectedEdge[];
-  /** Callback when table data changes */
-  handleInputChange: (key: string, value: TableRow[]) => void;
-  /** Callback when input field is clicked (for builder selection) */
-  handleInputClick: (key: string) => void;
-  /** Additional CSS classes */
-  className?: string;
-  /** Display name for the input field */
-  displayName?: string;
-}
-
-/**
- * Table input component for the workflow builder interface.
- *
- * This component is specifically designed for use in the agent builder where users
- * design workflows with connected nodes. It includes graph connection capabilities
- * via NodeHandle and is tightly integrated with the builder's state management.
- *
- * @warning Do NOT use this component in runtime/execution contexts (like RunAgentInputs).
- * For runtime table inputs, use a simpler implementation without builder-specific features.
- *
- * @example
- * ```tsx
- * <NodeTableInput
- *   nodeId="node-123"
- *   selfKey="table_data"
- *   schema={tableSchema}
- *   headers={["Name", "Value"]}
- *   rows={existingData}
- *   connections={graphConnections}
- *   handleInputChange={handleChange}
- *   handleInputClick={handleClick}
- *   errors={{}}
- * />
- * ```
- *
- * @see Used exclusively in: `/app/(platform)/build/components/legacy-builder/NodeInputs.tsx`
- */
-export const NodeTableInput: FC<NodeTableInputProps> = ({
-  nodeId,
-  selfKey,
-  schema,
-  headers,
-  rows = [],
-  errors,
-  connections,
-  handleInputChange,
-  handleInputClick: _handleInputClick,
-  className,
-  displayName,
-}) => {
-  const [tableData, setTableData] = useState<TableRow[]>(rows);
-
-  // Sync with parent state when rows change
-  useEffect(() => {
-    setTableData(rows);
-  }, [rows]);
-
-  const isConnected = (key: string) =>
-    connections.some((c) => c.targetHandle === key && c.target === nodeId);
-
-  const updateTableData = useCallback(
-    (newData: TableRow[]) => {
-      setTableData(newData);
-      handleInputChange(selfKey, newData);
-    },
-    [selfKey, handleInputChange],
-  );
-
-  const updateCell = (
-    rowIndex: number,
-    header: string,
-    value: TableCellValue,
-  ) => {
-    const newData = [...tableData];
-    if (!newData[rowIndex]) {
-      newData[rowIndex] = {};
-    }
-    newData[rowIndex][header] = value;
-    updateTableData(newData);
-  };
-
-  const addRow = () => {
-    if (!headers || headers.length === 0) {
-      return;
-    }
-    const newRow: TableRow = {};
-    headers.forEach((header) => {
-      newRow[header] = "";
-    });
-    updateTableData([...tableData, newRow]);
-  };
-
-  const removeRow = (index: number) => {
-    const newData = tableData.filter((_, i) => i !== index);
-    updateTableData(newData);
-  };
-
-  return (
-    <div className={cn("w-full space-y-2", className)}>
-      <NodeHandle
-        title={displayName || selfKey}
-        keyName={selfKey}
-        schema={schema}
-        isConnected={isConnected(selfKey)}
-        isRequired={false}
-        side="left"
-      />
-
-      {!isConnected(selfKey) && (
-        <div className="nodrag overflow-x-auto">
-          <table className="w-full border-collapse">
-            <thead>
-              <tr>
-                {headers.map((header, index) => (
-                  <th
-                    key={index}
-                    className="border border-gray-300 bg-gray-100 px-2 py-1 text-left text-sm font-medium dark:border-gray-600 dark:bg-gray-800"
-                  >
-                    {header}
-                  </th>
-                ))}
-                <th className="w-10"></th>
-              </tr>
-            </thead>
-            <tbody>
-              {tableData.map((row, rowIndex) => (
-                <tr key={rowIndex}>
-                  {headers.map((header, colIndex) => (
-                    <td
-                      key={colIndex}
-                      className="border border-gray-300 p-1 dark:border-gray-600"
-                    >
-                      <Input
-                        id={`${selfKey}-${rowIndex}-${header}`}
-                        label={header}
-                        type="text"
-                        value={String(row[header] || "")}
-                        onChange={(e) =>
-                          updateCell(rowIndex, header, e.target.value)
-                        }
-                        className="h-8 w-full"
-                        placeholder={`Enter ${header}`}
-                      />
-                    </td>
-                  ))}
-                  <td className="p-1">
-                    <Button
-                      variant="ghost"
-                      size="small"
-                      onClick={() => removeRow(rowIndex)}
-                      className="h-8 w-8 p-0"
-                    >
-                      <XIcon />
-                    </Button>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-
-          <Button
-            className="mt-2 bg-gray-200 font-normal text-black hover:text-white dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600"
-            onClick={addRow}
-            size="small"
-          >
-            <PlusIcon className="mr-2" /> Add Row
-          </Button>
-        </div>
-      )}
-
-      {errors[selfKey] && (
-        <span className="text-sm text-red-500">{errors[selfKey]}</span>
-      )}
-    </div>
-  );
-};

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/OttoChatWidget.tsx

@@ -1,311 +0,0 @@
-"use client";
-
-import React, { useEffect, useState, useRef } from "react";
-import ReactMarkdown from "react-markdown";
-
-import type { GraphID } from "@/lib/autogpt-server-api/types";
-import { askOtto } from "@/app/(platform)/build/actions";
-import { cn } from "@/lib/utils";
-import { environment } from "@/services/environment";
-
-interface Message {
-  type: "user" | "assistant";
-  content: string;
-}
-
-export default function OttoChatWidget({
-  graphID,
-  className,
-}: {
-  graphID?: GraphID;
-  className?: string;
-}): React.ReactNode {
-  const [isOpen, setIsOpen] = useState(false);
-  const [messages, setMessages] = useState<Message[]>([]);
-  const [inputValue, setInputValue] = useState("");
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [includeGraphData, setIncludeGraphData] = useState(false);
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    // Add welcome message when component mounts
-    if (messages.length === 0) {
-      setMessages([
-        {
-          type: "assistant",
-          content: "Hello, I am Otto! Ask me anything about AutoGPT!",
-        },
-      ]);
-    }
-  }, [messages.length]);
-
-  useEffect(() => {
-    // Scroll to bottom whenever messages change
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages]);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!inputValue.trim() || isProcessing) return;
-
-    const userMessage = inputValue.trim();
-    setInputValue("");
-    setIsProcessing(true);
-
-    // Add user message to chat
-    setMessages((prev) => [...prev, { type: "user", content: userMessage }]);
-
-    // Add temporary processing message
-    setMessages((prev) => [
-      ...prev,
-      { type: "assistant", content: "Processing your question..." },
-    ]);
-
-    const conversationHistory = messages.reduce<
-      { query: string; response: string }[]
-    >((acc, msg, i, arr) => {
-      if (
-        msg.type === "user" &&
-        i + 1 < arr.length &&
-        arr[i + 1].type === "assistant" &&
-        arr[i + 1].content !== "Processing your question..."
-      ) {
-        acc.push({
-          query: msg.content,
-          response: arr[i + 1].content,
-        });
-      }
-      return acc;
-    }, []);
-
-    try {
-      const data = await askOtto(
-        userMessage,
-        conversationHistory,
-        includeGraphData,
-        graphID,
-      );
-
-      // Check if the response contains an error
-      if ("error" in data && data.error === true) {
-        // Handle different error types
-        let errorMessage =
-          "Sorry, there was an error processing your message. Please try again.";
-
-        if (data.answer === "Authentication required") {
-          errorMessage = "Please sign in to use the chat feature.";
-        } else if (data.answer === "Failed to connect to Otto service") {
-          errorMessage =
-            "Otto service is currently unavailable. Please try again later.";
-        } else if (data.answer.includes("timed out")) {
-          errorMessage = "Request timed out. Please try again later.";
-        }
-
-        // Remove processing message and add error message
-        setMessages((prev) => [
-          ...prev.slice(0, -1),
-          { type: "assistant", content: errorMessage },
-        ]);
-      } else {
-        // Remove processing message and add actual response
-        setMessages((prev) => [
-          ...prev.slice(0, -1),
-          { type: "assistant", content: data.answer },
-        ]);
-      }
-    } catch (error) {
-      console.error("Unexpected error in chat widget:", error);
-      setMessages((prev) => [
-        ...prev.slice(0, -1),
-        {
-          type: "assistant",
-          content:
-            "An unexpected error occurred. Please refresh the page and try again.",
-        },
-      ]);
-    } finally {
-      setIsProcessing(false);
-      setIncludeGraphData(false);
-    }
-  };
-
-  // Don't render the chat widget if we're not on the build page or in local mode
-  if (environment.isLocal()) {
-    return null;
-  }
-
-  if (!isOpen) {
-    return (
-      <div className={className}>
-        <button
-          onClick={() => setIsOpen(true)}
-          className="inline-flex h-14 w-14 items-center justify-center whitespace-nowrap rounded-2xl bg-[rgba(65,65,64,1)] text-neutral-50 shadow transition-colors hover:bg-neutral-900/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:pointer-events-none disabled:opacity-50 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50/90 dark:focus-visible:ring-neutral-300"
-          aria-label="Open chat widget"
-        >
-          <svg
-            viewBox="0 0 24 24"
-            className="h-6 w-6"
-            stroke="currentColor"
-            strokeWidth="2"
-            fill="none"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
-          </svg>
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={cn(
-        "flex h-[600px] w-[600px] flex-col rounded-lg border bg-background shadow-xl",
-        className,
-        "z-40",
-      )}
-    >
-      {/* Header */}
-      <div className="flex items-center justify-between border-b p-4">
-        <h2 className="font-semibold">Otto Assistant</h2>
-        <button
-          onClick={() => setIsOpen(false)}
-          className="text-muted-foreground transition-colors hover:text-foreground"
-          aria-label="Close chat"
-        >
-          <svg
-            viewBox="0 0 24 24"
-            className="h-5 w-5"
-            stroke="currentColor"
-            strokeWidth="2"
-            fill="none"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <line x1="18" y1="6" x2="6" y2="18" />
-            <line x1="6" y1="6" x2="18" y2="18" />
-          </svg>
-        </button>
-      </div>
-
-      {/* Messages */}
-      <div className="flex-1 space-y-4 overflow-y-auto p-4">
-        {messages.map((message, index) => (
-          <div
-            key={index}
-            className={`flex ${message.type === "user" ? "justify-end" : "justify-start"}`}
-          >
-            <div
-              className={`max-w-[80%] rounded-lg p-3 ${
-                message.type === "user"
-                  ? "ml-4 bg-black text-white"
-                  : "mr-4 bg-[#8b5cf6] text-white"
-              }`}
-            >
-              {message.type === "user" ? (
-                message.content
-              ) : (
-                <ReactMarkdown
-                  className="prose prose-sm dark:prose-invert max-w-none"
-                  components={{
-                    p: ({ children }) => (
-                      <p className="mb-2 last:mb-0">{children}</p>
-                    ),
-                    code(props) {
-                      const { children, className, node: _, ...rest } = props;
-                      const match = /language-(\w+)/.exec(className || "");
-                      return match ? (
-                        <pre className="overflow-x-auto rounded-md bg-muted-foreground/20 p-3">
-                          <code className="font-mono text-sm" {...rest}>
-                            {children}
-                          </code>
-                        </pre>
-                      ) : (
-                        <code
-                          className="rounded-md bg-muted-foreground/20 px-1 py-0.5 font-mono text-sm"
-                          {...rest}
-                        >
-                          {children}
-                        </code>
-                      );
-                    },
-                    ul: ({ children }) => (
-                      <ul className="mb-2 list-disc pl-4 last:mb-0">
-                        {children}
-                      </ul>
-                    ),
-                    ol: ({ children }) => (
-                      <ol className="mb-2 list-decimal pl-4 last:mb-0">
-                        {children}
-                      </ol>
-                    ),
-                    li: ({ children }) => (
-                      <li className="mb-1 last:mb-0">{children}</li>
-                    ),
-                  }}
-                >
-                  {message.content}
-                </ReactMarkdown>
-              )}
-            </div>
-          </div>
-        ))}
-        <div ref={messagesEndRef} />
-      </div>
-
-      {/* Input */}
-      <form onSubmit={handleSubmit} className="border-t p-4">
-        <div className="flex flex-col gap-2">
-          <div className="flex gap-2">
-            <input
-              type="text"
-              value={inputValue}
-              onChange={(e) => setInputValue(e.target.value)}
-              placeholder="Type your message..."
-              className="flex-1 rounded-md border bg-background px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary"
-              disabled={isProcessing}
-            />
-            <button
-              type="submit"
-              disabled={isProcessing}
-              className="rounded-md bg-primary px-4 py-2 text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50"
-            >
-              Send
-            </button>
-          </div>
-          {graphID && (
-            <button
-              type="button"
-              onClick={() => {
-                setIncludeGraphData((prev) => !prev);
-              }}
-              className={`flex items-center gap-2 rounded border px-2 py-1.5 text-sm transition-all duration-200 ${
-                includeGraphData
-                  ? "border-primary/30 bg-primary/10 text-primary hover:shadow-[0_0_10px_3px_rgba(139,92,246,0.3)]"
-                  : "border-transparent bg-muted text-muted-foreground hover:bg-muted/80 hover:shadow-[0_0_10px_3px_rgba(139,92,246,0.15)]"
-              }`}
-            >
-              <svg
-                viewBox="0 0 24 24"
-                className="h-4 w-4"
-                stroke="currentColor"
-                strokeWidth="2"
-                fill="none"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
-                <circle cx="8.5" cy="8.5" r="1.5" />
-                <polyline points="21 15 16 10 5 21" />
-              </svg>
-              {includeGraphData
-                ? "Graph data will be included"
-                : "Include graph data"}
-            </button>
-          )}
-        </div>
-      </form>
-    </div>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/OutputModalComponent.tsx

@@ -1,50 +0,0 @@
-import React, { FC } from "react";
-import { Button } from "../../../../../components/__legacy__/ui/button";
-import { NodeExecutionResult } from "@/lib/autogpt-server-api/types";
-import DataTable from "./DataTable";
-import { Separator } from "@/components/__legacy__/ui/separator";
-
-interface OutputModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  executionResults: {
-    execId: string;
-    data: NodeExecutionResult["output_data"];
-  }[];
-}
-
-const OutputModalComponent: FC<OutputModalProps> = ({
-  isOpen,
-  onClose,
-  executionResults,
-}) => {
-  if (!isOpen) {
-    return null;
-  }
-
-  return (
-    <div className="nodrag nowheel fixed inset-0 flex items-center justify-center bg-white bg-opacity-60">
-      <div className="w-[500px] max-w-[90%] rounded-lg border-[1.5px] bg-white p-5">
-        <strong>Output Data History</strong>
-        <div className="my-2 max-h-[384px] flex-grow overflow-y-auto rounded-md p-2">
-          {executionResults.map((data, i) => (
-            <>
-              <DataTable
-                key={i}
-                title={data.execId}
-                data={data.data}
-                truncateLongData={true}
-              />
-              <Separator />
-            </>
-          ))}
-        </div>
-        <div className="mt-2.5 flex justify-end gap-2.5">
-          <Button onClick={onClose}>Close</Button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default OutputModalComponent;

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/RunnerInputUI.tsx

@@ -1,96 +0,0 @@
-import { useCallback } from "react";
-
-import { AgentRunDraftView } from "@/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-draft-view";
-import { Dialog } from "@/components/molecules/Dialog/Dialog";
-import type {
-  CredentialsMetaInput,
-  Graph,
-} from "@/lib/autogpt-server-api/types";
-
-interface RunInputDialogProps {
-  isOpen: boolean;
-  doClose: () => void;
-  graph: Graph;
-  doRun?: (
-    inputs: Record<string, any>,
-    credentialsInputs: Record<string, CredentialsMetaInput>,
-  ) => Promise<void> | void;
-  doCreateSchedule?: (
-    cronExpression: string,
-    scheduleName: string,
-    inputs: Record<string, any>,
-    credentialsInputs: Record<string, CredentialsMetaInput>,
-  ) => Promise<void> | void;
-}
-
-export function RunnerInputDialog({
-  isOpen,
-  doClose,
-  graph,
-  doRun,
-  doCreateSchedule,
-}: RunInputDialogProps) {
-  const handleRun = useCallback(
-    doRun
-      ? async (
-          inputs: Record<string, any>,
-          credentials_inputs: Record<string, CredentialsMetaInput>,
-        ) => {
-          await doRun(inputs, credentials_inputs);
-          doClose();
-        }
-      : async () => {},
-    [doRun, doClose],
-  );
-
-  const handleSchedule = useCallback(
-    doCreateSchedule
-      ? async (
-          cronExpression: string,
-          scheduleName: string,
-          inputs: Record<string, any>,
-          credentialsInputs: Record<string, CredentialsMetaInput>,
-        ) => {
-          await doCreateSchedule(
-            cronExpression,
-            scheduleName,
-            inputs,
-            credentialsInputs,
-          );
-          doClose();
-        }
-      : async () => {},
-    [doCreateSchedule, doClose],
-  );
-
-  return (
-    <Dialog
-      title="Run your agent"
-      controlled={{
-        isOpen,
-        set: (open) => {
-          if (!open) doClose();
-        },
-      }}
-      onClose={doClose}
-      styling={{
-        maxWidth: "56rem",
-        width: "90vw",
-      }}
-    >
-      <Dialog.Content>
-        <div className="flex flex-col p-10">
-          <p className="mt-2 text-sm text-zinc-600">{graph.name}</p>
-          <AgentRunDraftView
-            className="p-0"
-            graph={graph}
-            doRun={doRun ? handleRun : undefined}
-            onRun={doRun ? undefined : doClose}
-            doCreateSchedule={doCreateSchedule ? handleSchedule : undefined}
-            onCreateSchedule={doCreateSchedule ? undefined : doClose}
-          />
-        </div>
-      </Dialog.Content>
-    </Dialog>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/RunnerOutputUI.tsx

@@ -1,156 +0,0 @@
-import React from "react";
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetDescription,
-} from "@/components/__legacy__/ui/sheet";
-import { ScrollArea } from "@/components/__legacy__/ui/scroll-area";
-import { Label } from "@/components/__legacy__/ui/label";
-import { Textarea } from "@/components/__legacy__/ui/textarea";
-import { Button } from "@/components/__legacy__/ui/button";
-import { Clipboard } from "lucide-react";
-import { useToast } from "@/components/molecules/Toast/use-toast";
-
-export type OutputNodeInfo = {
-  metadata: {
-    name: string;
-    description: string;
-  };
-  result?: any;
-};
-
-interface OutputModalProps {
-  isOpen: boolean;
-  doClose: () => void;
-  outputs: OutputNodeInfo[];
-  graphExecutionError?: string | null;
-}
-
-const formatOutput = (output: any): string => {
-  if (typeof output === "object") {
-    try {
-      if (
-        Array.isArray(output) &&
-        output.every((item) => typeof item === "string")
-      ) {
-        return output.join("\n").replace(/\\n/g, "\n");
-      }
-      return JSON.stringify(output, null, 2);
-    } catch (error) {
-      return `Error formatting output: ${(error as Error).message}`;
-    }
-  }
-  if (typeof output === "string") {
-    return output.replace(/\\n/g, "\n");
-  }
-  return String(output);
-};
-
-export function RunnerOutputUI({
-  isOpen,
-  doClose,
-  outputs,
-  graphExecutionError,
-}: OutputModalProps) {
-  const { toast } = useToast();
-
-  const copyOutput = (name: string, output: any) => {
-    const formattedOutput = formatOutput(output);
-    navigator.clipboard.writeText(formattedOutput).then(() => {
-      toast({
-        title: `"${name}" output copied to clipboard!`,
-        duration: 2000,
-      });
-    });
-  };
-
-  const adjustTextareaHeight = (textarea: HTMLTextAreaElement) => {
-    textarea.style.height = "auto";
-    textarea.style.height = `${textarea.scrollHeight}px`;
-  };
-
-  return (
-    <Sheet open={isOpen} onOpenChange={doClose}>
-      <SheetContent
-        side="right"
-        className="flex h-full w-full flex-col overflow-hidden sm:max-w-[600px]"
-      >
-        <SheetHeader className="px-2 py-2">
-          <SheetTitle className="text-xl">Run Outputs</SheetTitle>
-          <SheetDescription className="mt-1 text-sm">
-            View the outputs from your agent run.
-          </SheetDescription>
-        </SheetHeader>
-        <div className="flex-grow overflow-y-auto px-2 py-2">
-          <ScrollArea className="h-full overflow-auto pr-4">
-            <div className="space-y-4">
-              {graphExecutionError && (
-                <div className="rounded-md border border-red-200 bg-red-50 p-3 dark:border-red-800 dark:bg-red-900/20">
-                  <p className="text-sm text-red-800 dark:text-red-200">
-                    <strong>Error:</strong> {graphExecutionError}
-                  </p>
-                </div>
-              )}
-              {outputs && outputs.length > 0 ? (
-                outputs.map((output, i) => (
-                  <div key={i} className="space-y-1">
-                    <Label className="text-base font-semibold">
-                      {output.metadata.name || "Unnamed Output"}
-                    </Label>
-
-                    {output.metadata.description && (
-                      <Label className="block text-sm text-gray-600">
-                        {output.metadata.description}
-                      </Label>
-                    )}
-
-                    <div className="group relative rounded-md bg-gray-100 p-2">
-                      <Button
-                        className="absolute right-1 top-1 z-10 m-1 hidden p-2 group-hover:block"
-                        variant="outline"
-                        size="icon"
-                        onClick={() =>
-                          copyOutput(
-                            output.metadata.name || "Unnamed Output",
-                            output.result,
-                          )
-                        }
-                        title="Copy Output"
-                      >
-                        <Clipboard size={18} />
-                      </Button>
-                      <Textarea
-                        readOnly
-                        value={formatOutput(output.result ?? "No output yet")}
-                        className="w-full resize-none whitespace-pre-wrap break-words border-none bg-transparent text-sm"
-                        style={{
-                          height: "auto",
-                          minHeight: "2.5rem",
-                          maxHeight: "400px",
-                        }}
-                        ref={(el) => {
-                          if (el) {
-                            adjustTextareaHeight(el);
-                            if (el.scrollHeight > 400) {
-                              el.style.height = "400px";
-                            }
-                          }
-                        }}
-                      />
-                    </div>
-                  </div>
-                ))
-              ) : (
-                <p>No output blocks available.</p>
-              )}
-            </div>
-          </ScrollArea>
-        </div>
-      </SheetContent>
-    </Sheet>
-  );
-}
-
-export default RunnerOutputUI;

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/RunnerUIWrapper.tsx

@@ -1,117 +0,0 @@
-import React, {
-  useState,
-  forwardRef,
-  useImperativeHandle,
-  useMemo,
-} from "react";
-import { Node } from "@xyflow/react";
-import { CustomNodeData } from "@/app/(platform)/build/components/legacy-builder/CustomNode/CustomNode";
-import {
-  BlockUIType,
-  CredentialsMetaInput,
-  Graph,
-} from "@/lib/autogpt-server-api/types";
-import RunnerOutputUI, { OutputNodeInfo } from "./RunnerOutputUI";
-import { RunnerInputDialog } from "./RunnerInputUI";
-
-interface RunnerUIWrapperProps {
-  graph: Graph;
-  nodes: Node<CustomNodeData>[];
-  graphExecutionError?: string | null;
-  saveAndRun: (
-    inputs: Record<string, any>,
-    credentialsInputs: Record<string, CredentialsMetaInput>,
-  ) => void;
-  createRunSchedule: (
-    cronExpression: string,
-    scheduleName: string,
-    inputs: Record<string, any>,
-    credentialsInputs: Record<string, CredentialsMetaInput>,
-  ) => Promise<void>;
-}
-
-export interface RunnerUIWrapperRef {
-  openRunInputDialog: () => void;
-  openRunnerOutput: () => void;
-  runOrOpenInput: () => void;
-}
-
-const RunnerUIWrapper = forwardRef<RunnerUIWrapperRef, RunnerUIWrapperProps>(
-  (
-    { graph, nodes, graphExecutionError, saveAndRun, createRunSchedule },
-    ref,
-  ) => {
-    const [isRunInputDialogOpen, setIsRunInputDialogOpen] = useState(false);
-    const [isRunnerOutputOpen, setIsRunnerOutputOpen] = useState(false);
-
-    const graphInputs = graph.input_schema.properties;
-
-    const graphOutputs = useMemo((): OutputNodeInfo[] => {
-      const outputNodes = nodes.filter(
-        (node) => node.data.uiType === BlockUIType.OUTPUT,
-      );
-
-      return outputNodes.map(
-        (node) =>
-          ({
-            metadata: {
-              name: node.data.hardcodedValues.name || "Output",
-              description:
-                node.data.hardcodedValues.description ||
-                "Output from the agent",
-            },
-            result:
-              (node.data.executionResults as any)
-                ?.map((result: any) => result?.data?.output)
-                .join("\n--\n") || "No output yet",
-          }) satisfies OutputNodeInfo,
-      );
-    }, [nodes]);
-
-    const openRunInputDialog = () => setIsRunInputDialogOpen(true);
-    const openRunnerOutput = () => setIsRunnerOutputOpen(true);
-
-    const runOrOpenInput = () => {
-      if (
-        Object.keys(graphInputs).length > 0 ||
-        Object.keys(graph.credentials_input_schema.properties).length > 0
-      ) {
-        openRunInputDialog();
-      } else {
-        saveAndRun({}, {});
-      }
-    };
-
-    useImperativeHandle(
-      ref,
-      () =>
-        ({
-          openRunInputDialog,
-          openRunnerOutput,
-          runOrOpenInput,
-        }) satisfies RunnerUIWrapperRef,
-    );
-
-    return (
-      <>
-        <RunnerInputDialog
-          isOpen={isRunInputDialogOpen}
-          doClose={() => setIsRunInputDialogOpen(false)}
-          graph={graph}
-          doRun={saveAndRun}
-          doCreateSchedule={createRunSchedule}
-        />
-        <RunnerOutputUI
-          isOpen={isRunnerOutputOpen}
-          doClose={() => setIsRunnerOutputOpen(false)}
-          outputs={graphOutputs}
-          graphExecutionError={graphExecutionError}
-        />
-      </>
-    );
-  },
-);
-
-RunnerUIWrapper.displayName = "RunnerUIWrapper";
-
-export default RunnerUIWrapper;

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/SaveControl.tsx

@@ -1,217 +0,0 @@
-import React, { useEffect, useState } from "react";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/__legacy__/ui/popover";
-import { Card, CardContent, CardFooter } from "@/components/__legacy__/ui/card";
-import { Input } from "@/components/__legacy__/ui/input";
-import { Button } from "@/components/__legacy__/ui/button";
-import { GraphMeta } from "@/lib/autogpt-server-api";
-import { Label } from "@/components/__legacy__/ui/label";
-import { IconSave } from "@/components/__legacy__/ui/icons";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/atoms/Tooltip/BaseTooltip";
-import { useToast } from "@/components/molecules/Toast/use-toast";
-import { useQueryClient } from "@tanstack/react-query";
-import { getGetV2ListMySubmissionsQueryKey } from "@/app/api/__generated__/endpoints/store/store";
-import { CronExpressionDialog } from "@/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/cron-scheduler-dialog";
-import { humanizeCronExpression } from "@/lib/cron-expression-utils";
-import { CalendarClockIcon } from "lucide-react";
-
-interface SaveControlProps {
-  agentMeta: GraphMeta | null;
-  agentName: string;
-  agentDescription: string;
-  agentRecommendedScheduleCron: string;
-  canSave: boolean;
-  onSave: () => Promise<void>;
-  onNameChange: (name: string) => void;
-  onDescriptionChange: (description: string) => void;
-  onRecommendedScheduleCronChange: (cron: string) => void;
-  pinSavePopover: boolean;
-}
-
-/**
- * A SaveControl component to be used within the ControlPanel. It allows the user to save the agent.
- * @param {Object} SaveControlProps - The properties of the SaveControl component.
- * @param {GraphMeta | null} SaveControlProps.agentMeta - The agent's metadata, or null if creating a new agent.
- * @param {string} SaveControlProps.agentName - The agent's name.
- * @param {string} SaveControlProps.agentDescription - The agent's description.
- * @param {boolean} SaveControlProps.canSave - Whether the button to save the agent should be enabled.
- * @param {() => void} SaveControlProps.onSave - Function to save the agent.
- * @param {(name: string) => void} SaveControlProps.onNameChange - Function to handle name changes.
- * @param {(description: string) => void} SaveControlProps.onDescriptionChange - Function to handle description changes.
- * @returns The SaveControl component.
- */
-export const SaveControl = ({
-  agentMeta,
-  canSave,
-  onSave,
-  agentName,
-  onNameChange,
-  agentDescription,
-  onDescriptionChange,
-  agentRecommendedScheduleCron,
-  onRecommendedScheduleCronChange,
-  pinSavePopover,
-}: SaveControlProps) => {
-  /**
-   * Note for improvement:
-   * At the moment we are leveraging onDescriptionChange and onNameChange to handle the changes in the description and name of the agent.
-   * We should migrate this to be handled with form controls and a form library.
-   */
-
-  const { toast } = useToast();
-  const queryClient = useQueryClient();
-  const [cronScheduleDialogOpen, setCronScheduleDialogOpen] = useState(false);
-
-  const handleScheduleChange = (cronExpression: string) => {
-    onRecommendedScheduleCronChange(cronExpression);
-  };
-
-  useEffect(() => {
-    const handleKeyDown = async (event: KeyboardEvent) => {
-      if ((event.ctrlKey || event.metaKey) && event.key === "s") {
-        event.preventDefault(); // Stop the browser default action
-        await onSave(); // Call your save function
-        queryClient.invalidateQueries({
-          queryKey: getGetV2ListMySubmissionsQueryKey(),
-        });
-        toast({
-          duration: 2000,
-          title: "All changes saved successfully!",
-        });
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [onSave, toast]);
-
-  return (
-    <Popover open={pinSavePopover ? true : undefined}>
-      <Tooltip delayDuration={500}>
-        <TooltipTrigger asChild>
-          <PopoverTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              data-id="save-control-popover-trigger"
-              data-testid="blocks-control-save-button"
-              name="Save"
-            >
-              <IconSave className="dark:text-gray-300" />
-            </Button>
-          </PopoverTrigger>
-        </TooltipTrigger>
-        <TooltipContent side="right">Save</TooltipContent>
-      </Tooltip>
-      <PopoverContent
-        side="right"
-        sideOffset={15}
-        align="start"
-        data-id="save-control-popover-content"
-        className="w-96 max-w-[400px]"
-      >
-        <Card className="border-none shadow-none dark:bg-slate-900">
-          <CardContent className="p-4">
-            <div className="space-y-3">
-              <div>
-                <Label htmlFor="name" className="dark:text-gray-300">
-                  Name
-                </Label>
-                <Input
-                  id="name"
-                  placeholder="Enter your agent name"
-                  value={agentName}
-                  onChange={(e) => onNameChange(e.target.value)}
-                  data-id="save-control-name-input"
-                  data-testid="save-control-name-input"
-                  maxLength={100}
-                  className="mt-1"
-                />
-              </div>
-
-              <div>
-                <Label htmlFor="description" className="dark:text-gray-300">
-                  Description
-                </Label>
-                <Input
-                  id="description"
-                  placeholder="Your agent description"
-                  value={agentDescription}
-                  onChange={(e) => onDescriptionChange(e.target.value)}
-                  data-id="save-control-description-input"
-                  data-testid="save-control-description-input"
-                  maxLength={500}
-                  className="mt-1"
-                />
-              </div>
-
-              <div>
-                <Label className="dark:text-gray-300">
-                  Recommended Schedule
-                </Label>
-                <Button
-                  variant="outline"
-                  onClick={() => setCronScheduleDialogOpen(true)}
-                  className="mt-1 w-full min-w-0 justify-start text-sm"
-                  data-id="save-control-recommended-schedule-button"
-                  data-testid="save-control-recommended-schedule-button"
-                >
-                  <CalendarClockIcon className="mr-2 h-4 w-4 flex-shrink-0" />
-                  <span className="min-w-0 flex-1 truncate">
-                    {agentRecommendedScheduleCron
-                      ? humanizeCronExpression(agentRecommendedScheduleCron)
-                      : "Set schedule"}
-                  </span>
-                </Button>
-              </div>
-
-              {agentMeta?.version && (
-                <div>
-                  <Label htmlFor="version" className="dark:text-gray-300">
-                    Version
-                  </Label>
-                  <Input
-                    id="version"
-                    placeholder="Version"
-                    value={agentMeta?.version || "-"}
-                    disabled
-                    data-testid="save-control-version-output"
-                    className="mt-1"
-                  />
-                </div>
-              )}
-            </div>
-          </CardContent>
-          <CardFooter className="flex flex-col items-stretch gap-2">
-            <Button
-              className="w-full dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-800"
-              onClick={onSave}
-              data-id="save-control-save-agent"
-              data-testid="save-control-save-agent-button"
-              disabled={!canSave}
-            >
-              Save Agent
-            </Button>
-          </CardFooter>
-        </Card>
-      </PopoverContent>
-      <CronExpressionDialog
-        open={cronScheduleDialogOpen}
-        setOpen={setCronScheduleDialogOpen}
-        onSubmit={handleScheduleChange}
-        defaultCronExpression={agentRecommendedScheduleCron}
-        title="Recommended Schedule"
-      />
-    </Popover>
-  );
-};

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/history.ts

@@ -1,95 +0,0 @@
-import { CustomNodeData } from "./CustomNode/CustomNode";
-import { CustomEdgeData } from "./CustomEdge/CustomEdge";
-import { Edge } from "@xyflow/react";
-
-type ActionType =
-  | "ADD_NODE"
-  | "DELETE_NODE"
-  | "ADD_EDGE"
-  | "DELETE_EDGE"
-  | "UPDATE_NODE"
-  | "MOVE_NODE"
-  | "UPDATE_INPUT"
-  | "UPDATE_NODE_POSITION";
-
-type AddNodePayload = { node: CustomNodeData };
-type DeleteNodePayload = { nodeId: string };
-type AddEdgePayload = { edge: Edge<CustomEdgeData> };
-type DeleteEdgePayload = { edgeId: string };
-type UpdateNodePayload = { nodeId: string; newData: Partial<CustomNodeData> };
-type MoveNodePayload = { nodeId: string; position: { x: number; y: number } };
-type UpdateInputPayload = {
-  nodeId: string;
-  oldValues: { [key: string]: any };
-  newValues: { [key: string]: any };
-};
-type UpdateNodePositionPayload = {
-  nodeId: string;
-  oldPosition: { x: number; y: number };
-  newPosition: { x: number; y: number };
-};
-
-type ActionPayload =
-  | AddNodePayload
-  | DeleteNodePayload
-  | AddEdgePayload
-  | DeleteEdgePayload
-  | UpdateNodePayload
-  | MoveNodePayload
-  | UpdateInputPayload
-  | UpdateNodePositionPayload;
-
-type Action = {
-  type: ActionType;
-  payload: ActionPayload;
-  undo: () => void;
-  redo: () => void;
-};
-
-class History {
-  private past: Action[] = [];
-  private future: Action[] = [];
-
-  push(action: Action) {
-    this.past.push(action);
-    this.future = [];
-  }
-
-  undo() {
-    const action = this.past.pop();
-    if (action) {
-      action.undo();
-      this.future.push(action);
-    }
-  }
-
-  redo() {
-    const action = this.future.pop();
-    if (action) {
-      action.redo();
-      this.past.push(action);
-    }
-  }
-
-  canUndo(): boolean {
-    return this.past.length > 0;
-  }
-
-  canRedo(): boolean {
-    return this.future.length > 0;
-  }
-
-  clear() {
-    this.past = [];
-    this.future = [];
-  }
-
-  getHistoryState() {
-    return {
-      past: [...this.past],
-      future: [...this.future],
-    };
-  }
-}
-
-export const history = new History();

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/tutorial.ts

@@ -1,569 +0,0 @@
-import Shepherd from "shepherd.js";
-import "shepherd.js/dist/css/shepherd.css";
-import { Key, storage } from "@/services/storage/local-storage";
-import { analytics } from "@/services/analytics";
-
-export const startTutorial = (
-  emptyNodeList: (forceEmpty: boolean) => boolean,
-  setPinBlocksPopover: (value: boolean) => void,
-  setPinSavePopover: (value: boolean) => void,
-) => {
-  const tour = new Shepherd.Tour({
-    useModalOverlay: true,
-    defaultStepOptions: {
-      cancelIcon: { enabled: true },
-      scrollTo: { behavior: "smooth", block: "center" },
-    },
-  });
-
-  // CSS classes for disabling and highlighting blocks
-  const disableClass = "disable-blocks";
-  const highlightClass = "highlight-block";
-  let isConnecting = false;
-
-  // Helper function to disable all blocks except the target block
-  const disableOtherBlocks = (targetBlockSelector: string) => {
-    document.querySelectorAll('[data-id^="block-card-"]').forEach((block) => {
-      block.classList.toggle(disableClass, !block.matches(targetBlockSelector));
-      block.classList.toggle(
-        highlightClass,
-        block.matches(targetBlockSelector),
-      );
-    });
-  };
-
-  // Helper function to enable all blocks
-  const enableAllBlocks = () => {
-    document.querySelectorAll('[data-id^="block-card-"]').forEach((block) => {
-      block.classList.remove(disableClass, highlightClass);
-    });
-  };
-
-  // Inject CSS for disabling and highlighting blocks
-  const injectStyles = () => {
-    const style = document.createElement("style");
-    style.textContent = `
-            .${disableClass} {
-                pointer-events: none;
-                opacity: 0.5;
-            }
-            .${highlightClass} {
-                background-color: #ffeb3b;
-                border: 2px solid #fbc02d;
-                transition: background-color 0.3s, border-color 0.3s;
-            }
-        `;
-    document.head.appendChild(style);
-  };
-
-  // Helper function to check if an element is present in the DOM
-  const waitForElement = (selector: string): Promise<void> => {
-    return new Promise((resolve) => {
-      const checkElement = () => {
-        if (document.querySelector(selector)) {
-          resolve();
-        } else {
-          setTimeout(checkElement, 10);
-        }
-      };
-      checkElement();
-    });
-  };
-
-  // Function to detect the correct connection and advance the tour
-  const detectConnection = () => {
-    const checkForConnection = () => {
-      const correctConnection = document.querySelector(
-        '[data-testid^="rf__edge-"]',
-      );
-      if (correctConnection) {
-        tour.show("press-run-again");
-      } else {
-        setTimeout(checkForConnection, 100);
-      }
-    };
-
-    checkForConnection();
-  };
-
-  // Define state management functions to handle connection state
-  function startConnecting() {
-    isConnecting = true;
-  }
-
-  function stopConnecting() {
-    isConnecting = false;
-  }
-
-  // Reset connection state when revisiting the step
-  function resetConnectionState() {
-    stopConnecting();
-  }
-
-  // Event handlers for mouse down and up to manage connection state
-  function handleMouseDown() {
-    startConnecting();
-    setTimeout(() => {
-      if (isConnecting) {
-        tour.next();
-      }
-    }, 100);
-  }
-  // Event handler for mouse up to check if the connection was successful
-  function handleMouseUp(event: { target: any }) {
-    const target = event.target;
-    const validConnectionPoint = document.querySelector(
-      '[data-testid^="rf__node-"]:nth-child(2) [data-id$="-a-target"]',
-    );
-
-    if (validConnectionPoint && !validConnectionPoint.contains(target)) {
-      setTimeout(() => {
-        if (!document.querySelector('[data-testid^="rf__edge-"]')) {
-          stopConnecting();
-          tour.show("connect-blocks-output");
-        }
-      }, 200);
-    } else {
-      stopConnecting();
-    }
-  }
-
-  // Define the fitViewToScreen function
-  const fitViewToScreen = () => {
-    const fitViewButton = document.querySelector(
-      ".react-flow__controls-fitview",
-    ) as HTMLButtonElement;
-    if (fitViewButton) {
-      fitViewButton.click();
-    }
-  };
-
-  injectStyles();
-
-  const warningText = emptyNodeList(false)
-    ? ""
-    : "<br/><br/><b>Caution: Clicking next will start a tutorial and will clear the current flow.</b>";
-
-  tour.addStep({
-    id: "starting-step",
-    title: "Welcome to the Tutorial",
-    text: `This is the AutoGPT builder! ${warningText}`,
-    buttons: [
-      {
-        text: "Skip Tutorial",
-        action: () => {
-          tour.cancel(); // Ends the tour
-          storage.set(Key.SHEPHERD_TOUR, "skipped"); // Set the tutorial as skipped in local storage
-        },
-        classes: "shepherd-button-secondary", // Optionally add a class for styling the skip button differently
-      },
-      {
-        text: "Next",
-        action: () => {
-          emptyNodeList(true);
-          tour.next();
-        },
-      },
-    ],
-  });
-
-  tour.addStep({
-    id: "open-block-step",
-    title: "Open Blocks Menu",
-    text: "Please click the block button to open the blocks menu.",
-    attachTo: {
-      element: '[data-id="blocks-control-popover-trigger"]',
-      on: "right",
-    },
-    advanceOn: {
-      selector: '[data-id="blocks-control-popover-trigger"]',
-      event: "click",
-    },
-    buttons: [],
-  });
-
-  tour.addStep({
-    id: "scroll-block-menu",
-    title: "Scroll Down or Search",
-    text: 'Scroll down or search in the blocks menu for the "Calculator Block" and press the block to add it.',
-    attachTo: {
-      element: '[data-id="blocks-control-popover-content"]',
-      on: "right",
-    },
-    buttons: [],
-    beforeShowPromise: () =>
-      waitForElement('[data-id="blocks-control-popover-content"]').then(() => {
-        disableOtherBlocks(
-          '[data-id="block-card-b1ab9b19-67a6-406d-abf5-2dba76d00c79"]',
-        );
-      }),
-    advanceOn: {
-      selector: '[data-id="block-card-b1ab9b19-67a6-406d-abf5-2dba76d00c79"]',
-      event: "click",
-    },
-    when: {
-      show: () => setPinBlocksPopover(true),
-      hide: enableAllBlocks,
-    },
-  });
-
-  tour.addStep({
-    id: "focus-new-block",
-    title: "New Block",
-    text: "This is the Calculator Block! Let's go over how it works.",
-    attachTo: { element: `[data-id="custom-node-1"]`, on: "left" },
-    beforeShowPromise: () => waitForElement('[data-id="custom-node-1"]'),
-    buttons: [
-      {
-        text: "Next",
-        action: tour.next,
-      },
-    ],
-    when: {
-      show: () => {
-        setPinBlocksPopover(false);
-        setTimeout(() => {
-          fitViewToScreen();
-        }, 100);
-      },
-    },
-  });
-
-  tour.addStep({
-    id: "input-to-block",
-    title: "Input to the Block",
-    text: "This is the input pin for the block. You can input the output of other blocks here; this block takes numbers as input.",
-    attachTo: { element: '[data-nodeid="1"]', on: "left" },
-    buttons: [
-      {
-        text: "Back",
-        action: tour.back,
-      },
-      {
-        text: "Next",
-        action: tour.next,
-      },
-    ],
-  });
-
-  tour.addStep({
-    id: "output-from-block",
-    title: "Output from the Block",
-    text: "This is the output pin for the block. You can connect this to another block to pass the output along.",
-    attachTo: { element: '[data-handlepos="right"]', on: "right" },
-    buttons: [
-      {
-        text: "Back",
-        action: tour.back,
-      },
-      {
-        text: "Next",
-        action: tour.next,
-      },
-    ],
-  });
-
-  tour.addStep({
-    id: "select-operation-and-input",
-    title: "Select Operation and Input Numbers",
-    text: "Select any mathematical operation you'd like to perform, and enter numbers in both input fields.",
-    attachTo: { element: '[data-id="input-handles"]', on: "right" },
-    buttons: [
-      {
-        text: "Back",
-        action: tour.back,
-      },
-      {
-        text: "Next",
-        action: tour.next,
-      },
-    ],
-  });
-
-  tour.addStep({
-    id: "press-initial-save-button",
-    title: "Press Save",
-    text: "First we need to save the flow before we can run it!",
-    attachTo: {
-      element: '[data-id="save-control-popover-trigger"]',
-      on: "left",
-    },
-    advanceOn: {
-      selector: '[data-id="save-control-popover-trigger"]',
-      event: "click",
-    },
-    buttons: [
-      {
-        text: "Back",
-        action: tour.back,
-      },
-    ],
-    when: {
-      hide: () => setPinSavePopover(true),
-    },
-  });
-
-  tour.addStep({
-    id: "save-agent-details",
-    title: "Save the Agent",
-    text: "Enter a name for your agent, add an optional description, and then click 'Save agent' to save your flow.",
-    attachTo: {
-      element: '[data-id="save-control-popover-content"]',
-      on: "top",
-    },
-    buttons: [],
-    beforeShowPromise: () =>
-      waitForElement('[data-id="save-control-popover-content"]'),
-    advanceOn: {
-      selector: '[data-id="save-control-save-agent"]',
-      event: "click",
-    },
-    when: {
-      hide: () => setPinSavePopover(false),
-    },
-  });
-
-  tour.addStep({
-    id: "press-run",
-    title: "Press Run",
-    text: "Start your first flow by pressing the Run button!",
-    attachTo: {
-      element: '[data-tutorial-id="primary-action-run-agent"]',
-      on: "top",
-    },
-    advanceOn: {
-      selector: '[data-tutorial-id="primary-action-run-agent"]',
-      event: "click",
-    },
-    buttons: [],
-    beforeShowPromise: () =>
-      waitForElement('[data-tutorial-id="primary-action-run-agent"]'),
-    when: {
-      hide: () => {
-        setTimeout(() => {
-          fitViewToScreen();
-        }, 500);
-      },
-    },
-  });
-
-  tour.addStep({
-    id: "wait-for-processing",
-    title: "Processing",
-    text: "Let's wait for the block to finish being processed...",
-    attachTo: {
-      element: '[data-id^="badge-"][data-id$="-QUEUED"]',
-      on: "bottom",
-    },
-    buttons: [],
-    beforeShowPromise: () =>
-      waitForElement('[data-id^="badge-"][data-id$="-QUEUED"]').then(
-        fitViewToScreen,
-      ),
-    when: {
-      show: () => {
-        waitForElement('[data-id^="badge-"][data-id$="-COMPLETED"]').then(
-          () => {
-            tour.next();
-          },
-        );
-      },
-    },
-  });
-
-  tour.addStep({
-    id: "check-output",
-    title: "Check the Output",
-    text: "Check here to see the output of the block after running the flow.",
-    attachTo: { element: '[data-id="latest-output"]', on: "top" },
-    beforeShowPromise: () =>
-      new Promise((resolve) => {
-        setTimeout(() => {
-          waitForElement('[data-id="latest-output"]').then(resolve);
-        }, 100);
-      }),
-    buttons: [
-      {
-        text: "Next",
-        action: tour.next,
-      },
-    ],
-    when: {
-      show: () => {
-        fitViewToScreen();
-      },
-    },
-  });
-
-  tour.addStep({
-    id: "copy-paste-block",
-    title: "Copy and Paste the Block",
-    text: "Let’s duplicate this block. Click and hold the block with your mouse, then press Ctrl+C (Cmd+C on Mac) to copy and Ctrl+V (Cmd+V on Mac) to paste.",
-    attachTo: { element: '[data-testid^="rf__node-"]', on: "top" },
-    buttons: [
-      {
-        text: "Back",
-        action: tour.back,
-      },
-    ],
-    when: {
-      show: () => {
-        fitViewToScreen();
-        waitForElement('[data-testid^="rf__node-"]:nth-child(2)').then(() => {
-          tour.next();
-        });
-      },
-    },
-  });
-
-  tour.addStep({
-    id: "focus-second-block",
-    title: "Focus on the New Block",
-    text: "This is your copied Calculator Block. Now, let’s move it to the side of the first block.",
-    attachTo: { element: '[data-testid^="rf__node-"]:nth-child(2)', on: "top" },
-    beforeShowPromise: () =>
-      waitForElement('[data-testid^="rf__node-"]:nth-child(2)'),
-    buttons: [
-      {
-        text: "Next",
-        action: tour.next,
-      },
-    ],
-  });
-
-  tour.addStep({
-    id: "connect-blocks-output",
-    title: "Connect the Blocks: Output",
-    text: "Now, let's connect the output of the first Calculator Block to the input of the second Calculator Block. Drag from the output pin of the first block to the input pin (A) of the second block.",
-    attachTo: {
-      element:
-        '[data-testid^="rf__node-"]:first-child [data-id$="-result-source"]',
-      on: "bottom",
-    },
-
-    buttons: [
-      {
-        text: "Back",
-        action: tour.back,
-      },
-    ],
-    beforeShowPromise: () => {
-      return waitForElement(
-        '[data-testid^="rf__node-"]:first-child [data-id$="-result-source"]',
-      );
-    },
-    when: {
-      show: () => {
-        fitViewToScreen();
-        resetConnectionState(); // Reset state when revisiting this step
-        tour.modal.show();
-        const outputPin = document.querySelector(
-          '[data-testid^="rf__node-"]:first-child [data-id$="-result-source"]',
-        );
-        if (outputPin) {
-          outputPin.addEventListener("mousedown", handleMouseDown);
-        }
-      },
-      hide: () => {
-        const outputPin = document.querySelector(
-          '[data-testid^="rf__node-"]:first-child [data-id$="-result-source"]',
-        );
-        if (outputPin) {
-          outputPin.removeEventListener("mousedown", handleMouseDown);
-        }
-      },
-    },
-  });
-
-  tour.addStep({
-    id: "connect-blocks-input",
-    title: "Connect the Blocks: Input",
-    text: "Now, connect the output to the input pin of the second block (A).",
-    attachTo: {
-      element: '[data-testid^="rf__node-"]:nth-child(2) [data-id$="-a-target"]',
-      on: "top",
-    },
-    buttons: [],
-    beforeShowPromise: () => {
-      return waitForElement(
-        '[data-testid^="rf__node-"]:nth-child(2) [data-id$="-a-target"]',
-      ).then(() => {
-        detectConnection();
-      });
-    },
-    when: {
-      show: () => {
-        tour.modal.show();
-        document.addEventListener("mouseup", handleMouseUp, true);
-      },
-      hide: () => {
-        tour.modal.hide();
-        document.removeEventListener("mouseup", handleMouseUp, true);
-      },
-    },
-  });
-
-  tour.addStep({
-    id: "press-run-again",
-    title: "Press Run Again",
-    text: "Now, press the Run button again to execute the flow with the new Calculator Block added!",
-    attachTo: {
-      element: '[data-tutorial-id="primary-action-run-agent"]',
-      on: "top",
-    },
-    advanceOn: {
-      selector: '[data-tutorial-id="primary-action-run-agent"]',
-      event: "click",
-    },
-    buttons: [],
-    beforeShowPromise: () =>
-      waitForElement('[data-tutorial-id="primary-action-run-agent"]'),
-    when: {
-      hide: () => {
-        setTimeout(() => {
-          fitViewToScreen();
-        }, 500);
-      },
-    },
-  });
-
-  tour.addStep({
-    id: "congratulations",
-    title: "Congratulations!",
-    text: "You have successfully created your first flow. Watch for the outputs in the blocks!",
-    beforeShowPromise: () => waitForElement('[data-id="latest-output"]'),
-    when: {
-      show: () => tour.modal.hide(),
-    },
-    buttons: [
-      {
-        text: "Finish",
-        action: tour.complete,
-      },
-    ],
-  });
-
-  // Unpin blocks and save menu when the tour is completed or canceled
-  tour.on("complete", () => {
-    setPinBlocksPopover(false);
-    setPinSavePopover(false);
-    storage.set(Key.SHEPHERD_TOUR, "completed"); // Optionally mark the tutorial as completed
-  });
-
-  for (const step of tour.steps) {
-    step.on("show", () => {
-      "use client";
-      console.debug("sendTutorialStep");
-
-      analytics.sendGAEvent("event", "tutorial_step_shown", { value: step.id });
-    });
-  }
-
-  tour.on("cancel", () => {
-    setPinBlocksPopover(false);
-    setPinSavePopover(false);
-    storage.set(Key.SHEPHERD_TOUR, "canceled"); // Optionally mark the tutorial as canceled
-  });
-
-  tour.start();
-};

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/useCopyPaste.ts

@@ -1,142 +0,0 @@
-import { useCallback } from "react";
-import { Node, Edge, useReactFlow } from "@xyflow/react";
-import { Key, storage } from "@/services/storage/local-storage";
-import { ConnectedEdge } from "./CustomNode/CustomNode";
-
-interface CopyableData {
-  nodes: Node[];
-  edges: Edge[];
-}
-
-export function useCopyPaste(getNextNodeId: () => string) {
-  const { setNodes, addEdges, getNodes, getEdges, getViewport } =
-    useReactFlow();
-
-  const handleCopyPaste = useCallback(
-    (event: KeyboardEvent) => {
-      if (event.ctrlKey || event.metaKey) {
-        if (event.key === "c" || event.key === "C") {
-          const selectedNodes = getNodes().filter((node) => node.selected);
-          const selectedNodeIds = new Set(selectedNodes.map((node) => node.id));
-
-          // Only copy edges where both source and target nodes are selected
-          const selectedEdges = getEdges().filter(
-            (edge) =>
-              edge.selected &&
-              selectedNodeIds.has(edge.source) &&
-              selectedNodeIds.has(edge.target),
-          );
-
-          const copiedData: CopyableData = {
-            nodes: selectedNodes.map((node) => ({
-              ...node,
-              data: {
-                ...node.data,
-                connections: node.data.connections || [], // Preserve connections
-              },
-            })),
-            edges: selectedEdges,
-          };
-
-          storage.set(Key.COPIED_FLOW_DATA, JSON.stringify(copiedData));
-        }
-        if (event.key === "v" || event.key === "V") {
-          const copiedDataString = storage.get(Key.COPIED_FLOW_DATA);
-          if (copiedDataString) {
-            const copiedData = JSON.parse(copiedDataString) as CopyableData;
-            const oldToNewIdMap: Record<string, string> = {};
-
-            // Get fresh viewport values at paste time to ensure correct positioning
-            const { x, y, zoom } = getViewport();
-            const viewportCenter = {
-              x: (window.innerWidth / 2 - x) / zoom,
-              y: (window.innerHeight / 2 - y) / zoom,
-            };
-
-            let minX = Infinity,
-              minY = Infinity,
-              maxX = -Infinity,
-              maxY = -Infinity;
-            copiedData.nodes.forEach((node: Node) => {
-              minX = Math.min(minX, node.position.x);
-              minY = Math.min(minY, node.position.y);
-              maxX = Math.max(maxX, node.position.x);
-              maxY = Math.max(maxY, node.position.y);
-            });
-
-            const offsetX = viewportCenter.x - (minX + maxX) / 2;
-            const offsetY = viewportCenter.y - (minY + maxY) / 2;
-
-            const pastedNodes = copiedData.nodes.map((node: Node) => {
-              const newNodeId = getNextNodeId();
-              oldToNewIdMap[node.id] = newNodeId;
-              return {
-                ...node,
-                id: newNodeId, // Generate unique ID for the pasted node
-                selected: true, // Select the pasted nodes so they're visible
-                position: {
-                  x: node.position.x + offsetX,
-                  y: node.position.y + offsetY,
-                },
-                data: {
-                  ...node.data,
-                  backend_id: undefined, // Clear backend_id so the new node.id is used when saving
-                  connections: node.data.connections || [], // Preserve connections
-                  status: undefined,
-                  executionResults: undefined,
-                },
-              };
-            });
-
-            const pastedEdges = copiedData.edges.map((edge) => {
-              const newSourceId = oldToNewIdMap[edge.source] ?? edge.source;
-              const newTargetId = oldToNewIdMap[edge.target] ?? edge.target;
-              return {
-                ...edge,
-                id: `${newSourceId}_${edge.sourceHandle}_${newTargetId}_${edge.targetHandle}_${Date.now()}`,
-                source: newSourceId,
-                target: newTargetId,
-              };
-            });
-
-            setNodes((existingNodes) => [
-              ...existingNodes.map((node) => ({ ...node, selected: false })),
-              ...pastedNodes,
-            ]);
-            addEdges(pastedEdges);
-
-            setNodes((nodes) => {
-              return nodes.map((node) => {
-                const nodeConnections = getEdges()
-                  .filter(
-                    (edge: Edge) =>
-                      edge.source === node.id || edge.target === node.id,
-                  )
-                  .map(
-                    (edge: Edge): ConnectedEdge => ({
-                      id: edge.id,
-                      source: edge.source,
-                      target: edge.target,
-                      sourceHandle: edge.sourceHandle!,
-                      targetHandle: edge.targetHandle!,
-                    }),
-                  );
-
-                return {
-                  ...node,
-                  data: {
-                    ...node.data,
-                    connections: nodeConnections,
-                  },
-                };
-              });
-            });
-          }
-        }
-      }
-    },
-    [setNodes, addEdges, getNodes, getEdges, getNextNodeId, getViewport],
-  );
-
-  return handleCopyPaste;
-}

autogpt_platform/frontend/src/app/(platform)/copilot/hooks/Untitled

@@ -0,0 +1,10 @@
+import { parseAsString, useQueryState } from "nuqs";
+
+export function useCopilotSessionId() {
+  const [urlSessionId, setUrlSessionId] = useQueryState(
+    "sessionId",
+    parseAsString,
+  );
+
+  return { urlSessionId, setUrlSessionId };
+}

autogpt_platform/frontend/src/app/(platform)/copilot/hooks/useLongRunningToolPolling.ts

@@ -1,126 +0,0 @@
-import { getGetV2GetSessionQueryKey } from "@/app/api/__generated__/endpoints/chat/chat";
-import { useQueryClient } from "@tanstack/react-query";
-import type { UIDataTypes, UIMessage, UITools } from "ai";
-import { useCallback, useEffect, useRef } from "react";
-import { convertChatSessionMessagesToUiMessages } from "../helpers/convertChatSessionToUiMessages";
-
-const OPERATING_TYPES = new Set([
-  "operation_started",
-  "operation_pending",
-  "operation_in_progress",
-]);
-
-const POLL_INTERVAL_MS = 1_500;
-
-/**
- * Detects whether any message contains a tool part whose output indicates
- * a long-running operation is still in progress.
- */
-function hasOperatingTool(
-  messages: UIMessage<unknown, UIDataTypes, UITools>[],
-) {
-  for (const msg of messages) {
-    for (const part of msg.parts) {
-      if (!part.type.startsWith("tool-")) continue;
-      const toolPart = part as { output?: unknown };
-      if (!toolPart.output) continue;
-      const output =
-        typeof toolPart.output === "string"
-          ? safeParse(toolPart.output)
-          : toolPart.output;
-      if (
-        output &&
-        typeof output === "object" &&
-        "type" in output &&
-        OPERATING_TYPES.has((output as { type: string }).type)
-      ) {
-        return true;
-      }
-    }
-  }
-  return false;
-}
-
-function safeParse(value: string): unknown {
-  try {
-    return JSON.parse(value);
-  } catch {
-    return null;
-  }
-}
-
-/**
- * Polls the session endpoint while any tool is in an "operating" state
- * (operation_started / operation_pending / operation_in_progress).
- *
- * When the session data shows the tool output has changed (e.g. to
- * agent_saved), it calls `setMessages` with the updated messages.
- */
-export function useLongRunningToolPolling(
-  sessionId: string | null,
-  messages: UIMessage<unknown, UIDataTypes, UITools>[],
-  setMessages: (
-    updater: (
-      prev: UIMessage<unknown, UIDataTypes, UITools>[],
-    ) => UIMessage<unknown, UIDataTypes, UITools>[],
-  ) => void,
-) {
-  const queryClient = useQueryClient();
-  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
-
-  const stopPolling = useCallback(() => {
-    if (intervalRef.current) {
-      clearInterval(intervalRef.current);
-      intervalRef.current = null;
-    }
-  }, []);
-
-  const poll = useCallback(async () => {
-    if (!sessionId) return;
-
-    // Invalidate the query cache so the next fetch gets fresh data
-    await queryClient.invalidateQueries({
-      queryKey: getGetV2GetSessionQueryKey(sessionId),
-    });
-
-    // Fetch fresh session data
-    const data = queryClient.getQueryData<{
-      status: number;
-      data: { messages?: unknown[] };
-    }>(getGetV2GetSessionQueryKey(sessionId));
-
-    if (data?.status !== 200 || !data.data.messages) return;
-
-    const freshMessages = convertChatSessionMessagesToUiMessages(
-      sessionId,
-      data.data.messages,
-    );
-
-    if (!freshMessages || freshMessages.length === 0) return;
-
-    // Update when the long-running tool completed
-    if (!hasOperatingTool(freshMessages)) {
-      setMessages(() => freshMessages);
-      stopPolling();
-    }
-  }, [sessionId, queryClient, setMessages, stopPolling]);
-
-  useEffect(() => {
-    const shouldPoll = hasOperatingTool(messages);
-
-    // Always clear any previous interval first so we never leak timers
-    // when the effect re-runs due to dependency changes (e.g. messages
-    // updating as the LLM streams text after the tool call).
-    stopPolling();
-
-    if (shouldPoll && sessionId) {
-      intervalRef.current = setInterval(() => {
-        poll();
-      }, POLL_INTERVAL_MS);
-    }
-
-    return () => {
-      stopPolling();
-    };
-  }, [messages, sessionId, poll, stopPolling]);
-}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/CreateAgent/CreateAgent.tsx

@@ -1,30 +1,24 @@
 "use client";
 
-import { Button } from "@/components/atoms/Button/Button";
-import { Text } from "@/components/atoms/Text/Text";
-import {
-  BookOpenIcon,
-  CheckFatIcon,
-  PencilSimpleIcon,
-  WarningDiamondIcon,
-} from "@phosphor-icons/react";
+import { WarningDiamondIcon } from "@phosphor-icons/react";
 import type { ToolUIPart } from "ai";
-import NextLink from "next/link";
 import { useCopilotChatActions } from "../../components/CopilotChatActionsProvider/useCopilotChatActions";
 import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
+import { ProgressBar } from "../../components/ProgressBar/ProgressBar";
 import {
   ContentCardDescription,
   ContentCodeBlock,
   ContentGrid,
   ContentHint,
+  ContentLink,
   ContentMessage,
 } from "../../components/ToolAccordion/AccordionContent";
 import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
+import { useAsymptoticProgress } from "../../hooks/useAsymptoticProgress";
 import {
   ClarificationQuestionsCard,
   ClarifyingQuestion,
 } from "./components/ClarificationQuestionsCard";
-import { MiniGame } from "./components/MiniGame/MiniGame";
 import {
   AccordionIcon,
   formatMaybeJson,
@@ -58,7 +52,7 @@ function getAccordionMeta(output: CreateAgentToolOutput) {
   const icon = <AccordionIcon />;
 
   if (isAgentSavedOutput(output)) {
-    return { icon, title: output.agent_name, expanded: true };
+    return { icon, title: output.agent_name };
   }
   if (isAgentPreviewOutput(output)) {
     return {
@@ -84,7 +78,6 @@ function getAccordionMeta(output: CreateAgentToolOutput) {
     return {
       icon,
       title: "Creating agent, this may take a few minutes. Sit back and relax.",
-      expanded: true,
     };
   }
   return {
@@ -114,6 +107,8 @@ export function CreateAgentTool({ part }: Props) {
       isOperationPendingOutput(output) ||
       isOperationInProgressOutput(output));
 
+  const progress = useAsymptoticProgress(isOperating);
+
   const hasExpandableContent =
     part.state === "output-available" &&
     !!output &&
@@ -157,53 +152,31 @@ export function CreateAgentTool({ part }: Props) {
         <ToolAccordion {...getAccordionMeta(output)}>
           {isOperating && (
             <ContentGrid>
-              <MiniGame />
+              <ProgressBar value={progress} className="max-w-[280px]" />
               <ContentHint>
-                This could take a few minutes — play while you wait!
+                This could take a few minutes, grab a coffee ☕
               </ContentHint>
             </ContentGrid>
           )}
 
           {isAgentSavedOutput(output) && (
-            <div className="rounded-xl border border-border/60 bg-card p-4 shadow-sm">
-              <div className="flex items-baseline gap-2">
-                <CheckFatIcon
-                  size={18}
-                  weight="regular"
-                  className="relative top-1 text-green-500"
-                />
-                <Text
-                  variant="body-medium"
-                  className="text-blacks mb-2 text-[16px]"
-                >
-                  {output.message}
-                </Text>
+            <ContentGrid>
+              <ContentMessage>{output.message}</ContentMessage>
+              <div className="flex flex-wrap gap-2">
+                <ContentLink href={output.library_agent_link}>
+                  Open in library
+                </ContentLink>
+                <ContentLink href={output.agent_page_link}>
+                  Open in builder
+                </ContentLink>
               </div>
-              <div className="mt-3 flex flex-wrap gap-4">
-                <Button variant="outline" size="small">
-                  <NextLink
-                    href={output.library_agent_link}
-                    className="inline-flex items-center gap-1.5"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <BookOpenIcon size={14} weight="regular" />
-                    Open in library
-                  </NextLink>
-                </Button>
-                <Button variant="outline" size="small">
-                  <NextLink
-                    href={output.agent_page_link}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="inline-flex items-center gap-1.5"
-                  >
-                    <PencilSimpleIcon size={14} weight="regular" />
-                    Open in builder
-                  </NextLink>
-                </Button>
-              </div>
-            </div>
+              <ContentCodeBlock>
+                {truncateText(
+                  formatMaybeJson({ agent_id: output.agent_id }),
+                  800,
+                )}
+              </ContentCodeBlock>
+            </ContentGrid>
           )}
 
           {isAgentPreviewOutput(output) && (

autogpt_platform/frontend/src/app/(platform)/copilot/tools/CreateAgent/components/MiniGame/MiniGame.tsx

@@ -1,21 +0,0 @@
-"use client";
-
-import { useMiniGame } from "./useMiniGame";
-
-export function MiniGame() {
-  const { canvasRef } = useMiniGame();
-
-  return (
-    <div
-      className="w-full overflow-hidden rounded-md bg-background text-foreground"
-      style={{ border: "1px solid #d17fff" }}
-    >
-      <canvas
-        ref={canvasRef}
-        tabIndex={0}
-        className="block w-full outline-none"
-        style={{ imageRendering: "pixelated" }}
-      />
-    </div>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/CreateAgent/components/MiniGame/useMiniGame.ts

@@ -1,579 +0,0 @@
-import { useEffect, useRef } from "react";
-
-/* ------------------------------------------------------------------ */
-/*  Constants                                                         */
-/* ------------------------------------------------------------------ */
-
-const CANVAS_HEIGHT = 150;
-const GRAVITY = 0.55;
-const JUMP_FORCE = -9.5;
-const BASE_SPEED = 3;
-const SPEED_INCREMENT = 0.0008;
-const SPAWN_MIN = 70;
-const SPAWN_MAX = 130;
-const CHAR_SIZE = 18;
-const CHAR_X = 50;
-const GROUND_PAD = 20;
-const STORAGE_KEY = "copilot-minigame-highscore";
-
-// Colors
-const COLOR_BG = "#E8EAF6";
-const COLOR_CHAR = "#263238";
-const COLOR_BOSS = "#F50057";
-
-// Boss
-const BOSS_SIZE = 36;
-const BOSS_ENTER_SPEED = 2;
-const BOSS_LEAVE_SPEED = 3;
-const BOSS_SHOOT_COOLDOWN = 90;
-const BOSS_SHOTS_TO_EVADE = 5;
-const BOSS_INTERVAL = 20; // every N score
-const PROJ_SPEED = 4.5;
-const PROJ_SIZE = 12;
-
-/* ------------------------------------------------------------------ */
-/*  Types                                                             */
-/* ------------------------------------------------------------------ */
-
-interface Obstacle {
-  x: number;
-  width: number;
-  height: number;
-  scored: boolean;
-}
-
-interface Projectile {
-  x: number;
-  y: number;
-  speed: number;
-  evaded: boolean;
-  type: "low" | "high";
-}
-
-interface BossState {
-  phase: "inactive" | "entering" | "fighting" | "leaving";
-  x: number;
-  targetX: number;
-  shotsEvaded: number;
-  cooldown: number;
-  projectiles: Projectile[];
-  bob: number;
-}
-
-interface GameState {
-  charY: number;
-  vy: number;
-  obstacles: Obstacle[];
-  score: number;
-  highScore: number;
-  speed: number;
-  frame: number;
-  nextSpawn: number;
-  running: boolean;
-  over: boolean;
-  groundY: number;
-  boss: BossState;
-  bossThreshold: number;
-}
-
-/* ------------------------------------------------------------------ */
-/*  Helpers                                                           */
-/* ------------------------------------------------------------------ */
-
-function randInt(min: number, max: number) {
-  return Math.floor(Math.random() * (max - min + 1)) + min;
-}
-
-function readHighScore(): number {
-  try {
-    return parseInt(localStorage.getItem(STORAGE_KEY) || "0", 10) || 0;
-  } catch {
-    return 0;
-  }
-}
-
-function writeHighScore(score: number) {
-  try {
-    localStorage.setItem(STORAGE_KEY, String(score));
-  } catch {
-    /* noop */
-  }
-}
-
-function makeBoss(): BossState {
-  return {
-    phase: "inactive",
-    x: 0,
-    targetX: 0,
-    shotsEvaded: 0,
-    cooldown: 0,
-    projectiles: [],
-    bob: 0,
-  };
-}
-
-function makeState(groundY: number): GameState {
-  return {
-    charY: groundY - CHAR_SIZE,
-    vy: 0,
-    obstacles: [],
-    score: 0,
-    highScore: readHighScore(),
-    speed: BASE_SPEED,
-    frame: 0,
-    nextSpawn: randInt(SPAWN_MIN, SPAWN_MAX),
-    running: false,
-    over: false,
-    groundY,
-    boss: makeBoss(),
-    bossThreshold: BOSS_INTERVAL,
-  };
-}
-
-function gameOver(s: GameState) {
-  s.running = false;
-  s.over = true;
-  if (s.score > s.highScore) {
-    s.highScore = s.score;
-    writeHighScore(s.score);
-  }
-}
-
-/* ------------------------------------------------------------------ */
-/*  Projectile collision — shared between fighting & leaving phases   */
-/* ------------------------------------------------------------------ */
-
-/** Returns true if the player died. */
-function tickProjectiles(s: GameState): boolean {
-  const boss = s.boss;
-
-  for (const p of boss.projectiles) {
-    p.x -= p.speed;
-
-    if (!p.evaded && p.x + PROJ_SIZE < CHAR_X) {
-      p.evaded = true;
-      boss.shotsEvaded++;
-    }
-
-    // Collision
-    if (
-      !p.evaded &&
-      CHAR_X + CHAR_SIZE > p.x &&
-      CHAR_X < p.x + PROJ_SIZE &&
-      s.charY + CHAR_SIZE > p.y &&
-      s.charY < p.y + PROJ_SIZE
-    ) {
-      gameOver(s);
-      return true;
-    }
-  }
-
-  boss.projectiles = boss.projectiles.filter((p) => p.x + PROJ_SIZE > -20);
-  return false;
-}
-
-/* ------------------------------------------------------------------ */
-/*  Update                                                            */
-/* ------------------------------------------------------------------ */
-
-function update(s: GameState, canvasWidth: number) {
-  if (!s.running) return;
-
-  s.frame++;
-
-  // Speed only ramps during regular play
-  if (s.boss.phase === "inactive") {
-    s.speed = BASE_SPEED + s.frame * SPEED_INCREMENT;
-  }
-
-  // ---- Character physics (always active) ---- //
-  s.vy += GRAVITY;
-  s.charY += s.vy;
-  if (s.charY + CHAR_SIZE >= s.groundY) {
-    s.charY = s.groundY - CHAR_SIZE;
-    s.vy = 0;
-  }
-
-  // ---- Trigger boss ---- //
-  if (s.boss.phase === "inactive" && s.score >= s.bossThreshold) {
-    s.boss.phase = "entering";
-    s.boss.x = canvasWidth + 10;
-    s.boss.targetX = canvasWidth - BOSS_SIZE - 40;
-    s.boss.shotsEvaded = 0;
-    s.boss.cooldown = BOSS_SHOOT_COOLDOWN;
-    s.boss.projectiles = [];
-    s.obstacles = [];
-  }
-
-  // ---- Boss: entering ---- //
-  if (s.boss.phase === "entering") {
-    s.boss.bob = Math.sin(s.frame * 0.05) * 3;
-    s.boss.x -= BOSS_ENTER_SPEED;
-    if (s.boss.x <= s.boss.targetX) {
-      s.boss.x = s.boss.targetX;
-      s.boss.phase = "fighting";
-    }
-    return; // no obstacles while entering
-  }
-
-  // ---- Boss: fighting ---- //
-  if (s.boss.phase === "fighting") {
-    s.boss.bob = Math.sin(s.frame * 0.05) * 3;
-
-    // Shoot
-    s.boss.cooldown--;
-    if (s.boss.cooldown <= 0) {
-      const isLow = Math.random() < 0.5;
-      s.boss.projectiles.push({
-        x: s.boss.x - PROJ_SIZE,
-        y: isLow ? s.groundY - 14 : s.groundY - 70,
-        speed: PROJ_SPEED,
-        evaded: false,
-        type: isLow ? "low" : "high",
-      });
-      s.boss.cooldown = BOSS_SHOOT_COOLDOWN;
-    }
-
-    if (tickProjectiles(s)) return;
-
-    // Boss defeated?
-    if (s.boss.shotsEvaded >= BOSS_SHOTS_TO_EVADE) {
-      s.boss.phase = "leaving";
-      s.score += 5; // bonus
-      s.bossThreshold = s.score + BOSS_INTERVAL;
-    }
-    return;
-  }
-
-  // ---- Boss: leaving ---- //
-  if (s.boss.phase === "leaving") {
-    s.boss.bob = Math.sin(s.frame * 0.05) * 3;
-    s.boss.x += BOSS_LEAVE_SPEED;
-
-    // Still check in-flight projectiles
-    if (tickProjectiles(s)) return;
-
-    if (s.boss.x > canvasWidth + 50) {
-      s.boss = makeBoss();
-      s.nextSpawn = s.frame + randInt(SPAWN_MIN / 2, SPAWN_MAX / 2);
-    }
-    return;
-  }
-
-  // ---- Regular obstacle play ---- //
-  if (s.frame >= s.nextSpawn) {
-    s.obstacles.push({
-      x: canvasWidth + 10,
-      width: randInt(10, 16),
-      height: randInt(20, 48),
-      scored: false,
-    });
-    s.nextSpawn = s.frame + randInt(SPAWN_MIN, SPAWN_MAX);
-  }
-
-  for (const o of s.obstacles) {
-    o.x -= s.speed;
-    if (!o.scored && o.x + o.width < CHAR_X) {
-      o.scored = true;
-      s.score++;
-    }
-  }
-
-  s.obstacles = s.obstacles.filter((o) => o.x + o.width > -20);
-
-  for (const o of s.obstacles) {
-    const oY = s.groundY - o.height;
-    if (
-      CHAR_X + CHAR_SIZE > o.x &&
-      CHAR_X < o.x + o.width &&
-      s.charY + CHAR_SIZE > oY
-    ) {
-      gameOver(s);
-      return;
-    }
-  }
-}
-
-/* ------------------------------------------------------------------ */
-/*  Drawing                                                           */
-/* ------------------------------------------------------------------ */
-
-function drawBoss(ctx: CanvasRenderingContext2D, s: GameState, bg: string) {
-  const bx = s.boss.x;
-  const by = s.groundY - BOSS_SIZE + s.boss.bob;
-
-  // Body
-  ctx.save();
-  ctx.fillStyle = COLOR_BOSS;
-  ctx.globalAlpha = 0.9;
-  ctx.beginPath();
-  ctx.roundRect(bx, by, BOSS_SIZE, BOSS_SIZE, 4);
-  ctx.fill();
-  ctx.restore();
-
-  // Eyes
-  ctx.save();
-  ctx.fillStyle = bg;
-  const eyeY = by + 13;
-  ctx.beginPath();
-  ctx.arc(bx + 10, eyeY, 4, 0, Math.PI * 2);
-  ctx.fill();
-  ctx.beginPath();
-  ctx.arc(bx + 26, eyeY, 4, 0, Math.PI * 2);
-  ctx.fill();
-  ctx.restore();
-
-  // Angry eyebrows
-  ctx.save();
-  ctx.strokeStyle = bg;
-  ctx.lineWidth = 2;
-  ctx.beginPath();
-  ctx.moveTo(bx + 5, eyeY - 7);
-  ctx.lineTo(bx + 14, eyeY - 4);
-  ctx.stroke();
-  ctx.beginPath();
-  ctx.moveTo(bx + 31, eyeY - 7);
-  ctx.lineTo(bx + 22, eyeY - 4);
-  ctx.stroke();
-  ctx.restore();
-
-  // Zigzag mouth
-  ctx.save();
-  ctx.strokeStyle = bg;
-  ctx.lineWidth = 1.5;
-  ctx.beginPath();
-  ctx.moveTo(bx + 10, by + 27);
-  ctx.lineTo(bx + 14, by + 24);
-  ctx.lineTo(bx + 18, by + 27);
-  ctx.lineTo(bx + 22, by + 24);
-  ctx.lineTo(bx + 26, by + 27);
-  ctx.stroke();
-  ctx.restore();
-}
-
-function drawProjectiles(ctx: CanvasRenderingContext2D, boss: BossState) {
-  ctx.save();
-  ctx.fillStyle = COLOR_BOSS;
-  ctx.globalAlpha = 0.8;
-  for (const p of boss.projectiles) {
-    if (p.evaded) continue;
-    ctx.beginPath();
-    ctx.arc(
-      p.x + PROJ_SIZE / 2,
-      p.y + PROJ_SIZE / 2,
-      PROJ_SIZE / 2,
-      0,
-      Math.PI * 2,
-    );
-    ctx.fill();
-  }
-  ctx.restore();
-}
-
-function draw(
-  ctx: CanvasRenderingContext2D,
-  s: GameState,
-  w: number,
-  h: number,
-  fg: string,
-  started: boolean,
-) {
-  ctx.fillStyle = COLOR_BG;
-  ctx.fillRect(0, 0, w, h);
-
-  // Ground
-  ctx.save();
-  ctx.strokeStyle = fg;
-  ctx.globalAlpha = 0.15;
-  ctx.setLineDash([4, 4]);
-  ctx.beginPath();
-  ctx.moveTo(0, s.groundY);
-  ctx.lineTo(w, s.groundY);
-  ctx.stroke();
-  ctx.restore();
-
-  // Character
-  ctx.save();
-  ctx.fillStyle = COLOR_CHAR;
-  ctx.globalAlpha = 0.85;
-  ctx.beginPath();
-  ctx.roundRect(CHAR_X, s.charY, CHAR_SIZE, CHAR_SIZE, 3);
-  ctx.fill();
-  ctx.restore();
-
-  // Eyes
-  ctx.save();
-  ctx.fillStyle = COLOR_BG;
-  ctx.beginPath();
-  ctx.arc(CHAR_X + 6, s.charY + 7, 2.5, 0, Math.PI * 2);
-  ctx.fill();
-  ctx.beginPath();
-  ctx.arc(CHAR_X + 12, s.charY + 7, 2.5, 0, Math.PI * 2);
-  ctx.fill();
-  ctx.restore();
-
-  // Obstacles
-  ctx.save();
-  ctx.fillStyle = fg;
-  ctx.globalAlpha = 0.55;
-  for (const o of s.obstacles) {
-    ctx.fillRect(o.x, s.groundY - o.height, o.width, o.height);
-  }
-  ctx.restore();
-
-  // Boss + projectiles
-  if (s.boss.phase !== "inactive") {
-    drawBoss(ctx, s, COLOR_BG);
-    drawProjectiles(ctx, s.boss);
-  }
-
-  // Score HUD
-  ctx.save();
-  ctx.fillStyle = fg;
-  ctx.globalAlpha = 0.5;
-  ctx.font = "bold 11px monospace";
-  ctx.textAlign = "right";
-  ctx.fillText(`Score: ${s.score}`, w - 12, 20);
-  ctx.fillText(`Best: ${s.highScore}`, w - 12, 34);
-  if (s.boss.phase === "fighting") {
-    ctx.fillText(
-      `Evade: ${s.boss.shotsEvaded}/${BOSS_SHOTS_TO_EVADE}`,
-      w - 12,
-      48,
-    );
-  }
-  ctx.restore();
-
-  // Prompts
-  if (!started && !s.running && !s.over) {
-    ctx.save();
-    ctx.fillStyle = fg;
-    ctx.globalAlpha = 0.5;
-    ctx.font = "12px sans-serif";
-    ctx.textAlign = "center";
-    ctx.fillText("Click or press Space to play while you wait", w / 2, h / 2);
-    ctx.restore();
-  }
-
-  if (s.over) {
-    ctx.save();
-    ctx.fillStyle = fg;
-    ctx.globalAlpha = 0.7;
-    ctx.font = "bold 13px sans-serif";
-    ctx.textAlign = "center";
-    ctx.fillText("Game Over", w / 2, h / 2 - 8);
-    ctx.font = "11px sans-serif";
-    ctx.fillText("Click or Space to restart", w / 2, h / 2 + 10);
-    ctx.restore();
-  }
-}
-
-/* ------------------------------------------------------------------ */
-/*  Hook                                                              */
-/* ------------------------------------------------------------------ */
-
-export function useMiniGame() {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const stateRef = useRef<GameState | null>(null);
-  const rafRef = useRef(0);
-  const startedRef = useRef(false);
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-
-    const container = canvas.parentElement;
-    if (container) {
-      canvas.width = container.clientWidth;
-      canvas.height = CANVAS_HEIGHT;
-    }
-
-    const groundY = canvas.height - GROUND_PAD;
-    stateRef.current = makeState(groundY);
-
-    const style = getComputedStyle(canvas);
-    let fg = style.color || "#71717a";
-
-    // -------------------------------------------------------------- //
-    //  Jump                                                           //
-    // -------------------------------------------------------------- //
-    function jump() {
-      const s = stateRef.current;
-      if (!s) return;
-
-      if (s.over) {
-        const hs = s.highScore;
-        const gy = s.groundY;
-        stateRef.current = makeState(gy);
-        stateRef.current.highScore = hs;
-        stateRef.current.running = true;
-        startedRef.current = true;
-        return;
-      }
-
-      if (!s.running) {
-        s.running = true;
-        startedRef.current = true;
-        return;
-      }
-
-      // Only jump when on the ground
-      if (s.charY + CHAR_SIZE >= s.groundY) {
-        s.vy = JUMP_FORCE;
-      }
-    }
-
-    function onKey(e: KeyboardEvent) {
-      if (e.code === "Space" || e.key === " ") {
-        e.preventDefault();
-        jump();
-      }
-    }
-
-    function onClick() {
-      canvas?.focus();
-      jump();
-    }
-
-    // -------------------------------------------------------------- //
-    //  Loop                                                           //
-    // -------------------------------------------------------------- //
-    function loop() {
-      const s = stateRef.current;
-      if (!canvas || !s) return;
-      const ctx = canvas.getContext("2d");
-      if (!ctx) return;
-
-      update(s, canvas.width);
-      draw(ctx, s, canvas.width, canvas.height, fg, startedRef.current);
-      rafRef.current = requestAnimationFrame(loop);
-    }
-
-    rafRef.current = requestAnimationFrame(loop);
-
-    canvas.addEventListener("click", onClick);
-    canvas.addEventListener("keydown", onKey);
-
-    const observer = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        canvas.width = entry.contentRect.width;
-        canvas.height = CANVAS_HEIGHT;
-        if (stateRef.current) {
-          stateRef.current.groundY = canvas.height - GROUND_PAD;
-        }
-        const cs = getComputedStyle(canvas);
-        fg = cs.color || fg;
-      }
-    });
-    if (container) observer.observe(container);
-
-    return () => {
-      cancelAnimationFrame(rafRef.current);
-      canvas.removeEventListener("click", onClick);
-      canvas.removeEventListener("keydown", onKey);
-      observer.disconnect();
-    };
-  }, []);
-
-  return { canvasRef };
-}

autogpt_platform/frontend/src/app/(platform)/copilot/useCopilotPage.ts

@@ -1,14 +1,10 @@
 import { useGetV2ListSessions } from "@/app/api/__generated__/endpoints/chat/chat";
-import { toast } from "@/components/molecules/Toast/use-toast";
 import { useBreakpoint } from "@/lib/hooks/useBreakpoint";
 import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
 import { useChat } from "@ai-sdk/react";
 import { DefaultChatTransport } from "ai";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useChatSession } from "./useChatSession";
-import { useLongRunningToolPolling } from "./hooks/useLongRunningToolPolling";
-
-const STREAM_START_TIMEOUT_MS = 12_000;
 
 export function useCopilotPage() {
   const { isUserLoading, isLoggedIn } = useSupabase();
@@ -56,24 +52,6 @@ export function useCopilotPage() {
     transport: transport ?? undefined,
   });
 
-  // Abort the stream if the backend doesn't start sending data within 12s.
-  const stopRef = useRef(stop);
-  stopRef.current = stop;
-  useEffect(() => {
-    if (status !== "submitted") return;
-
-    const timer = setTimeout(() => {
-      stopRef.current();
-      toast({
-        title: "Stream timed out",
-        description: "The server took too long to respond. Please try again.",
-        variant: "destructive",
-      });
-    }, STREAM_START_TIMEOUT_MS);
-
-    return () => clearTimeout(timer);
-  }, [status]);
-
   useEffect(() => {
     if (!hydratedMessages || hydratedMessages.length === 0) return;
     setMessages((prev) => {
@@ -82,11 +60,6 @@ export function useCopilotPage() {
     });
   }, [hydratedMessages, setMessages]);
 
-  // Poll session endpoint when a long-running tool (create_agent, edit_agent)
-  // is in progress. When the backend completes, the session data will contain
-  // the final tool output — this hook detects the change and updates messages.
-  useLongRunningToolPolling(sessionId, messages, setMessages);
-
   // Clear messages when session is null
   useEffect(() => {
     if (!sessionId) setMessages([]);

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/ScheduleListItem.tsx

@@ -29,7 +29,6 @@ export function ScheduleListItem({
       description={formatDistanceToNow(schedule.next_run_time, {
         addSuffix: true,
       })}
-      descriptionTitle={new Date(schedule.next_run_time).toString()}
       onClick={onClick}
       selected={selected}
       icon={

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/SidebarItemCard.tsx

@@ -7,7 +7,6 @@ import React from "react";
 interface Props {
   title: string;
   description?: string;
-  descriptionTitle?: string;
   icon?: React.ReactNode;
   selected?: boolean;
   onClick?: () => void;
@@ -17,7 +16,6 @@ interface Props {
 export function SidebarItemCard({
   title,
   description,
-  descriptionTitle,
   icon,
   selected,
   onClick,
@@ -40,11 +38,7 @@ export function SidebarItemCard({
           >
             {title}
           </Text>
-          <Text
-            variant="body"
-            className="leading-tight !text-zinc-500"
-            title={descriptionTitle}
-          >
+          <Text variant="body" className="leading-tight !text-zinc-500">
             {description}
           </Text>
         </div>

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/TaskListItem.tsx

@@ -81,9 +81,6 @@ export function TaskListItem({
           ? formatDistanceToNow(run.started_at, { addSuffix: true })
           : "—"
       }
-      descriptionTitle={
-        run.started_at ? new Date(run.started_at).toString() : undefined
-      }
       onClick={onClick}
       selected={selected}
       actions={

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

@@ -1,25 +1,17 @@
 "use client";
 
 import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
-import { LibraryAgentSort } from "@/app/api/__generated__/models/libraryAgentSort";
 import { Text } from "@/components/atoms/Text/Text";
-import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
 import { InfiniteScroll } from "@/components/contextual/InfiniteScroll/InfiniteScroll";
 import { HeartIcon } from "@phosphor-icons/react";
 import { useFavoriteAgents } from "../../hooks/useFavoriteAgents";
 import { LibraryAgentCard } from "../LibraryAgentCard/LibraryAgentCard";
-import { LibraryTabs, Tab } from "../LibraryTabs/LibraryTabs";
-import { LibraryActionSubHeader } from "../LibraryActionSubHeader/LibraryActionSubHeader";
 
 interface Props {
   searchTerm: string;
-  tabs: Tab[];
-  activeTab: string;
-  onTabChange: (tabId: string) => void;
-  setLibrarySort: (value: LibraryAgentSort) => void;
 }
 
-export function FavoritesSection({ searchTerm, tabs, activeTab, onTabChange, setLibrarySort }: Props) {
+export function FavoritesSection({ searchTerm }: Props) {
   const {
     allAgents: favoriteAgents,
     agentLoading: isLoading,
@@ -29,26 +21,38 @@ export function FavoritesSection({ searchTerm, tabs, activeTab, onTabChange, set
     isFetchingNextPage,
   } = useFavoriteAgents({ searchTerm });
 
-  return (
-    <>
-      <LibraryActionSubHeader agentCount={agentCount} setLibrarySort={setLibrarySort} />
-      <LibraryTabs tabs={tabs} activeTab={activeTab} onTabChange={onTabChange} />
+  if (isLoading || favoriteAgents.length === 0) {
+    return null;
+  }
 
-      {isLoading ? (
-        <div className="flex h-[200px] items-center justify-center">
-          <LoadingSpinner size="large" />
+  return (
+    <div className="!mb-8">
+      <div className="mb-3 flex items-center gap-2 p-2">
+        <HeartIcon className="h-5 w-5" weight="fill" />
+        <div className="flex items-baseline gap-2">
+          <Text variant="h4">Favorites</Text>
+          {!isLoading && (
+            <Text
+              variant="body"
+              data-testid="agents-count"
+              className="relative bottom-px text-zinc-500"
+            >
+              {agentCount}
+            </Text>
+          )}
         </div>
-      ) : favoriteAgents.length === 0 ? (
-        <div className="flex h-[200px] flex-col items-center justify-center gap-2 text-zinc-500">
-          <HeartIcon className="h-10 w-10" />
-          <Text variant="body">No favorite agents yet</Text>
-        </div>
-      ) : (
+      </div>
+
+      <div className="relative">
         <InfiniteScroll
           isFetchingNextPage={isFetchingNextPage}
           fetchNextPage={fetchNextPage}
           hasNextPage={hasNextPage}
-          loader={<LoadingSpinner size="medium" />}
+          loader={
+            <div className="flex h-8 w-full items-center justify-center">
+              <div className="h-6 w-6 animate-spin rounded-full border-b-2 border-t-2 border-neutral-800" />
+            </div>
+          }
         >
           <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
             {favoriteAgents.map((agent: LibraryAgent) => (
@@ -56,7 +60,9 @@ export function FavoritesSection({ searchTerm, tabs, activeTab, onTabChange, set
             ))}
           </div>
         </InfiniteScroll>
-      )}
-    </>
+      </div>
+
+      {favoriteAgents.length > 0 && <div className="!mt-10 border-t" />}
+    </div>
   );
 }

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

@@ -1,66 +0,0 @@
-"use client";
-
-import { motion, AnimatePresence } from "framer-motion";
-import { HeartIcon } from "@phosphor-icons/react";
-import { useEffect, useState } from "react";
-
-interface FlyingHeartProps {
-  startPosition: { x: number; y: number } | null;
-  targetPosition: { x: number; y: number } | null;
-  onAnimationComplete: () => void;
-}
-
-export function FlyingHeart({
-  startPosition,
-  targetPosition,
-  onAnimationComplete,
-}: FlyingHeartProps) {
-  const [isVisible, setIsVisible] = useState(false);
-
-  useEffect(() => {
-    if (startPosition && targetPosition) {
-      setIsVisible(true);
-    }
-  }, [startPosition, targetPosition]);
-
-  if (!startPosition || !targetPosition) return null;
-
-  return (
-    <AnimatePresence>
-      {isVisible && (
-        <motion.div
-          className="pointer-events-none fixed z-50"
-          initial={{
-            x: startPosition.x,
-            y: startPosition.y,
-            scale: 1,
-            opacity: 1,
-          }}
-          animate={{
-            x: targetPosition.x,
-            y: targetPosition.y,
-            scale: 0.5,
-            opacity: 0,
-          }}
-          exit={{ opacity: 0 }}
-          transition={{
-            type: "spring",
-            damping: 20,
-            stiffness: 200,
-            duration: 0.5,
-          }}
-          onAnimationComplete={() => {
-            setIsVisible(false);
-            onAnimationComplete();
-          }}
-        >
-          <HeartIcon
-            size={24}
-            weight="fill"
-            className="text-red-500 drop-shadow-md"
-          />
-        </motion.div>
-      )}
-    </AnimatePresence>
-  );
-}

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

@@ -13,7 +13,7 @@ export function LibraryActionSubHeader({ agentCount, setLibrarySort }: Props) {
   return (
     <div className="flex items-baseline justify-between">
       <div className="flex items-baseline gap-4">
-        <Text variant="h5">My agents</Text>
+        <Text variant="h4">My agents</Text>
         <Text
           variant="body"
           data-testid="agents-count"

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

@@ -4,7 +4,6 @@ import { Text } from "@/components/atoms/Text/Text";
 import { CaretCircleRightIcon } from "@phosphor-icons/react";
 import Image from "next/image";
 import NextLink from "next/link";
-import { motion } from "framer-motion";
 
 import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
 import Avatar, {
@@ -15,24 +14,13 @@ import { Link } from "@/components/atoms/Link/Link";
 import { AgentCardMenu } from "./components/AgentCardMenu";
 import { FavoriteButton } from "./components/FavoriteButton";
 import { useLibraryAgentCard } from "./useLibraryAgentCard";
-import { useFavoriteAnimation } from "../../context/FavoriteAnimationContext";
 
 interface Props {
   agent: LibraryAgent;
-  draggable?: boolean;
 }
 
-export function LibraryAgentCard({
-  agent,
-  draggable = true,
-}: Props) {
+export function LibraryAgentCard({ agent }: Props) {
   const { id, name, graph_id, can_access_graph, image_url } = agent;
-  const { triggerFavoriteAnimation } = useFavoriteAnimation();
-
-  function handleDragStart(e: React.DragEvent<HTMLDivElement>) {
-    e.dataTransfer.setData("application/agent-id", id);
-    e.dataTransfer.effectAllowed = "move";
-  }
 
   const {
     isFromMarketplace,
@@ -40,29 +28,14 @@ export function LibraryAgentCard({
     profile,
     creator_image_url,
     handleToggleFavorite,
-  } = useLibraryAgentCard({
-    agent,
-    onFavoriteAdd: triggerFavoriteAnimation,
-  });
+  } = useLibraryAgentCard({ agent });
 
   return (
     <div
-      draggable={draggable}
-      onDragStart={handleDragStart}
-      className="cursor-grab active:cursor-grabbing"
+      data-testid="library-agent-card"
+      data-agent-id={id}
+      className="group relative inline-flex h-[10.625rem] w-full max-w-[25rem] flex-col items-start justify-start gap-2.5 rounded-medium border border-zinc-100 bg-white transition-all duration-300 hover:shadow-md"
     >
-      <motion.div
-        layoutId={`agent-card-${id}`}
-        data-testid="library-agent-card"
-        data-agent-id={id}
-        className="group relative inline-flex h-[10.625rem] w-full max-w-[25rem] flex-col items-start justify-start gap-2.5 rounded-medium border border-zinc-100 bg-white hover:shadow-md"
-        transition={{
-          type: "spring",
-          damping: 25,
-          stiffness: 300,
-        }}
-        style={{ willChange: "transform" }}
-      >
       <NextLink href={`/library/agents/${id}`} className="flex-shrink-0">
         <div className="relative flex items-center gap-2 px-4 pt-3">
           <Avatar className="h-4 w-4 rounded-full">
@@ -152,7 +125,6 @@ export function LibraryAgentCard({
           )}
         </div>
       </div>
-      </motion.div>
     </div>
   );
 }

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

@@ -5,10 +5,6 @@ import {
   useDeleteV2DeleteLibraryAgent,
   usePostV2ForkLibraryAgent,
 } from "@/app/api/__generated__/endpoints/library/library";
-import {
-  usePostV2BulkMoveAgents,
-  getGetV2ListLibraryFoldersQueryKey,
-} from "@/app/api/__generated__/endpoints/folders/folders";
 import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
 import { Button } from "@/components/atoms/Button/Button";
 import { Text } from "@/components/atoms/Text/Text";
@@ -26,7 +22,6 @@ import { useQueryClient } from "@tanstack/react-query";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { MoveToFolderDialog } from "../../MoveToFolderDialog/MoveToFolderDialog";
 
 interface AgentCardMenuProps {
   agent: LibraryAgent;
@@ -37,25 +32,11 @@ export function AgentCardMenu({ agent }: AgentCardMenuProps) {
   const queryClient = useQueryClient();
   const router = useRouter();
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
-  const [showMoveDialog, setShowMoveDialog] = useState(false);
   const [isDeletingAgent, setIsDeletingAgent] = useState(false);
   const [isDuplicatingAgent, setIsDuplicatingAgent] = useState(false);
-  const [isRemovingFromFolder, setIsRemovingFromFolder] = useState(false);
 
   const { mutateAsync: deleteAgent } = useDeleteV2DeleteLibraryAgent();
   const { mutateAsync: forkAgent } = usePostV2ForkLibraryAgent();
-  const { mutateAsync: bulkMoveAgents } = usePostV2BulkMoveAgents({
-    mutation: {
-      onSuccess: () => {
-        queryClient.invalidateQueries({
-          queryKey: getGetV2ListLibraryAgentsQueryKey(),
-        });
-        queryClient.invalidateQueries({
-          queryKey: getGetV2ListLibraryFoldersQueryKey(),
-        });
-      },
-    },
-  });
 
   async function handleDuplicateAgent() {
     if (!agent.id) return;
@@ -89,37 +70,6 @@ export function AgentCardMenu({ agent }: AgentCardMenuProps) {
     }
   }
 
-  async function handleRemoveFromFolder() {
-    if (!agent.id) return;
-
-    setIsRemovingFromFolder(true);
-
-    try {
-      await bulkMoveAgents({
-        data: {
-          agent_ids: [agent.id],
-          folder_id: undefined,
-        },
-      });
-
-      toast({
-        title: "Removed from folder",
-        description: "Agent has been moved back to your library.",
-      });
-    } catch (error: unknown) {
-      toast({
-        title: "Failed to remove from folder",
-        description:
-          error instanceof Error
-            ? error.message
-            : "An unexpected error occurred.",
-        variant: "destructive",
-      });
-    } finally {
-      setIsRemovingFromFolder(false);
-    }
-  }
-
   async function handleDeleteAgent() {
     if (!agent.id) return;
 
@@ -188,31 +138,6 @@ export function AgentCardMenu({ agent }: AgentCardMenuProps) {
             Duplicate agent
           </DropdownMenuItem>
           <DropdownMenuSeparator />
-          <DropdownMenuItem
-            onClick={(e) => {
-              e.stopPropagation();
-              setShowMoveDialog(true);
-            }}
-            className="flex items-center gap-2"
-          >
-            Move to folder
-          </DropdownMenuItem>
-          {agent.folder_id && (
-            <>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem
-                onClick={(e) => {
-                  e.stopPropagation();
-                  handleRemoveFromFolder();
-                }}
-                disabled={isRemovingFromFolder}
-                className="flex items-center gap-2"
-              >
-                Remove from folder
-              </DropdownMenuItem>
-            </>
-          )}
-          <DropdownMenuSeparator />
           <DropdownMenuItem
             onClick={(e) => {
               e.stopPropagation();
@@ -258,14 +183,6 @@ export function AgentCardMenu({ agent }: AgentCardMenuProps) {
           </div>
         </Dialog.Content>
       </Dialog>
-
-      <MoveToFolderDialog
-        agentId={agent.id}
-        agentName={agent.name}
-        currentFolderId={agent.folder_id}
-        isOpen={showMoveDialog}
-        setIsOpen={setShowMoveDialog}
-      />
     </>
   );
 }

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

@@ -3,12 +3,10 @@
 import { cn } from "@/lib/utils";
 import { HeartIcon } from "@phosphor-icons/react";
 import type { MouseEvent } from "react";
-import { useRef } from "react";
-import { motion, AnimatePresence } from "framer-motion";
 
 interface FavoriteButtonProps {
   isFavorite: boolean;
-  onClick: (e: MouseEvent<HTMLButtonElement>, position: { x: number; y: number }) => void;
+  onClick: (e: MouseEvent<HTMLButtonElement>) => void;
   className?: string;
 }
 
@@ -17,46 +15,25 @@ export function FavoriteButton({
   onClick,
   className,
 }: FavoriteButtonProps) {
-  const buttonRef = useRef<HTMLButtonElement>(null);
-
-  function handleClick(e: MouseEvent<HTMLButtonElement>) {
-    const rect = buttonRef.current?.getBoundingClientRect();
-    const position = rect
-      ? { x: rect.left + rect.width / 2 - 12, y: rect.top + rect.height / 2 - 12 }
-      : { x: 0, y: 0 };
-    onClick(e, position);
-  }
-
   return (
     <button
-      ref={buttonRef}
-      onClick={handleClick}
+      onClick={onClick}
       className={cn(
         "rounded-full p-2 transition-all duration-200",
-        "hover:scale-110 active:scale-95",
+        "hover:scale-110",
         !isFavorite && "opacity-0 group-hover:opacity-100",
         className,
       )}
       aria-label={isFavorite ? "Remove from favorites" : "Add to favorites"}
     >
-      <AnimatePresence mode="wait" initial={false}>
-        <motion.div
-          key={isFavorite ? "filled" : "empty"}
-          initial={{ scale: 0.5, opacity: 0 }}
-          animate={{ scale: 1, opacity: 1 }}
-          exit={{ scale: 0.5, opacity: 0 }}
-          transition={{ type: "spring", damping: 15, stiffness: 300 }}
-        >
-          <HeartIcon
-            size={20}
-            weight={isFavorite ? "fill" : "regular"}
-            className={cn(
-              "transition-colors duration-200",
-              isFavorite ? "text-red-500" : "text-gray-600 hover:text-red-500",
-            )}
-          />
-        </motion.div>
-      </AnimatePresence>
+      <HeartIcon
+        size={20}
+        weight={isFavorite ? "fill" : "regular"}
+        className={cn(
+          "transition-colors duration-200",
+          isFavorite ? "text-red-500" : "text-gray-600 hover:text-red-500",
+        )}
+      />
     </button>
   );
 }

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

@@ -14,11 +14,11 @@ import { updateFavoriteInQueries } from "./helpers";
 
 interface Props {
   agent: LibraryAgent;
-  onFavoriteAdd?: (position: { x: number; y: number }) => void;
 }
 
-export function useLibraryAgentCard({ agent, onFavoriteAdd }: Props) {
-  const { id, is_favorite, creator_image_url, marketplace_listing } = agent;
+export function useLibraryAgentCard({ agent }: Props) {
+  const { id, name, is_favorite, creator_image_url, marketplace_listing } =
+    agent;
 
   const isFromMarketplace = Boolean(marketplace_listing);
   const [isFavorite, setIsFavorite] = useState(is_favorite);
@@ -49,31 +49,26 @@ export function useLibraryAgentCard({ agent, onFavoriteAdd }: Props) {
     });
   }
 
-  async function handleToggleFavorite(
-    e: React.MouseEvent,
-    position: { x: number; y: number }
-  ) {
+  async function handleToggleFavorite(e: React.MouseEvent) {
     e.preventDefault();
     e.stopPropagation();
 
     const newIsFavorite = !isFavorite;
 
-    // Optimistic update - update UI immediately
     setIsFavorite(newIsFavorite);
     updateQueryData(newIsFavorite);
 
-    // Trigger animation immediately for adding to favorites
-    if (newIsFavorite && onFavoriteAdd) {
-      onFavoriteAdd(position);
-    }
-
     try {
       await updateLibraryAgent({
         libraryAgentId: id,
         data: { is_favorite: newIsFavorite },
       });
+
+      toast({
+        title: newIsFavorite ? "Added to favorites" : "Removed from favorites",
+        description: `${name} has been ${newIsFavorite ? "added to" : "removed from"} your favorites.`,
+      });
     } catch {
-      // Revert on failure
       setIsFavorite(!newIsFavorite);
       updateQueryData(!newIsFavorite);
 

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

@@ -1,66 +1,30 @@
 "use client";
-
 import { LibraryAgentSort } from "@/app/api/__generated__/models/libraryAgentSort";
 import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
 import { InfiniteScroll } from "@/components/contextual/InfiniteScroll/InfiniteScroll";
 import { LibraryActionSubHeader } from "../LibraryActionSubHeader/LibraryActionSubHeader";
 import { LibraryAgentCard } from "../LibraryAgentCard/LibraryAgentCard";
-import { LibraryFolder } from "../LibraryFolder/LibraryFolder";
-import { LibrarySubSection } from "../LibrarySubSection/LibrarySubSection";
-import { Button } from "@/components/atoms/Button/Button";
-import { ArrowLeftIcon, HeartIcon } from "@phosphor-icons/react";
-import { Text } from "@/components/atoms/Text/Text";
-import { Tab } from "../LibraryTabs/LibraryTabs";
-import { LayoutGroup } from "framer-motion";
-import { LibraryFolderEditDialog } from "../LibraryFolderEditDialog/LibraryFolderEditDialog";
-import { LibraryFolderDeleteDialog } from "../LibraryFolderDeleteDialog/LibraryFolderDeleteDialog";
 import { useLibraryAgentList } from "./useLibraryAgentList";
 
 interface Props {
   searchTerm: string;
   librarySort: LibraryAgentSort;
   setLibrarySort: (value: LibraryAgentSort) => void;
-  selectedFolderId: string | null;
-  onFolderSelect: (folderId: string | null) => void;
-  tabs: Tab[];
-  activeTab: string;
-  onTabChange: (tabId: string) => void;
 }
 
 export function LibraryAgentList({
   searchTerm,
   librarySort,
   setLibrarySort,
-  selectedFolderId,
-  onFolderSelect,
-  tabs,
-  activeTab,
-  onTabChange,
 }: Props) {
   const {
-    isFavoritesTab,
     agentLoading,
     agentCount,
-    agents,
+    allAgents: agents,
     hasNextPage,
     isFetchingNextPage,
     fetchNextPage,
-    foldersData,
-    currentFolder,
-    showFolders,
-    editingFolder,
-    setEditingFolder,
-    deletingFolder,
-    setDeletingFolder,
-    handleAgentDrop,
-    handleFolderDeleted,
-  } = useLibraryAgentList({
-    searchTerm,
-    librarySort,
-    selectedFolderId,
-    onFolderSelect,
-    activeTab,
-  });
+  } = useLibraryAgentList({ searchTerm, librarySort });
 
   return (
     <>
@@ -68,42 +32,11 @@ export function LibraryAgentList({
         agentCount={agentCount}
         setLibrarySort={setLibrarySort}
       />
-      {!selectedFolderId && (
-        <LibrarySubSection
-          tabs={tabs}
-          activeTab={activeTab}
-          onTabChange={onTabChange}
-        />
-      )}
-
-      <div>
-        {selectedFolderId && (
-          <div className="mb-4 flex items-center gap-3">
-            <Button
-              variant="ghost"
-              size="small"
-              onClick={() => onFolderSelect(null)}
-              className="gap-2"
-            >
-              <ArrowLeftIcon className="h-4 w-4" />
-              Back to Library
-            </Button>
-            {currentFolder && (
-              <Text variant="h4" className="text-zinc-700">
-                {currentFolder.icon} {currentFolder.name}
-              </Text>
-            )}
-          </div>
-        )}
+      <div className="px-2">
         {agentLoading ? (
           <div className="flex h-[200px] items-center justify-center">
             <LoadingSpinner size="large" />
           </div>
-        ) : isFavoritesTab && agents.length === 0 ? (
-          <div className="flex h-[200px] flex-col items-center justify-center gap-2 text-zinc-500">
-            <HeartIcon className="h-10 w-10" />
-            <Text variant="body">No favorite agents yet</Text>
-          </div>
         ) : (
           <InfiniteScroll
             isFetchingNextPage={isFetchingNextPage}
@@ -111,52 +44,14 @@ export function LibraryAgentList({
             hasNextPage={hasNextPage}
             loader={<LoadingSpinner size="medium" />}
           >
-            <LayoutGroup>
-              <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-                {showFolders &&
-                  foldersData?.folders.map((folder) => (
-                    <LibraryFolder
-                      key={folder.id}
-                      id={folder.id}
-                      name={folder.name}
-                      agentCount={folder.agent_count ?? 0}
-                      color={folder.color ?? undefined}
-                      icon={folder.icon ?? "📁"}
-                      onAgentDrop={handleAgentDrop}
-                      onClick={() => onFolderSelect(folder.id)}
-                      onEdit={() => setEditingFolder(folder)}
-                      onDelete={() => setDeletingFolder(folder)}
-                    />
-                  ))}
-                {agents.map((agent) => (
-                  <LibraryAgentCard key={agent.id} agent={agent} />
-                ))}
-              </div>
-            </LayoutGroup>
+            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+              {agents.map((agent) => (
+                <LibraryAgentCard key={agent.id} agent={agent} />
+              ))}
+            </div>
           </InfiniteScroll>
         )}
       </div>
-
-      {editingFolder && (
-        <LibraryFolderEditDialog
-          folder={editingFolder}
-          isOpen={!!editingFolder}
-          setIsOpen={(open) => {
-            if (!open) setEditingFolder(null);
-          }}
-        />
-      )}
-
-      {deletingFolder && (
-        <LibraryFolderDeleteDialog
-          folder={deletingFolder}
-          isOpen={!!deletingFolder}
-          setIsOpen={(open) => {
-            if (!open) setDeletingFolder(null);
-          }}
-          onDeleted={handleFolderDeleted}
-        />
-      )}
     </>
   );
 }

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

@@ -1,71 +1,36 @@
 "use client";
 
 import { useGetV2ListLibraryAgentsInfinite } from "@/app/api/__generated__/endpoints/library/library";
-import { getGetV2ListLibraryAgentsQueryKey } from "@/app/api/__generated__/endpoints/library/library";
-import {
-  useGetV2ListLibraryFolders,
-  usePostV2BulkMoveAgents,
-  getGetV2ListLibraryFoldersQueryKey,
-} from "@/app/api/__generated__/endpoints/folders/folders";
-import type { getV2ListLibraryFoldersResponseSuccess } from "@/app/api/__generated__/endpoints/folders/folders";
-import type { LibraryFolder } from "@/app/api/__generated__/models/libraryFolder";
 import { LibraryAgentSort } from "@/app/api/__generated__/models/libraryAgentSort";
 import {
-  okData,
   getPaginatedTotalCount,
   getPaginationNextPageNumber,
   unpaginate,
 } from "@/app/api/helpers";
-import { useToast } from "@/components/molecules/Toast/use-toast";
-import { useFavoriteAgents } from "../../hooks/useFavoriteAgents";
 import { getQueryClient } from "@/lib/react-query/queryClient";
-import { useQueryClient } from "@tanstack/react-query";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 
 interface Props {
   searchTerm: string;
   librarySort: LibraryAgentSort;
-  selectedFolderId: string | null;
-  onFolderSelect: (folderId: string | null) => void;
-  activeTab: string;
 }
 
-export function useLibraryAgentList({
-  searchTerm,
-  librarySort,
-  selectedFolderId,
-  onFolderSelect,
-  activeTab,
-}: Props) {
-  const isFavoritesTab = activeTab === "favorites";
-  const { toast } = useToast();
-  const stableQueryClient = getQueryClient();
-  const queryClient = useQueryClient();
+export function useLibraryAgentList({ searchTerm, librarySort }: Props) {
+  const queryClient = getQueryClient();
   const prevSortRef = useRef<LibraryAgentSort | null>(null);
 
-  const [editingFolder, setEditingFolder] = useState<LibraryFolder | null>(
-    null,
-  );
-  const [deletingFolder, setDeletingFolder] = useState<LibraryFolder | null>(
-    null,
-  );
-
-  // --- Agent list fetching ---
-
   const {
     data: agentsQueryData,
     fetchNextPage,
     hasNextPage,
     isFetchingNextPage,
-    isLoading: allAgentsLoading,
+    isLoading: agentLoading,
   } = useGetV2ListLibraryAgentsInfinite(
     {
       page: 1,
       page_size: 20,
       search_term: searchTerm || undefined,
       sort_by: librarySort,
-      folder_id: selectedFolderId ?? undefined,
-      include_root_only: selectedFolderId === null ? true : undefined,
     },
     {
       query: {
@@ -74,148 +39,28 @@ export function useLibraryAgentList({
     },
   );
 
+  // Reset queries when sort changes to ensure fresh data with correct sorting
   useEffect(() => {
     if (prevSortRef.current !== null && prevSortRef.current !== librarySort) {
-      stableQueryClient.resetQueries({
+      // Reset all library agent queries to ensure fresh fetch with new sort
+      queryClient.resetQueries({
         queryKey: ["/api/library/agents"],
       });
     }
     prevSortRef.current = librarySort;
-  }, [librarySort, stableQueryClient]);
+  }, [librarySort, queryClient]);
 
-  const allAgentsList = agentsQueryData
+  const allAgents = agentsQueryData
     ? unpaginate(agentsQueryData, "agents")
     : [];
-  const allAgentsCount = getPaginatedTotalCount(agentsQueryData);
-
-  // --- Favorites ---
-
-  const favoriteAgentsData = useFavoriteAgents({ searchTerm });
-
-  const {
-    agentLoading,
-    agentCount,
-    allAgents: agents,
-    hasNextPage: agentsHasNextPage,
-    isFetchingNextPage: agentsIsFetchingNextPage,
-    fetchNextPage: agentsFetchNextPage,
-  } = isFavoritesTab
-    ? favoriteAgentsData
-    : {
-        agentLoading: allAgentsLoading,
-        agentCount: allAgentsCount,
-        allAgents: allAgentsList,
-        hasNextPage: hasNextPage,
-        isFetchingNextPage: isFetchingNextPage,
-        fetchNextPage: fetchNextPage,
-      };
-
-  // --- Folders ---
-
-  const { data: foldersData } = useGetV2ListLibraryFolders(undefined, {
-    query: { select: okData },
-  });
-
-  const { mutate: moveAgentToFolder } = usePostV2BulkMoveAgents({
-    mutation: {
-      onMutate: async ({ data }) => {
-        await queryClient.cancelQueries({
-          queryKey: getGetV2ListLibraryFoldersQueryKey(),
-        });
-        await queryClient.cancelQueries({
-          queryKey: getGetV2ListLibraryAgentsQueryKey(),
-        });
-
-        const previousFolders = queryClient.getQueriesData<
-          getV2ListLibraryFoldersResponseSuccess
-        >({ queryKey: getGetV2ListLibraryFoldersQueryKey() });
-
-        if (data.folder_id) {
-          queryClient.setQueriesData<getV2ListLibraryFoldersResponseSuccess>(
-            { queryKey: getGetV2ListLibraryFoldersQueryKey() },
-            (old) => {
-              if (!old?.data?.folders) return old;
-              return {
-                ...old,
-                data: {
-                  ...old.data,
-                  folders: old.data.folders.map((f) =>
-                    f.id === data.folder_id
-                      ? {
-                          ...f,
-                          agent_count:
-                            (f.agent_count ?? 0) + data.agent_ids.length,
-                        }
-                      : f,
-                  ),
-                },
-              };
-            },
-          );
-        }
-
-        return { previousFolders };
-      },
-      onError: (_error, _variables, context) => {
-        if (context?.previousFolders) {
-          for (const [queryKey, data] of context.previousFolders) {
-            queryClient.setQueryData(queryKey, data);
-          }
-        }
-        toast({
-          title: "Error",
-          description: "Failed to move agent. Please try again.",
-          variant: "destructive",
-        });
-      },
-      onSettled: () => {
-        queryClient.invalidateQueries({
-          queryKey: getGetV2ListLibraryFoldersQueryKey(),
-        });
-        queryClient.invalidateQueries({
-          queryKey: getGetV2ListLibraryAgentsQueryKey(),
-        });
-      },
-    },
-  });
-
-  function handleAgentDrop(agentId: string, folderId: string) {
-    moveAgentToFolder({
-      data: {
-        agent_ids: [agentId],
-        folder_id: folderId,
-      },
-    });
-  }
-
-  const currentFolder = selectedFolderId
-    ? foldersData?.folders.find((f) => f.id === selectedFolderId)
-    : null;
-
-  const showFolders = !isFavoritesTab && !selectedFolderId;
-
-  function handleFolderDeleted() {
-    if (selectedFolderId === deletingFolder?.id) {
-      onFolderSelect(null);
-    }
-  }
+  const agentCount = getPaginatedTotalCount(agentsQueryData);
 
   return {
-    isFavoritesTab,
+    allAgents,
     agentLoading,
+    hasNextPage,
     agentCount,
-    agents,
-    hasNextPage: agentsHasNextPage,
-    isFetchingNextPage: agentsIsFetchingNextPage,
-    fetchNextPage: agentsFetchNextPage,
-    foldersData,
-    currentFolder,
-    showFolders,
-    editingFolder,
-    setEditingFolder,
-    deletingFolder,
-    setDeletingFolder,
-    handleAgentDrop,
-    handleFolderDeleted,
+    isFetchingNextPage,
+    fetchNextPage,
   };
 }

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

@@ -1,353 +0,0 @@
-import { useState } from "react";
-import { motion } from "framer-motion";
-import { Text } from "@/components/atoms/Text/Text";
-
-type FolderSize = "xs" | "sm" | "md" | "lg" | "xl";
-export type FolderColorName =
-  | "neutral"
-  | "slate"
-  | "zinc"
-  | "stone"
-  | "red"
-  | "orange"
-  | "amber"
-  | "yellow"
-  | "lime"
-  | "green"
-  | "emerald"
-  | "teal"
-  | "cyan"
-  | "sky"
-  | "blue"
-  | "indigo"
-  | "violet"
-  | "purple"
-  | "fuchsia"
-  | "pink"
-  | "rose";
-
-export type FolderColor = FolderColorName | (string & {});
-
-const hexToColorName: Record<string, FolderColorName> = {
-  "#3B82F6": "blue",
-  "#3b82f6": "blue",
-  "#A855F7": "purple",
-  "#a855f7": "purple",
-  "#10B981": "emerald",
-  "#10b981": "emerald",
-  "#F97316": "orange",
-  "#f97316": "orange",
-  "#EC4899": "pink",
-  "#ec4899": "pink",
-};
-
-function resolveColor(color: FolderColor | undefined): FolderColorName {
-  if (!color) return "blue";
-  if (color in hexToColorName) return hexToColorName[color];
-  if (color in colorMap) return color as FolderColorName;
-  return "blue";
-}
-
-interface Props {
-  className?: string;
-  size?: FolderSize | number;
-  color?: FolderColor;
-  icon?: string;
-  isOpen?: boolean;
-}
-
-const sizeMap: Record<FolderSize, number> = {
-  xs: 0.4,
-  sm: 0.75,
-  md: 1,
-  lg: 1.25,
-  xl: 1.5,
-};
-
-const colorMap: Record<
-  FolderColorName,
-  {
-    bg: string;
-    border: string;
-    borderLight: string;
-    fill: string;
-    stroke: string;
-  }
-> = {
-  neutral: {
-    bg: "bg-neutral-300",
-    border: "border-neutral-300",
-    borderLight: "border-neutral-200",
-    fill: "fill-neutral-300",
-    stroke: "stroke-neutral-400",
-  },
-  slate: {
-    bg: "bg-slate-300",
-    border: "border-slate-300",
-    borderLight: "border-slate-200",
-    fill: "fill-slate-300",
-    stroke: "stroke-slate-400",
-  },
-  zinc: {
-    bg: "bg-zinc-300",
-    border: "border-zinc-300",
-    borderLight: "border-zinc-200",
-    fill: "fill-zinc-300",
-    stroke: "stroke-zinc-400",
-  },
-  stone: {
-    bg: "bg-stone-300",
-    border: "border-stone-300",
-    borderLight: "border-stone-200",
-    fill: "fill-stone-300",
-    stroke: "stroke-stone-400",
-  },
-  red: {
-    bg: "bg-red-300",
-    border: "border-red-300",
-    borderLight: "border-red-200",
-    fill: "fill-red-300",
-    stroke: "stroke-red-400",
-  },
-  orange: {
-    bg: "bg-orange-200",
-    border: "border-orange-200",
-    borderLight: "border-orange-200",
-    fill: "fill-orange-200",
-    stroke: "stroke-orange-400",
-  },
-  amber: {
-    bg: "bg-amber-200",
-    border: "border-amber-200",
-    borderLight: "border-amber-200",
-    fill: "fill-amber-200",
-    stroke: "stroke-amber-400",
-  },
-  yellow: {
-    bg: "bg-yellow-200",
-    border: "border-yellow-200",
-    borderLight: "border-yellow-200",
-    fill: "fill-yellow-200",
-    stroke: "stroke-yellow-400",
-  },
-  lime: {
-    bg: "bg-lime-300",
-    border: "border-lime-300",
-    borderLight: "border-lime-200",
-    fill: "fill-lime-300",
-    stroke: "stroke-lime-400",
-  },
-  green: {
-    bg: "bg-green-200",
-    border: "border-green-200",
-    borderLight: "border-green-200",
-    fill: "fill-green-200",
-    stroke: "stroke-green-400",
-  },
-  emerald: {
-    bg: "bg-emerald-300",
-    border: "border-emerald-300",
-    borderLight: "border-emerald-200",
-    fill: "fill-emerald-300",
-    stroke: "stroke-emerald-400",
-  },
-  teal: {
-    bg: "bg-teal-300",
-    border: "border-teal-300",
-    borderLight: "border-teal-200",
-    fill: "fill-teal-300",
-    stroke: "stroke-teal-400",
-  },
-  cyan: {
-    bg: "bg-cyan-300",
-    border: "border-cyan-300",
-    borderLight: "border-cyan-200",
-    fill: "fill-cyan-300",
-    stroke: "stroke-cyan-400",
-  },
-  sky: {
-    bg: "bg-sky-300",
-    border: "border-sky-300",
-    borderLight: "border-sky-200",
-    fill: "fill-sky-300",
-    stroke: "stroke-sky-400",
-  },
-  blue: {
-    bg: "bg-blue-300",
-    border: "border-blue-300",
-    borderLight: "border-blue-200",
-    fill: "fill-blue-300",
-    stroke: "stroke-blue-400",
-  },
-  indigo: {
-    bg: "bg-indigo-300",
-    border: "border-indigo-300",
-    borderLight: "border-indigo-200",
-    fill: "fill-indigo-300",
-    stroke: "stroke-indigo-400",
-  },
-  violet: {
-    bg: "bg-violet-300",
-    border: "border-violet-300",
-    borderLight: "border-violet-200",
-    fill: "fill-violet-300",
-    stroke: "stroke-violet-400",
-  },
-  purple: {
-    bg: "bg-purple-200",
-    border: "border-purple-200",
-    borderLight: "border-purple-200",
-    fill: "fill-purple-200",
-    stroke: "stroke-purple-400",
-  },
-  fuchsia: {
-    bg: "bg-fuchsia-300",
-    border: "border-fuchsia-300",
-    borderLight: "border-fuchsia-200",
-    fill: "fill-fuchsia-300",
-    stroke: "stroke-fuchsia-400",
-  },
-  pink: {
-    bg: "bg-pink-300",
-    border: "border-pink-300",
-    borderLight: "border-pink-200",
-    fill: "fill-pink-300",
-    stroke: "stroke-pink-400",
-  },
-  rose: {
-    bg: "bg-rose-300",
-    border: "border-rose-300",
-    borderLight: "border-rose-200",
-    fill: "fill-rose-300",
-    stroke: "stroke-rose-400",
-  },
-};
-
-export function FolderIcon({
-  className = "",
-  size = "xs",
-  color = "blue",
-  icon,
-  isOpen = false,
-}: Props) {
-  const scale = typeof size === "number" ? size : sizeMap[size];
-  const resolvedColor = resolveColor(color);
-  const colors = colorMap[resolvedColor];
-
-  return (
-    <div
-      className={`group relative cursor-pointer ${className}`}
-      style={{
-        width: 320 * scale,
-        height: 208 * scale,
-      }}
-    >
-      <div
-        className="h-52 w-80 origin-top-left"
-        style={{ transform: `scale(${scale})`, perspective: "500px" }}
-      >
-        <div
-          className={`folder-back relative mx-auto flex h-full w-[87.5%] justify-center overflow-visible rounded-3xl ${colors.bg} ${colors.border}`}
-        >
-          {[
-            {
-              initial: { rotate: -3, x: -38, y: 2 },
-              open: { rotate: -8, x: -70, y: -75 },
-              transition: {
-                type: "spring" as const,
-                bounce: 0.15,
-                stiffness: 160,
-                damping: 22,
-              },
-              className: "z-10",
-            },
-            {
-              initial: { rotate: 0, x: 0, y: 0 },
-              open: { rotate: 1, x: 2, y: -95 },
-              transition: {
-                type: "spring" as const,
-                duration: 0.55,
-                bounce: 0.12,
-                stiffness: 190,
-                damping: 24,
-              },
-              className: "z-20",
-            },
-            {
-              initial: { rotate: 3.5, x: 42, y: 1 },
-              open: { rotate: 9, x: 75, y: -80 },
-              transition: {
-                type: "spring" as const,
-                duration: 0.58,
-                bounce: 0.17,
-                stiffness: 170,
-                damping: 21,
-              },
-              className: "z-10",
-            },
-          ].map((page, i) => (
-            <motion.div
-              key={i}
-              initial={page.initial}
-              animate={isOpen ? page.open : page.initial}
-              transition={page.transition}
-              className={`absolute top-2 h-fit w-32 rounded-xl shadow-lg ${page.className}`}
-            >
-              <Page color={resolvedColor} />
-            </motion.div>
-          ))}
-        </div>
-
-        <motion.div
-          animate={{
-            rotateX: isOpen ? -15 : 0,
-          }}
-          transition={{ type: "spring", duration: 0.5, bounce: 0.25 }}
-          className="absolute inset-x-0 -bottom-px z-30 mx-auto flex h-44 w-[87.5%] origin-bottom items-end justify-center overflow-visible"
-          style={{ transformStyle: "preserve-3d" }}
-        >
-          <svg
-            className="h-auto w-full"
-            viewBox="0 0 173 109"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            preserveAspectRatio="none"
-          >
-            <path
-              className={`${colors.fill} ${colors.stroke}`}
-              d="M15.0423 0.500003C0.5 0.500009 0.5 14.2547 0.5 14.2547V92.5C0.5 101.337 7.66344 108.5 16.5 108.5H156.5C165.337 108.5 172.5 101.337 172.5 92.5V34.3302C172.5 25.4936 165.355 18.3302 156.519 18.3302H108.211C98.1341 18.3302 91.2921 5.57144 82.0156 1.63525C80.3338 0.921645 78.2634 0.500002 75.7187 0.500003H15.0423Z"
-            />
-          </svg>
-          <div className="absolute inset-0 flex items-center justify-center text-7xl">
-            {icon}
-          </div>
-        </motion.div>
-      </div>
-    </div>
-  );
-}
-
-interface PageProps {
-  color: FolderColorName;
-}
-
-function Page({ color = "blue" }: PageProps) {
-  const colors = colorMap[color];
-  return (
-    <div
-      className={`h-full w-full rounded-xl border bg-white p-4 ${colors.borderLight}`}
-    >
-      <div className="flex flex-col gap-2">
-        <Text variant="h5" className="text-black">
-          agent.json
-        </Text>
-        {Array.from({ length: 8 }).map((_, i) => (
-          <div key={i} className="flex gap-2">
-            <div className="h-1.5 flex-1 rounded-full bg-neutral-100" />
-            <div className="h-1.5 flex-1 rounded-full bg-neutral-100" />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

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

@@ -1,129 +0,0 @@
-"use client";
-
-import { Text } from "@/components/atoms/Text/Text";
-import { Button } from "@/components/atoms/Button/Button";
-import { FolderIcon, FolderColor } from "./FolderIcon";
-import { useState } from "react";
-import { PencilSimpleIcon, TrashIcon } from "@phosphor-icons/react";
-
-interface Props {
-  id: string;
-  name: string;
-  agentCount: number;
-  color?: FolderColor;
-  icon: string;
-  onEdit?: () => void;
-  onDelete?: () => void;
-  onAgentDrop?: (agentId: string, folderId: string) => void;
-  onClick?: () => void;
-}
-
-export function LibraryFolder({
-  id,
-  name,
-  agentCount,
-  color,
-  icon,
-  onEdit,
-  onDelete,
-  onAgentDrop,
-  onClick,
-}: Props) {
-  const [isHovered, setIsHovered] = useState(false);
-  const [isDragOver, setIsDragOver] = useState(false);
-
-  function handleDragOver(e: React.DragEvent<HTMLDivElement>) {
-    if (e.dataTransfer.types.includes("application/agent-id")) {
-      e.preventDefault();
-      e.dataTransfer.dropEffect = "move";
-      setIsDragOver(true);
-    }
-  }
-
-  function handleDragLeave() {
-    setIsDragOver(false);
-  }
-
-  function handleDrop(e: React.DragEvent<HTMLDivElement>) {
-    e.preventDefault();
-    setIsDragOver(false);
-    const agentId = e.dataTransfer.getData("application/agent-id");
-    if (agentId && onAgentDrop) {
-      onAgentDrop(agentId, id);
-    }
-  }
-
-  return (
-    <div
-      data-testid="library-folder"
-      data-folder-id={id}
-      className={`group relative inline-flex h-[10.625rem] w-full max-w-[25rem] cursor-pointer flex-col items-start justify-start gap-2.5 rounded-medium border bg-white p-4 transition-all duration-200 hover:shadow-md ${
-        isDragOver
-          ? "border-blue-400 bg-blue-50 ring-2 ring-blue-200"
-          : "border-zinc-100"
-      }`}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-      onDragOver={handleDragOver}
-      onDragLeave={handleDragLeave}
-      onDrop={handleDrop}
-      onClick={onClick}
-    >
-      <div className="flex w-full items-start justify-between gap-4">
-        {/* Left side - Folder name and agent count */}
-        <div className="flex flex-1 flex-col gap-2">
-          <Text
-            variant="h5"
-            data-testid="library-folder-name"
-            className="line-clamp-2 hyphens-auto break-words"
-          >
-            {name}
-          </Text>
-          <Text
-            variant="small"
-            className="text-zinc-500"
-            data-testid="library-folder-agent-count"
-          >
-            {agentCount} {agentCount === 1 ? "agent" : "agents"}
-          </Text>
-        </div>
-
-        {/* Right side - Custom folder icon */}
-        <div className="flex-shrink-0">
-          <FolderIcon isOpen={isHovered} color={color} icon={icon} />
-        </div>
-      </div>
-
-      {/* Action buttons - visible on hover */}
-      <div
-        className="flex items-center justify-end gap-2"
-        data-testid="library-folder-actions"
-      >
-        <Button
-          variant="icon"
-          size="icon"
-          aria-label="Edit agent"
-          onClick={(e) => {
-            e.stopPropagation();
-            onEdit?.();
-          }}
-          className="h-8 w-8 p-2"
-        >
-          <PencilSimpleIcon className="h-4 w-4" />
-        </Button>
-        <Button
-          variant="icon"
-          size="icon"
-          aria-label="Delete agent"
-          onClick={(e) => {
-            e.stopPropagation();
-            onDelete?.();
-          }}
-          className="h-8 w-8 p-2 hover:border-red-300 hover:bg-red-50 hover:text-red-600"
-        >
-          <TrashIcon className="h-4 w-4" />
-        </Button>
-      </div>
-    </div>
-  );
-}

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

@@ -1,241 +0,0 @@
-"use client";
-import { Button } from "@/components/atoms/Button/Button";
-import { Input } from "@/components/atoms/Input/Input";
-import { Select } from "@/components/atoms/Select/Select";
-import { Text } from "@/components/atoms/Text/Text";
-import { Dialog } from "@/components/molecules/Dialog/Dialog";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormMessage,
-} from "@/components/molecules/Form/Form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { FolderSimpleIcon } from "@phosphor-icons/react";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-import { EmojiPicker } from "@ferrucc-io/emoji-picker";
-import {
-  usePostV2CreateFolder,
-  useGetV2ListLibraryFolders,
-  getGetV2ListLibraryFoldersQueryKey,
-} from "@/app/api/__generated__/endpoints/folders/folders";
-import { okData } from "@/app/api/helpers";
-import { useToast } from "@/components/molecules/Toast/use-toast";
-import { useQueryClient } from "@tanstack/react-query";
-
-const FOLDER_COLORS = [
-  { value: "#3B82F6", label: "Blue" },
-  { value: "#A855F7", label: "Purple" },
-  { value: "#10B981", label: "Green" },
-  { value: "#F97316", label: "Orange" },
-  { value: "#EC4899", label: "Pink" },
-];
-
-export const libraryFolderCreationFormSchema = z.object({
-  folderName: z.string().min(1, "Folder name is required"),
-  folderColor: z.string().min(1, "Folder color is required"),
-  folderIcon: z.string().min(1, "Folder icon is required"),
-});
-
-export default function LibraryFolderCreationDialog() {
-  const [isOpen, setIsOpen] = useState(false);
-  const queryClient = useQueryClient();
-  const { toast } = useToast();
-
-  const { data: foldersData } = useGetV2ListLibraryFolders(undefined, {
-    query: { select: okData },
-  });
-
-  const { mutate: createFolder, isPending } = usePostV2CreateFolder({
-    mutation: {
-      onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: getGetV2ListLibraryFoldersQueryKey() });
-        setIsOpen(false);
-        form.reset();
-        toast({
-          title: "Folder created",
-          description: "Your folder has been created successfully.",
-        });
-      },
-      onError: () => {
-        toast({
-          title: "Error",
-          description: "Failed to create folder. Please try again.",
-          variant: "destructive",
-        });
-      },
-    },
-  });
-
-  const form = useForm<z.infer<typeof libraryFolderCreationFormSchema>>({
-    resolver: zodResolver(libraryFolderCreationFormSchema),
-    defaultValues: {
-      folderName: "",
-      folderColor: "",
-      folderIcon: "",
-    },
-  });
-
-  function onSubmit(values: z.infer<typeof libraryFolderCreationFormSchema>) {
-    const existingNames = (foldersData?.folders ?? []).map((f) =>
-      f.name.toLowerCase(),
-    );
-    if (existingNames.includes(values.folderName.trim().toLowerCase())) {
-      form.setError("folderName", {
-        message: "A folder with this name already exists",
-      });
-      return;
-    }
-
-    createFolder({
-      data: {
-        name: values.folderName.trim(),
-        color: values.folderColor,
-        icon: values.folderIcon,
-      },
-    });
-  }
-
-  return (
-    <Dialog
-      title="Create Folder"
-      styling={{ maxWidth: "30rem" }}
-      controlled={{
-        isOpen,
-        set: setIsOpen,
-      }}
-      onClose={() => {
-        setIsOpen(false);
-      }}
-    >
-      <Dialog.Trigger>
-        <Button
-          data-testid="upload-agent-button"
-          variant="secondary"
-          className="h-fit w-fit"
-          size="small"
-        >
-          <FolderSimpleIcon width={18} height={18} />
-          <span className="create-folder">Create folder</span>
-        </Button>
-      </Dialog.Trigger>
-      <Dialog.Content>
-        <Form
-          form={form}
-          onSubmit={(values) => onSubmit(values)}
-          className="flex flex-col justify-center px-1 gap-2"
-        >
-          <FormField
-            control={form.control}
-            name="folderName"
-            render={({ field }) => (
-              <FormItem>
-                <FormControl>
-                  <Input
-                    {...field}
-                    id={field.name}
-                    label="Folder name"
-                    placeholder="Enter folder name"
-                    className="w-full !mb-0"
-                    wrapperClassName="!mb-0"
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="folderColor"
-            render={({ field }) => (
-              <FormItem>
-                <FormControl>
-                  <Select
-                    id="folderColor"
-                    label="Folder color"
-                    placeholder="Select a color"
-                    value={field.value}
-                    onValueChange={field.onChange}
-                    options={FOLDER_COLORS.map((color) => ({
-                      value: color.value,
-                      label: color.label,
-                      icon: (
-                        <div
-                          className="h-4 w-4 rounded-full"
-                          style={{ backgroundColor: color.value }}
-                        />
-                      ),
-                    }))}
-                    wrapperClassName="!mb-0"
-                    renderItem={(option) => (
-                      <div className="flex items-center gap-2">
-                        {option.icon}
-                        <span>{option.label}</span>
-                      </div>
-                    )}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="folderIcon"
-            render={({ field }) => (
-              <FormItem>
-                <div className="flex flex-col gap-2">
-                  <Text variant="large-medium" as="span" className="text-black">
-                    Folder icon
-                  </Text>
-                  <div className="flex flex-col gap-3">
-                    <div className="flex items-center gap-3">
-                      <Text variant="small" className="text-zinc-500">
-                        Selected:
-                      </Text>
-                      <div className="flex h-10 w-10 items-center justify-center rounded-lg border border-zinc-200 bg-zinc-50 text-2xl">
-                        {form.watch("folderIcon") || (
-                          <span className="text-sm text-zinc-400">—</span>
-                        )}
-                      </div>
-                    </div>
-                    <div className="h-[295px] w-full overflow-hidden">
-
-                      <EmojiPicker
-                        onEmojiSelect={(emoji) => {
-                          field.onChange(emoji);
-                        }}
-                        emojiSize={32}
-                        className="w-full rounded-2xl px-2"
-                      >
-                        <EmojiPicker.Group>
-                          <EmojiPicker.List hideStickyHeader containerHeight={295} />
-                        </EmojiPicker.Group>
-                      </EmojiPicker>
-                    </div>
-                  </div>
-                  <FormMessage />
-                </div>
-              </FormItem>
-            )}
-          />
-
-          <Button
-            type="submit"
-            variant="primary"
-            className="mt-2 min-w-[18rem]"
-            disabled={!form.formState.isValid || isPending}
-            loading={isPending}
-          >
-            Create
-          </Button>
-        </Form>
-      </Dialog.Content>
-    </Dialog>
-  );
-}

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

@@ -1,96 +0,0 @@
-"use client";
-
-import { Button } from "@/components/atoms/Button/Button";
-import { Text } from "@/components/atoms/Text/Text";
-import { Dialog } from "@/components/molecules/Dialog/Dialog";
-import { useToast } from "@/components/molecules/Toast/use-toast";
-import {
-  useDeleteV2DeleteFolder,
-  getGetV2ListLibraryFoldersQueryKey,
-} from "@/app/api/__generated__/endpoints/folders/folders";
-import { getGetV2ListLibraryAgentsQueryKey } from "@/app/api/__generated__/endpoints/library/library";
-import { useQueryClient } from "@tanstack/react-query";
-import type { LibraryFolder } from "@/app/api/__generated__/models/libraryFolder";
-
-interface Props {
-  folder: LibraryFolder;
-  isOpen: boolean;
-  setIsOpen: (open: boolean) => void;
-  onDeleted?: () => void;
-}
-
-export function LibraryFolderDeleteDialog({
-  folder,
-  isOpen,
-  setIsOpen,
-  onDeleted,
-}: Props) {
-  const queryClient = useQueryClient();
-  const { toast } = useToast();
-
-  const { mutate: deleteFolder, isPending } = useDeleteV2DeleteFolder({
-    mutation: {
-      onSuccess: () => {
-        queryClient.invalidateQueries({
-          queryKey: getGetV2ListLibraryFoldersQueryKey(),
-        });
-        queryClient.invalidateQueries({
-          queryKey: getGetV2ListLibraryAgentsQueryKey(),
-        });
-        toast({
-          title: "Folder deleted",
-          description: `"${folder.name}" has been deleted.`,
-        });
-        setIsOpen(false);
-        onDeleted?.();
-      },
-      onError: () => {
-        toast({
-          title: "Error",
-          description: "Failed to delete folder. Please try again.",
-          variant: "destructive",
-        });
-      },
-    },
-  });
-
-  function handleDelete() {
-    deleteFolder({ folderId: folder.id });
-  }
-
-  return (
-    <Dialog
-      controlled={{
-        isOpen,
-        set: setIsOpen,
-      }}
-      styling={{ maxWidth: "32rem" }}
-      title="Delete folder"
-    >
-      <Dialog.Content>
-        <div>
-          <Text variant="large">
-            Are you sure you want to delete &ldquo;{folder.name}&rdquo;? Agents
-            inside this folder will be moved back to your library.
-          </Text>
-          <Dialog.Footer>
-            <Button
-              variant="secondary"
-              disabled={isPending}
-              onClick={() => setIsOpen(false)}
-            >
-              Cancel
-            </Button>
-            <Button
-              variant="destructive"
-              onClick={handleDelete}
-              loading={isPending}
-            >
-              Delete Folder
-            </Button>
-          </Dialog.Footer>
-        </div>
-      </Dialog.Content>
-    </Dialog>
-  );
-}

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

@@ -1,303 +0,0 @@
-"use client";
-
-import { Button } from "@/components/atoms/Button/Button";
-import { Input } from "@/components/atoms/Input/Input";
-import { Select } from "@/components/atoms/Select/Select";
-import { Text } from "@/components/atoms/Text/Text";
-import { Dialog } from "@/components/molecules/Dialog/Dialog";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormMessage,
-} from "@/components/molecules/Form/Form";
-import { useToast } from "@/components/molecules/Toast/use-toast";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-import { EmojiPicker } from "@ferrucc-io/emoji-picker";
-import {
-  usePatchV2UpdateFolder,
-  useGetV2ListLibraryFolders,
-  getGetV2ListLibraryFoldersQueryKey,
-} from "@/app/api/__generated__/endpoints/folders/folders";
-import { okData } from "@/app/api/helpers";
-import { useQueryClient } from "@tanstack/react-query";
-import type { LibraryFolder } from "@/app/api/__generated__/models/libraryFolder";
-import type { getV2ListLibraryFoldersResponseSuccess } from "@/app/api/__generated__/endpoints/folders/folders";
-
-const FOLDER_COLORS = [
-  { value: "#3B82F6", label: "Blue" },
-  { value: "#A855F7", label: "Purple" },
-  { value: "#10B981", label: "Green" },
-  { value: "#F97316", label: "Orange" },
-  { value: "#EC4899", label: "Pink" },
-];
-
-const editFolderSchema = z.object({
-  folderName: z.string().min(1, "Folder name is required"),
-  folderColor: z.string().min(1, "Folder color is required"),
-  folderIcon: z.string().min(1, "Folder icon is required"),
-});
-
-interface Props {
-  folder: LibraryFolder;
-  isOpen: boolean;
-  setIsOpen: (open: boolean) => void;
-}
-
-export function LibraryFolderEditDialog({ folder, isOpen, setIsOpen }: Props) {
-  const queryClient = useQueryClient();
-  const { toast } = useToast();
-
-  const { data: foldersData } = useGetV2ListLibraryFolders(undefined, {
-    query: { select: okData },
-  });
-
-  const form = useForm<z.infer<typeof editFolderSchema>>({
-    resolver: zodResolver(editFolderSchema),
-    defaultValues: {
-      folderName: folder.name,
-      folderColor: folder.color ?? "",
-      folderIcon: folder.icon ?? "",
-    },
-  });
-
-  useEffect(() => {
-    if (isOpen) {
-      form.reset({
-        folderName: folder.name,
-        folderColor: folder.color ?? "",
-        folderIcon: folder.icon ?? "",
-      });
-    }
-  }, [isOpen, folder, form]);
-
-  const { mutate: updateFolder, isPending } = usePatchV2UpdateFolder({
-    mutation: {
-      onMutate: async ({ folderId, data }) => {
-        await queryClient.cancelQueries({
-          queryKey: getGetV2ListLibraryFoldersQueryKey(),
-        });
-
-        const previousData = queryClient.getQueriesData<
-          getV2ListLibraryFoldersResponseSuccess
-        >({
-          queryKey: getGetV2ListLibraryFoldersQueryKey(),
-        });
-
-        queryClient.setQueriesData<getV2ListLibraryFoldersResponseSuccess>(
-          { queryKey: getGetV2ListLibraryFoldersQueryKey() },
-          (old) => {
-            if (!old?.data?.folders) return old;
-            return {
-              ...old,
-              data: {
-                ...old.data,
-                folders: old.data.folders.map((f) =>
-                  f.id === folderId
-                    ? {
-                        ...f,
-                        name: data.name ?? f.name,
-                        color: data.color ?? f.color,
-                        icon: data.icon ?? f.icon,
-                      }
-                    : f,
-                ),
-              },
-            };
-          },
-        );
-
-        return { previousData };
-      },
-      onError: (
-        error: { detail?: string; response?: { detail?: string } },
-        _variables,
-        context,
-      ) => {
-        if (context?.previousData) {
-          for (const [queryKey, data] of context.previousData) {
-            queryClient.setQueryData(queryKey, data);
-          }
-        }
-        const detail =
-          error.detail ?? error.response?.detail ?? "";
-        if (
-          typeof detail === "string" &&
-          detail.toLowerCase().includes("already exists")
-        ) {
-          form.setError("folderName", {
-            message: "A folder with this name already exists",
-          });
-          return;
-        }
-        toast({
-          title: "Error",
-          description: "Failed to update folder. Please try again.",
-          variant: "destructive",
-        });
-      },
-      onSuccess: () => {
-        setIsOpen(false);
-        toast({
-          title: "Folder updated",
-          description: "Your folder has been updated successfully.",
-        });
-      },
-      onSettled: () => {
-        queryClient.invalidateQueries({
-          queryKey: getGetV2ListLibraryFoldersQueryKey(),
-        });
-      },
-    },
-  });
-
-  function onSubmit(values: z.infer<typeof editFolderSchema>) {
-    const trimmedName = values.folderName.trim();
-    const existingNames = (foldersData?.folders ?? [])
-      .filter((f) => f.id !== folder.id)
-      .map((f) => f.name.toLowerCase());
-
-    if (existingNames.includes(trimmedName.toLowerCase())) {
-      form.setError("folderName", {
-        message: "A folder with this name already exists",
-      });
-      return;
-    }
-
-    updateFolder({
-      folderId: folder.id,
-      data: {
-        name: trimmedName,
-        color: values.folderColor,
-        icon: values.folderIcon,
-      },
-    });
-  }
-
-  return (
-    <Dialog
-      title="Edit Folder"
-      styling={{ maxWidth: "30rem" }}
-      controlled={{
-        isOpen,
-        set: setIsOpen,
-      }}
-    >
-      <Dialog.Content>
-        <Form
-          form={form}
-          onSubmit={(values) => onSubmit(values)}
-          className="flex flex-col justify-center gap-4 px-1"
-        >
-          <FormField
-            control={form.control}
-            name="folderName"
-            render={({ field }) => (
-              <FormItem>
-                <FormControl>
-                  <Input
-                    {...field}
-                    id={field.name}
-                    label="Folder name"
-                    placeholder="Enter folder name"
-                    className="w-full rounded-[10px]"
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="folderColor"
-            render={({ field }) => (
-              <FormItem>
-                <FormControl>
-                  <Select
-                    id="folderColor"
-                    label="Folder color"
-                    placeholder="Select a color"
-                    value={field.value}
-                    onValueChange={field.onChange}
-                    options={FOLDER_COLORS.map((color) => ({
-                      value: color.value,
-                      label: color.label,
-                      icon: (
-                        <div
-                          className="h-4 w-4 rounded-full"
-                          style={{ backgroundColor: color.value }}
-                        />
-                      ),
-                    }))}
-                    renderItem={(option) => (
-                      <div className="flex items-center gap-2">
-                        {option.icon}
-                        <span>{option.label}</span>
-                      </div>
-                    )}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="folderIcon"
-            render={({ field }) => (
-              <FormItem>
-                <div className="flex flex-col gap-2">
-                  <Text variant="large-medium" as="span" className="text-black">
-                    Folder icon
-                  </Text>
-                  <div className="flex flex-col gap-3">
-                    <div className="flex items-center gap-3">
-                      <Text variant="small" className="text-zinc-500">
-                        Selected:
-                      </Text>
-                      <div className="flex h-10 w-10 items-center justify-center rounded-lg border border-zinc-200 bg-zinc-50 text-2xl">
-                        {form.watch("folderIcon") || (
-                          <span className="text-sm text-zinc-400">—</span>
-                        )}
-                      </div>
-                    </div>
-                    <div className="h-[295px] w-full overflow-hidden">
-                      <EmojiPicker
-                        onEmojiSelect={(emoji) => {
-                          field.onChange(emoji);
-                        }}
-                        emojiSize={32}
-                        className="w-full"
-                      >
-                        <EmojiPicker.Group>
-                          <EmojiPicker.List hideStickyHeader containerHeight={295} />
-                        </EmojiPicker.Group>
-                      </EmojiPicker>
-                    </div>
-                  </div>
-                  <FormMessage />
-                </div>
-              </FormItem>
-            )}
-          />
-
-          <Button
-            type="submit"
-            variant="primary"
-            className="mt-2 min-w-[18rem]"
-            disabled={!form.formState.isValid || isPending}
-            loading={isPending}
-          >
-            Save Changes
-          </Button>
-        </Form>
-      </Dialog.Content>
-    </Dialog>
-  );
-}

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

@@ -1,17 +0,0 @@
-import LibraryFolderCreationDialog from "../LibraryFolderCreationDialog/LibraryFolderCreationDialog";
-import { LibraryTabs, Tab } from "../LibraryTabs/LibraryTabs";
-
-interface Props {
-  tabs: Tab[];
-  activeTab: string;
-  onTabChange: (tabId: string) => void;
-}
-
-export function LibrarySubSection({ tabs, activeTab, onTabChange }: Props) {
-  return (
-    <div className="flex justify-between items-center gap-4">
-      <LibraryTabs tabs={tabs} activeTab={activeTab} onTabChange={onTabChange} />
-      <LibraryFolderCreationDialog />
-    </div>
-  );
-}

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

@@ -1,134 +0,0 @@
-"use client";
-
-import { useState, useEffect, useRef } from "react";
-import { motion } from "framer-motion";
-import { cn } from "@/lib/utils";
-import { Icon } from "@phosphor-icons/react";
-import { useFavoriteAnimation } from "../../context/FavoriteAnimationContext";
-
-export interface Tab {
-  id: string;
-  title: string;
-  icon: Icon;
-}
-
-interface Props {
-  tabs: Tab[];
-  activeTab: string;
-  onTabChange: (tabId: string) => void;
-  layoutId?: string;
-}
-
-export function LibraryTabs({ tabs, activeTab, onTabChange, layoutId = "library-tabs" }: Props) {
-  const { registerFavoritesTabRef } = useFavoriteAnimation();
-
-  return (
-    <div className="flex gap-2 items-center">
-      {tabs.map((tab) => (
-        <TabButton
-          key={tab.id}
-          tab={tab}
-          isActive={activeTab === tab.id}
-          onSelect={onTabChange}
-          layoutId={layoutId}
-          onRefReady={tab.id === "favorites" ? registerFavoritesTabRef : undefined}
-        />
-      ))}
-    </div>
-  );
-}
-
-interface TabButtonProps {
-  tab: Tab;
-  isActive: boolean;
-  onSelect: (tabId: string) => void;
-  layoutId: string;
-  onRefReady?: (element: HTMLElement | null) => void;
-}
-
-function TabButton({ tab, isActive, onSelect, layoutId, onRefReady }: TabButtonProps) {
-  const [isLoaded, setIsLoaded] = useState(false);
-  const buttonRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (isActive && !isLoaded) {
-      setIsLoaded(true);
-    }
-  }, [isActive, isLoaded]);
-
-  useEffect(() => {
-    if (onRefReady) {
-      onRefReady(buttonRef.current);
-    }
-  }, [onRefReady]);
-
-  const ButtonIcon = tab.icon;
-  const activeColor = "text-primary";
-
-  return (
-    <motion.div
-      ref={buttonRef}
-      layoutId={`${layoutId}-button-${tab.id}`}
-      transition={{
-        layout: {
-          type: "spring",
-          damping: 20,
-          stiffness: 230,
-          mass: 1.2,
-          ease: [0.215, 0.61, 0.355, 1],
-        },
-      }}
-      onClick={() => {
-        onSelect(tab.id);
-        setIsLoaded(true);
-      }}
-      className="w-fit h-fit flex"
-      style={{ willChange: "transform" }}
-    >
-      <motion.div
-        layout
-        transition={{
-          layout: {
-            type: "spring",
-            damping: 20,
-            stiffness: 230,
-            mass: 1.2,
-          },
-        }}
-        className={cn(
-          "flex items-center gap-1.5 bg-zinc-200 border-zinc-200 text-black hover:bg-zinc-300 hover:border-zinc-300 overflow-hidden transition-colors duration-75 ease-out py-2 px-3 cursor-pointer h-fit",
-          isActive && activeColor,
-          isActive ? "px-4" : "px-3"
-        )}
-        style={{
-          borderRadius: "25px",
-        }}
-      >
-        <motion.div
-          layoutId={`${layoutId}-icon-${tab.id}`}
-          className="shrink-0"
-        >
-          <ButtonIcon size={18} />
-        </motion.div>
-        {isActive && (
-          <motion.div
-            className="flex items-center"
-            initial={isLoaded ? { opacity: 0, filter: "blur(4px)" } : false}
-            animate={{ opacity: 1, filter: "blur(0px)" }}
-            transition={{
-              duration: isLoaded ? 0.2 : 0,
-              ease: [0.86, 0, 0.07, 1],
-            }}
-          >
-            <motion.span
-              layoutId={`${layoutId}-text-${tab.id}`}
-              className="font-sans font-medium text-sm text-black"
-            >
-              {tab.title}
-            </motion.span>
-          </motion.div>
-        )}
-      </motion.div>
-    </motion.div>
-  );
-}

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

@@ -1,135 +0,0 @@
-"use client";
-
-import { Button } from "@/components/atoms/Button/Button";
-import { Input } from "@/components/atoms/Input/Input";
-import { Text } from "@/components/atoms/Text/Text";
-import { Dialog } from "@/components/molecules/Dialog/Dialog";
-import { useToast } from "@/components/molecules/Toast/use-toast";
-import {
-  useGetV2ListLibraryFolders,
-  usePostV2BulkMoveAgents,
-  getGetV2ListLibraryFoldersQueryKey,
-} from "@/app/api/__generated__/endpoints/folders/folders";
-import { getGetV2ListLibraryAgentsQueryKey } from "@/app/api/__generated__/endpoints/library/library";
-import { okData } from "@/app/api/helpers";
-import { useQueryClient } from "@tanstack/react-query";
-import { useState } from "react";
-
-interface Props {
-  agentId: string;
-  agentName: string;
-  currentFolderId?: string | null;
-  isOpen: boolean;
-  setIsOpen: (open: boolean) => void;
-}
-
-export function MoveToFolderDialog({
-  agentId,
-  agentName,
-  currentFolderId,
-  isOpen,
-  setIsOpen,
-}: Props) {
-  const queryClient = useQueryClient();
-  const { toast } = useToast();
-  const [search, setSearch] = useState("");
-
-  const { data: foldersData } = useGetV2ListLibraryFolders(undefined, {
-    query: { select: okData },
-  });
-
-  const { mutate: moveAgent, isPending } = usePostV2BulkMoveAgents({
-    mutation: {
-      onSuccess: () => {
-        queryClient.invalidateQueries({
-          queryKey: getGetV2ListLibraryAgentsQueryKey(),
-        });
-        queryClient.invalidateQueries({
-          queryKey: getGetV2ListLibraryFoldersQueryKey(),
-        });
-        setIsOpen(false);
-        setSearch("");
-        toast({
-          title: "Agent moved",
-          description: `"${agentName}" has been moved.`,
-        });
-      },
-      onError: () => {
-        toast({
-          title: "Error",
-          description: "Failed to move agent. Please try again.",
-          variant: "destructive",
-        });
-      },
-    },
-  });
-
-  const folders = (foldersData?.folders ?? []).filter(
-    (f) =>
-      f.id !== currentFolderId &&
-      f.name.toLowerCase().includes(search.toLowerCase()),
-  );
-
-  function handleMoveToFolder(folderId: string) {
-    moveAgent({
-      data: {
-        agent_ids: [agentId],
-        folder_id: folderId,
-      },
-    });
-  }
-
-  return (
-    <Dialog
-      controlled={{ isOpen, set: setIsOpen }}
-      styling={{ maxWidth: "28rem" }}
-      title="Move to folder"
-      onClose={() => {
-        setSearch("");
-      }}
-    >
-      <Dialog.Content>
-        <div className="flex flex-col gap-3">
-          <Input
-            id="search-folders"
-            label="Search folders"
-            placeholder="Search folders..."
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            className="w-full"
-          />
-          <div className="max-h-[280px] overflow-y-auto">
-            {folders.length === 0 ? (
-              <div className="flex h-20 items-center justify-center">
-                <Text variant="small" className="text-zinc-400">
-                  No folders found
-                </Text>
-              </div>
-            ) : (
-              <div className="flex flex-col gap-1">
-                {folders.map((folder) => (
-                  <Button
-                    key={folder.id}
-                    variant="ghost"
-                    className="w-full justify-start gap-3 px-3 py-2.5"
-                    disabled={isPending}
-                    onClick={() => handleMoveToFolder(folder.id)}
-                  >
-                    <span className="text-lg">{folder.icon ?? "📁"}</span>
-                    <div className="flex flex-col items-start">
-                      <Text variant="small-medium">{folder.name}</Text>
-                      <Text variant="small" className="text-zinc-400">
-                        {folder.agent_count ?? 0}{" "}
-                        {(folder.agent_count ?? 0) === 1 ? "agent" : "agents"}
-                      </Text>
-                    </div>
-                  </Button>
-                ))}
-              </div>
-            )}
-          </div>
-        </div>
-      </Dialog.Content>
-    </Dialog>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/library/context/FavoriteAnimationContext.tsx

@@ -1,77 +0,0 @@
-"use client";
-
-import { createContext, useContext, useState, useCallback, useRef } from "react";
-import { FlyingHeart } from "../components/FlyingHeart/FlyingHeart";
-
-interface FavoriteAnimationContextType {
-  triggerFavoriteAnimation: (startPosition: { x: number; y: number }) => void;
-  registerFavoritesTabRef: (element: HTMLElement | null) => void;
-}
-
-const FavoriteAnimationContext = createContext<FavoriteAnimationContextType | null>(null);
-
-interface FavoriteAnimationProviderProps {
-  children: React.ReactNode;
-  onAnimationComplete?: () => void;
-}
-
-export function FavoriteAnimationProvider({
-  children,
-  onAnimationComplete,
-}: FavoriteAnimationProviderProps) {
-  const [animationState, setAnimationState] = useState<{
-    startPosition: { x: number; y: number } | null;
-    targetPosition: { x: number; y: number } | null;
-  }>({
-    startPosition: null,
-    targetPosition: null,
-  });
-
-  const favoritesTabRef = useRef<HTMLElement | null>(null);
-
-  const registerFavoritesTabRef = useCallback((element: HTMLElement | null) => {
-    favoritesTabRef.current = element;
-  }, []);
-
-  const triggerFavoriteAnimation = useCallback(
-    (startPosition: { x: number; y: number }) => {
-      if (favoritesTabRef.current) {
-        const rect = favoritesTabRef.current.getBoundingClientRect();
-        const targetPosition = {
-          x: rect.left + rect.width / 2 - 12,
-          y: rect.top + rect.height / 2 - 12,
-        };
-        setAnimationState({ startPosition, targetPosition });
-      }
-    },
-    []
-  );
-
-  function handleAnimationComplete() {
-    setAnimationState({ startPosition: null, targetPosition: null });
-    onAnimationComplete?.();
-  }
-
-  return (
-    <FavoriteAnimationContext.Provider
-      value={{ triggerFavoriteAnimation, registerFavoritesTabRef }}
-    >
-      {children}
-      <FlyingHeart
-        startPosition={animationState.startPosition}
-        targetPosition={animationState.targetPosition}
-        onAnimationComplete={handleAnimationComplete}
-      />
-    </FavoriteAnimationContext.Provider>
-  );
-}
-
-export function useFavoriteAnimation() {
-  const context = useContext(FavoriteAnimationContext);
-  if (!context) {
-    throw new Error(
-      "useFavoriteAnimation must be used within FavoriteAnimationProvider"
-    );
-  }
-  return context;
-}

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

@@ -1,53 +1,28 @@
 "use client";
 
-import { useEffect, useState, useCallback } from "react";
-import { HeartIcon, ListIcon } from "@phosphor-icons/react";
+import { useEffect } from "react";
+import { FavoritesSection } from "./components/FavoritesSection/FavoritesSection";
 import { LibraryActionHeader } from "./components/LibraryActionHeader/LibraryActionHeader";
 import { LibraryAgentList } from "./components/LibraryAgentList/LibraryAgentList";
-import { Tab } from "./components/LibraryTabs/LibraryTabs";
 import { useLibraryListPage } from "./components/useLibraryListPage";
-import { FavoriteAnimationProvider } from "./context/FavoriteAnimationContext";
-
-const LIBRARY_TABS: Tab[] = [
-  { id: "all", title: "All", icon: ListIcon },
-  { id: "favorites", title: "Favorites", icon: HeartIcon },
-];
 
 export default function LibraryPage() {
   const { searchTerm, setSearchTerm, librarySort, setLibrarySort } =
     useLibraryListPage();
-  const [selectedFolderId, setSelectedFolderId] = useState<string | null>(null);
-  const [activeTab, setActiveTab] = useState(LIBRARY_TABS[0].id);
 
   useEffect(() => {
     document.title = "Library – AutoGPT Platform";
   }, []);
 
-  function handleTabChange(tabId: string) {
-    setActiveTab(tabId);
-    setSelectedFolderId(null);
-  }
-
-  const handleFavoriteAnimationComplete = useCallback(() => {
-    setActiveTab("favorites");
-    setSelectedFolderId(null);
-  }, []);
-
   return (
-    <FavoriteAnimationProvider onAnimationComplete={handleFavoriteAnimationComplete}>
-      <main className="pt-160 container min-h-screen space-y-4 pb-20 pt-16 sm:px-8 md:px-12">
-        <LibraryActionHeader setSearchTerm={setSearchTerm} />
-        <LibraryAgentList
-          searchTerm={searchTerm}
-          librarySort={librarySort}
-          setLibrarySort={setLibrarySort}
-          selectedFolderId={selectedFolderId}
-          onFolderSelect={setSelectedFolderId}
-          tabs={LIBRARY_TABS}
-          activeTab={activeTab}
-          onTabChange={handleTabChange}
-        />
-      </main>
-    </FavoriteAnimationProvider>
+    <main className="pt-160 container min-h-screen space-y-4 pb-20 pt-16 sm:px-8 md:px-12">
+      <LibraryActionHeader setSearchTerm={setSearchTerm} />
+      <FavoritesSection searchTerm={searchTerm} />
+      <LibraryAgentList
+        searchTerm={searchTerm}
+        librarySort={librarySort}
+        setLibrarySort={setLibrarySort}
+      />
+    </main>
   );
 }

autogpt_platform/frontend/src/app/(platform)/monitoring/components/AgentFlowList.tsx

@@ -1,180 +0,0 @@
-import { GraphExecutionMeta, LibraryAgent } from "@/lib/autogpt-server-api";
-import React from "react";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/__legacy__/ui/card";
-import { Button } from "@/components/__legacy__/ui/button";
-import { TextRenderer } from "@/components/__legacy__/ui/render";
-import Link from "next/link";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTrigger,
-} from "@/components/__legacy__/ui/dialog";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/__legacy__/ui/dropdown-menu";
-import { ChevronDownIcon, EnterIcon } from "@radix-ui/react-icons";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/__legacy__/ui/table";
-import { formatDistanceToNow } from "date-fns";
-import { DialogTitle } from "@/components/__legacy__/ui/dialog";
-import { AgentImportForm } from "./AgentImportForm";
-
-export const AgentFlowList = ({
-  flows,
-  executions,
-  selectedFlow,
-  onSelectFlow,
-  className,
-}: {
-  flows: LibraryAgent[];
-  executions?: GraphExecutionMeta[];
-  selectedFlow: LibraryAgent | null;
-  onSelectFlow: (f: LibraryAgent) => void;
-  className?: string;
-}) => {
-  return (
-    <Card className={className}>
-      <CardHeader className="flex-row items-center justify-between space-x-3 space-y-0">
-        <CardTitle>Agents</CardTitle>
-
-        <div className="flex items-center">
-          {/* Split "Create" button */}
-          <Button variant="outline" className="rounded-r-none">
-            <Link href="/build">Create</Link>
-          </Button>
-          <Dialog>
-            {/* https://ui.shadcn.com/docs/components/dialog#notes */}
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  variant="outline"
-                  className={"rounded-l-none border-l-0 px-2"}
-                  data-testid="create-agent-dropdown"
-                >
-                  <ChevronDownIcon />
-                </Button>
-              </DropdownMenuTrigger>
-
-              <DropdownMenuContent>
-                <DialogTrigger asChild>
-                  <DropdownMenuItem data-testid="import-agent-from-file">
-                    <EnterIcon className="mr-2" /> Import from file
-                  </DropdownMenuItem>
-                </DialogTrigger>
-              </DropdownMenuContent>
-            </DropdownMenu>
-
-            <DialogContent>
-              <DialogHeader>
-                <DialogTitle className="sr-only">Import Agent</DialogTitle>
-                <h2 className="text-lg font-semibold">
-                  Import an Agent from a file
-                </h2>
-              </DialogHeader>
-              <AgentImportForm />
-            </DialogContent>
-          </Dialog>
-        </div>
-      </CardHeader>
-
-      <CardContent>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Name</TableHead>
-              {/* <TableHead>Status</TableHead> */}
-              {/* <TableHead>Last updated</TableHead> */}
-              {executions && (
-                <TableHead className="md:hidden lg:table-cell">
-                  # of runs
-                </TableHead>
-              )}
-              {executions && <TableHead>Last run</TableHead>}
-            </TableRow>
-          </TableHeader>
-          <TableBody data-testid="agent-flow-list-body">
-            {flows
-              .map((flow) => {
-                let runCount = 0,
-                  lastRun: GraphExecutionMeta | null = null;
-                if (executions) {
-                  const _flowRuns = executions.filter(
-                    (r) => r.graph_id == flow.graph_id,
-                  );
-                  runCount = _flowRuns.length;
-                  lastRun =
-                    runCount == 0
-                      ? null
-                      : _flowRuns.reduce((a, c) => {
-                          const aTime = a.started_at?.getTime() ?? 0;
-                          const cTime = c.started_at?.getTime() ?? 0;
-                          return aTime > cTime ? a : c;
-                        });
-                }
-                return { flow, runCount, lastRun };
-              })
-              .sort((a, b) => {
-                if (!a.lastRun && !b.lastRun) return 0;
-                if (!a.lastRun) return 1;
-                if (!b.lastRun) return -1;
-                const bTime = b.lastRun.started_at?.getTime() ?? 0;
-                const aTime = a.lastRun.started_at?.getTime() ?? 0;
-                return bTime - aTime;
-              })
-              .map(({ flow, runCount, lastRun }) => (
-                <TableRow
-                  key={flow.id}
-                  data-testid={flow.id}
-                  data-name={flow.name}
-                  className="cursor-pointer"
-                  onClick={() => onSelectFlow(flow)}
-                  data-state={selectedFlow?.id == flow.id ? "selected" : null}
-                >
-                  <TableCell>
-                    <TextRenderer value={flow.name} truncateLengthLimit={30} />
-                  </TableCell>
-                  {/* <TableCell><FlowStatusBadge status={flow.status ?? "active"} /></TableCell> */}
-                  {/* <TableCell>
-                  {flow.updatedAt ?? "???"}
-                </TableCell> */}
-                  {executions && (
-                    <TableCell className="md:hidden lg:table-cell">
-                      {runCount}
-                    </TableCell>
-                  )}
-                  {executions &&
-                    (!lastRun ? (
-                      <TableCell />
-                    ) : (
-                      <TableCell title={lastRun.started_at?.toString() ?? ""}>
-                        {lastRun.started_at
-                          ? formatDistanceToNow(lastRun.started_at, {
-                              addSuffix: true,
-                            })
-                          : "—"}
-                      </TableCell>
-                    ))}
-                </TableRow>
-              ))}
-          </TableBody>
-        </Table>
-      </CardContent>
-    </Card>
-  );
-};
-export default AgentFlowList;

autogpt_platform/frontend/src/app/(platform)/monitoring/components/AgentImportForm.tsx

@@ -1,175 +0,0 @@
-import { z } from "zod";
-import { cn } from "@/lib/utils";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import React, { useState } from "react";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/__legacy__/ui/form";
-import { Input } from "@/components/__legacy__/ui/input";
-import { Button } from "@/components/__legacy__/ui/button";
-import { Textarea } from "@/components/__legacy__/ui/textarea";
-import { EnterIcon } from "@radix-ui/react-icons";
-import { useBackendAPI } from "@/lib/autogpt-server-api/context";
-import {
-  Graph,
-  GraphCreatable,
-  sanitizeImportedGraph,
-} from "@/lib/autogpt-server-api";
-
-// Add this custom schema for File type
-const fileSchema = z.custom<File>((val) => val instanceof File, {
-  message: "Must be a File object",
-});
-
-const formSchema = z.object({
-  agentFile: fileSchema,
-  agentName: z.string().min(1, "Agent name is required"),
-  agentDescription: z.string(),
-  importAsTemplate: z.boolean(),
-});
-
-export const AgentImportForm: React.FC<
-  React.FormHTMLAttributes<HTMLFormElement>
-> = ({ className, ...props }) => {
-  const [agentObject, setAgentObject] = useState<GraphCreatable | null>(null);
-  const api = useBackendAPI();
-
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      agentName: "",
-      agentDescription: "",
-      importAsTemplate: false,
-    },
-  });
-
-  function onSubmit(values: z.infer<typeof formSchema>) {
-    if (!agentObject) {
-      form.setError("root", { message: "No Agent object to save" });
-      return;
-    }
-    const payload: GraphCreatable = {
-      ...agentObject,
-      name: values.agentName,
-      description: values.agentDescription,
-      is_active: !values.importAsTemplate,
-    };
-
-    api
-      .createGraph(payload, "upload")
-      .then((response) => {
-        const qID = "flowID";
-        window.location.href = `/build?${qID}=${response.id}`;
-      })
-      .catch((error) => {
-        const entity_type = "agent";
-        form.setError("root", {
-          message: `Could not create ${entity_type}: ${error}`,
-        });
-      });
-  }
-
-  return (
-    <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(onSubmit)}
-        className={cn("space-y-4", className)}
-        {...props}
-      >
-        <FormField
-          control={form.control}
-          name="agentFile"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Agent file</FormLabel>
-              <FormControl className="cursor-pointer">
-                <Input
-                  type="file"
-                  accept="application/json"
-                  data-testid="import-agent-file-input"
-                  onChange={(e) => {
-                    const file = e.target.files?.[0];
-                    if (file) {
-                      field.onChange(file);
-                      const reader = new FileReader();
-                      // Attach parser to file reader
-                      reader.onload = (event) => {
-                        try {
-                          const obj = JSON.parse(
-                            event.target?.result as string,
-                          );
-                          if (
-                            !["name", "description", "nodes", "links"].every(
-                              (key) => key in obj && obj[key] != null,
-                            )
-                          ) {
-                            throw new Error(
-                              "Invalid agent object in file: " +
-                                JSON.stringify(obj, null, 2),
-                            );
-                          }
-                          const graph = obj as Graph;
-                          sanitizeImportedGraph(graph);
-                          setAgentObject(graph);
-                          form.setValue("agentName", graph.name);
-                          form.setValue("agentDescription", graph.description);
-                        } catch (error) {
-                          console.error("Error loading agent file:", error);
-                        }
-                      };
-                      // Load file
-                      reader.readAsText(file);
-                    }
-                  }}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="agentName"
-          disabled={!agentObject}
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Agent name</FormLabel>
-              <FormControl>
-                <Input {...field} data-testid="agent-name-input" />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="agentDescription"
-          disabled={!agentObject}
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Agent description</FormLabel>
-              <FormControl>
-                <Textarea {...field} data-testid="agent-description-input" />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button
-          type="submit"
-          className="w-full"
-          disabled={!agentObject}
-          data-testid="import-agent-submit"
-        >
-          <EnterIcon className="mr-2" /> Import & Edit
-        </Button>
-      </form>
-    </Form>
-  );
-};

autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowInfo.tsx

@@ -1,243 +0,0 @@
-import React, { useEffect, useState } from "react";
-import {
-  Graph,
-  GraphExecutionMeta,
-  LibraryAgent,
-} from "@/lib/autogpt-server-api";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/__legacy__/ui/card";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuLabel,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/__legacy__/ui/dropdown-menu";
-import { Button, buttonVariants } from "@/components/__legacy__/ui/button";
-import {
-  ClockIcon,
-  ExitIcon,
-  Pencil2Icon,
-  PlayIcon,
-  TrashIcon,
-} from "@radix-ui/react-icons";
-import Link from "next/link";
-import { exportAsJSONFile } from "@/lib/utils";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-  DialogFooter,
-} from "@/components/__legacy__/ui/dialog";
-import useAgentGraph from "@/hooks/useAgentGraph";
-import { useBackendAPI } from "@/lib/autogpt-server-api/context";
-import { FlowRunsStatus } from "./FlowRunsStatus";
-import { RunnerInputDialog } from "../../build/components/legacy-builder/RunnerInputUI";
-
-export const FlowInfo: React.FC<
-  React.HTMLAttributes<HTMLDivElement> & {
-    flow: LibraryAgent;
-    executions: GraphExecutionMeta[];
-    flowVersion?: number | "all";
-    refresh: () => void;
-  }
-> = ({ flow, executions, flowVersion, refresh, ...props }) => {
-  const { savedAgent, saveAndRun, stopRun, isRunning } = useAgentGraph(
-    flow.graph_id,
-    flow.graph_version,
-    undefined,
-    false,
-  );
-
-  const api = useBackendAPI();
-
-  const [flowVersions, setFlowVersions] = useState<Graph[] | null>(null);
-  const [selectedVersion, setSelectedFlowVersion] = useState(
-    flowVersion ?? "all",
-  );
-  const selectedFlowVersion: Graph | undefined = flowVersions?.find(
-    (v) =>
-      v.version ==
-      (selectedVersion == "all" ? flow.graph_version : selectedVersion),
-  );
-
-  const hasInputs = Object.keys(flow.input_schema.properties).length > 0;
-  const hasCredentialsInputs =
-    Object.keys(flow.credentials_input_schema.properties).length > 0;
-
-  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-  const [isRunDialogOpen, setIsRunDialogOpen] = useState(false);
-  const isDisabled = !selectedFlowVersion;
-
-  useEffect(() => {
-    api
-      .getGraphAllVersions(flow.graph_id)
-      .then((result) => setFlowVersions(result));
-  }, [flow.graph_id, api]);
-
-  const openRunDialog = () => setIsRunDialogOpen(true);
-
-  const runOrOpenInput = () => {
-    if (hasInputs || hasCredentialsInputs) {
-      openRunDialog();
-    } else {
-      saveAndRun({}, {});
-    }
-  };
-
-  return (
-    <Card {...props}>
-      <CardHeader className="">
-        <CardTitle>
-          {flow.name} <span className="font-light">v{flow.graph_version}</span>
-        </CardTitle>
-        <div className="flex flex-col space-y-2 py-6">
-          {(flowVersions?.length ?? 0) > 1 && (
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="outline">
-                  <ClockIcon className="mr-2" />
-                  {selectedVersion == "all"
-                    ? "All versions"
-                    : `Version ${selectedVersion}`}
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent className="w-56">
-                <DropdownMenuLabel>Choose a version</DropdownMenuLabel>
-                <DropdownMenuSeparator />
-                <DropdownMenuRadioGroup
-                  value={String(selectedVersion)}
-                  onValueChange={(choice: string) =>
-                    setSelectedFlowVersion(
-                      choice == "all" ? choice : Number(choice),
-                    )
-                  }
-                >
-                  <DropdownMenuRadioItem value="all">
-                    All versions
-                  </DropdownMenuRadioItem>
-                  {flowVersions?.map((v) => (
-                    <DropdownMenuRadioItem
-                      key={v.version}
-                      value={v.version.toString()}
-                    >
-                      Version {v.version}
-                      {v.is_active ? " (active)" : ""}
-                    </DropdownMenuRadioItem>
-                  ))}
-                </DropdownMenuRadioGroup>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          )}
-          {flow.can_access_graph && (
-            <Link
-              className={buttonVariants({ variant: "default" })}
-              href={`/build?flowID=${flow.graph_id}&flowVersion=${flow.graph_version}`}
-            >
-              <Pencil2Icon className="mr-2" />
-              Open in Builder
-            </Link>
-          )}
-          {flow.can_access_graph && (
-            <Button
-              variant="outline"
-              className="px-2.5"
-              title="Export to a JSON-file"
-              data-testid="export-button"
-              onClick={() =>
-                api
-                  .getGraph(flow.graph_id, selectedFlowVersion!.version, true)
-                  .then((graph) =>
-                    exportAsJSONFile(
-                      graph,
-                      `${flow.name}_v${selectedFlowVersion!.version}.json`,
-                    ),
-                  )
-              }
-            >
-              <ExitIcon className="mr-2" /> Export
-            </Button>
-          )}
-          <Button
-            variant="secondary"
-            className="bg-purple-500 text-white hover:bg-purple-700"
-            onClick={!isRunning ? runOrOpenInput : stopRun}
-            disabled={isDisabled}
-            title={!isRunning ? "Run Agent" : "Stop Agent"}
-          >
-            <PlayIcon className="mr-2" />
-            {isRunning ? "Stop Agent" : "Run Agent"}
-          </Button>
-          {flow.can_access_graph && (
-            <Button
-              variant="destructive"
-              onClick={() => setIsDeleteModalOpen(true)}
-              data-testid="delete-button"
-            >
-              <TrashIcon className="mr-2" />
-              Delete Agent
-            </Button>
-          )}
-        </div>
-      </CardHeader>
-      <CardContent>
-        <FlowRunsStatus
-          flows={[flow]}
-          executions={executions.filter(
-            (execution) =>
-              execution.graph_id == flow.graph_id &&
-              (selectedVersion == "all" ||
-                execution.graph_version == selectedVersion),
-          )}
-        />
-      </CardContent>
-      <Dialog open={isDeleteModalOpen} onOpenChange={setIsDeleteModalOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Delete Agent</DialogTitle>
-            <DialogDescription>
-              Are you sure you want to delete this agent? <br />
-              This action cannot be undone.
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={() => setIsDeleteModalOpen(false)}
-            >
-              Cancel
-            </Button>
-            <Button
-              variant="destructive"
-              onClick={() => {
-                api.deleteLibraryAgent(flow.id).then(() => {
-                  setIsDeleteModalOpen(false);
-                  refresh();
-                });
-              }}
-            >
-              Delete
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-      {savedAgent && (
-        <RunnerInputDialog
-          isOpen={isRunDialogOpen}
-          doClose={() => setIsRunDialogOpen(false)}
-          graph={savedAgent}
-          doRun={saveAndRun}
-        />
-      )}
-    </Card>
-  );
-};
-export default FlowInfo;

autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunInfo.tsx

@@ -1,142 +0,0 @@
-import React, { useCallback, useEffect, useState } from "react";
-import { GraphExecutionMeta, LibraryAgent } from "@/lib/autogpt-server-api";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/__legacy__/ui/card";
-import Link from "next/link";
-import { Button, buttonVariants } from "@/components/__legacy__/ui/button";
-import { IconSquare } from "@/components/__legacy__/ui/icons";
-import { ExitIcon, Pencil2Icon } from "@radix-ui/react-icons";
-import { format } from "date-fns";
-import { FlowRunStatusBadge } from "@/app/(platform)/monitoring/components/FlowRunStatusBadge";
-import { useBackendAPI } from "@/lib/autogpt-server-api/context";
-import RunnerOutputUI, {
-  OutputNodeInfo,
-} from "../../build/components/legacy-builder/RunnerOutputUI";
-
-export const FlowRunInfo: React.FC<
-  React.HTMLAttributes<HTMLDivElement> & {
-    agent: LibraryAgent;
-    execution: GraphExecutionMeta;
-  }
-> = ({ agent, execution, ...props }) => {
-  const [isOutputOpen, setIsOutputOpen] = useState(false);
-  const [blockOutputs, setBlockOutputs] = useState<OutputNodeInfo[]>([]);
-  const api = useBackendAPI();
-
-  const fetchBlockResults = useCallback(async () => {
-    const graph = await api.getGraph(agent.graph_id, agent.graph_version);
-    const graphExecution = await api.getGraphExecutionInfo(
-      agent.graph_id,
-      execution.id,
-    );
-
-    // Transform results to BlockOutput format
-    setBlockOutputs(
-      Object.entries(graphExecution.outputs).flatMap(([key, values]) =>
-        values.map(
-          (value) =>
-            ({
-              metadata: {
-                name: graph.output_schema.properties[key].title || "Output",
-                description:
-                  graph.output_schema.properties[key].description ||
-                  "Output from the agent",
-              },
-              result: value,
-            }) satisfies OutputNodeInfo,
-        ),
-      ),
-    );
-  }, [api, agent.graph_id, agent.graph_version, execution.id]);
-
-  // Fetch graph and execution data
-  useEffect(() => {
-    if (!isOutputOpen) return;
-    fetchBlockResults();
-  }, [isOutputOpen, fetchBlockResults]);
-
-  if (execution.graph_id != agent.graph_id) {
-    throw new Error(
-      `FlowRunInfo can't be used with non-matching execution.graph_id and flow.id`,
-    );
-  }
-
-  const handleStopRun = useCallback(() => {
-    api.stopGraphExecution(agent.graph_id, execution.id);
-  }, [api, agent.graph_id, execution.id]);
-
-  return (
-    <>
-      <Card {...props}>
-        <CardHeader className="flex-row items-center justify-between space-x-3 space-y-0">
-          <div>
-            <CardTitle>
-              {agent.name}{" "}
-              <span className="font-light">v{execution.graph_version}</span>
-            </CardTitle>
-          </div>
-          <div className="flex space-x-2">
-            {execution.status === "RUNNING" && (
-              <Button onClick={handleStopRun} variant="destructive">
-                <IconSquare className="mr-2" /> Stop Run
-              </Button>
-            )}
-            <Button onClick={() => setIsOutputOpen(true)} variant="outline">
-              <ExitIcon className="mr-2" /> View Outputs
-            </Button>
-            {agent.can_access_graph && (
-              <Link
-                className={buttonVariants({ variant: "default" })}
-                href={`/build?flowID=${execution.graph_id}&flowVersion=${execution.graph_version}&flowExecutionID=${execution.id}`}
-              >
-                <Pencil2Icon className="mr-2" /> Open in Builder
-              </Link>
-            )}
-          </div>
-        </CardHeader>
-        <CardContent>
-          <p className="hidden">
-            <strong>Agent ID:</strong> <code>{agent.graph_id}</code>
-          </p>
-          <p className="hidden">
-            <strong>Run ID:</strong> <code>{execution.id}</code>
-          </p>
-          <div>
-            <strong>Status:</strong>{" "}
-            <FlowRunStatusBadge status={execution.status} />
-          </div>
-          <p>
-            <strong>Started:</strong>{" "}
-            {execution.started_at
-              ? format(execution.started_at, "yyyy-MM-dd HH:mm:ss")
-              : "—"}
-          </p>
-          <p>
-            <strong>Finished:</strong>{" "}
-            {execution.ended_at
-              ? format(execution.ended_at, "yyyy-MM-dd HH:mm:ss")
-              : "—"}
-          </p>
-          {execution.stats && (
-            <p>
-              <strong>Duration (run time):</strong>{" "}
-              {execution.stats.duration.toFixed(1)} (
-              {execution.stats.node_exec_time.toFixed(1)}) seconds
-            </p>
-          )}
-        </CardContent>
-      </Card>
-      <RunnerOutputUI
-        isOpen={isOutputOpen}
-        doClose={() => setIsOutputOpen(false)}
-        outputs={blockOutputs}
-      />
-    </>
-  );
-};
-
-export default FlowRunInfo;

autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunStatusBadge.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-import { Badge } from "@/components/__legacy__/ui/badge";
-import { cn } from "@/lib/utils";
-import { GraphExecutionMeta } from "@/lib/autogpt-server-api";
-
-export const FlowRunStatusBadge: React.FC<{
-  status: GraphExecutionMeta["status"];
-  className?: string;
-}> = ({ status, className }) => (
-  <Badge
-    variant="default"
-    className={cn(
-      status === "RUNNING"
-        ? "bg-blue-500 dark:bg-blue-700"
-        : status === "QUEUED"
-          ? "bg-yellow-500 dark:bg-yellow-600"
-          : status === "COMPLETED"
-            ? "bg-green-500 dark:bg-green-600"
-            : "bg-red-500 dark:bg-red-700",
-      className,
-    )}
-  >
-    {status}
-  </Badge>
-);

autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunsList.tsx

@@ -1,92 +0,0 @@
-import React from "react";
-import { GraphExecutionMeta, LibraryAgent } from "@/lib/autogpt-server-api";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/__legacy__/ui/card";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/__legacy__/ui/table";
-import { format } from "date-fns";
-import { FlowRunStatusBadge } from "@/app/(platform)/monitoring/components/FlowRunStatusBadge";
-import { TextRenderer } from "../../../../components/__legacy__/ui/render";
-
-export const FlowRunsList: React.FC<{
-  flows: LibraryAgent[];
-  executions: GraphExecutionMeta[];
-  className?: string;
-  selectedRun?: GraphExecutionMeta | null;
-  onSelectRun: (r: GraphExecutionMeta) => void;
-}> = ({ flows, executions, selectedRun, onSelectRun, className }) => (
-  <Card className={className}>
-    <CardHeader>
-      <CardTitle>Runs</CardTitle>
-    </CardHeader>
-    <CardContent>
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Agent</TableHead>
-            <TableHead>Started</TableHead>
-            <TableHead>Status</TableHead>
-            <TableHead>Duration</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody data-testid="flow-runs-list-body">
-          {executions.map((execution) => (
-            <TableRow
-              key={execution.id}
-              data-testid={`flow-run-${execution.id}-graph-${execution.graph_id}`}
-              data-runid={execution.id}
-              data-graphid={execution.graph_id}
-              className="cursor-pointer"
-              onClick={() => onSelectRun(execution)}
-              data-state={selectedRun?.id == execution.id ? "selected" : null}
-            >
-              <TableCell>
-                <TextRenderer
-                  value={
-                    flows.find((f) => f.graph_id == execution.graph_id)?.name
-                  }
-                  truncateLengthLimit={30}
-                />
-              </TableCell>
-              <TableCell>
-                {execution.started_at
-                  ? format(execution.started_at, "HH:mm")
-                  : "—"}
-              </TableCell>
-              <TableCell>
-                <FlowRunStatusBadge
-                  status={execution.status}
-                  className="w-full justify-center"
-                />
-              </TableCell>
-              <TableCell>
-                {execution.stats
-                  ? formatDuration(execution.stats.duration)
-                  : ""}
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </CardContent>
-  </Card>
-);
-
-function formatDuration(seconds: number): string {
-  return (
-    (seconds < 100 ? seconds.toPrecision(2) : Math.round(seconds)).toString() +
-    "s"
-  );
-}
-
-export default FlowRunsList;

autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunsStatus.tsx

@@ -1,131 +0,0 @@
-import React, { useState } from "react";
-import { GraphExecutionMeta, LibraryAgent } from "@/lib/autogpt-server-api";
-import { CardTitle } from "@/components/__legacy__/ui/card";
-import { Button } from "@/components/__legacy__/ui/button";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/__legacy__/ui/popover";
-import { Calendar } from "@/components/__legacy__/ui/calendar";
-import { FlowRunsTimeline } from "@/app/(platform)/monitoring/components/FlowRunsTimeline";
-
-export const FlowRunsStatus: React.FC<{
-  flows: LibraryAgent[];
-  executions: GraphExecutionMeta[];
-  title?: string;
-  className?: string;
-}> = ({ flows, executions: executions, title, className }) => {
-  /* "dateMin": since the first flow in the dataset
-   * number > 0: custom date (unix timestamp)
-   * number < 0: offset relative to Date.now() (in seconds) */
-  const [selected, setSelected] = useState<Date>();
-  const [statsSince, setStatsSince] = useState<number | "dataMin">(-24 * 3600);
-  const statsSinceTimestamp = // unix timestamp or null
-    typeof statsSince == "string"
-      ? null
-      : statsSince < 0
-        ? Date.now() + statsSince * 1000
-        : statsSince;
-  const filteredFlowRuns =
-    statsSinceTimestamp != null
-      ? executions.filter(
-          (fr) =>
-            fr.started_at && fr.started_at.getTime() > statsSinceTimestamp,
-        )
-      : executions;
-
-  return (
-    <div className={className}>
-      <div className="flex flex-row items-center justify-between">
-        <CardTitle>{title || "Stats"}</CardTitle>
-        <div className="flex flex-wrap space-x-2">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => setStatsSince(-2 * 3600)}
-          >
-            2h
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => setStatsSince(-8 * 3600)}
-          >
-            8h
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => setStatsSince(-24 * 3600)}
-          >
-            24h
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => setStatsSince(-7 * 24 * 3600)}
-          >
-            7d
-          </Button>
-          <Popover>
-            <PopoverTrigger asChild>
-              <Button variant={"outline"} size="sm">
-                Custom
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-auto p-0" align="start">
-              <Calendar
-                mode="single"
-                selected={selected}
-                onSelect={(_, selectedDay) => {
-                  setSelected(selectedDay);
-                  setStatsSince(selectedDay.getTime());
-                }}
-              />
-            </PopoverContent>
-          </Popover>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => setStatsSince("dataMin")}
-          >
-            All
-          </Button>
-        </div>
-      </div>
-      <FlowRunsTimeline
-        flows={flows}
-        executions={executions}
-        dataMin={statsSince}
-        className="mt-3"
-      />
-      <hr className="my-4" />
-      <div>
-        <p>
-          <strong>Total runs:</strong> {filteredFlowRuns.length}
-        </p>
-        <p>
-          <strong>Total run time:</strong>{" "}
-          {filteredFlowRuns.reduce(
-            (total, run) => total + (run.stats?.node_exec_time ?? 0),
-            0,
-          )}{" "}
-          seconds
-        </p>
-        {filteredFlowRuns.some((r) => r.stats) && (
-          <p>
-            <strong>Total cost:</strong> $
-            {(
-              filteredFlowRuns.reduce(
-                (total, run) => total + (run.stats?.cost ?? 0),
-                0,
-              ) / 100
-            ).toFixed(2)}
-          </p>
-        )}
-      </div>
-    </div>
-  );
-};
-export default FlowRunsStatus;

autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunsTimeline.tsx

@@ -1,189 +0,0 @@
-import { GraphExecutionMeta, LibraryAgent } from "@/lib/autogpt-server-api";
-import {
-  ComposedChart,
-  DefaultLegendContentProps,
-  Legend,
-  Line,
-  ResponsiveContainer,
-  Scatter,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from "recharts";
-import { differenceInHours, format } from "date-fns";
-import { Card } from "@/components/__legacy__/ui/card";
-import { cn, hashString } from "@/lib/utils";
-import React from "react";
-import { FlowRunStatusBadge } from "@/app/(platform)/monitoring/components/FlowRunStatusBadge";
-
-export const FlowRunsTimeline = ({
-  flows,
-  executions,
-  dataMin,
-  className,
-}: {
-  flows: LibraryAgent[];
-  executions: GraphExecutionMeta[];
-  dataMin: "dataMin" | number;
-  className?: string;
-}) => (
-  /* TODO: make logarithmic? */
-  <ResponsiveContainer width="100%" height={120} className={className}>
-    <ComposedChart>
-      <XAxis
-        dataKey="time"
-        type="number"
-        domain={[
-          typeof dataMin == "string"
-            ? dataMin
-            : dataMin < 0
-              ? Date.now() + dataMin * 1000
-              : dataMin,
-          Date.now(),
-        ]}
-        allowDataOverflow={true}
-        tickFormatter={(unixTime) => {
-          const now = new Date();
-          const time = new Date(unixTime);
-          return differenceInHours(now, time) < 24
-            ? format(time, "HH:mm")
-            : format(time, "yyyy-MM-dd HH:mm");
-        }}
-        name="Time"
-        scale="time"
-      />
-      <YAxis
-        dataKey="_duration"
-        name="Duration (s)"
-        tickFormatter={(s) => (s > 90 ? `${Math.round(s / 60)}m` : `${s}s`)}
-      />
-      <Tooltip
-        content={({ payload }) => {
-          if (payload && payload.length) {
-            const data: GraphExecutionMeta & {
-              time: number;
-              _duration: number;
-            } = payload[0].payload;
-            const flow = flows.find((f) => f.graph_id === data.graph_id);
-            return (
-              <Card className="p-2 text-xs leading-normal">
-                <p>
-                  <strong>Agent:</strong> {flow ? flow.name : "Unknown"}
-                </p>
-                <div>
-                  <strong>Status:</strong>&nbsp;
-                  <FlowRunStatusBadge
-                    status={data.status}
-                    className="px-1.5 py-0"
-                  />
-                </div>
-                <p>
-                  <strong>Started:</strong>{" "}
-                  {data.started_at
-                    ? format(data.started_at, "yyyy-MM-dd HH:mm:ss")
-                    : "—"}
-                </p>
-                {data.stats && (
-                  <p>
-                    <strong>Duration / run time:</strong>{" "}
-                    {formatDuration(data.stats.duration)} /{" "}
-                    {formatDuration(data.stats.node_exec_time)}
-                  </p>
-                )}
-              </Card>
-            );
-          }
-          return null;
-        }}
-      />
-      {flows.map((flow) => (
-        <Scatter
-          key={flow.id}
-          data={executions
-            .filter((e) => e.graph_id == flow.graph_id && e.started_at)
-            .map((e) => ({
-              ...e,
-              time:
-                (e.started_at?.getTime() ?? 0) +
-                (e.stats?.node_exec_time ?? 0) * 1000,
-              _duration: e.stats?.node_exec_time ?? 0,
-            }))}
-          name={flow.name}
-          fill={`hsl(${(hashString(flow.id) * 137.5) % 360}, 70%, 50%)`}
-        />
-      ))}
-      {executions
-        .filter((e) => e.started_at && e.ended_at)
-        .map((execution) => (
-          <Line
-            key={execution.id}
-            type="linear"
-            dataKey="_duration"
-            data={[
-              {
-                ...execution,
-                time: execution.started_at!.getTime(),
-                _duration: 0,
-              },
-              {
-                ...execution,
-                time: execution.ended_at!.getTime(),
-                _duration: execution.stats?.node_exec_time ?? 0,
-              },
-            ]}
-            stroke={`hsl(${(hashString(execution.graph_id) * 137.5) % 360}, 70%, 50%)`}
-            strokeWidth={2}
-            dot={false}
-            legendType="none"
-          />
-        ))}
-      <Legend
-        content={<ScrollableLegend />}
-        wrapperStyle={{
-          bottom: 0,
-          left: 0,
-          right: 0,
-          width: "100%",
-          display: "flex",
-          justifyContent: "center",
-        }}
-      />
-    </ComposedChart>
-  </ResponsiveContainer>
-);
-
-export default FlowRunsTimeline;
-
-const ScrollableLegend: React.FC<
-  DefaultLegendContentProps & { className?: string }
-> = ({ payload, className }) => {
-  return (
-    <div
-      className={cn(
-        "space-x-3 overflow-x-auto whitespace-nowrap px-4 text-sm",
-        className,
-      )}
-      style={{ scrollbarWidth: "none" }}
-    >
-      {payload?.map((entry, index) => {
-        if (entry.type == "none") return;
-        return (
-          <span key={`item-${index}`} className="inline-flex items-center">
-            <span
-              className="mr-1 inline-block size-2.5 rounded-full"
-              style={{ backgroundColor: entry.color }}
-            />
-            <span>{entry.value}</span>
-          </span>
-        );
-      })}
-    </div>
-  );
-};
-
-function formatDuration(seconds: number): string {
-  return (
-    (seconds < 100 ? seconds.toPrecision(2) : Math.round(seconds)).toString() +
-    "s"
-  );
-}

autogpt_platform/frontend/src/app/(platform)/monitoring/components/SchedulesTable.tsx

@@ -1,285 +0,0 @@
-import { LibraryAgent } from "@/lib/autogpt-server-api";
-import { GraphExecutionJobInfo } from "@/app/api/__generated__/models/graphExecutionJobInfo";
-import { Button } from "@/components/__legacy__/ui/button";
-import { Card } from "@/components/__legacy__/ui/card";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/__legacy__/ui/table";
-import { Badge } from "@/components/__legacy__/ui/badge";
-import { ScrollArea } from "@/components/__legacy__/ui/scroll-area";
-import { ClockIcon, Loader2 } from "lucide-react";
-import { useToast } from "@/components/molecules/Toast/use-toast";
-import { humanizeCronExpression } from "@/lib/cron-expression-utils";
-import { useUserTimezone } from "@/lib/hooks/useUserTimezone";
-import {
-  formatScheduleTime,
-  getTimezoneAbbreviation,
-} from "@/lib/timezone-utils";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/__legacy__/ui/select";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/__legacy__/ui/dialog";
-import { TextRenderer } from "../../../../components/__legacy__/ui/render";
-import { Input } from "../../../../components/__legacy__/ui/input";
-import { Label } from "../../../../components/__legacy__/ui/label";
-
-interface SchedulesTableProps {
-  schedules: GraphExecutionJobInfo[];
-  agents: LibraryAgent[];
-  onRemoveSchedule: (scheduleId: string, enabled: boolean) => void;
-  sortColumn: keyof GraphExecutionJobInfo;
-  sortDirection: "asc" | "desc";
-  onSort: (column: keyof GraphExecutionJobInfo) => void;
-}
-
-export const SchedulesTable = ({
-  schedules,
-  agents,
-  onRemoveSchedule,
-  sortColumn,
-  sortDirection,
-  onSort,
-}: SchedulesTableProps) => {
-  const { toast } = useToast();
-  const router = useRouter();
-  const [selectedAgent, setSelectedAgent] = useState<string>(""); // Library Agent ID
-  const [selectedVersion, setSelectedVersion] = useState<number>(0); // Graph version
-  const [maxVersion, setMaxVersion] = useState<number>(0);
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [selectedFilter, setSelectedFilter] = useState<string>(""); // Graph ID
-
-  // Get user's timezone for displaying schedule times
-  const userTimezone = useUserTimezone() ?? "UTC";
-
-  const filteredAndSortedSchedules = [...schedules]
-    .filter(
-      (schedule) => !selectedFilter || schedule.graph_id === selectedFilter,
-    )
-    .sort((a, b) => {
-      const aValue = a[sortColumn];
-      const bValue = b[sortColumn];
-      if (sortDirection === "asc") {
-        return String(aValue).localeCompare(String(bValue));
-      }
-      return String(bValue).localeCompare(String(aValue));
-    });
-
-  const handleToggleSchedule = (scheduleId: string, enabled: boolean) => {
-    onRemoveSchedule(scheduleId, enabled);
-    if (!enabled) {
-      toast({
-        title: "Schedule Disabled",
-        description: "The schedule has been successfully disabled.",
-      });
-    }
-  };
-
-  const handleNewSchedule = () => {
-    setIsDialogOpen(true);
-  };
-
-  const handleAgentSelect = (agentId: string) => {
-    setSelectedAgent(agentId);
-    const agent = agents.find((a) => a.id === agentId);
-    setMaxVersion(agent!.graph_version);
-    setSelectedVersion(agent!.graph_version);
-  };
-
-  const handleVersionSelect = (version: string) => {
-    setSelectedVersion(parseInt(version));
-  };
-
-  const handleSchedule = async () => {
-    if (!selectedAgent || !selectedVersion) {
-      toast({
-        title: "Invalid Input",
-        description: "Please select an agent and a version.",
-        variant: "destructive",
-      });
-      return;
-    }
-    if (selectedVersion < 1 || selectedVersion > maxVersion) {
-      toast({
-        title: "Invalid Version",
-        description: `Please select a version between 1 and ${maxVersion}.`,
-        variant: "destructive",
-      });
-      return;
-    }
-    setIsLoading(true);
-    const agent = agents.find((a) => a.id == selectedAgent)!;
-    try {
-      await new Promise((resolve) => setTimeout(resolve, 100));
-      router.push(
-        `/build?flowID=${agent.graph_id}&flowVersion=${agent.graph_version}&open_scheduling=true`,
-      );
-    } catch (error) {
-      console.error("Navigation error:", error);
-    }
-  };
-
-  return (
-    <Card className="h-fit p-4">
-      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Select Agent for New Schedule</DialogTitle>
-          </DialogHeader>
-          <Select onValueChange={handleAgentSelect}>
-            <SelectTrigger className="w-full">
-              <SelectValue placeholder="Select an agent" />
-            </SelectTrigger>
-            <SelectContent>
-              {agents.map((agent, i) => (
-                <SelectItem key={agent.id + i} value={agent.id}>
-                  <TextRenderer value={agent.name} truncateLengthLimit={30} />
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          <Label className="mt-4">
-            Select version between 1 and {maxVersion}
-          </Label>
-          <Input
-            type="number"
-            min={1}
-            max={selectedAgent ? maxVersion : 0}
-            value={selectedVersion}
-            onChange={(e) => handleVersionSelect(e.target.value)}
-            placeholder="Select version"
-            className="w-full"
-          />
-          <Button
-            onClick={handleSchedule}
-            disabled={isLoading || !selectedAgent}
-            className="mt-4"
-          >
-            {isLoading ? (
-              <>
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                Loading...
-              </>
-            ) : (
-              "Schedule"
-            )}
-          </Button>
-        </DialogContent>
-      </Dialog>
-
-      <div className="mb-4 flex items-center justify-between">
-        <h3 className="text-lg font-semibold">Schedules</h3>
-        <div className="flex flex-wrap gap-2">
-          <Select onValueChange={setSelectedFilter}>
-            <SelectTrigger className="h-8 w-[180px] rounded-md px-3 text-xs">
-              <SelectValue placeholder="Filter by graph" />
-            </SelectTrigger>
-            <SelectContent className="text-xs">
-              {agents.map((agent) => (
-                <SelectItem key={agent.id} value={agent.graph_id}>
-                  {agent.name}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          <Button size="sm" variant="outline" onClick={handleNewSchedule}>
-            <ClockIcon className="mr-2 h-4 w-4" />
-            New Schedule
-          </Button>
-        </div>
-      </div>
-      <ScrollArea className="max-h-[400px]">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead
-                onClick={() => onSort("graph_id")}
-                className="cursor-pointer"
-              >
-                Graph Name
-              </TableHead>
-              <TableHead className="cursor-pointer">Graph Version</TableHead>
-              <TableHead
-                onClick={() => onSort("next_run_time")}
-                className="cursor-pointer"
-              >
-                Next Execution
-              </TableHead>
-              <TableHead
-                onClick={() => onSort("cron")}
-                className="cursor-pointer"
-              >
-                Schedule
-              </TableHead>
-              <TableHead>Timezone</TableHead>
-              <TableHead>Actions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {filteredAndSortedSchedules.length === 0 ? (
-              <TableRow>
-                <TableCell
-                  colSpan={6}
-                  className="py-8 text-center text-lg text-gray-400"
-                >
-                  No schedules are available
-                </TableCell>
-              </TableRow>
-            ) : (
-              filteredAndSortedSchedules.map((schedule) => (
-                <TableRow key={schedule.id}>
-                  <TableCell className="font-medium">
-                    {agents.find((a) => a.graph_id === schedule.graph_id)
-                      ?.name || schedule.graph_id}
-                  </TableCell>
-                  <TableCell>{schedule.graph_version}</TableCell>
-                  <TableCell>
-                    {formatScheduleTime(schedule.next_run_time, userTimezone)}
-                  </TableCell>
-                  <TableCell>
-                    <Badge variant="secondary">
-                      {humanizeCronExpression(schedule.cron)}
-                    </Badge>
-                  </TableCell>
-                  <TableCell>
-                    <span className="text-sm text-muted-foreground">
-                      {schedule.timezone
-                        ? getTimezoneAbbreviation(schedule.timezone)
-                        : userTimezone && getTimezoneAbbreviation(userTimezone)}
-                    </span>
-                  </TableCell>
-                  <TableCell>
-                    <div className="flex space-x-2">
-                      <Button
-                        variant={"destructive"}
-                        onClick={() => handleToggleSchedule(schedule.id, false)}
-                      >
-                        Remove
-                      </Button>
-                    </div>
-                  </TableCell>
-                </TableRow>
-              ))
-            )}
-          </TableBody>
-        </Table>
-      </ScrollArea>
-    </Card>
-  );
-};

autogpt_platform/frontend/src/app/(platform)/monitoring/components/skeletons/AgentFlowListSkeleton.tsx

@@ -1,24 +0,0 @@
-export default function AgentsFlowListSkeleton() {
-  return (
-    <div className="mx-auto max-w-4xl p-4">
-      <div className="mb-4 flex items-center justify-between">
-        <h1 className="text-2xl font-bold">Agents</h1>
-        <div className="h-10 w-24 animate-pulse rounded bg-gray-200"></div>
-      </div>
-      <div className="rounded-lg bg-white p-4 shadow">
-        <div className="mb-4 grid grid-cols-3 gap-4 font-medium text-gray-500">
-          <div>Name</div>
-          <div># of runs</div>
-          <div>Last run</div>
-        </div>
-        {[...Array(3)].map((_, index) => (
-          <div key={index} className="mb-4 grid grid-cols-3 gap-4">
-            <div className="h-6 animate-pulse rounded bg-gray-200"></div>
-            <div className="h-6 animate-pulse rounded bg-gray-200"></div>
-            <div className="h-6 animate-pulse rounded bg-gray-200"></div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/monitoring/components/skeletons/FlowRunsListSkeleton.tsx

@@ -1,23 +0,0 @@
-export default function FlowRunsListSkeleton() {
-  return (
-    <div className="mx-auto max-w-4xl p-4">
-      <div className="rounded-lg bg-white p-4 shadow">
-        <h2 className="mb-4 text-xl font-semibold">Runs</h2>
-        <div className="mb-4 grid grid-cols-4 gap-4 text-sm font-medium text-gray-500">
-          <div>Agent</div>
-          <div>Started</div>
-          <div>Status</div>
-          <div>Duration</div>
-        </div>
-        {[...Array(4)].map((_, index) => (
-          <div key={index} className="mb-4 grid grid-cols-4 gap-4">
-            <div className="h-5 animate-pulse rounded bg-gray-200"></div>
-            <div className="h-5 animate-pulse rounded bg-gray-200"></div>
-            <div className="h-5 animate-pulse rounded bg-gray-200"></div>
-            <div className="h-5 animate-pulse rounded bg-gray-200"></div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/monitoring/components/skeletons/FlowRunsStatusSkeleton.tsx

@@ -1,28 +0,0 @@
-export default function FlowRunsStatusSkeleton() {
-  return (
-    <div className="mx-auto max-w-4xl p-4">
-      <div className="rounded-lg bg-white p-4 shadow">
-        <div className="mb-6 flex items-center justify-between">
-          <h2 className="text-xl font-semibold">Stats</h2>
-          <div className="flex space-x-2">
-            {["2h", "8h", "24h", "7d", "Custom", "All"].map((btn) => (
-              <div
-                key={btn}
-                className="h-8 w-16 animate-pulse rounded bg-gray-200"
-              ></div>
-            ))}
-          </div>
-        </div>
-
-        {/* Placeholder for the line chart */}
-        <div className="mb-6 h-64 w-full animate-pulse rounded bg-gray-200"></div>
-
-        {/* Placeholders for total runs and total run time */}
-        <div className="space-y-2">
-          <div className="h-6 w-1/3 animate-pulse rounded bg-gray-200"></div>
-          <div className="h-6 w-1/2 animate-pulse rounded bg-gray-200"></div>
-        </div>
-      </div>
-    </div>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/monitoring/loading.tsx

@@ -1,21 +0,0 @@
-import AgentFlowListSkeleton from "@/app/(platform)/monitoring/components/skeletons/AgentFlowListSkeleton";
-import React from "react";
-import FlowRunsListSkeleton from "@/app/(platform)/monitoring/components/skeletons/FlowRunsListSkeleton";
-import FlowRunsStatusSkeleton from "@/app/(platform)/monitoring/components/skeletons/FlowRunsStatusSkeleton";
-
-export default function MonitorLoadingSkeleton() {
-  return (
-    <div className="space-y-4 p-4">
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
-        {/* Agents Section */}
-        <AgentFlowListSkeleton />
-
-        {/* Runs Section */}
-        <FlowRunsListSkeleton />
-
-        {/* Stats Section */}
-        <FlowRunsStatusSkeleton />
-      </div>
-    </div>
-  );
-}

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

@@ -1,151 +0,0 @@
-"use client";
-import React, { useCallback, useEffect, useState } from "react";
-
-import { GraphExecutionMeta, LibraryAgent } from "@/lib/autogpt-server-api";
-import { GraphExecutionJobInfo } from "@/app/api/__generated__/models/graphExecutionJobInfo";
-import {
-  useGetV1ListExecutionSchedulesForAUser,
-  useDeleteV1DeleteExecutionSchedule,
-} from "@/app/api/__generated__/endpoints/schedules/schedules";
-import { okData } from "@/app/api/helpers";
-
-import { Card } from "@/components/__legacy__/ui/card";
-import { SchedulesTable } from "@/app/(platform)/monitoring/components/SchedulesTable";
-import { useBackendAPI } from "@/lib/autogpt-server-api/context";
-import AgentFlowList from "./components/AgentFlowList";
-import FlowRunsList from "./components/FlowRunsList";
-import FlowRunInfo from "./components/FlowRunInfo";
-import FlowInfo from "./components/FlowInfo";
-import FlowRunsStatus from "./components/FlowRunsStatus";
-
-const Monitor = () => {
-  const [flows, setFlows] = useState<LibraryAgent[]>([]);
-  const [executions, setExecutions] = useState<GraphExecutionMeta[]>([]);
-  const [selectedFlow, setSelectedFlow] = useState<LibraryAgent | null>(null);
-  const [selectedRun, setSelectedRun] = useState<GraphExecutionMeta | null>(
-    null,
-  );
-  const [sortColumn, setSortColumn] =
-    useState<keyof GraphExecutionJobInfo>("id");
-  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");
-  const api = useBackendAPI();
-
-  // Use generated API hooks for schedules
-  const { data: schedulesResponse, refetch: refetchSchedules } =
-    useGetV1ListExecutionSchedulesForAUser();
-  const deleteScheduleMutation = useDeleteV1DeleteExecutionSchedule();
-
-  const schedules = okData(schedulesResponse) ?? [];
-
-  const removeSchedule = useCallback(
-    async (scheduleId: string) => {
-      await deleteScheduleMutation.mutateAsync({ scheduleId });
-      refetchSchedules();
-    },
-    [deleteScheduleMutation, refetchSchedules],
-  );
-
-  const fetchAgents = useCallback(() => {
-    api.listLibraryAgents().then((response) => {
-      setFlows(response.agents);
-    });
-    api.getExecutions().then((executions) => {
-      setExecutions(executions);
-    });
-  }, [api]);
-
-  useEffect(() => {
-    fetchAgents();
-  }, [fetchAgents]);
-
-  useEffect(() => {
-    const intervalId = setInterval(() => fetchAgents(), 5000);
-    return () => clearInterval(intervalId);
-  }, [fetchAgents, flows]);
-
-  const column1 = "md:col-span-2 xl:col-span-3 xxl:col-span-2";
-  const column2 = "md:col-span-3 lg:col-span-2 xl:col-span-3";
-  const column3 = "col-span-full xl:col-span-4 xxl:col-span-5";
-
-  const handleSort = (column: keyof GraphExecutionJobInfo) => {
-    if (sortColumn === column) {
-      setSortDirection(sortDirection === "asc" ? "desc" : "asc");
-    } else {
-      setSortColumn(column);
-      setSortDirection("asc");
-    }
-  };
-
-  return (
-    <div
-      className="grid grid-cols-1 gap-4 p-4 md:grid-cols-5 lg:grid-cols-4 xl:grid-cols-10"
-      data-testid="monitor-page"
-    >
-      <AgentFlowList
-        className={column1}
-        flows={flows}
-        executions={executions}
-        selectedFlow={selectedFlow}
-        onSelectFlow={(f) => {
-          setSelectedRun(null);
-          setSelectedFlow(f.id == selectedFlow?.id ? null : f);
-        }}
-      />
-      <FlowRunsList
-        className={column2}
-        flows={flows}
-        executions={[
-          ...(selectedFlow
-            ? executions.filter((v) => v.graph_id == selectedFlow.graph_id)
-            : executions),
-        ].sort((a, b) => {
-          const aTime = a.started_at?.getTime() ?? 0;
-          const bTime = b.started_at?.getTime() ?? 0;
-          return bTime - aTime;
-        })}
-        selectedRun={selectedRun}
-        onSelectRun={(r) => setSelectedRun(r.id == selectedRun?.id ? null : r)}
-      />
-      {(selectedRun && (
-        <FlowRunInfo
-          agent={
-            selectedFlow ||
-            flows.find((f) => f.graph_id == selectedRun.graph_id)!
-          }
-          execution={selectedRun}
-          className={column3}
-        />
-      )) ||
-        (selectedFlow && (
-          <FlowInfo
-            flow={selectedFlow}
-            executions={executions.filter(
-              (e) => e.graph_id == selectedFlow.graph_id,
-            )}
-            className={column3}
-            refresh={() => {
-              fetchAgents();
-              setSelectedFlow(null);
-              setSelectedRun(null);
-            }}
-          />
-        )) || (
-          <Card className={`p-6 ${column3}`}>
-            <FlowRunsStatus flows={flows} executions={executions} />
-          </Card>
-        )}
-      <div className="col-span-full xl:col-span-6">
-        <SchedulesTable
-          schedules={schedules} // all schedules
-          agents={flows} // for filtering purpose
-          onRemoveSchedule={removeSchedule}
-          sortColumn={sortColumn}
-          sortDirection={sortDirection}
-          onSort={handleSort}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default Monitor;

autogpt_platform/frontend/src/app/api/openapi.json

@@ -3588,29 +3588,6 @@
               "title": "Page Size"
             },
             "description": "Number of agents per page (must be >= 1)"
-          },
-          {
-            "name": "folder_id",
-            "in": "query",
-            "required": false,
-            "schema": {
-              "anyOf": [{ "type": "string" }, { "type": "null" }],
-              "description": "Filter by folder ID",
-              "title": "Folder Id"
-            },
-            "description": "Filter by folder ID"
-          },
-          {
-            "name": "include_root_only",
-            "in": "query",
-            "required": false,
-            "schema": {
-              "type": "boolean",
-              "description": "Only return agents without a folder (root-level agents)",
-              "default": false,
-              "title": "Include Root Only"
-            },
-            "description": "Only return agents without a folder (root-level agents)"
           }
         ],
         "responses": {
@@ -3978,340 +3955,6 @@
         }
       }
     },
-    "/api/library/folders": {
-      "get": {
-        "tags": ["v2", "library", "folders", "private"],
-        "summary": "List Library Folders",
-        "description": "List folders for the authenticated user.\n\nArgs:\n    user_id: ID of the authenticated user.\n    parent_id: Optional parent folder ID to filter by.\n    include_counts: Whether to include agent and subfolder counts.\n\nReturns:\n    A FolderListResponse containing folders.",
-        "operationId": "getV2List library folders",
-        "security": [{ "HTTPBearerJWT": [] }],
-        "parameters": [
-          {
-            "name": "parent_id",
-            "in": "query",
-            "required": false,
-            "schema": {
-              "anyOf": [{ "type": "string" }, { "type": "null" }],
-              "description": "Filter by parent folder ID. If not provided, returns root-level folders.",
-              "title": "Parent Id"
-            },
-            "description": "Filter by parent folder ID. If not provided, returns root-level folders."
-          },
-          {
-            "name": "include_counts",
-            "in": "query",
-            "required": false,
-            "schema": {
-              "type": "boolean",
-              "description": "Include agent and subfolder counts",
-              "default": true,
-              "title": "Include Counts"
-            },
-            "description": "Include agent and subfolder counts"
-          }
-        ],
-        "responses": {
-          "200": {
-            "description": "List of folders",
-            "content": {
-              "application/json": {
-                "schema": { "$ref": "#/components/schemas/FolderListResponse" }
-              }
-            }
-          },
-          "401": {
-            "$ref": "#/components/responses/HTTP401NotAuthenticatedError"
-          },
-          "422": {
-            "description": "Validation Error",
-            "content": {
-              "application/json": {
-                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
-              }
-            }
-          },
-          "500": { "description": "Server error" }
-        }
-      },
-      "post": {
-        "tags": ["v2", "library", "folders", "private"],
-        "summary": "Create Folder",
-        "description": "Create a new folder.\n\nArgs:\n    payload: The folder creation request.\n    user_id: ID of the authenticated user.\n\nReturns:\n    The created LibraryFolder.",
-        "operationId": "postV2Create folder",
-        "security": [{ "HTTPBearerJWT": [] }],
-        "requestBody": {
-          "required": true,
-          "content": {
-            "application/json": {
-              "schema": { "$ref": "#/components/schemas/FolderCreateRequest" }
-            }
-          }
-        },
-        "responses": {
-          "201": {
-            "description": "Folder created successfully",
-            "content": {
-              "application/json": {
-                "schema": { "$ref": "#/components/schemas/LibraryFolder" }
-              }
-            }
-          },
-          "400": { "description": "Validation error" },
-          "401": {
-            "$ref": "#/components/responses/HTTP401NotAuthenticatedError"
-          },
-          "404": { "description": "Parent folder not found" },
-          "409": { "description": "Folder name conflict" },
-          "422": {
-            "description": "Validation Error",
-            "content": {
-              "application/json": {
-                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
-              }
-            }
-          },
-          "500": { "description": "Server error" }
-        }
-      }
-    },
-    "/api/library/folders/agents/bulk-move": {
-      "post": {
-        "tags": ["v2", "library", "folders", "private"],
-        "summary": "Bulk Move Agents",
-        "description": "Move multiple agents to a folder.\n\nArgs:\n    payload: The bulk move request with agent IDs and target folder.\n    user_id: ID of the authenticated user.\n\nReturns:\n    The updated LibraryAgents.",
-        "operationId": "postV2Bulk move agents",
-        "requestBody": {
-          "content": {
-            "application/json": {
-              "schema": { "$ref": "#/components/schemas/BulkMoveAgentsRequest" }
-            }
-          },
-          "required": true
-        },
-        "responses": {
-          "200": {
-            "description": "Agents moved successfully",
-            "content": {
-              "application/json": {
-                "schema": {
-                  "items": { "$ref": "#/components/schemas/LibraryAgent" },
-                  "type": "array",
-                  "title": "Response Postv2Bulk Move Agents"
-                }
-              }
-            }
-          },
-          "401": {
-            "$ref": "#/components/responses/HTTP401NotAuthenticatedError"
-          },
-          "404": { "description": "Folder not found" },
-          "422": {
-            "description": "Validation Error",
-            "content": {
-              "application/json": {
-                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
-              }
-            }
-          },
-          "500": { "description": "Server error" }
-        },
-        "security": [{ "HTTPBearerJWT": [] }]
-      }
-    },
-    "/api/library/folders/tree": {
-      "get": {
-        "tags": ["v2", "library", "folders", "private"],
-        "summary": "Get Folder Tree",
-        "description": "Get the full folder tree for the authenticated user.\n\nArgs:\n    user_id: ID of the authenticated user.\n\nReturns:\n    A FolderTreeResponse containing the nested folder structure.",
-        "operationId": "getV2Get folder tree",
-        "responses": {
-          "200": {
-            "description": "Folder tree structure",
-            "content": {
-              "application/json": {
-                "schema": { "$ref": "#/components/schemas/FolderTreeResponse" }
-              }
-            }
-          },
-          "401": {
-            "$ref": "#/components/responses/HTTP401NotAuthenticatedError"
-          },
-          "500": { "description": "Server error" }
-        },
-        "security": [{ "HTTPBearerJWT": [] }]
-      }
-    },
-    "/api/library/folders/{folder_id}": {
-      "delete": {
-        "tags": ["v2", "library", "folders", "private"],
-        "summary": "Delete Folder",
-        "description": "Soft-delete a folder and all its contents.\n\nArgs:\n    folder_id: ID of the folder to delete.\n    user_id: ID of the authenticated user.\n\nReturns:\n    204 No Content if successful.",
-        "operationId": "deleteV2Delete folder",
-        "security": [{ "HTTPBearerJWT": [] }],
-        "parameters": [
-          {
-            "name": "folder_id",
-            "in": "path",
-            "required": true,
-            "schema": { "type": "string", "title": "Folder Id" }
-          }
-        ],
-        "responses": {
-          "204": { "description": "Folder deleted successfully" },
-          "401": {
-            "$ref": "#/components/responses/HTTP401NotAuthenticatedError"
-          },
-          "404": { "description": "Folder not found" },
-          "422": {
-            "description": "Validation Error",
-            "content": {
-              "application/json": {
-                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
-              }
-            }
-          },
-          "500": { "description": "Server error" }
-        }
-      },
-      "get": {
-        "tags": ["v2", "library", "folders", "private"],
-        "summary": "Get Folder",
-        "description": "Get a specific folder.\n\nArgs:\n    folder_id: ID of the folder to retrieve.\n    user_id: ID of the authenticated user.\n\nReturns:\n    The requested LibraryFolder.",
-        "operationId": "getV2Get folder",
-        "security": [{ "HTTPBearerJWT": [] }],
-        "parameters": [
-          {
-            "name": "folder_id",
-            "in": "path",
-            "required": true,
-            "schema": { "type": "string", "title": "Folder Id" }
-          }
-        ],
-        "responses": {
-          "200": {
-            "description": "Folder details",
-            "content": {
-              "application/json": {
-                "schema": { "$ref": "#/components/schemas/LibraryFolder" }
-              }
-            }
-          },
-          "401": {
-            "$ref": "#/components/responses/HTTP401NotAuthenticatedError"
-          },
-          "404": { "description": "Folder not found" },
-          "422": {
-            "description": "Validation Error",
-            "content": {
-              "application/json": {
-                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
-              }
-            }
-          },
-          "500": { "description": "Server error" }
-        }
-      },
-      "patch": {
-        "tags": ["v2", "library", "folders", "private"],
-        "summary": "Update Folder",
-        "description": "Update a folder's properties.\n\nArgs:\n    folder_id: ID of the folder to update.\n    payload: The folder update request.\n    user_id: ID of the authenticated user.\n\nReturns:\n    The updated LibraryFolder.",
-        "operationId": "patchV2Update folder",
-        "security": [{ "HTTPBearerJWT": [] }],
-        "parameters": [
-          {
-            "name": "folder_id",
-            "in": "path",
-            "required": true,
-            "schema": { "type": "string", "title": "Folder Id" }
-          }
-        ],
-        "requestBody": {
-          "required": true,
-          "content": {
-            "application/json": {
-              "schema": { "$ref": "#/components/schemas/FolderUpdateRequest" }
-            }
-          }
-        },
-        "responses": {
-          "200": {
-            "description": "Folder updated successfully",
-            "content": {
-              "application/json": {
-                "schema": { "$ref": "#/components/schemas/LibraryFolder" }
-              }
-            }
-          },
-          "400": { "description": "Validation error" },
-          "401": {
-            "$ref": "#/components/responses/HTTP401NotAuthenticatedError"
-          },
-          "404": { "description": "Folder not found" },
-          "409": { "description": "Folder name conflict" },
-          "422": {
-            "description": "Validation Error",
-            "content": {
-              "application/json": {
-                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
-              }
-            }
-          },
-          "500": { "description": "Server error" }
-        }
-      }
-    },
-    "/api/library/folders/{folder_id}/move": {
-      "post": {
-        "tags": ["v2", "library", "folders", "private"],
-        "summary": "Move Folder",
-        "description": "Move a folder to a new parent.\n\nArgs:\n    folder_id: ID of the folder to move.\n    payload: The move request with target parent.\n    user_id: ID of the authenticated user.\n\nReturns:\n    The moved LibraryFolder.",
-        "operationId": "postV2Move folder",
-        "security": [{ "HTTPBearerJWT": [] }],
-        "parameters": [
-          {
-            "name": "folder_id",
-            "in": "path",
-            "required": true,
-            "schema": { "type": "string", "title": "Folder Id" }
-          }
-        ],
-        "requestBody": {
-          "required": true,
-          "content": {
-            "application/json": {
-              "schema": { "$ref": "#/components/schemas/FolderMoveRequest" }
-            }
-          }
-        },
-        "responses": {
-          "200": {
-            "description": "Folder moved successfully",
-            "content": {
-              "application/json": {
-                "schema": { "$ref": "#/components/schemas/LibraryFolder" }
-              }
-            }
-          },
-          "400": {
-            "description": "Validation error (circular reference, depth exceeded)"
-          },
-          "401": {
-            "$ref": "#/components/responses/HTTP401NotAuthenticatedError"
-          },
-          "404": { "description": "Folder or target parent not found" },
-          "409": { "description": "Folder name conflict in target location" },
-          "422": {
-            "description": "Validation Error",
-            "content": {
-              "application/json": {
-                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
-              }
-            }
-          },
-          "500": { "description": "Server error" }
-        }
-      }
-    },
     "/api/library/presets": {
       "get": {
         "tags": ["v2", "presets"],
@@ -7693,23 +7336,6 @@
         "required": ["file"],
         "title": "Body_postV2Upload submission media"
       },
-      "BulkMoveAgentsRequest": {
-        "properties": {
-          "agent_ids": {
-            "items": { "type": "string" },
-            "type": "array",
-            "title": "Agent Ids"
-          },
-          "folder_id": {
-            "anyOf": [{ "type": "string" }, { "type": "null" }],
-            "title": "Folder Id"
-          }
-        },
-        "type": "object",
-        "required": ["agent_ids"],
-        "title": "BulkMoveAgentsRequest",
-        "description": "Request model for moving multiple agents to a folder."
-      },
       "ChangelogEntry": {
         "properties": {
           "version": { "type": "string", "title": "Version" },
@@ -8394,96 +8020,6 @@
         "title": "ExecutionStartedResponse",
         "description": "Response for run/schedule actions."
       },
-      "FolderCreateRequest": {
-        "properties": {
-          "name": {
-            "type": "string",
-            "maxLength": 100,
-            "minLength": 1,
-            "title": "Name"
-          },
-          "icon": {
-            "anyOf": [{ "type": "string" }, { "type": "null" }],
-            "title": "Icon"
-          },
-          "color": {
-            "anyOf": [
-              { "type": "string", "pattern": "^#[0-9A-Fa-f]{6}$" },
-              { "type": "null" }
-            ],
-            "title": "Color",
-            "description": "Hex color code (#RRGGBB)"
-          },
-          "parent_id": {
-            "anyOf": [{ "type": "string" }, { "type": "null" }],
-            "title": "Parent Id"
-          }
-        },
-        "type": "object",
-        "required": ["name"],
-        "title": "FolderCreateRequest",
-        "description": "Request model for creating a folder."
-      },
-      "FolderListResponse": {
-        "properties": {
-          "folders": {
-            "items": { "$ref": "#/components/schemas/LibraryFolder" },
-            "type": "array",
-            "title": "Folders"
-          },
-          "pagination": { "$ref": "#/components/schemas/Pagination" }
-        },
-        "type": "object",
-        "required": ["folders", "pagination"],
-        "title": "FolderListResponse",
-        "description": "Response schema for a list of folders."
-      },
-      "FolderMoveRequest": {
-        "properties": {
-          "target_parent_id": {
-            "anyOf": [{ "type": "string" }, { "type": "null" }],
-            "title": "Target Parent Id"
-          }
-        },
-        "type": "object",
-        "title": "FolderMoveRequest",
-        "description": "Request model for moving a folder to a new parent."
-      },
-      "FolderTreeResponse": {
-        "properties": {
-          "tree": {
-            "items": { "$ref": "#/components/schemas/LibraryFolderTree" },
-            "type": "array",
-            "title": "Tree"
-          }
-        },
-        "type": "object",
-        "required": ["tree"],
-        "title": "FolderTreeResponse",
-        "description": "Response schema for folder tree structure."
-      },
-      "FolderUpdateRequest": {
-        "properties": {
-          "name": {
-            "anyOf": [
-              { "type": "string", "maxLength": 100, "minLength": 1 },
-              { "type": "null" }
-            ],
-            "title": "Name"
-          },
-          "icon": {
-            "anyOf": [{ "type": "string" }, { "type": "null" }],
-            "title": "Icon"
-          },
-          "color": {
-            "anyOf": [{ "type": "string" }, { "type": "null" }],
-            "title": "Color"
-          }
-        },
-        "type": "object",
-        "title": "FolderUpdateRequest",
-        "description": "Request model for updating a folder."
-      },
       "Graph": {
         "properties": {
           "id": { "type": "string", "title": "Id" },
@@ -9372,14 +8908,6 @@
             "title": "Is Latest Version"
           },
           "is_favorite": { "type": "boolean", "title": "Is Favorite" },
-          "folder_id": {
-            "anyOf": [{ "type": "string" }, { "type": "null" }],
-            "title": "Folder Id"
-          },
-          "folder_name": {
-            "anyOf": [{ "type": "string" }, { "type": "null" }],
-            "title": "Folder Name"
-          },
           "recommended_schedule_cron": {
             "anyOf": [{ "type": "string" }, { "type": "null" }],
             "title": "Recommended Schedule Cron"
@@ -9647,109 +9175,12 @@
               { "type": "null" }
             ],
             "description": "User-specific settings for this library agent"
-          },
-          "folder_id": {
-            "anyOf": [{ "type": "string" }, { "type": "null" }],
-            "title": "Folder Id",
-            "description": "Folder ID to move agent to (empty string for root)"
           }
         },
         "type": "object",
         "title": "LibraryAgentUpdateRequest",
         "description": "Schema for updating a library agent via PUT.\n\nIncludes flags for auto-updating version, marking as favorite,\narchiving, or deleting."
       },
-      "LibraryFolder": {
-        "properties": {
-          "id": { "type": "string", "title": "Id" },
-          "user_id": { "type": "string", "title": "User Id" },
-          "name": { "type": "string", "title": "Name" },
-          "icon": {
-            "anyOf": [{ "type": "string" }, { "type": "null" }],
-            "title": "Icon"
-          },
-          "color": {
-            "anyOf": [{ "type": "string" }, { "type": "null" }],
-            "title": "Color"
-          },
-          "parent_id": {
-            "anyOf": [{ "type": "string" }, { "type": "null" }],
-            "title": "Parent Id"
-          },
-          "created_at": {
-            "type": "string",
-            "format": "date-time",
-            "title": "Created At"
-          },
-          "updated_at": {
-            "type": "string",
-            "format": "date-time",
-            "title": "Updated At"
-          },
-          "agent_count": {
-            "type": "integer",
-            "title": "Agent Count",
-            "default": 0
-          },
-          "subfolder_count": {
-            "type": "integer",
-            "title": "Subfolder Count",
-            "default": 0
-          }
-        },
-        "type": "object",
-        "required": ["id", "user_id", "name", "created_at", "updated_at"],
-        "title": "LibraryFolder",
-        "description": "Represents a folder for organizing library agents."
-      },
-      "LibraryFolderTree": {
-        "properties": {
-          "id": { "type": "string", "title": "Id" },
-          "user_id": { "type": "string", "title": "User Id" },
-          "name": { "type": "string", "title": "Name" },
-          "icon": {
-            "anyOf": [{ "type": "string" }, { "type": "null" }],
-            "title": "Icon"
-          },
-          "color": {
-            "anyOf": [{ "type": "string" }, { "type": "null" }],
-            "title": "Color"
-          },
-          "parent_id": {
-            "anyOf": [{ "type": "string" }, { "type": "null" }],
-            "title": "Parent Id"
-          },
-          "created_at": {
-            "type": "string",
-            "format": "date-time",
-            "title": "Created At"
-          },
-          "updated_at": {
-            "type": "string",
-            "format": "date-time",
-            "title": "Updated At"
-          },
-          "agent_count": {
-            "type": "integer",
-            "title": "Agent Count",
-            "default": 0
-          },
-          "subfolder_count": {
-            "type": "integer",
-            "title": "Subfolder Count",
-            "default": 0
-          },
-          "children": {
-            "items": { "$ref": "#/components/schemas/LibraryFolderTree" },
-            "type": "array",
-            "title": "Children",
-            "default": []
-          }
-        },
-        "type": "object",
-        "required": ["id", "user_id", "name", "created_at", "updated_at"],
-        "title": "LibraryFolderTree",
-        "description": "Folder with nested children for tree view."
-      },
       "Link": {
         "properties": {
           "id": { "type": "string", "title": "Id" },

autogpt_platform/frontend/src/app/globals.css

@@ -180,14 +180,3 @@ body[data-google-picker-open="true"] [data-dialog-content] {
   z-index: 1 !important;
   pointer-events: none !important;
 }
-
-/* CoPilot chat table styling — remove left/right borders, increase padding */
-[data-streamdown="table-wrapper"] table {
-  border-left: none;
-  border-right: none;
-}
-
-[data-streamdown="table-wrapper"] th,
-[data-streamdown="table-wrapper"] td {
-  padding: 0.875rem 1rem; /* py-3.5 px-4 */
-}

autogpt_platform/frontend/src/components/contextual/OutputRenderers/renderers/MarkdownRenderer.tsx

@@ -226,7 +226,7 @@ function renderMarkdown(
           table: ({ children, ...props }) => (
             <div className="my-4 overflow-x-auto">
               <table
-                className="min-w-full divide-y divide-gray-200 border-y border-gray-200 dark:divide-gray-700 dark:border-gray-700"
+                className="min-w-full divide-y divide-gray-200 rounded-lg border border-gray-200 dark:divide-gray-700 dark:border-gray-700"
                 {...props}
               >
                 {children}
@@ -235,7 +235,7 @@ function renderMarkdown(
           ),
           th: ({ children, ...props }) => (
             <th
-              className="bg-gray-50 px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-gray-700 dark:bg-gray-800 dark:text-gray-300"
+              className="bg-gray-50 px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-700 dark:bg-gray-800 dark:text-gray-300"
               {...props}
             >
               {children}
@@ -243,7 +243,7 @@ function renderMarkdown(
           ),
           td: ({ children, ...props }) => (
             <td
-              className="border-t border-gray-200 px-4 py-3.5 text-sm text-gray-600 dark:border-gray-700 dark:text-gray-400"
+              className="border-t border-gray-200 px-4 py-3 text-sm text-gray-600 dark:border-gray-700 dark:text-gray-400"
               {...props}
             >
               {children}