fix(api): update description and parameter name for listing library folders

- Changed the description of the "include_counts" parameter to "include_relations" to better reflect its purpose.
- Updated the corresponding descriptions in the API documentation to clarify that it includes agent and subfolder relations for counts.

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

@@ -144,6 +144,7 @@ async def test_add_agent_to_library(mocker):
     )
 
     mock_library_agent = mocker.patch("prisma.models.LibraryAgent.prisma")
+    mock_library_agent.return_value.find_first = mocker.AsyncMock(return_value=None)
     mock_library_agent.return_value.find_unique = mocker.AsyncMock(return_value=None)
     mock_library_agent.return_value.create = mocker.AsyncMock(
         return_value=mock_library_agent_data
@@ -178,7 +179,6 @@ async def test_add_agent_to_library(mocker):
                 "agentGraphVersion": 1,
             }
         },
-        include={"AgentGraph": True},
     )
     # Check that create was called with the expected data including settings
     create_call_args = mock_library_agent.return_value.create.call_args

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

@@ -0,0 +1,10 @@
+class FolderValidationError(Exception):
+    """Raised when folder operations fail validation."""
+
+    pass
+
+
+class FolderAlreadyExistsError(FolderValidationError):
+    """Raised when a folder with the same name already exists in the location."""
+
+    pass

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

@@ -26,6 +26,95 @@ 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."""
 
@@ -120,6 +209,9 @@ 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
@@ -259,6 +351,8 @@ class LibraryAgent(pydantic.BaseModel):
             can_access_graph=can_access_graph,
             is_latest_version=is_latest_version,
             is_favorite=agent.isFavorite,
+            folder_id=agent.folderId,
+            folder_name=agent.Folder.name if agent.Folder else None,
             recommended_schedule_cron=agent.AgentGraph.recommendedScheduleCron,
             settings=_parse_settings(agent.settings),
             marketplace_listing=marketplace_listing_data,
@@ -470,3 +564,7 @@ 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 (None to move to root)",
+    )

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

@@ -1,9 +1,11 @@
 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,6 +41,14 @@ 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).
@@ -51,6 +59,8 @@ async def list_library_agents(
         sort_by=sort_by,
         page=page,
         page_size=page_size,
+        folder_id=folder_id,
+        include_root_only=include_root_only,
     )
 
 
@@ -168,6 +178,7 @@ async def update_library_agent(
         is_favorite=payload.is_favorite,
         is_archived=payload.is_archived,
         settings=payload.settings,
+        folder_id=payload.folder_id,
     )
 
 

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

@@ -0,0 +1,287 @@
+from typing import Optional
+
+import autogpt_libs.auth as autogpt_auth_lib
+from fastapi import APIRouter, Query, Security, status
+from fastapi.responses import Response
+
+from .. import db as library_db
+from .. import model as library_model
+
+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_relations: bool = Query(
+        True,
+        description="Include agent and subfolder relations (for 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_relations: Whether to include agent and subfolder relations for counts.
+
+    Returns:
+        A FolderListResponse containing folders.
+    """
+    folders = await library_db.list_folders(
+        user_id=user_id,
+        parent_id=parent_id,
+        include_relations=include_relations,
+    )
+    return library_model.FolderListResponse(
+        folders=folders,
+        pagination=library_model.Pagination(
+            total_items=len(folders),
+            total_pages=1,
+            current_page=1,
+            page_size=len(folders),
+        ),
+    )
+
+
+@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.
+    """
+    tree = await library_db.get_folder_tree(user_id=user_id)
+    return library_model.FolderTreeResponse(tree=tree)
+
+
+@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.
+    """
+    return await library_db.get_folder(folder_id=folder_id, user_id=user_id)
+
+
+@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.
+    """
+    return await library_db.create_folder(
+        user_id=user_id,
+        name=payload.name,
+        parent_id=payload.parent_id,
+        icon=payload.icon,
+        color=payload.color,
+    )
+
+
+@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.
+    """
+    return await library_db.update_folder(
+        folder_id=folder_id,
+        user_id=user_id,
+        name=payload.name,
+        icon=payload.icon,
+        color=payload.color,
+    )
+
+
+@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)"},
+        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.
+    """
+    return await library_db.move_folder(
+        folder_id=folder_id,
+        user_id=user_id,
+        target_parent_id=payload.target_parent_id,
+    )
+
+
+@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.
+    """
+    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)
+
+
+# === 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.
+    """
+    return await library_db.bulk_move_agents_to_folder(
+        agent_ids=payload.agent_ids,
+        folder_id=payload.folder_id,
+        user_id=user_id,
+    )

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

@@ -115,6 +115,8 @@ async def test_get_library_agents_success(
         sort_by=library_model.LibraryAgentSort.UPDATED_AT,
         page=1,
         page_size=15,
+        folder_id=None,
+        include_root_only=False,
     )
 
 

autogpt_platform/backend/backend/api/rest_api.py

@@ -41,6 +41,10 @@ import backend.data.user
 import backend.integrations.webhooks.utils
 import backend.util.service
 import backend.util.settings
+from backend.api.features.library.exceptions import (
+    FolderAlreadyExistsError,
+    FolderValidationError,
+)
 from backend.blocks.llm import DEFAULT_LLM_MODEL
 from backend.copilot.completion_consumer import (
     start_completion_consumer,
@@ -277,6 +281,10 @@ async def validation_error_handler(
 
 
 app.add_exception_handler(PrismaError, handle_internal_http_error(500))
+app.add_exception_handler(
+    FolderAlreadyExistsError, handle_internal_http_error(409, False)
+)
+app.add_exception_handler(FolderValidationError, handle_internal_http_error(400, False))
 app.add_exception_handler(NotFoundError, handle_internal_http_error(404, False))
 app.add_exception_handler(NotAuthorizedError, handle_internal_http_error(403, False))
 app.add_exception_handler(RequestValidationError, validation_error_handler)

autogpt_platform/backend/backend/copilot/sdk/response_adapter.py

@@ -53,7 +53,6 @@ class SDKResponseAdapter:
         self.has_started_text = False
         self.has_ended_text = False
         self.current_tool_calls: dict[str, dict[str, str]] = {}
-        self.resolved_tool_calls: set[str] = set()
         self.task_id: str | None = None
         self.step_open = False
 
@@ -75,10 +74,6 @@ class SDKResponseAdapter:
                 self.step_open = True
 
         elif isinstance(sdk_message, AssistantMessage):
-            # Flush any SDK built-in tool calls that didn't get a UserMessage
-            # result (e.g. WebSearch, Read handled internally by the CLI).
-            self._flush_unresolved_tool_calls(responses)
-
             # After tool results, the SDK sends a new AssistantMessage for the
             # next LLM turn. Open a new step if the previous one was closed.
             if not self.step_open:
@@ -116,8 +111,6 @@ class SDKResponseAdapter:
             # UserMessage carries tool results back from tool execution.
             content = sdk_message.content
             blocks = content if isinstance(content, list) else []
-            resolved_in_blocks: set[str] = set()
-
             for block in blocks:
                 if isinstance(block, ToolResultBlock) and block.tool_use_id:
                     tool_info = self.current_tool_calls.get(block.tool_use_id, {})
@@ -139,37 +132,6 @@ class SDKResponseAdapter:
                             success=not (block.is_error or False),
                         )
                     )
-                    resolved_in_blocks.add(block.tool_use_id)
-
-            # Handle SDK built-in tool results carried via parent_tool_use_id
-            # instead of (or in addition to) ToolResultBlock content.
-            parent_id = sdk_message.parent_tool_use_id
-            if parent_id and parent_id not in resolved_in_blocks:
-                tool_info = self.current_tool_calls.get(parent_id, {})
-                tool_name = tool_info.get("name", "unknown")
-
-                # Try stashed output first (from PostToolUse hook),
-                # then tool_use_result dict, then string content.
-                output = pop_pending_tool_output(tool_name)
-                if not output:
-                    tur = sdk_message.tool_use_result
-                    if tur is not None:
-                        output = _extract_tool_use_result(tur)
-                if not output and isinstance(content, str) and content.strip():
-                    output = content.strip()
-
-                if output:
-                    responses.append(
-                        StreamToolOutputAvailable(
-                            toolCallId=parent_id,
-                            toolName=tool_name,
-                            output=output,
-                            success=True,
-                        )
-                    )
-                    resolved_in_blocks.add(parent_id)
-
-            self.resolved_tool_calls.update(resolved_in_blocks)
 
             # Close the current step after tool results — the next
             # AssistantMessage will open a new step for the continuation.
@@ -178,7 +140,6 @@ class SDKResponseAdapter:
                 self.step_open = False
 
         elif isinstance(sdk_message, ResultMessage):
-            self._flush_unresolved_tool_calls(responses)
             self._end_text_if_open(responses)
             # Close the step before finishing.
             if self.step_open:
@@ -188,7 +149,7 @@ class SDKResponseAdapter:
             if sdk_message.subtype == "success":
                 responses.append(StreamFinish())
             elif sdk_message.subtype in ("error", "error_during_execution"):
-                error_msg = sdk_message.result or "Unknown error"
+                error_msg = getattr(sdk_message, "result", None) or "Unknown error"
                 responses.append(
                     StreamError(errorText=str(error_msg), code="sdk_error")
                 )
@@ -219,59 +180,6 @@ class SDKResponseAdapter:
             responses.append(StreamTextEnd(id=self.text_block_id))
             self.has_ended_text = True
 
-    def _flush_unresolved_tool_calls(self, responses: list[StreamBaseResponse]) -> None:
-        """Emit outputs for tool calls that didn't receive a UserMessage result.
-
-        SDK built-in tools (WebSearch, Read, etc.) may be executed by the CLI
-        internally without surfacing a separate ``UserMessage`` with
-        ``ToolResultBlock`` content.  The ``PostToolUse`` hook stashes their
-        output, which we pop and emit here before the next ``AssistantMessage``
-        starts.
-        """
-        flushed = False
-        for tool_id, tool_info in self.current_tool_calls.items():
-            if tool_id in self.resolved_tool_calls:
-                continue
-            tool_name = tool_info.get("name", "unknown")
-            output = pop_pending_tool_output(tool_name)
-            if output is not None:
-                responses.append(
-                    StreamToolOutputAvailable(
-                        toolCallId=tool_id,
-                        toolName=tool_name,
-                        output=output,
-                        success=True,
-                    )
-                )
-                self.resolved_tool_calls.add(tool_id)
-                flushed = True
-                logger.debug(
-                    f"Flushed pending output for built-in tool {tool_name} "
-                    f"(call {tool_id})"
-                )
-            else:
-                # No output available — emit an empty output so the frontend
-                # transitions the tool from input-available to output-available
-                # (stops the spinner).
-                responses.append(
-                    StreamToolOutputAvailable(
-                        toolCallId=tool_id,
-                        toolName=tool_name,
-                        output="",
-                        success=True,
-                    )
-                )
-                self.resolved_tool_calls.add(tool_id)
-                flushed = True
-                logger.debug(
-                    f"Flushed empty output for unresolved tool {tool_name} "
-                    f"(call {tool_id})"
-                )
-
-        if flushed and self.step_open:
-            responses.append(StreamFinishStep())
-            self.step_open = False
-
 
 def _extract_tool_output(content: str | list[dict[str, str]] | None) -> str:
     """Extract a string output from a ToolResultBlock's content field."""
@@ -291,30 +199,3 @@ def _extract_tool_output(content: str | list[dict[str, str]] | None) -> str:
         return json.dumps(content)
     except (TypeError, ValueError):
         return str(content)
-
-
-def _extract_tool_use_result(result: object) -> str:
-    """Extract a string from a UserMessage's ``tool_use_result`` dict.
-
-    SDK built-in tools may store their result in ``tool_use_result``
-    instead of (or in addition to) ``ToolResultBlock`` content blocks.
-    """
-    if isinstance(result, str):
-        return result
-    if isinstance(result, dict):
-        # Try common result keys
-        for key in ("content", "text", "output", "stdout", "result"):
-            val = result.get(key)
-            if isinstance(val, str) and val:
-                return val
-        # Fall back to JSON serialization of the whole dict
-        try:
-            return json.dumps(result)
-        except (TypeError, ValueError):
-            return str(result)
-    if result is None:
-        return ""
-    try:
-        return json.dumps(result)
-    except (TypeError, ValueError):
-        return str(result)

autogpt_platform/backend/backend/copilot/sdk/security_hooks.py

@@ -16,7 +16,6 @@ from .tool_adapter import (
     DANGEROUS_PATTERNS,
     MCP_TOOL_PREFIX,
     WORKSPACE_SCOPED_TOOLS,
-    stash_pending_tool_output,
 )
 
 logger = logging.getLogger(__name__)
@@ -225,25 +224,10 @@ def create_security_hooks(
             tool_use_id: str | None,
             context: HookContext,
         ) -> SyncHookJSONOutput:
-            """Log successful tool executions and stash SDK built-in tool outputs.
-
-            MCP tools stash their output in ``_execute_tool_sync`` before the
-            SDK can truncate it.  SDK built-in tools (WebSearch, Read, etc.)
-            are executed by the CLI internally — this hook captures their
-            output so the response adapter can forward it to the frontend.
-            """
+            """Log successful tool executions for observability."""
             _ = context
             tool_name = cast(str, input_data.get("tool_name", ""))
             logger.debug(f"[SDK] Tool success: {tool_name}, tool_use_id={tool_use_id}")
-
-            # Stash output for SDK built-in tools so the response adapter can
-            # emit StreamToolOutputAvailable even when the CLI doesn't surface
-            # a separate UserMessage with ToolResultBlock content.
-            if not tool_name.startswith(MCP_TOOL_PREFIX):
-                tool_response = input_data.get("tool_response")
-                if tool_response is not None:
-                    stash_pending_tool_output(tool_name, tool_response)
-
             return cast(SyncHookJSONOutput, {})
 
         async def post_tool_failure_hook(

autogpt_platform/backend/backend/copilot/sdk/service.py

@@ -47,7 +47,6 @@ from .tool_adapter import (
     set_execution_context,
 )
 from .transcript import (
-    cleanup_cli_project_dir,
     download_transcript,
     read_transcript_file,
     upload_transcript,
@@ -87,12 +86,9 @@ _SDK_TOOL_SUPPLEMENT = """
   for shell commands — it runs in a network-isolated sandbox.
 - **Shared workspace**: The SDK Read/Write tools and `bash_exec` share the
   same working directory. Files created by one are readable by the other.
-- **IMPORTANT — File persistence**: Your working directory is **ephemeral** —
-  files are lost between turns. When you create or modify important files
-  (code, configs, outputs), you MUST save them using `write_workspace_file`
-  so they persist. Use `read_workspace_file` and `list_workspace_files` to
-  access files saved in previous turns. If a "Files from previous turns"
-  section is present above, those files are available via `read_workspace_file`.
+  These files are **ephemeral** — they exist only for the current session.
+- **Persistent storage**: Use `write_workspace_file` / `read_workspace_file`
+  for files that should persist across sessions (stored in cloud storage).
 - Long-running tools (create_agent, edit_agent, etc.) are handled
   asynchronously.  You will receive an immediate response; the actual result
   is delivered to the user via a background stream.
@@ -272,28 +268,48 @@ def _make_sdk_cwd(session_id: str) -> str:
 
 
 def _cleanup_sdk_tool_results(cwd: str) -> None:
-    """Remove SDK session artifacts for a specific working directory.
+    """Remove SDK tool-result files for a specific session working directory.
 
-    Cleans up:
-    - ``~/.claude/projects/<encoded-cwd>/`` — CLI session transcripts and
-      tool-result files.  Each SDK turn uses a unique cwd, so this directory
-      is safe to remove entirely.
-    - ``/tmp/copilot-<session>/`` — the ephemeral working directory.
+    The SDK creates tool-result files under ~/.claude/projects/<encoded-cwd>/tool-results/.
+    We clean only the specific cwd's results to avoid race conditions between
+    concurrent sessions.
 
-    Security: *cwd* MUST be created by ``_make_sdk_cwd()`` which sanitizes
-    the session_id.
+    Security: cwd MUST be created by _make_sdk_cwd() which sanitizes session_id.
     """
     import shutil
 
+    # Validate cwd is under the expected prefix
     normalized = os.path.normpath(cwd)
     if not normalized.startswith(_SDK_CWD_PREFIX):
         logger.warning(f"[SDK] Rejecting cleanup for path outside workspace: {cwd}")
         return
 
-    # Clean the CLI's project directory (transcripts + tool-results).
-    cleanup_cli_project_dir(cwd)
+    # SDK encodes the cwd path by replacing '/' with '-'
+    encoded_cwd = normalized.replace("/", "-")
 
-    # Clean up the temp cwd directory itself.
+    # Construct the project directory path (known-safe home expansion)
+    claude_projects = os.path.expanduser("~/.claude/projects")
+    project_dir = os.path.join(claude_projects, encoded_cwd)
+
+    # Security check 3: Validate project_dir is under ~/.claude/projects
+    project_dir = os.path.normpath(project_dir)
+    if not project_dir.startswith(claude_projects):
+        logger.warning(
+            f"[SDK] Rejecting cleanup for escaped project path: {project_dir}"
+        )
+        return
+
+    results_dir = os.path.join(project_dir, "tool-results")
+    if os.path.isdir(results_dir):
+        for filename in os.listdir(results_dir):
+            file_path = os.path.join(results_dir, filename)
+            try:
+                if os.path.isfile(file_path):
+                    os.remove(file_path)
+            except OSError:
+                pass
+
+    # Also clean up the temp cwd directory itself
     try:
         shutil.rmtree(normalized, ignore_errors=True)
     except OSError:
@@ -503,7 +519,6 @@ async def stream_chat_completion_sdk(
             def _on_stop(transcript_path: str, sdk_session_id: str) -> None:
                 captured_transcript.path = transcript_path
                 captured_transcript.sdk_session_id = sdk_session_id
-                logger.debug(f"[SDK] Stop hook: path={transcript_path!r}")
 
             security_hooks = create_security_hooks(
                 user_id,
@@ -515,20 +530,18 @@ async def stream_chat_completion_sdk(
             # --- Resume strategy: download transcript from bucket ---
             resume_file: str | None = None
             use_resume = False
-            transcript_msg_count = 0  # watermark: session.messages length at upload
 
             if config.claude_agent_use_resume and user_id and len(session.messages) > 1:
-                dl = await download_transcript(user_id, session_id)
-                if dl and validate_transcript(dl.content):
+                transcript_content = await download_transcript(user_id, session_id)
+                if transcript_content and validate_transcript(transcript_content):
                     resume_file = write_transcript_to_tempfile(
-                        dl.content, session_id, sdk_cwd
+                        transcript_content, session_id, sdk_cwd
                     )
                     if resume_file:
                         use_resume = True
-                        transcript_msg_count = dl.message_count
-                        logger.debug(
-                            f"[SDK] Using --resume ({len(dl.content)}B, "
-                            f"msg_count={transcript_msg_count})"
+                        logger.info(
+                            f"[SDK] Using --resume with transcript "
+                            f"({len(transcript_content)} bytes)"
                         )
 
             sdk_options_kwargs: dict[str, Any] = {
@@ -569,35 +582,11 @@ async def stream_chat_completion_sdk(
                 # Build query: with --resume the CLI already has full
                 # context, so we only send the new message.  Without
                 # resume, compress history into a context prefix.
-                #
-                # Hybrid mode: if the transcript is stale (upload missed
-                # some turns), compress only the gap and prepend it so
-                # the agent has transcript context + missed turns.
                 query_message = current_message
-                current_msg_count = len(session.messages)
-
-                if use_resume and transcript_msg_count >= 0:
-                    # Transcript covers messages[0..M-1].  Current session
-                    # has N messages (last one is the new user msg).
-                    # Gap = messages[M .. N-2] (everything between upload
-                    # and the current turn).
-                    if transcript_msg_count < current_msg_count - 1:
-                        gap = session.messages[transcript_msg_count:-1]
-                        gap_context = _format_conversation_context(gap)
-                        if gap_context:
-                            logger.info(
-                                f"[SDK] Transcript stale: covers {transcript_msg_count} "
-                                f"of {current_msg_count} messages, compressing "
-                                f"{len(gap)} missed messages"
-                            )
-                            query_message = (
-                                f"{gap_context}\n\n"
-                                f"Now, the user says:\n{current_message}"
-                            )
-                elif not use_resume and current_msg_count > 1:
+                if not use_resume and len(session.messages) > 1:
                     logger.warning(
                         f"[SDK] Using compression fallback for session "
-                        f"{session_id} ({current_msg_count} messages) — "
+                        f"{session_id} ({len(session.messages)} messages) — "
                         f"no transcript available for --resume"
                     )
                     compressed = await _compress_conversation_history(session)
@@ -608,10 +597,10 @@ async def stream_chat_completion_sdk(
                             f"Now, the user says:\n{current_message}"
                         )
 
-                logger.debug(
-                    f"[SDK] Sending query ({len(session.messages)} msgs, "
-                    f"resume={use_resume})"
+                logger.info(
+                    f"[SDK] Sending query ({len(session.messages)} msgs in session)"
                 )
+                logger.debug(f"[SDK] Query preview: {current_message[:80]!r}")
                 await client.query(query_message, session_id=session_id)
 
                 assistant_response = ChatMessage(role="assistant", content="")
@@ -692,33 +681,29 @@ async def stream_chat_completion_sdk(
                 ) and not has_appended_assistant:
                     session.messages.append(assistant_response)
 
-            # --- Upload transcript for next-turn --resume ---
-            # After async with the SDK task group has exited, so the Stop
-            # hook has already fired and the CLI has been SIGTERMed.  The
-            # CLI uses appendFileSync, so all writes are safely on disk.
-            if config.claude_agent_use_resume and user_id:
-                # With --resume the CLI appends to the resume file (most
-                # complete).  Otherwise use the Stop hook path.
-                if use_resume and resume_file:
-                    raw_transcript = read_transcript_file(resume_file)
-                elif captured_transcript.path:
+                # --- Capture transcript while CLI is still alive ---
+                # Must happen INSIDE async with: close() sends SIGTERM
+                # which kills the CLI before it can flush the JSONL.
+                if (
+                    config.claude_agent_use_resume
+                    and user_id
+                    and captured_transcript.available
+                ):
+                    # Give CLI time to flush JSONL writes before we read
+                    await asyncio.sleep(0.5)
                     raw_transcript = read_transcript_file(captured_transcript.path)
-                else:
-                    raw_transcript = None
-
-                if raw_transcript:
-                    # Shield the upload from generator cancellation so a
-                    # client disconnect / page refresh doesn't lose the
-                    # transcript.  The upload must finish even if the SSE
-                    # connection is torn down.
-                    await asyncio.shield(
-                        _try_upload_transcript(
-                            user_id,
-                            session_id,
-                            raw_transcript,
-                            message_count=len(session.messages),
-                        )
-                    )
+                    if raw_transcript:
+                        try:
+                            async with asyncio.timeout(30):
+                                await _upload_transcript_bg(
+                                    user_id, session_id, raw_transcript
+                                )
+                        except asyncio.TimeoutError:
+                            logger.warning(
+                                f"[SDK] Transcript upload timed out for {session_id}"
+                            )
+                    else:
+                        logger.debug("[SDK] Stop hook fired but transcript not usable")
 
         except ImportError:
             raise RuntimeError(
@@ -727,7 +712,7 @@ async def stream_chat_completion_sdk(
                 "to use the OpenAI-compatible fallback."
             )
 
-        await asyncio.shield(upsert_chat_session(session))
+        await upsert_chat_session(session)
         logger.debug(
             f"[SDK] Session {session_id} saved with {len(session.messages)} messages"
         )
@@ -737,7 +722,7 @@ async def stream_chat_completion_sdk(
     except Exception as e:
         logger.error(f"[SDK] Error: {e}", exc_info=True)
         try:
-            await asyncio.shield(upsert_chat_session(session))
+            await upsert_chat_session(session)
         except Exception as save_err:
             logger.error(f"[SDK] Failed to save session on error: {save_err}")
         yield StreamError(
@@ -750,31 +735,14 @@ async def stream_chat_completion_sdk(
             _cleanup_sdk_tool_results(sdk_cwd)
 
 
-async def _try_upload_transcript(
-    user_id: str,
-    session_id: str,
-    raw_content: str,
-    message_count: int = 0,
-) -> bool:
-    """Strip progress entries and upload transcript (with timeout).
-
-    Returns True if the upload completed without error.
-    """
+async def _upload_transcript_bg(
+    user_id: str, session_id: str, raw_content: str
+) -> None:
+    """Background task to strip progress entries and upload transcript."""
     try:
-        async with asyncio.timeout(30):
-            await upload_transcript(
-                user_id, session_id, raw_content, message_count=message_count
-            )
-        return True
-    except asyncio.TimeoutError:
-        logger.warning(f"[SDK] Transcript upload timed out for {session_id}")
-        return False
+        await upload_transcript(user_id, session_id, raw_content)
     except Exception as e:
-        logger.error(
-            f"[SDK] Failed to upload transcript for {session_id}: {e}",
-            exc_info=True,
-        )
-        return False
+        logger.error(f"[SDK] Failed to upload transcript for {session_id}: {e}")
 
 
 async def _update_title_async(

autogpt_platform/backend/backend/copilot/sdk/tool_adapter.py

@@ -41,7 +41,7 @@ _current_session: ContextVar[ChatSession | None] = ContextVar(
 # Stash for MCP tool outputs before the SDK potentially truncates them.
 # Keyed by tool_name → full output string. Consumed (popped) by the
 # response adapter when it builds StreamToolOutputAvailable.
-_pending_tool_outputs: ContextVar[dict[str, list[str]]] = ContextVar(
+_pending_tool_outputs: ContextVar[dict[str, str]] = ContextVar(
     "pending_tool_outputs", default=None  # type: ignore[arg-type]
 )
 
@@ -88,52 +88,19 @@ def get_execution_context() -> tuple[str | None, ChatSession | None]:
 
 
 def pop_pending_tool_output(tool_name: str) -> str | None:
-    """Pop and return the oldest stashed output for *tool_name*.
+    """Pop and return the stashed full output for *tool_name*.
 
     The SDK CLI may truncate large tool results (writing them to disk and
     replacing the content with a file reference). This stash keeps the
     original MCP output so the response adapter can forward it to the
     frontend for proper widget rendering.
 
-    Uses a FIFO queue per tool name so duplicate calls to the same tool
-    in one turn each get their own output.
-
     Returns ``None`` if nothing was stashed for *tool_name*.
     """
     pending = _pending_tool_outputs.get(None)
     if pending is None:
         return None
-    queue = pending.get(tool_name)
-    if not queue:
-        pending.pop(tool_name, None)
-        return None
-    value = queue.pop(0)
-    if not queue:
-        del pending[tool_name]
-    return value
-
-
-def stash_pending_tool_output(tool_name: str, output: Any) -> None:
-    """Stash tool output for later retrieval by the response adapter.
-
-    Used by the PostToolUse hook to capture SDK built-in tool outputs
-    (WebSearch, Read, etc.) that aren't available through the MCP stash
-    mechanism in ``_execute_tool_sync``.
-
-    Appends to a FIFO queue per tool name so multiple calls to the same
-    tool in one turn are all preserved.
-    """
-    pending = _pending_tool_outputs.get(None)
-    if pending is None:
-        return
-    if isinstance(output, str):
-        text = output
-    else:
-        try:
-            text = json.dumps(output)
-        except (TypeError, ValueError):
-            text = str(output)
-    pending.setdefault(tool_name, []).append(text)
+    return pending.pop(tool_name, None)
 
 
 async def _execute_tool_sync(
@@ -158,63 +125,14 @@ async def _execute_tool_sync(
     # Stash the full output before the SDK potentially truncates it.
     pending = _pending_tool_outputs.get(None)
     if pending is not None:
-        pending.setdefault(base_tool.name, []).append(text)
-
-    content_blocks: list[dict[str, str]] = [{"type": "text", "text": text}]
-
-    # If the tool result contains inline image data, add an MCP image block
-    # so Claude can "see" the image (e.g. read_workspace_file on a small PNG).
-    image_block = _extract_image_block(text)
-    if image_block:
-        content_blocks.append(image_block)
+        pending[base_tool.name] = text
 
     return {
-        "content": content_blocks,
+        "content": [{"type": "text", "text": text}],
         "isError": not result.success,
     }
 
 
-# MIME types that Claude can process as image content blocks.
-_SUPPORTED_IMAGE_TYPES = frozenset(
-    {"image/png", "image/jpeg", "image/gif", "image/webp"}
-)
-
-
-def _extract_image_block(text: str) -> dict[str, str] | None:
-    """Extract an MCP image content block from a tool result JSON string.
-
-    Detects workspace file responses with ``content_base64`` and an image
-    MIME type, returning an MCP-format image block that allows Claude to
-    "see" the image.  Returns ``None`` if the result is not an inline image.
-    """
-    try:
-        data = json.loads(text)
-    except (json.JSONDecodeError, TypeError):
-        return None
-
-    if not isinstance(data, dict):
-        return None
-
-    mime_type = data.get("mime_type", "")
-    base64_content = data.get("content_base64", "")
-
-    # Only inline small images — large ones would exceed Claude's limits.
-    # 32 KB raw ≈ ~43 KB base64.
-    _MAX_IMAGE_BASE64_BYTES = 43_000
-    if (
-        mime_type in _SUPPORTED_IMAGE_TYPES
-        and base64_content
-        and len(base64_content) <= _MAX_IMAGE_BASE64_BYTES
-    ):
-        return {
-            "type": "image",
-            "data": base64_content,
-            "mimeType": mime_type,
-        }
-
-    return None
-
-
 def _mcp_error(message: str) -> dict[str, Any]:
     return {
         "content": [
@@ -393,29 +311,14 @@ def create_copilot_mcp_server():
 # which provides kernel-level network isolation via unshare --net.
 # Task allows spawning sub-agents (rate-limited by security hooks).
 # WebSearch uses Brave Search via Anthropic's API — safe, no SSRF risk.
-# TodoWrite manages the task checklist shown in the UI — no security concern.
-_SDK_BUILTIN_TOOLS = [
-    "Read",
-    "Write",
-    "Edit",
-    "Glob",
-    "Grep",
-    "Task",
-    "WebSearch",
-    "TodoWrite",
-]
+_SDK_BUILTIN_TOOLS = ["Read", "Write", "Edit", "Glob", "Grep", "Task", "WebSearch"]
 
 # SDK built-in tools that must be explicitly blocked.
 # Bash: dangerous — agent uses mcp__copilot__bash_exec with kernel-level
 #   network isolation (unshare --net) instead.
 # WebFetch: SSRF risk — can reach internal network (localhost, 10.x, etc.).
 #   Agent uses the SSRF-protected mcp__copilot__web_fetch tool instead.
-# AskUserQuestion: interactive CLI tool — no terminal in copilot context.
-SDK_DISALLOWED_TOOLS = [
-    "Bash",
-    "WebFetch",
-    "AskUserQuestion",
-]
+SDK_DISALLOWED_TOOLS = ["Bash", "WebFetch"]
 
 # Tools that are blocked entirely in security hooks (defence-in-depth).
 # Includes SDK_DISALLOWED_TOOLS plus common aliases/synonyms.

autogpt_platform/backend/backend/copilot/sdk/transcript.py

@@ -14,8 +14,6 @@ import json
 import logging
 import os
 import re
-import time
-from dataclasses import dataclass
 
 logger = logging.getLogger(__name__)
 
@@ -33,16 +31,6 @@ STRIPPABLE_TYPES = frozenset(
     {"progress", "file-history-snapshot", "queue-operation", "summary", "pr-link"}
 )
 
-
-@dataclass
-class TranscriptDownload:
-    """Result of downloading a transcript with its metadata."""
-
-    content: str
-    message_count: int = 0  # session.messages length when uploaded
-    uploaded_at: float = 0.0  # epoch timestamp of upload
-
-
 # Workspace storage constants — deterministic path from session_id.
 TRANSCRIPT_STORAGE_PREFIX = "chat-transcripts"
 
@@ -131,19 +119,23 @@ def read_transcript_file(transcript_path: str) -> str | None:
             content = f.read()
 
         if not content.strip():
+            logger.debug(f"[Transcript] Empty file: {transcript_path}")
             return None
 
         lines = content.strip().split("\n")
         if len(lines) < 3:
             # Raw files with ≤2 lines are metadata-only
             # (queue-operation + file-history-snapshot, no conversation).
+            logger.debug(
+                f"[Transcript] Too few lines ({len(lines)}): {transcript_path}"
+            )
             return None
 
         # Quick structural validation — parse first and last lines.
         json.loads(lines[0])
         json.loads(lines[-1])
 
-        logger.debug(
+        logger.info(
             f"[Transcript] Read {len(lines)} lines, "
             f"{len(content)} bytes from {transcript_path}"
         )
@@ -168,41 +160,6 @@ def _sanitize_id(raw_id: str, max_len: int = 36) -> str:
 _SAFE_CWD_PREFIX = os.path.realpath("/tmp/copilot-")
 
 
-def _encode_cwd_for_cli(cwd: str) -> str:
-    """Encode a working directory path the same way the Claude CLI does.
-
-    The CLI replaces all non-alphanumeric characters with ``-``.
-    """
-    return re.sub(r"[^a-zA-Z0-9]", "-", os.path.realpath(cwd))
-
-
-def cleanup_cli_project_dir(sdk_cwd: str) -> None:
-    """Remove the CLI's project directory for a specific working directory.
-
-    The CLI stores session data under ``~/.claude/projects/<encoded_cwd>/``.
-    Each SDK turn uses a unique ``sdk_cwd``, so the project directory is
-    safe to remove entirely after the transcript has been uploaded.
-    """
-    import shutil
-
-    cwd_encoded = _encode_cwd_for_cli(sdk_cwd)
-    config_dir = os.environ.get("CLAUDE_CONFIG_DIR") or os.path.expanduser("~/.claude")
-    projects_base = os.path.realpath(os.path.join(config_dir, "projects"))
-    project_dir = os.path.realpath(os.path.join(projects_base, cwd_encoded))
-
-    if not project_dir.startswith(projects_base + os.sep):
-        logger.warning(
-            f"[Transcript] Cleanup path escaped projects base: {project_dir}"
-        )
-        return
-
-    if os.path.isdir(project_dir):
-        shutil.rmtree(project_dir, ignore_errors=True)
-        logger.debug(f"[Transcript] Cleaned up CLI project dir: {project_dir}")
-    else:
-        logger.debug(f"[Transcript] Project dir not found: {project_dir}")
-
-
 def write_transcript_to_tempfile(
     transcript_content: str,
     session_id: str,
@@ -234,7 +191,7 @@ def write_transcript_to_tempfile(
         with open(jsonl_path, "w") as f:
             f.write(transcript_content)
 
-        logger.debug(f"[Transcript] Wrote resume file: {jsonl_path}")
+        logger.info(f"[Transcript] Wrote resume file: {jsonl_path}")
         return jsonl_path
 
     except OSError as e:
@@ -291,15 +248,6 @@ def _storage_path_parts(user_id: str, session_id: str) -> tuple[str, str, str]:
     )
 
 
-def _meta_storage_path_parts(user_id: str, session_id: str) -> tuple[str, str, str]:
-    """Return (workspace_id, file_id, filename) for a session's transcript metadata."""
-    return (
-        TRANSCRIPT_STORAGE_PREFIX,
-        _sanitize_id(user_id),
-        f"{_sanitize_id(session_id)}.meta.json",
-    )
-
-
 def _build_storage_path(user_id: str, session_id: str, backend: object) -> str:
     """Build the full storage path string that ``retrieve()`` expects.
 
@@ -320,30 +268,21 @@ def _build_storage_path(user_id: str, session_id: str, backend: object) -> str:
         return f"local://{wid}/{fid}/{fname}"
 
 
-async def upload_transcript(
-    user_id: str,
-    session_id: str,
-    content: str,
-    message_count: int = 0,
-) -> None:
+async def upload_transcript(user_id: str, session_id: str, content: str) -> None:
     """Strip progress entries and upload transcript to bucket storage.
 
     Safety: only overwrites when the new (stripped) transcript is larger than
     what is already stored.  Since JSONL is append-only, the latest transcript
     is always the longest.  This prevents a slow/stale background task from
     clobbering a newer upload from a concurrent turn.
-
-    Args:
-        message_count: ``len(session.messages)`` at upload time — used by
-            the next turn to detect staleness and compress only the gap.
     """
     from backend.util.workspace_storage import get_workspace_storage
 
     stripped = strip_progress_entries(content)
     if not validate_transcript(stripped):
         logger.warning(
-            f"[Transcript] Skipping upload — stripped content not valid "
-            f"for session {session_id}"
+            f"[Transcript] Skipping upload — stripped content is not a valid "
+            f"transcript for session {session_id}"
         )
         return
 
@@ -357,9 +296,10 @@ async def upload_transcript(
     try:
         existing = await storage.retrieve(path)
         if len(existing) >= new_size:
-            logger.debug(
-                f"[Transcript] Skipping upload — existing ({len(existing)}B) "
-                f">= new ({new_size}B) for session {session_id}"
+            logger.info(
+                f"[Transcript] Skipping upload — existing transcript "
+                f"({len(existing)}B) >= new ({new_size}B) for session "
+                f"{session_id}"
             )
             return
     except (FileNotFoundError, Exception):
@@ -371,38 +311,16 @@ async def upload_transcript(
         filename=fname,
         content=encoded,
     )
-
-    # Store metadata alongside the transcript so the next turn can detect
-    # staleness and only compress the gap instead of the full history.
-    # Wrapped in try/except so a metadata write failure doesn't orphan
-    # the already-uploaded transcript — the next turn will just fall back
-    # to full gap fill (msg_count=0).
-    try:
-        meta = {"message_count": message_count, "uploaded_at": time.time()}
-        mwid, mfid, mfname = _meta_storage_path_parts(user_id, session_id)
-        await storage.store(
-            workspace_id=mwid,
-            file_id=mfid,
-            filename=mfname,
-            content=json.dumps(meta).encode("utf-8"),
-        )
-    except Exception as e:
-        logger.warning(f"[Transcript] Failed to write metadata for {session_id}: {e}")
-
     logger.info(
-        f"[Transcript] Uploaded {new_size}B "
-        f"(stripped from {len(content)}B, msg_count={message_count}) "
-        f"for session {session_id}"
+        f"[Transcript] Uploaded {new_size} bytes "
+        f"(stripped from {len(content)}) for session {session_id}"
     )
 
 
-async def download_transcript(
-    user_id: str, session_id: str
-) -> TranscriptDownload | None:
-    """Download transcript and metadata from bucket storage.
+async def download_transcript(user_id: str, session_id: str) -> str | None:
+    """Download transcript from bucket storage.
 
-    Returns a ``TranscriptDownload`` with the JSONL content and the
-    ``message_count`` watermark from the upload, or ``None`` if not found.
+    Returns the JSONL content string, or ``None`` if not found.
     """
     from backend.util.workspace_storage import get_workspace_storage
 
@@ -412,6 +330,10 @@ async def download_transcript(
     try:
         data = await storage.retrieve(path)
         content = data.decode("utf-8")
+        logger.info(
+            f"[Transcript] Downloaded {len(content)} bytes for session {session_id}"
+        )
+        return content
     except FileNotFoundError:
         logger.debug(f"[Transcript] No transcript in storage for {session_id}")
         return None
@@ -419,36 +341,6 @@ async def download_transcript(
         logger.warning(f"[Transcript] Failed to download transcript: {e}")
         return None
 
-    # Try to load metadata (best-effort — old transcripts won't have it)
-    message_count = 0
-    uploaded_at = 0.0
-    try:
-        from backend.util.workspace_storage import GCSWorkspaceStorage
-
-        mwid, mfid, mfname = _meta_storage_path_parts(user_id, session_id)
-        if isinstance(storage, GCSWorkspaceStorage):
-            blob = f"workspaces/{mwid}/{mfid}/{mfname}"
-            meta_path = f"gcs://{storage.bucket_name}/{blob}"
-        else:
-            meta_path = f"local://{mwid}/{mfid}/{mfname}"
-
-        meta_data = await storage.retrieve(meta_path)
-        meta = json.loads(meta_data.decode("utf-8"))
-        message_count = meta.get("message_count", 0)
-        uploaded_at = meta.get("uploaded_at", 0.0)
-    except (FileNotFoundError, json.JSONDecodeError, Exception):
-        pass  # No metadata — treat as unknown (msg_count=0 → always fill gap)
-
-    logger.debug(
-        f"[Transcript] Downloaded {len(content)}B "
-        f"(msg_count={message_count}) for session {session_id}"
-    )
-    return TranscriptDownload(
-        content=content,
-        message_count=message_count,
-        uploaded_at=uploaded_at,
-    )
-
 
 async def delete_transcript(user_id: str, session_id: str) -> None:
     """Delete transcript from bucket storage (e.g. after resume failure)."""

autogpt_platform/backend/backend/copilot/service.py

@@ -387,7 +387,7 @@ async def stream_chat_completion(
     if user_id:
         log_meta["user_id"] = user_id
 
-    logger.debug(
+    logger.info(
         f"[TIMING] stream_chat_completion STARTED, session={session_id}, user={user_id}, "
         f"message_len={len(message) if message else 0}, is_user={is_user_message}",
         extra={
@@ -404,7 +404,7 @@ async def stream_chat_completion(
         fetch_start = time.monotonic()
         session = await get_chat_session(session_id, user_id)
         fetch_time = (time.monotonic() - fetch_start) * 1000
-        logger.debug(
+        logger.info(
             f"[TIMING] get_chat_session took {fetch_time:.1f}ms, "
             f"n_messages={len(session.messages) if session else 0}",
             extra={
@@ -416,7 +416,7 @@ async def stream_chat_completion(
             },
         )
     else:
-        logger.debug(
+        logger.info(
             f"[TIMING] Using provided session, messages={len(session.messages)}",
             extra={"json_fields": {**log_meta, "n_messages": len(session.messages)}},
         )
@@ -450,7 +450,7 @@ async def stream_chat_completion(
                 message_length=len(message),
             )
             posthog_time = (time.monotonic() - posthog_start) * 1000
-            logger.debug(
+            logger.info(
                 f"[TIMING] track_user_message took {posthog_time:.1f}ms",
                 extra={"json_fields": {**log_meta, "duration_ms": posthog_time}},
             )
@@ -458,7 +458,7 @@ async def stream_chat_completion(
     upsert_start = time.monotonic()
     session = await upsert_chat_session(session)
     upsert_time = (time.monotonic() - upsert_start) * 1000
-    logger.debug(
+    logger.info(
         f"[TIMING] upsert_chat_session took {upsert_time:.1f}ms",
         extra={"json_fields": {**log_meta, "duration_ms": upsert_time}},
     )
@@ -503,7 +503,7 @@ async def stream_chat_completion(
     prompt_start = time.monotonic()
     system_prompt, understanding = await _build_system_prompt(user_id)
     prompt_time = (time.monotonic() - prompt_start) * 1000
-    logger.debug(
+    logger.info(
         f"[TIMING] _build_system_prompt took {prompt_time:.1f}ms",
         extra={"json_fields": {**log_meta, "duration_ms": prompt_time}},
     )
@@ -537,7 +537,7 @@ async def stream_chat_completion(
 
     # Only yield message start for the initial call, not for continuations.
     setup_time = (time.monotonic() - completion_start) * 1000
-    logger.debug(
+    logger.info(
         f"[TIMING] Setup complete, yielding StreamStart at {setup_time:.1f}ms",
         extra={"json_fields": {**log_meta, "setup_time_ms": setup_time}},
     )
@@ -548,7 +548,7 @@ async def stream_chat_completion(
     yield StreamStartStep()
 
     try:
-        logger.debug(
+        logger.info(
             "[TIMING] Calling _stream_chat_chunks",
             extra={"json_fields": log_meta},
         )
@@ -988,7 +988,7 @@ async def _stream_chat_chunks(
     if session.user_id:
         log_meta["user_id"] = session.user_id
 
-    logger.debug(
+    logger.info(
         f"[TIMING] _stream_chat_chunks STARTED, session={session.session_id}, "
         f"user={session.user_id}, n_messages={len(session.messages)}",
         extra={"json_fields": {**log_meta, "n_messages": len(session.messages)}},
@@ -1011,7 +1011,7 @@ async def _stream_chat_chunks(
         base_url=config.base_url,
     )
     context_time = (time_module.perf_counter() - context_start) * 1000
-    logger.debug(
+    logger.info(
         f"[TIMING] _manage_context_window took {context_time:.1f}ms",
         extra={"json_fields": {**log_meta, "duration_ms": context_time}},
     )
@@ -1053,7 +1053,7 @@ async def _stream_chat_chunks(
                 retry_info = (
                     f" (retry {retry_count}/{MAX_RETRIES})" if retry_count > 0 else ""
                 )
-                logger.debug(
+                logger.info(
                     f"[TIMING] Creating OpenAI stream at {elapsed:.1f}ms{retry_info}",
                     extra={
                         "json_fields": {
@@ -1093,7 +1093,7 @@ async def _stream_chat_chunks(
                     extra_body=extra_body,
                 )
                 api_init_time = (time_module.perf_counter() - api_call_start) * 1000
-                logger.debug(
+                logger.info(
                     f"[TIMING] OpenAI stream object returned in {api_init_time:.1f}ms",
                     extra={"json_fields": {**log_meta, "duration_ms": api_init_time}},
                 )
@@ -1142,7 +1142,7 @@ async def _stream_chat_chunks(
                                 ttfc = (
                                     time_module.perf_counter() - api_call_start
                                 ) * 1000
-                                logger.debug(
+                                logger.info(
                                     f"[TIMING] FIRST CONTENT CHUNK at {ttfc:.1f}ms "
                                     f"(since API call), n_chunks={chunk_count}",
                                     extra={
@@ -1210,7 +1210,7 @@ async def _stream_chat_chunks(
                                     )
                                     emitted_start_for_idx.add(idx)
                 stream_duration = time_module.perf_counter() - api_call_start
-                logger.debug(
+                logger.info(
                     f"[TIMING] OpenAI stream COMPLETE, finish_reason={finish_reason}, "
                     f"duration={stream_duration:.2f}s, "
                     f"n_chunks={chunk_count}, n_tool_calls={len(tool_calls)}",
@@ -1244,7 +1244,7 @@ async def _stream_chat_chunks(
                         raise
 
                 total_time = (time_module.perf_counter() - stream_chunks_start) * 1000
-                logger.debug(
+                logger.info(
                     f"[TIMING] _stream_chat_chunks COMPLETED in {total_time / 1000:.1f}s; "
                     f"session={session.session_id}, user={session.user_id}",
                     extra={"json_fields": {**log_meta, "total_time_ms": total_time}},
@@ -1494,8 +1494,8 @@ async def _yield_tool_call(
             # Mark stream registry task as failed if it was created
             try:
                 await stream_registry.mark_task_completed(task_id, status="failed")
-            except Exception as mark_err:
-                logger.warning(f"Failed to mark task {task_id} as failed: {mark_err}")
+            except Exception:
+                pass
             logger.error(
                 f"Failed to setup long-running tool {tool_name}: {e}", exc_info=True
             )

autogpt_platform/backend/backend/copilot/service_test.py

@@ -143,7 +143,7 @@ async def test_sdk_resume_multi_turn(setup_test_user, test_user_id):
         "Transcript was not uploaded to bucket after turn 1 — "
         "Stop hook may not have fired or transcript was too small"
     )
-    logger.info(f"Turn 1 transcript uploaded: {len(transcript.content)} bytes")
+    logger.info(f"Turn 1 transcript uploaded: {len(transcript)} bytes")
 
     # Reload session for turn 2
     session = await get_chat_session(session.session_id, test_user_id)

autogpt_platform/backend/backend/copilot/stream_registry.py

@@ -117,7 +117,7 @@ async def create_task(
     if user_id:
         log_meta["user_id"] = user_id
 
-    logger.debug(
+    logger.info(
         f"[TIMING] create_task STARTED, task={task_id}, session={session_id}, user={user_id}",
         extra={"json_fields": log_meta},
     )
@@ -135,7 +135,7 @@ async def create_task(
     redis_start = time.perf_counter()
     redis = await get_redis_async()
     redis_time = (time.perf_counter() - redis_start) * 1000
-    logger.debug(
+    logger.info(
         f"[TIMING] get_redis_async took {redis_time:.1f}ms",
         extra={"json_fields": {**log_meta, "duration_ms": redis_time}},
     )
@@ -158,7 +158,7 @@ async def create_task(
         },
     )
     hset_time = (time.perf_counter() - hset_start) * 1000
-    logger.debug(
+    logger.info(
         f"[TIMING] redis.hset took {hset_time:.1f}ms",
         extra={"json_fields": {**log_meta, "duration_ms": hset_time}},
     )
@@ -169,7 +169,7 @@ async def create_task(
     await redis.set(op_key, task_id, ex=config.stream_ttl)
 
     total_time = (time.perf_counter() - start_time) * 1000
-    logger.debug(
+    logger.info(
         f"[TIMING] create_task COMPLETED in {total_time:.1f}ms; task={task_id}, session={session_id}",
         extra={"json_fields": {**log_meta, "total_time_ms": total_time}},
     )
@@ -230,7 +230,7 @@ async def publish_chunk(
             in ("StreamStart", "StreamFinish", "StreamTextStart", "StreamTextEnd")
             or total_time > 50
         ):
-            logger.debug(
+            logger.info(
                 f"[TIMING] publish_chunk {chunk_type} in {total_time:.1f}ms (xadd={xadd_time:.1f}ms)",
                 extra={
                     "json_fields": {
@@ -279,7 +279,7 @@ async def subscribe_to_task(
     if user_id:
         log_meta["user_id"] = user_id
 
-    logger.debug(
+    logger.info(
         f"[TIMING] subscribe_to_task STARTED, task={task_id}, user={user_id}, last_msg={last_message_id}",
         extra={"json_fields": {**log_meta, "last_message_id": last_message_id}},
     )
@@ -289,14 +289,14 @@ async def subscribe_to_task(
     meta_key = _get_task_meta_key(task_id)
     meta: dict[Any, Any] = await redis.hgetall(meta_key)  # type: ignore[misc]
     hgetall_time = (time.perf_counter() - redis_start) * 1000
-    logger.debug(
+    logger.info(
         f"[TIMING] Redis hgetall took {hgetall_time:.1f}ms",
         extra={"json_fields": {**log_meta, "duration_ms": hgetall_time}},
     )
 
     if not meta:
         elapsed = (time.perf_counter() - start_time) * 1000
-        logger.debug(
+        logger.info(
             f"[TIMING] Task not found in Redis after {elapsed:.1f}ms",
             extra={
                 "json_fields": {
@@ -335,7 +335,7 @@ async def subscribe_to_task(
     xread_start = time.perf_counter()
     messages = await redis.xread({stream_key: last_message_id}, block=0, count=1000)
     xread_time = (time.perf_counter() - xread_start) * 1000
-    logger.debug(
+    logger.info(
         f"[TIMING] Redis xread (replay) took {xread_time:.1f}ms, status={task_status}",
         extra={
             "json_fields": {
@@ -363,7 +363,7 @@ async def subscribe_to_task(
                     except Exception as e:
                         logger.warning(f"Failed to replay message: {e}")
 
-    logger.debug(
+    logger.info(
         f"[TIMING] Replayed {replayed_count} messages, last_id={replay_last_id}",
         extra={
             "json_fields": {
@@ -376,7 +376,7 @@ async def subscribe_to_task(
 
     # Step 2: If task is still running, start stream listener for live updates
     if task_status == "running":
-        logger.debug(
+        logger.info(
             "[TIMING] Task still running, starting _stream_listener",
             extra={"json_fields": {**log_meta, "task_status": task_status}},
         )
@@ -387,14 +387,14 @@ async def subscribe_to_task(
         _listener_tasks[id(subscriber_queue)] = (task_id, listener_task)
     else:
         # Task is completed/failed - add finish marker
-        logger.debug(
+        logger.info(
             f"[TIMING] Task already {task_status}, adding StreamFinish",
             extra={"json_fields": {**log_meta, "task_status": task_status}},
         )
         await subscriber_queue.put(StreamFinish())
 
     total_time = (time.perf_counter() - start_time) * 1000
-    logger.debug(
+    logger.info(
         f"[TIMING] subscribe_to_task COMPLETED in {total_time:.1f}ms; task={task_id}, "
         f"n_messages_replayed={replayed_count}",
         extra={
@@ -433,7 +433,7 @@ async def _stream_listener(
     if log_meta is None:
         log_meta = {"component": "StreamRegistry", "task_id": task_id}
 
-    logger.debug(
+    logger.info(
         f"[TIMING] _stream_listener STARTED, task={task_id}, last_id={last_replayed_id}",
         extra={"json_fields": {**log_meta, "last_replayed_id": last_replayed_id}},
     )
@@ -462,7 +462,7 @@ async def _stream_listener(
 
             if messages:
                 msg_count = sum(len(msgs) for _, msgs in messages)
-                logger.debug(
+                logger.info(
                     f"[TIMING] xread #{xread_count} returned {msg_count} messages in {xread_time:.1f}ms",
                     extra={
                         "json_fields": {
@@ -475,7 +475,7 @@ async def _stream_listener(
                 )
             elif xread_time > 1000:
                 # Only log timeouts (30s blocking)
-                logger.debug(
+                logger.info(
                     f"[TIMING] xread #{xread_count} timeout after {xread_time:.1f}ms",
                     extra={
                         "json_fields": {
@@ -526,7 +526,7 @@ async def _stream_listener(
                                 if first_message_time is None:
                                     first_message_time = time.perf_counter()
                                     elapsed = (first_message_time - start_time) * 1000
-                                    logger.debug(
+                                    logger.info(
                                         f"[TIMING] FIRST live message at {elapsed:.1f}ms, type={type(chunk).__name__}",
                                         extra={
                                             "json_fields": {
@@ -568,7 +568,7 @@ async def _stream_listener(
                             # Stop listening on finish
                             if isinstance(chunk, StreamFinish):
                                 total_time = (time.perf_counter() - start_time) * 1000
-                                logger.debug(
+                                logger.info(
                                     f"[TIMING] StreamFinish received in {total_time/1000:.1f}s; delivered={messages_delivered}",
                                     extra={
                                         "json_fields": {
@@ -587,7 +587,7 @@ async def _stream_listener(
 
     except asyncio.CancelledError:
         elapsed = (time.perf_counter() - start_time) * 1000
-        logger.debug(
+        logger.info(
             f"[TIMING] _stream_listener CANCELLED after {elapsed:.1f}ms, delivered={messages_delivered}",
             extra={
                 "json_fields": {
@@ -619,7 +619,7 @@ async def _stream_listener(
     finally:
         # Clean up listener task mapping on exit
         total_time = (time.perf_counter() - start_time) * 1000
-        logger.debug(
+        logger.info(
             f"[TIMING] _stream_listener FINISHED in {total_time/1000:.1f}s; task={task_id}, "
             f"delivered={messages_delivered}, xread_count={xread_count}",
             extra={
@@ -829,13 +829,10 @@ async def get_active_task_for_session(
                             )
                             await mark_task_completed(task_id, "failed")
                             continue
-                    except (ValueError, TypeError) as exc:
-                        logger.warning(
-                            f"[TASK_LOOKUP] Failed to parse created_at "
-                            f"for task {task_id[:8]}...: {exc}"
-                        )
+                    except (ValueError, TypeError):
+                        pass
 
-                logger.debug(
+                logger.info(
                     f"[TASK_LOOKUP] Found running task {task_id[:8]}... for session {session_id[:8]}..."
                 )
 

autogpt_platform/backend/backend/copilot/tools/workspace_files.py

@@ -312,18 +312,8 @@ class ReadWorkspaceFileTool(BaseTool):
             is_small_file = file_info.size_bytes <= self.MAX_INLINE_SIZE_BYTES
             is_text_file = self._is_text_mime_type(file_info.mime_type)
 
-            # Return inline content for small text/image files (unless force_download_url)
-            is_image_file = file_info.mime_type in {
-                "image/png",
-                "image/jpeg",
-                "image/gif",
-                "image/webp",
-            }
-            if (
-                is_small_file
-                and (is_text_file or is_image_file)
-                and not force_download_url
-            ):
+            # Return inline content for small text files (unless force_download_url)
+            if is_small_file and is_text_file and not force_download_url:
                 content = await manager.read_file_by_id(target_file_id)
                 content_b64 = base64.b64encode(content).decode("utf-8")
 

autogpt_platform/backend/backend/data/includes.py

@@ -79,6 +79,12 @@ INTEGRATION_WEBHOOK_INCLUDE: prisma.types.IntegrationWebhookInclude = {
 }
 
 
+LIBRARY_FOLDER_INCLUDE: prisma.types.LibraryFolderInclude = {
+    "LibraryAgents": {"where": {"isDeleted": False}},
+    "Children": {"where": {"isDeleted": False}},
+}
+
+
 def library_agent_include(
     user_id: str,
     include_nodes: bool = True,
@@ -105,6 +111,7 @@ 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/service.py

@@ -599,15 +599,6 @@ def get_service_client(
                 if error_response and error_response.type in EXCEPTION_MAPPING:
                     exception_class = EXCEPTION_MAPPING[error_response.type]
                     args = error_response.args or [str(e)]
-
-                    # Prisma DataError subclasses expect a dict `data` arg,
-                    # but RPC serialization only preserves the string message
-                    # from exc.args.  Wrap it in the expected structure so
-                    # the constructor doesn't crash on `.get()`.
-                    if issubclass(exception_class, DataError):
-                        msg = str(args[0]) if args else str(e)
-                        raise exception_class({"user_facing_error": {"message": msg}})
-
                     raise exception_class(*args)
 
                 # Otherwise categorize by HTTP status code

autogpt_platform/backend/backend/util/service_test.py

@@ -6,7 +6,6 @@ from unittest.mock import Mock
 
 import httpx
 import pytest
-from prisma.errors import DataError, UniqueViolationError
 
 from backend.util.service import (
     AppService,
@@ -448,39 +447,6 @@ class TestHTTPErrorRetryBehavior:
 
         assert "Invalid parameter value" in str(exc_info.value)
 
-    def test_prisma_data_error_reconstructed_correctly(self):
-        """Test that DataError subclasses (e.g. UniqueViolationError) are
-        reconstructed without crashing.
-
-        Prisma's DataError.__init__ expects a dict `data` arg with
-        a 'user_facing_error' key.  RPC serialization only preserves the
-        string message via exc.args, so the client must wrap it in the
-        expected dict structure.
-        """
-        for exc_type in [DataError, UniqueViolationError]:
-            mock_response = Mock()
-            mock_response.status_code = 400
-            mock_response.json.return_value = {
-                "type": exc_type.__name__,
-                "args": ["Unique constraint failed on the fields: (`path`)"],
-            }
-            mock_response.raise_for_status.side_effect = httpx.HTTPStatusError(
-                "400 Bad Request", request=Mock(), response=mock_response
-            )
-
-            client = get_service_client(ServiceTestClient)
-
-            with pytest.raises(exc_type) as exc_info:
-                client._handle_call_method_response(  # type: ignore[attr-defined]
-                    response=mock_response, method_name="test_method"
-                )
-
-            # The exception should have the message preserved
-            assert "Unique constraint" in str(exc_info.value)
-            # And should have the expected data structure (not crash)
-            assert hasattr(exc_info.value, "data")
-            assert isinstance(exc_info.value.data, dict)
-
     def test_client_error_status_codes_coverage(self):
         """Test that various 4xx status codes are all wrapped as HTTPClientError."""
         client_error_codes = [400, 401, 403, 404, 405, 409, 422, 429]

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

@@ -0,0 +1,33 @@
+-- AlterTable
+ALTER TABLE "LibraryAgent" ADD COLUMN     "folderId" TEXT;
+
+-- 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 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,6 +51,7 @@ model User {
   ChatSessions         ChatSession[]
   AgentPresets         AgentPreset[]
   LibraryAgents        LibraryAgent[]
+  LibraryFolders       LibraryFolder[]
 
   Profile               Profile[]
   UserOnboarding        UserOnboarding?
@@ -395,6 +396,9 @@ 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)
@@ -407,6 +411,30 @@ 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
 }
 
 ////////////////////////////////////////////////////////////

autogpt_platform/backend/snapshots/lib_agts_search

@@ -38,6 +38,8 @@
       "can_access_graph": true,
       "is_latest_version": true,
       "is_favorite": false,
+      "folder_id": null,
+      "folder_name": null,
       "recommended_schedule_cron": null,
       "settings": {
         "human_in_the_loop_safe_mode": true,
@@ -83,6 +85,8 @@
       "can_access_graph": false,
       "is_latest_version": true,
       "is_favorite": false,
+      "folder_id": null,
+      "folder_name": null,
       "recommended_schedule_cron": null,
       "settings": {
         "human_in_the_loop_safe_mode": true,

autogpt_platform/frontend/package.json

@@ -32,6 +32,7 @@
   "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,6 +18,9 @@ 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))
@@ -1507,6 +1510,14 @@ 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==}
 
@@ -3114,6 +3125,10 @@ 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==}
 
@@ -3376,10 +3391,19 @@ 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'}
@@ -4373,6 +4397,10 @@ 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==}
 
@@ -4990,6 +5018,9 @@ 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'}
@@ -5970,6 +6001,24 @@ 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==}
 
@@ -6588,6 +6637,10 @@ 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}
@@ -7686,6 +7739,10 @@ 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'}
@@ -8163,6 +8220,13 @@ 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'}
@@ -9772,6 +9836,22 @@ 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
@@ -11533,6 +11613,8 @@ snapshots:
 
   '@shikijs/vscode-textmate@10.0.2': {}
 
+  '@sindresorhus/is@4.6.0': {}
+
   '@standard-schema/spec@1.0.0': {}
 
   '@standard-schema/spec@1.1.0': {}
@@ -12001,8 +12083,16 @@ 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
@@ -13094,6 +13184,8 @@ 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: {}
@@ -13737,6 +13829,8 @@ snapshots:
 
   emoji-regex@9.2.2: {}
 
+  emojilib@2.4.0: {}
+
   emojis-list@3.0.0: {}
 
   endent@2.1.0:
@@ -15018,6 +15112,13 @@ 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:
@@ -15886,6 +15987,13 @@ 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
@@ -17186,6 +17294,10 @@ 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):
@@ -17701,6 +17813,10 @@ 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)/copilot/CopilotPage.tsx

@@ -23,7 +23,6 @@ export function CopilotPage() {
     status,
     error,
     stop,
-    isReconnecting,
     createSession,
     onSend,
     isLoadingSession,
@@ -72,7 +71,6 @@ export function CopilotPage() {
             sessionId={sessionId}
             isLoadingSession={isLoadingSession}
             isCreatingSession={isCreatingSession}
-            isReconnecting={isReconnecting}
             onCreateSession={createSession}
             onSend={onSend}
             onStop={stop}

autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatContainer/ChatContainer.tsx

@@ -14,8 +14,6 @@ export interface ChatContainerProps {
   sessionId: string | null;
   isLoadingSession: boolean;
   isCreatingSession: boolean;
-  /** True when backend has an active stream but we haven't reconnected yet. */
-  isReconnecting?: boolean;
   onCreateSession: () => void | Promise<string>;
   onSend: (message: string) => void | Promise<void>;
   onStop: () => void;
@@ -28,13 +26,11 @@ export const ChatContainer = ({
   sessionId,
   isLoadingSession,
   isCreatingSession,
-  isReconnecting,
   onCreateSession,
   onSend,
   onStop,
   headerSlot,
 }: ChatContainerProps) => {
-  const isBusy = status === "streaming" || !!isReconnecting;
   const inputLayoutId = "copilot-2-chat-input";
 
   return (
@@ -60,8 +56,8 @@ export const ChatContainer = ({
                 <ChatInput
                   inputId="chat-input-session"
                   onSend={onSend}
-                  disabled={isBusy}
-                  isStreaming={isBusy}
+                  disabled={status === "streaming"}
+                  isStreaming={status === "streaming"}
                   onStop={onStop}
                   placeholder="What else can I help with?"
                 />

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

@@ -1,713 +1,63 @@
 "use client";
 
-import React from "react";
 import { ToolUIPart } from "ai";
-import {
-  CheckCircleIcon,
-  CircleDashedIcon,
-  CircleIcon,
-  FileIcon,
-  FilesIcon,
-  GearIcon,
-  GlobeIcon,
-  ListChecksIcon,
-  MagnifyingGlassIcon,
-  PencilSimpleIcon,
-  TerminalIcon,
-  TrashIcon,
-  WarningDiamondIcon,
-} from "@phosphor-icons/react";
+import { GearIcon } from "@phosphor-icons/react";
 import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
-import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
-import {
-  ContentCodeBlock,
-  ContentMessage,
-} from "../../components/ToolAccordion/AccordionContent";
-import { OrbitLoader } from "../../components/OrbitLoader/OrbitLoader";
 
 interface Props {
   part: ToolUIPart;
 }
 
-/* ------------------------------------------------------------------ */
-/*  Tool name helpers                                                  */
-/* ------------------------------------------------------------------ */
-
 function extractToolName(part: ToolUIPart): string {
+  // ToolUIPart.type is "tool-{name}", extract the name portion.
   return part.type.replace(/^tool-/, "");
 }
 
 function formatToolName(name: string): string {
+  // "search_docs" → "Search docs", "Read" → "Read"
   return name.replace(/_/g, " ").replace(/^\w/, (c) => c.toUpperCase());
 }
 
-/* ------------------------------------------------------------------ */
-/*  Tool categorization                                                */
-/* ------------------------------------------------------------------ */
-
-type ToolCategory =
-  | "bash"
-  | "web"
-  | "file-read"
-  | "file-write"
-  | "file-delete"
-  | "file-list"
-  | "search"
-  | "edit"
-  | "todo"
-  | "other";
-
-function getToolCategory(toolName: string): ToolCategory {
-  switch (toolName) {
-    case "bash_exec":
-      return "bash";
-    case "web_fetch":
-    case "WebSearch":
-    case "WebFetch":
-      return "web";
-    case "read_workspace_file":
-    case "Read":
-      return "file-read";
-    case "write_workspace_file":
-    case "Write":
-      return "file-write";
-    case "delete_workspace_file":
-      return "file-delete";
-    case "list_workspace_files":
-    case "Glob":
-      return "file-list";
-    case "Grep":
-      return "search";
-    case "Edit":
-      return "edit";
-    case "TodoWrite":
-      return "todo";
-    default:
-      return "other";
-  }
-}
-
-/* ------------------------------------------------------------------ */
-/*  Tool icon                                                          */
-/* ------------------------------------------------------------------ */
-
-function ToolIcon({
-  category,
-  isStreaming,
-  isError,
-}: {
-  category: ToolCategory;
-  isStreaming: boolean;
-  isError: boolean;
-}) {
-  if (isError) {
-    return (
-      <WarningDiamondIcon size={14} weight="regular" className="text-red-500" />
-    );
-  }
-  if (isStreaming) {
-    return <OrbitLoader size={14} />;
-  }
-
-  const iconClass = "text-neutral-400";
-  switch (category) {
-    case "bash":
-      return <TerminalIcon size={14} weight="regular" className={iconClass} />;
-    case "web":
-      return <GlobeIcon size={14} weight="regular" className={iconClass} />;
-    case "file-read":
-      return <FileIcon size={14} weight="regular" className={iconClass} />;
-    case "file-write":
-      return <FileIcon size={14} weight="regular" className={iconClass} />;
-    case "file-delete":
-      return <TrashIcon size={14} weight="regular" className={iconClass} />;
-    case "file-list":
-      return <FilesIcon size={14} weight="regular" className={iconClass} />;
-    case "search":
-      return (
-        <MagnifyingGlassIcon size={14} weight="regular" className={iconClass} />
-      );
-    case "edit":
-      return (
-        <PencilSimpleIcon size={14} weight="regular" className={iconClass} />
-      );
-    case "todo":
-      return (
-        <ListChecksIcon size={14} weight="regular" className={iconClass} />
-      );
-    default:
-      return <GearIcon size={14} weight="regular" className={iconClass} />;
-  }
-}
-
-/* ------------------------------------------------------------------ */
-/*  Accordion icon (larger, for the accordion header)                  */
-/* ------------------------------------------------------------------ */
-
-function AccordionIcon({ category }: { category: ToolCategory }) {
-  switch (category) {
-    case "bash":
-      return <TerminalIcon size={32} weight="light" />;
-    case "web":
-      return <GlobeIcon size={32} weight="light" />;
-    case "file-read":
-    case "file-write":
-      return <FileIcon size={32} weight="light" />;
-    case "file-delete":
-      return <TrashIcon size={32} weight="light" />;
-    case "file-list":
-      return <FilesIcon size={32} weight="light" />;
-    case "search":
-      return <MagnifyingGlassIcon size={32} weight="light" />;
-    case "edit":
-      return <PencilSimpleIcon size={32} weight="light" />;
-    case "todo":
-      return <ListChecksIcon size={32} weight="light" />;
-    default:
-      return <GearIcon size={32} weight="light" />;
-  }
-}
-
-/* ------------------------------------------------------------------ */
-/*  Input extraction                                                   */
-/* ------------------------------------------------------------------ */
-
-function getInputSummary(toolName: string, input: unknown): string | null {
-  if (!input || typeof input !== "object") return null;
-  const inp = input as Record<string, unknown>;
-
-  switch (toolName) {
-    case "bash_exec":
-      return typeof inp.command === "string" ? inp.command : null;
-    case "web_fetch":
-    case "WebFetch":
-      return typeof inp.url === "string" ? inp.url : null;
-    case "WebSearch":
-      return typeof inp.query === "string" ? inp.query : null;
-    case "read_workspace_file":
-    case "Read":
-      return (
-        (typeof inp.file_path === "string" ? inp.file_path : null) ??
-        (typeof inp.path === "string" ? inp.path : null)
-      );
-    case "write_workspace_file":
-    case "Write":
-      return (
-        (typeof inp.file_path === "string" ? inp.file_path : null) ??
-        (typeof inp.path === "string" ? inp.path : null)
-      );
-    case "delete_workspace_file":
-      return typeof inp.file_path === "string" ? inp.file_path : null;
-    case "Glob":
-      return typeof inp.pattern === "string" ? inp.pattern : null;
-    case "Grep":
-      return typeof inp.pattern === "string" ? inp.pattern : null;
-    case "Edit":
-      return typeof inp.file_path === "string" ? inp.file_path : null;
-    case "TodoWrite": {
-      // Extract the in-progress task name for the status line
-      const todos = Array.isArray(inp.todos) ? inp.todos : [];
-      const active = todos.find(
-        (t: Record<string, unknown>) => t.status === "in_progress",
-      );
-      if (active && typeof active.activeForm === "string")
-        return active.activeForm;
-      if (active && typeof active.content === "string") return active.content;
-      return null;
-    }
-    default:
-      return null;
-  }
-}
-
-function truncate(text: string, maxLen: number): string {
-  if (text.length <= maxLen) return text;
-  return text.slice(0, maxLen).trimEnd() + "…";
-}
-
-/* ------------------------------------------------------------------ */
-/*  Animation text                                                     */
-/* ------------------------------------------------------------------ */
-
-function getAnimationText(part: ToolUIPart, category: ToolCategory): string {
-  const toolName = extractToolName(part);
-  const summary = getInputSummary(toolName, part.input);
-  const shortSummary = summary ? truncate(summary, 60) : null;
+function getAnimationText(part: ToolUIPart): string {
+  const label = formatToolName(extractToolName(part));
 
   switch (part.state) {
     case "input-streaming":
-    case "input-available": {
-      switch (category) {
-        case "bash":
-          return shortSummary ? `Running: ${shortSummary}` : "Running command…";
-        case "web":
-          if (toolName === "WebSearch") {
-            return shortSummary
-              ? `Searching "${shortSummary}"`
-              : "Searching the web…";
-          }
-          return shortSummary
-            ? `Fetching ${shortSummary}`
-            : "Fetching web content…";
-        case "file-read":
-          return shortSummary ? `Reading ${shortSummary}` : "Reading file…";
-        case "file-write":
-          return shortSummary ? `Writing ${shortSummary}` : "Writing file…";
-        case "file-delete":
-          return shortSummary ? `Deleting ${shortSummary}` : "Deleting file…";
-        case "file-list":
-          return shortSummary ? `Listing ${shortSummary}` : "Listing files…";
-        case "search":
-          return shortSummary
-            ? `Searching for "${shortSummary}"`
-            : "Searching…";
-        case "edit":
-          return shortSummary ? `Editing ${shortSummary}` : "Editing file…";
-        case "todo":
-          return shortSummary ? `${shortSummary}` : "Updating task list…";
-        default:
-          return `Running ${formatToolName(toolName)}…`;
-      }
-    }
-    case "output-available": {
-      switch (category) {
-        case "bash": {
-          const exitCode = getExitCode(part.output);
-          if (exitCode !== null && exitCode !== 0) {
-            return `Command exited with code ${exitCode}`;
-          }
-          return shortSummary ? `Ran: ${shortSummary}` : "Command completed";
-        }
-        case "web":
-          if (toolName === "WebSearch") {
-            return shortSummary
-              ? `Searched "${shortSummary}"`
-              : "Web search completed";
-          }
-          return shortSummary
-            ? `Fetched ${shortSummary}`
-            : "Fetched web content";
-        case "file-read":
-          return shortSummary ? `Read ${shortSummary}` : "File read completed";
-        case "file-write":
-          return shortSummary ? `Wrote ${shortSummary}` : "File written";
-        case "file-delete":
-          return shortSummary ? `Deleted ${shortSummary}` : "File deleted";
-        case "file-list":
-          return "Listed files";
-        case "search":
-          return shortSummary
-            ? `Searched for "${shortSummary}"`
-            : "Search completed";
-        case "edit":
-          return shortSummary ? `Edited ${shortSummary}` : "Edit completed";
-        case "todo":
-          return "Updated task list";
-        default:
-          return `${formatToolName(toolName)} completed`;
-      }
-    }
-    case "output-error": {
-      switch (category) {
-        case "bash":
-          return "Command failed";
-        case "web":
-          return toolName === "WebSearch" ? "Search failed" : "Fetch failed";
-        default:
-          return `${formatToolName(toolName)} failed`;
-      }
-    }
+    case "input-available":
+      return `Running ${label}…`;
+    case "output-available":
+      return `${label} completed`;
+    case "output-error":
+      return `${label} failed`;
     default:
-      return `Running ${formatToolName(toolName)}…`;
+      return `Running ${label}…`;
   }
 }
 
-/* ------------------------------------------------------------------ */
-/*  Output parsing helpers                                             */
-/* ------------------------------------------------------------------ */
-
-function parseOutput(output: unknown): Record<string, unknown> | null {
-  if (!output) return null;
-  if (typeof output === "object") return output as Record<string, unknown>;
-  if (typeof output === "string") {
-    const trimmed = output.trim();
-    if (!trimmed) return null;
-    try {
-      const parsed = JSON.parse(trimmed);
-      if (
-        typeof parsed === "object" &&
-        parsed !== null &&
-        !Array.isArray(parsed)
-      )
-        return parsed;
-    } catch {
-      // Return as a message wrapper for plain text output
-      return { _raw: trimmed };
-    }
-  }
-  return null;
-}
-
-/**
- * Extract text from MCP-style content blocks.
- * SDK built-in tools (WebSearch, etc.) may return `{content: [{type:"text", text:"..."}]}`.
- */
-function extractMcpText(output: Record<string, unknown>): string | null {
-  if (Array.isArray(output.content)) {
-    const texts = (output.content as Array<Record<string, unknown>>)
-      .filter((b) => b.type === "text" && typeof b.text === "string")
-      .map((b) => b.text as string);
-    if (texts.length > 0) return texts.join("\n");
-  }
-  return null;
-}
-
-function getExitCode(output: unknown): number | null {
-  const parsed = parseOutput(output);
-  if (!parsed) return null;
-  if (typeof parsed.exit_code === "number") return parsed.exit_code;
-  return null;
-}
-
-function getStringField(
-  obj: Record<string, unknown>,
-  ...keys: string[]
-): string | null {
-  for (const key of keys) {
-    if (typeof obj[key] === "string" && obj[key].length > 0)
-      return obj[key] as string;
-  }
-  return null;
-}
-
-/* ------------------------------------------------------------------ */
-/*  Accordion content per tool category                                */
-/* ------------------------------------------------------------------ */
-
-interface AccordionData {
-  title: string;
-  description?: string;
-  content: React.ReactNode;
-}
-
-function getBashAccordionData(
-  input: unknown,
-  output: Record<string, unknown>,
-): AccordionData {
-  const inp = (input && typeof input === "object" ? input : {}) as Record<
-    string,
-    unknown
-  >;
-  const command = typeof inp.command === "string" ? inp.command : "Command";
-
-  const stdout = getStringField(output, "stdout");
-  const stderr = getStringField(output, "stderr");
-  const exitCode =
-    typeof output.exit_code === "number" ? output.exit_code : null;
-  const timedOut = output.timed_out === true;
-  const message = getStringField(output, "message");
-
-  const title = timedOut
-    ? "Command timed out"
-    : exitCode !== null && exitCode !== 0
-      ? `Command failed (exit ${exitCode})`
-      : "Command output";
-
-  return {
-    title,
-    description: truncate(command, 80),
-    content: (
-      <div className="space-y-2">
-        {stdout && (
-          <div>
-            <p className="mb-1 text-xs font-medium text-slate-500">stdout</p>
-            <ContentCodeBlock>{truncate(stdout, 2000)}</ContentCodeBlock>
-          </div>
-        )}
-        {stderr && (
-          <div>
-            <p className="mb-1 text-xs font-medium text-slate-500">stderr</p>
-            <ContentCodeBlock>{truncate(stderr, 1000)}</ContentCodeBlock>
-          </div>
-        )}
-        {!stdout && !stderr && message && (
-          <ContentMessage>{message}</ContentMessage>
-        )}
-      </div>
-    ),
-  };
-}
-
-function getWebAccordionData(
-  input: unknown,
-  output: Record<string, unknown>,
-): AccordionData {
-  const inp = (input && typeof input === "object" ? input : {}) as Record<
-    string,
-    unknown
-  >;
-  const url =
-    getStringField(inp as Record<string, unknown>, "url", "query") ??
-    "Web content";
-
-  // Try direct string fields first, then MCP content blocks, then raw JSON
-  let content = getStringField(output, "content", "text", "_raw");
-  if (!content) content = extractMcpText(output);
-  if (!content) {
-    // Fallback: render the raw JSON so the accordion isn't empty
-    try {
-      const raw = JSON.stringify(output, null, 2);
-      if (raw !== "{}") content = raw;
-    } catch {
-      /* empty */
-    }
-  }
-
-  const statusCode =
-    typeof output.status_code === "number" ? output.status_code : null;
-  const message = getStringField(output, "message");
-
-  return {
-    title: statusCode
-      ? `Response (${statusCode})`
-      : url
-        ? "Web fetch"
-        : "Search results",
-    description: truncate(url, 80),
-    content: content ? (
-      <ContentCodeBlock>{truncate(content, 2000)}</ContentCodeBlock>
-    ) : message ? (
-      <ContentMessage>{message}</ContentMessage>
-    ) : Object.keys(output).length > 0 ? (
-      <ContentCodeBlock>
-        {truncate(JSON.stringify(output, null, 2), 2000)}
-      </ContentCodeBlock>
-    ) : null,
-  };
-}
-
-function getFileAccordionData(
-  input: unknown,
-  output: Record<string, unknown>,
-): AccordionData {
-  const inp = (input && typeof input === "object" ? input : {}) as Record<
-    string,
-    unknown
-  >;
-  const filePath =
-    getStringField(
-      inp as Record<string, unknown>,
-      "file_path",
-      "path",
-      "pattern",
-    ) ?? "File";
-  const content = getStringField(output, "content", "text", "_raw");
-  const message = getStringField(output, "message");
-  // For Glob/list results, try to show file list
-  const files = Array.isArray(output.files)
-    ? output.files.filter((f: unknown): f is string => typeof f === "string")
-    : null;
-
-  return {
-    title: message ?? "File output",
-    description: truncate(filePath, 80),
-    content: (
-      <div className="space-y-2">
-        {content && (
-          <ContentCodeBlock>{truncate(content, 2000)}</ContentCodeBlock>
-        )}
-        {files && files.length > 0 && (
-          <ContentCodeBlock>
-            {truncate(files.join("\n"), 2000)}
-          </ContentCodeBlock>
-        )}
-        {!content && !files && message && (
-          <ContentMessage>{message}</ContentMessage>
-        )}
-      </div>
-    ),
-  };
-}
-
-interface TodoItem {
-  content: string;
-  status: "pending" | "in_progress" | "completed";
-  activeForm?: string;
-}
-
-function getTodoAccordionData(input: unknown): AccordionData {
-  const inp = (input && typeof input === "object" ? input : {}) as Record<
-    string,
-    unknown
-  >;
-  const todos: TodoItem[] = Array.isArray(inp.todos)
-    ? inp.todos.filter(
-        (t: unknown): t is TodoItem =>
-          typeof t === "object" &&
-          t !== null &&
-          typeof (t as TodoItem).content === "string",
-      )
-    : [];
-
-  const completed = todos.filter((t) => t.status === "completed").length;
-  const total = todos.length;
-
-  return {
-    title: "Task list",
-    description: `${completed}/${total} completed`,
-    content: (
-      <div className="space-y-1 py-1">
-        {todos.map((todo, i) => (
-          <div key={i} className="flex items-start gap-2 text-xs">
-            <span className="mt-0.5 flex-shrink-0">
-              {todo.status === "completed" ? (
-                <CheckCircleIcon
-                  size={14}
-                  weight="fill"
-                  className="text-green-500"
-                />
-              ) : todo.status === "in_progress" ? (
-                <CircleDashedIcon
-                  size={14}
-                  weight="bold"
-                  className="text-blue-500"
-                />
-              ) : (
-                <CircleIcon
-                  size={14}
-                  weight="regular"
-                  className="text-neutral-400"
-                />
-              )}
-            </span>
-            <span
-              className={
-                todo.status === "completed"
-                  ? "text-muted-foreground line-through"
-                  : todo.status === "in_progress"
-                    ? "font-medium text-foreground"
-                    : "text-muted-foreground"
-              }
-            >
-              {todo.content}
-            </span>
-          </div>
-        ))}
-      </div>
-    ),
-  };
-}
-
-function getDefaultAccordionData(
-  output: Record<string, unknown>,
-): AccordionData {
-  const message = getStringField(output, "message");
-  const raw = output._raw;
-  const mcpText = extractMcpText(output);
-
-  let displayContent: string;
-  if (typeof raw === "string") {
-    displayContent = raw;
-  } else if (mcpText) {
-    displayContent = mcpText;
-  } else if (message) {
-    displayContent = message;
-  } else {
-    try {
-      displayContent = JSON.stringify(output, null, 2);
-    } catch {
-      displayContent = String(output);
-    }
-  }
-
-  return {
-    title: "Output",
-    description: message ?? undefined,
-    content: (
-      <ContentCodeBlock>{truncate(displayContent, 2000)}</ContentCodeBlock>
-    ),
-  };
-}
-
-function getAccordionData(
-  category: ToolCategory,
-  input: unknown,
-  output: Record<string, unknown>,
-): AccordionData {
-  switch (category) {
-    case "bash":
-      return getBashAccordionData(input, output);
-    case "web":
-      return getWebAccordionData(input, output);
-    case "file-read":
-    case "file-write":
-    case "file-delete":
-    case "file-list":
-    case "search":
-    case "edit":
-      return getFileAccordionData(input, output);
-    case "todo":
-      return getTodoAccordionData(input);
-    default:
-      return getDefaultAccordionData(output);
-  }
-}
-
-/* ------------------------------------------------------------------ */
-/*  Component                                                          */
-/* ------------------------------------------------------------------ */
-
 export function GenericTool({ part }: Props) {
-  const toolName = extractToolName(part);
-  const category = getToolCategory(toolName);
   const isStreaming =
     part.state === "input-streaming" || part.state === "input-available";
   const isError = part.state === "output-error";
-  const text = getAnimationText(part, category);
-
-  const output = parseOutput(part.output);
-  const hasOutput =
-    part.state === "output-available" &&
-    !!output &&
-    Object.keys(output).length > 0;
-  const hasError = isError && !!output;
-
-  // TodoWrite: always show accordion from input (the todo list lives in input)
-  const hasTodoInput =
-    category === "todo" &&
-    part.input &&
-    typeof part.input === "object" &&
-    Array.isArray((part.input as Record<string, unknown>).todos);
-
-  const showAccordion = hasOutput || hasError || hasTodoInput;
-  const accordionData = showAccordion
-    ? getAccordionData(category, part.input, output ?? {})
-    : null;
 
   return (
     <div className="py-2">
       <div className="flex items-center gap-2 text-sm text-muted-foreground">
-        <ToolIcon
-          category={category}
-          isStreaming={isStreaming}
-          isError={isError}
+        <GearIcon
+          size={14}
+          weight="regular"
+          className={
+            isError
+              ? "text-red-500"
+              : isStreaming
+                ? "animate-spin text-neutral-500"
+                : "text-neutral-400"
+          }
         />
         <MorphingTextAnimation
-          text={text}
+          text={getAnimationText(part)}
           className={isError ? "text-red-500" : undefined}
         />
       </div>
-
-      {showAccordion && accordionData ? (
-        <ToolAccordion
-          icon={<AccordionIcon category={category} />}
-          title={accordionData.title}
-          description={accordionData.description}
-          titleClassName={isError ? "text-red-500" : undefined}
-        >
-          {accordionData.content}
-        </ToolAccordion>
-      ) : null}
     </div>
   );
 }

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

@@ -50,14 +50,6 @@ export function useChatSession() {
     );
   }, [sessionQuery.data, sessionId]);
 
-  // Expose active_stream info so the caller can trigger manual resume
-  // after hydration completes (rather than relying on AI SDK's built-in
-  // resume which fires before hydration).
-  const hasActiveStream = useMemo(() => {
-    if (sessionQuery.data?.status !== 200) return false;
-    return !!sessionQuery.data.data.active_stream;
-  }, [sessionQuery.data]);
-
   const { mutateAsync: createSessionMutation, isPending: isCreatingSession } =
     usePostV2CreateSession({
       mutation: {
@@ -110,7 +102,6 @@ export function useChatSession() {
     sessionId,
     setSessionId,
     hydratedMessages,
-    hasActiveStream,
     isLoadingSession: sessionQuery.isLoading,
     createSession,
     isCreatingSession,

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

@@ -29,7 +29,6 @@ export function useCopilotPage() {
     sessionId,
     setSessionId,
     hydratedMessages,
-    hasActiveStream,
     isLoadingSession,
     createSession,
     isCreatingSession,
@@ -81,31 +80,14 @@ export function useCopilotPage() {
                 },
               };
             },
-            // Resume: GET goes to the same URL as POST (backend uses
-            // method to distinguish).  Override the default formula which
-            // would append /{chatId}/stream to the existing path.
-            prepareReconnectToStreamRequest: () => ({
-              api: `/api/chat/sessions/${sessionId}/stream`,
-            }),
           })
         : null,
     [sessionId],
   );
 
-  const {
-    messages,
-    sendMessage,
-    stop,
-    status,
-    error,
-    setMessages,
-    resumeStream,
-  } = useChat({
+  const { messages, sendMessage, stop, status, error, setMessages } = useChat({
     id: sessionId ?? undefined,
     transport: transport ?? undefined,
-    // Don't use resume: true — it fires before hydration completes, causing
-    // the hydrated messages to overwrite the resumed stream.  Instead we
-    // call resumeStream() manually after hydration + active_stream detection.
   });
 
   // Abort the stream if the backend doesn't start sending data within 12s.
@@ -126,31 +108,13 @@ export function useCopilotPage() {
     return () => clearTimeout(timer);
   }, [status]);
 
-  // Hydrate messages from the REST session endpoint.
-  // Skip hydration while streaming to avoid overwriting the live stream.
   useEffect(() => {
     if (!hydratedMessages || hydratedMessages.length === 0) return;
-    if (status === "streaming" || status === "submitted") return;
     setMessages((prev) => {
       if (prev.length >= hydratedMessages.length) return prev;
       return hydratedMessages;
     });
-  }, [hydratedMessages, setMessages, status]);
-
-  // Resume an active stream AFTER hydration completes.
-  // The backend returns active_stream info when a task is still running.
-  // We wait for hydration so the AI SDK has the conversation history
-  // before the resumed stream appends the in-progress assistant message.
-  const hasResumedRef = useRef<string | null>(null);
-  useEffect(() => {
-    if (!hasActiveStream || !sessionId) return;
-    if (!hydratedMessages || hydratedMessages.length === 0) return;
-    if (status === "streaming" || status === "submitted") return;
-    // Only resume once per session to avoid re-triggering after stream ends
-    if (hasResumedRef.current === sessionId) return;
-    hasResumedRef.current = sessionId;
-    resumeStream();
-  }, [hasActiveStream, sessionId, hydratedMessages, status, resumeStream]);
+  }, [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
@@ -233,18 +197,12 @@ export function useCopilotPage() {
     }
   }, [isDeleting]);
 
-  // True while we know the backend has an active stream but haven't
-  // reconnected yet.  Used to disable the send button and show stop UI.
-  const isReconnecting =
-    hasActiveStream && status !== "streaming" && status !== "submitted";
-
   return {
     sessionId,
     messages,
     status,
     error,
     stop,
-    isReconnecting,
     isLoadingSession,
     isCreatingSession,
     isUserLoading,

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

@@ -1,17 +1,31 @@
 "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 }: Props) {
+export function FavoritesSection({
+  searchTerm,
+  tabs,
+  activeTab,
+  onTabChange,
+  setLibrarySort,
+}: Props) {
   const {
     allAgents: favoriteAgents,
     agentLoading: isLoading,
@@ -21,38 +35,33 @@ export function FavoritesSection({ searchTerm }: Props) {
     isFetchingNextPage,
   } = useFavoriteAgents({ searchTerm });
 
-  if (isLoading || favoriteAgents.length === 0) {
-    return null;
-  }
-
   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>
-      </div>
+    <>
+      <LibraryActionSubHeader
+        agentCount={agentCount}
+        setLibrarySort={setLibrarySort}
+      />
+      <LibraryTabs
+        tabs={tabs}
+        activeTab={activeTab}
+        onTabChange={onTabChange}
+      />
 
-      <div className="relative">
+      {isLoading ? (
+        <div className="flex h-[200px] items-center justify-center">
+          <LoadingSpinner size="large" />
+        </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>
+      ) : (
         <InfiniteScroll
           isFetchingNextPage={isFetchingNextPage}
           fetchNextPage={fetchNextPage}
           hasNextPage={hasNextPage}
-          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>
-          }
+          loader={<LoadingSpinner size="medium" />}
         >
           <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
             {favoriteAgents.map((agent: LibraryAgent) => (
@@ -60,9 +69,7 @@ export function FavoritesSection({ searchTerm }: Props) {
             ))}
           </div>
         </InfiniteScroll>
-      </div>
-
-      {favoriteAgents.length > 0 && <div className="!mt-10 border-t" />}
-    </div>
+      )}
+    </>
   );
 }

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

@@ -0,0 +1,66 @@
+"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="h4">My agents</Text>
+        <Text variant="h5">My agents</Text>
         <Text
           variant="body"
           data-testid="agents-count"

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

@@ -4,6 +4,7 @@ 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, {
@@ -14,13 +15,21 @@ 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 }: Props) {
+export function LibraryAgentCard({ agent, draggable = true }: 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,
@@ -28,103 +37,119 @@ export function LibraryAgentCard({ agent }: Props) {
     profile,
     creator_image_url,
     handleToggleFavorite,
-  } = useLibraryAgentCard({ agent });
+  } = useLibraryAgentCard({
+    agent,
+    onFavoriteAdd: triggerFavoriteAnimation,
+  });
 
   return (
     <div
-      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"
+      draggable={draggable}
+      onDragStart={handleDragStart}
+      className="cursor-grab active:cursor-grabbing"
     >
-      <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">
-            <AvatarImage
-              src={
-                isFromMarketplace
-                  ? creator_image_url || "/avatar-placeholder.png"
-                  : profile?.avatar_url || "/avatar-placeholder.png"
-              }
-              alt={`${name} creator avatar`}
-            />
-            <AvatarFallback size={48}>{name.charAt(0)}</AvatarFallback>
-          </Avatar>
-          <Text
-            variant="small-medium"
-            className="uppercase tracking-wide text-zinc-400"
-          >
-            {isFromMarketplace ? "FROM MARKETPLACE" : "Built by you"}
-          </Text>
-        </div>
-      </NextLink>
-      <FavoriteButton
-        isFavorite={isFavorite}
-        onClick={handleToggleFavorite}
-        className="absolute right-10 top-0"
-      />
-      <AgentCardMenu agent={agent} />
+      <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">
+              <AvatarImage
+                src={
+                  isFromMarketplace
+                    ? creator_image_url || "/avatar-placeholder.png"
+                    : profile?.avatar_url || "/avatar-placeholder.png"
+                }
+                alt={`${name} creator avatar`}
+              />
+              <AvatarFallback size={48}>{name.charAt(0)}</AvatarFallback>
+            </Avatar>
+            <Text
+              variant="small-medium"
+              className="uppercase tracking-wide text-zinc-400"
+            >
+              {isFromMarketplace ? "FROM MARKETPLACE" : "Built by you"}
+            </Text>
+          </div>
+        </NextLink>
+        <FavoriteButton
+          isFavorite={isFavorite}
+          onClick={handleToggleFavorite}
+          className="absolute right-10 top-0"
+        />
+        <AgentCardMenu agent={agent} />
 
-      <div className="flex w-full flex-1 flex-col px-4 pb-2">
-        <Link
-          href={`/library/agents/${id}`}
-          className="flex w-full items-start justify-between gap-2 no-underline hover:no-underline"
-        >
-          <Text
-            variant="h5"
-            data-testid="library-agent-card-name"
-            className="line-clamp-3 hyphens-auto break-words no-underline hover:no-underline"
-          >
-            {name}
-          </Text>
-
-          {!image_url ? (
-            <div
-              className={`h-[3.64rem] w-[6.70rem] flex-shrink-0 rounded-small ${
-                [
-                  "bg-gradient-to-r from-green-200 to-blue-200",
-                  "bg-gradient-to-r from-pink-200 to-purple-200",
-                  "bg-gradient-to-r from-yellow-200 to-orange-200",
-                  "bg-gradient-to-r from-blue-200 to-cyan-200",
-                  "bg-gradient-to-r from-indigo-200 to-purple-200",
-                ][parseInt(id.slice(0, 8), 16) % 5]
-              }`}
-              style={{
-                backgroundSize: "200% 200%",
-                animation: "gradient 15s ease infinite",
-              }}
-            />
-          ) : (
-            <Image
-              src={image_url}
-              alt={`${name} preview image`}
-              width={107}
-              height={58}
-              className="flex-shrink-0 rounded-small object-cover"
-            />
-          )}
-        </Link>
-
-        <div className="mt-auto flex w-full justify-start gap-6 border-t border-zinc-100 pb-1 pt-3">
+        <div className="flex w-full flex-1 flex-col px-4 pb-2">
           <Link
             href={`/library/agents/${id}`}
-            data-testid="library-agent-card-see-runs-link"
-            className="flex items-center gap-1 text-[13px]"
+            className="flex w-full items-start justify-between gap-2 no-underline hover:no-underline"
           >
-            See runs <CaretCircleRightIcon size={20} />
+            <Text
+              variant="h5"
+              data-testid="library-agent-card-name"
+              className="line-clamp-3 hyphens-auto break-words no-underline hover:no-underline"
+            >
+              {name}
+            </Text>
+
+            {!image_url ? (
+              <div
+                className={`h-[3.64rem] w-[6.70rem] flex-shrink-0 rounded-small ${
+                  [
+                    "bg-gradient-to-r from-green-200 to-blue-200",
+                    "bg-gradient-to-r from-pink-200 to-purple-200",
+                    "bg-gradient-to-r from-yellow-200 to-orange-200",
+                    "bg-gradient-to-r from-blue-200 to-cyan-200",
+                    "bg-gradient-to-r from-indigo-200 to-purple-200",
+                  ][parseInt(id.slice(0, 8), 16) % 5]
+                }`}
+                style={{
+                  backgroundSize: "200% 200%",
+                  animation: "gradient 15s ease infinite",
+                }}
+              />
+            ) : (
+              <Image
+                src={image_url}
+                alt={`${name} preview image`}
+                width={107}
+                height={58}
+                className="flex-shrink-0 rounded-small object-cover"
+              />
+            )}
           </Link>
 
-          {can_access_graph && (
+          <div className="mt-auto flex w-full justify-start gap-6 border-t border-zinc-100 pb-1 pt-3">
             <Link
-              href={`/build?flowID=${graph_id}`}
-              data-testid="library-agent-card-open-in-builder-link"
+              href={`/library/agents/${id}`}
+              data-testid="library-agent-card-see-runs-link"
               className="flex items-center gap-1 text-[13px]"
-              isExternal
             >
-              Open in builder <CaretCircleRightIcon size={20} />
+              See runs <CaretCircleRightIcon size={20} />
             </Link>
-          )}
+
+            {can_access_graph && (
+              <Link
+                href={`/build?flowID=${graph_id}`}
+                data-testid="library-agent-card-open-in-builder-link"
+                className="flex items-center gap-1 text-[13px]"
+                isExternal
+              >
+                Open in builder <CaretCircleRightIcon size={20} />
+              </Link>
+            )}
+          </div>
         </div>
-      </div>
+      </motion.div>
     </div>
   );
 }

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

@@ -5,6 +5,10 @@ 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";
@@ -22,6 +26,7 @@ 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;
@@ -32,11 +37,25 @@ 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;
@@ -70,6 +89,37 @@ 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;
 
@@ -138,6 +188,31 @@ 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();
@@ -183,6 +258,14 @@ 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,10 +3,15 @@
 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>) => void;
+  onClick: (
+    e: MouseEvent<HTMLButtonElement>,
+    position: { x: number; y: number },
+  ) => void;
   className?: string;
 }
 
@@ -15,25 +20,49 @@ 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
-      onClick={onClick}
+      ref={buttonRef}
+      onClick={handleClick}
       className={cn(
         "rounded-full p-2 transition-all duration-200",
-        "hover:scale-110",
+        "hover:scale-110 active:scale-95",
         !isFavorite && "opacity-0 group-hover:opacity-100",
         className,
       )}
       aria-label={isFavorite ? "Remove from favorites" : "Add to favorites"}
     >
-      <HeartIcon
-        size={20}
-        weight={isFavorite ? "fill" : "regular"}
-        className={cn(
-          "transition-colors duration-200",
-          isFavorite ? "text-red-500" : "text-gray-600 hover:text-red-500",
-        )}
-      />
+      <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>
     </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 }: Props) {
-  const { id, name, is_favorite, creator_image_url, marketplace_listing } =
-    agent;
+export function useLibraryAgentCard({ agent, onFavoriteAdd }: Props) {
+  const { id, is_favorite, creator_image_url, marketplace_listing } = agent;
 
   const isFromMarketplace = Boolean(marketplace_listing);
   const [isFavorite, setIsFavorite] = useState(is_favorite);
@@ -49,26 +49,31 @@ export function useLibraryAgentCard({ agent }: Props) {
     });
   }
 
-  async function handleToggleFavorite(e: React.MouseEvent) {
+  async function handleToggleFavorite(
+    e: React.MouseEvent,
+    position: { x: number; y: number },
+  ) {
     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,30 +1,130 @@
 "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 {
+  AnimatePresence,
+  LayoutGroup,
+  motion,
+  useReducedMotion,
+} from "framer-motion";
+import { LibraryFolderEditDialog } from "../LibraryFolderEditDialog/LibraryFolderEditDialog";
+import { LibraryFolderDeleteDialog } from "../LibraryFolderDeleteDialog/LibraryFolderDeleteDialog";
 import { useLibraryAgentList } from "./useLibraryAgentList";
 
+// Spring-based enter/exit animations (Emil Kowalski principles)
+// Springs are naturally interruptible — switching tabs mid-animation
+// cancels the current spring and starts a new one from current state.
+const containerVariants = {
+  hidden: {},
+  show: {},
+  exit: {
+    opacity: 0,
+    filter: "blur(4px)",
+    transition: { duration: 0.12 },
+  },
+};
+
+// Reduced motion fallback
+const reducedContainerVariants = {
+  hidden: {},
+  show: {},
+  exit: {
+    opacity: 0,
+    transition: { duration: 0.12 },
+  },
+};
+
+// Per-item animation values (explicit initial/animate, not variant-based).
+// This ensures items animate in on mount regardless of parent state — fixes
+// the bug where dynamically added children (e.g. folders reappearing after
+// search is cleared) stayed invisible with variant inheritance.
+const itemInitial = {
+  opacity: 0,
+  filter: "blur(4px)",
+};
+
+const itemAnimate = {
+  opacity: 1,
+  filter: "blur(0px)",
+};
+
+const itemTransition = {
+  type: "spring" as const,
+  stiffness: 300,
+  damping: 25,
+  opacity: { duration: 0.2 },
+  filter: { duration: 0.15 },
+};
+
+const reducedItemInitial = { opacity: 0 };
+const reducedItemAnimate = { opacity: 1 };
+const reducedItemTransition = { duration: 0.15 };
+
 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 shouldReduceMotion = useReducedMotion();
+  const activeContainerVariants = shouldReduceMotion
+    ? reducedContainerVariants
+    : containerVariants;
+  const activeInitial = shouldReduceMotion ? reducedItemInitial : itemInitial;
+  const activeAnimate = shouldReduceMotion ? reducedItemAnimate : itemAnimate;
+  const activeTransition = shouldReduceMotion
+    ? reducedItemTransition
+    : itemTransition;
+
   const {
+    isFavoritesTab,
     agentLoading,
     agentCount,
-    allAgents: agents,
+    agents,
     hasNextPage,
     isFetchingNextPage,
     fetchNextPage,
-  } = useLibraryAgentList({ searchTerm, librarySort });
+    foldersData,
+    currentFolder,
+    showFolders,
+    editingFolder,
+    setEditingFolder,
+    deletingFolder,
+    setDeletingFolder,
+    handleAgentDrop,
+    handleFolderDeleted,
+  } = useLibraryAgentList({
+    searchTerm,
+    librarySort,
+    selectedFolderId,
+    onFolderSelect,
+    activeTab,
+  });
 
   return (
     <>
@@ -32,11 +132,42 @@ export function LibraryAgentList({
         agentCount={agentCount}
         setLibrarySort={setLibrarySort}
       />
-      <div className="px-2">
+      {!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>
+        )}
         {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}
@@ -44,14 +175,85 @@ export function LibraryAgentList({
             hasNextPage={hasNextPage}
             loader={<LoadingSpinner size="medium" />}
           >
-            <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>
+            <LayoutGroup>
+              <AnimatePresence mode="popLayout">
+                <motion.div
+                  key={`${activeTab}-${selectedFolderId || "all"}`}
+                  className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+                  variants={activeContainerVariants}
+                  initial="hidden"
+                  animate="show"
+                  exit="exit"
+                >
+                  {showFolders &&
+                    foldersData?.folders.map((folder, i) => (
+                      <motion.div
+                        key={folder.id}
+                        initial={activeInitial}
+                        animate={activeAnimate}
+                        transition={{
+                          ...activeTransition,
+                          delay: i * 0.04,
+                        }}
+                      >
+                        <LibraryFolder
+                          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)}
+                        />
+                      </motion.div>
+                    ))}
+                  {agents.map((agent, i) => (
+                    <motion.div
+                      key={agent.id}
+                      initial={activeInitial}
+                      animate={activeAnimate}
+                      transition={{
+                        ...activeTransition,
+                        delay:
+                          ((showFolders
+                            ? (foldersData?.folders.length ?? 0)
+                            : 0) +
+                            i) *
+                          0.04,
+                      }}
+                    >
+                      <LibraryAgentCard agent={agent} />
+                    </motion.div>
+                  ))}
+                </motion.div>
+              </AnimatePresence>
+            </LayoutGroup>
           </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,36 +1,69 @@
 "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 { useEffect, useRef } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useEffect, useRef, useState } from "react";
 
 interface Props {
   searchTerm: string;
   librarySort: LibraryAgentSort;
+  selectedFolderId: string | null;
+  onFolderSelect: (folderId: string | null) => void;
+  activeTab: string;
 }
 
-export function useLibraryAgentList({ searchTerm, librarySort }: Props) {
-  const queryClient = getQueryClient();
+export function useLibraryAgentList({
+  searchTerm,
+  librarySort,
+  selectedFolderId,
+  onFolderSelect,
+  activeTab,
+}: Props) {
+  const isFavoritesTab = activeTab === "favorites";
+  const { toast } = useToast();
+  const stableQueryClient = getQueryClient();
+  const queryClient = useQueryClient();
   const prevSortRef = useRef<LibraryAgentSort | null>(null);
 
+  const [editingFolder, setEditingFolder] = useState<LibraryFolder | null>(
+    null,
+  );
+  const [deletingFolder, setDeletingFolder] = useState<LibraryFolder | null>(
+    null,
+  );
+
   const {
     data: agentsQueryData,
     fetchNextPage,
     hasNextPage,
     isFetchingNextPage,
-    isLoading: agentLoading,
+    isLoading: allAgentsLoading,
   } = 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: {
@@ -39,28 +72,147 @@ export function useLibraryAgentList({ searchTerm, librarySort }: Props) {
     },
   );
 
-  // Reset queries when sort changes to ensure fresh data with correct sorting
   useEffect(() => {
     if (prevSortRef.current !== null && prevSortRef.current !== librarySort) {
-      // Reset all library agent queries to ensure fresh fetch with new sort
-      queryClient.resetQueries({
+      stableQueryClient.resetQueries({
         queryKey: ["/api/library/agents"],
       });
     }
     prevSortRef.current = librarySort;
-  }, [librarySort, queryClient]);
+  }, [librarySort, stableQueryClient]);
 
-  const allAgents = agentsQueryData
+  const allAgentsList = agentsQueryData
     ? unpaginate(agentsQueryData, "agents")
     : [];
-  const agentCount = getPaginatedTotalCount(agentsQueryData);
+  const allAgentsCount = getPaginatedTotalCount(agentsQueryData);
+
+  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,
+      };
+
+  const { data: rawFoldersData } = useGetV2ListLibraryFolders(undefined, {
+    query: { select: okData },
+  });
+
+  const foldersData = searchTerm ? undefined : rawFoldersData;
+
+  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);
+    }
+  }
 
   return {
-    allAgents,
+    isFavoritesTab,
     agentLoading,
-    hasNextPage,
     agentCount,
-    isFetchingNextPage,
-    fetchNextPage,
+    agents,
+    hasNextPage: agentsHasNextPage,
+    isFetchingNextPage: agentsIsFetchingNextPage,
+    fetchNextPage: agentsFetchNextPage,
+    foldersData,
+    currentFolder,
+    showFolders,
+    editingFolder,
+    setEditingFolder,
+    deletingFolder,
+    setDeletingFolder,
+    handleAgentDrop,
+    handleFolderDeleted,
   };
 }

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

@@ -0,0 +1,380 @@
+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",
+};
+
+export 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",
+  },
+};
+
+// Card-level bg (50) and border (200) classes per folder color
+export const folderCardStyles: Record<
+  FolderColorName,
+  { bg: string; border: string }
+> = {
+  neutral: { bg: "bg-neutral-50", border: "border-neutral-200" },
+  slate: { bg: "bg-slate-50", border: "border-slate-200" },
+  zinc: { bg: "bg-zinc-50", border: "border-zinc-200" },
+  stone: { bg: "bg-stone-50", border: "border-stone-200" },
+  red: { bg: "bg-red-50", border: "border-red-200" },
+  orange: { bg: "bg-orange-50", border: "border-orange-200" },
+  amber: { bg: "bg-amber-50", border: "border-amber-200" },
+  yellow: { bg: "bg-yellow-50", border: "border-yellow-200" },
+  lime: { bg: "bg-lime-50", border: "border-lime-200" },
+  green: { bg: "bg-green-50", border: "border-green-200" },
+  emerald: { bg: "bg-emerald-50", border: "border-emerald-200" },
+  teal: { bg: "bg-teal-50", border: "border-teal-200" },
+  cyan: { bg: "bg-cyan-50", border: "border-cyan-200" },
+  sky: { bg: "bg-sky-50", border: "border-sky-200" },
+  blue: { bg: "bg-blue-50", border: "border-blue-200" },
+  indigo: { bg: "bg-indigo-50", border: "border-indigo-200" },
+  violet: { bg: "bg-violet-50", border: "border-violet-200" },
+  purple: { bg: "bg-purple-50", border: "border-purple-200" },
+  fuchsia: { bg: "bg-fuchsia-50", border: "border-fuchsia-200" },
+  pink: { bg: "bg-pink-50", border: "border-pink-200" },
+  rose: { bg: "bg-rose-50", border: "border-rose-200" },
+};
+
+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

@@ -0,0 +1,136 @@
+"use client";
+
+import { Text } from "@/components/atoms/Text/Text";
+import { Button } from "@/components/atoms/Button/Button";
+import {
+  FolderIcon,
+  FolderColor,
+  folderCardStyles,
+  resolveColor,
+} 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);
+  const resolvedColor = resolveColor(color);
+  const cardStyle = folderCardStyles[resolvedColor];
+
+  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-between gap-2.5 rounded-medium border p-4 transition-all duration-200 hover:shadow-md ${
+        isDragOver
+          ? "border-blue-400 bg-blue-50 ring-2 ring-blue-200"
+          : `${cardStyle.border} ${cardStyle.bg}`
+      }`}
+      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

@@ -0,0 +1,229 @@
+"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,
+  getGetV2ListLibraryFoldersQueryKey,
+} from "@/app/api/__generated__/endpoints/folders/folders";
+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 { 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>) {
+    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 gap-2 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="!mb-0 w-full"
+                    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

@@ -0,0 +1,96 @@
+"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

@@ -0,0 +1,287 @@
+"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,
+  getGetV2ListLibraryFoldersQueryKey,
+} from "@/app/api/__generated__/endpoints/folders/folders";
+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";
+import { ApiError } from "@/lib/autogpt-server-api/helpers";
+
+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 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: unknown, _variables, context) => {
+        if (context?.previousData) {
+          for (const [queryKey, data] of context.previousData) {
+            queryClient.setQueryData(queryKey, data);
+          }
+        }
+        if (error instanceof ApiError) {
+          const detail = (error.response as any)?.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>) {
+    updateFolder({
+      folderId: folder.id,
+      data: {
+        name: values.folderName.trim(),
+        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-2 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"
+                    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}
+                    wrapperClassName="!mb-0"
+                    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 rounded-2xl px-2"
+                      >
+                        <EmojiPicker.Group className="pt-2">
+                          <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

@@ -0,0 +1,21 @@
+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 items-center justify-between gap-4">
+      <LibraryTabs
+        tabs={tabs}
+        activeTab={activeTab}
+        onTabChange={onTabChange}
+      />
+      <LibraryFolderCreationDialog />
+    </div>
+  );
+}

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

@@ -0,0 +1,147 @@
+"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 items-center gap-2">
+      {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="flex h-fit w-fit"
+      style={{ willChange: "transform" }}
+    >
+      <motion.div
+        layout
+        transition={{
+          layout: {
+            type: "spring",
+            damping: 20,
+            stiffness: 230,
+            mass: 1.2,
+          },
+        }}
+        className={cn(
+          "flex h-fit cursor-pointer items-center gap-1.5 overflow-hidden border border-zinc-200 px-3 py-2 text-black transition-colors duration-75 ease-out hover:border-zinc-300 hover:bg-zinc-300",
+          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 text-sm font-medium text-black"
+            >
+              {tab.title}
+            </motion.span>
+          </motion.div>
+        )}
+      </motion.div>
+    </motion.div>
+  );
+}

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

@@ -0,0 +1,135 @@
+"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

@@ -0,0 +1,84 @@
+"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,28 +1,55 @@
 "use client";
 
-import { useEffect } from "react";
-import { FavoritesSection } from "./components/FavoritesSection/FavoritesSection";
+import { useEffect, useState, useCallback } from "react";
+import { HeartIcon, ListIcon } from "@phosphor-icons/react";
 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 (
-    <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>
+    <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>
   );
 }

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

@@ -3619,6 +3619,29 @@
               "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": {
@@ -3986,6 +4009,338 @@
         }
       }
     },
+    "/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_relations: Whether to include agent and subfolder relations for 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_relations",
+            "in": "query",
+            "required": false,
+            "schema": {
+              "type": "boolean",
+              "description": "Include agent and subfolder relations (for counts)",
+              "default": true,
+              "title": "Include Relations"
+            },
+            "description": "Include agent and subfolder relations (for 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)" },
+          "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"],
@@ -7536,6 +7891,23 @@
         "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" },
@@ -8259,6 +8631,96 @@
         "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" },
@@ -9147,6 +9609,14 @@
             "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"
@@ -9414,12 +9884,109 @@
               { "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 (None to move to 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" },