added posthog tracking

Introduces a new ClaudeCodeBlock that enables execution of coding tasks
using Anthropic's Claude Code in an E2B sandbox. This block unlocks
powerful agentic coding capabilities - Claude Code can autonomously
create files, install packages, run commands, and build complete
applications within a secure sandboxed environment.

Changes 🏗️

- New file backend/blocks/claude_code.py:
  - ClaudeCodeBlock - Execute tasks using Claude Code in an E2B sandbox
- Dual credential support: E2B API key (sandbox) + Anthropic API key
(Claude Code)
- Session continuation support via session_id, sandbox_id, and
conversation_history
- Automatic file extraction with path, relative_path, name, and content
fields
  - Configurable timeout, setup commands, and working directory
- dispose_sandbox option to keep sandbox alive for multi-turn
conversations

Checklist 📋

For code changes:

- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
- [x] Create and execute ClaudeCodeBlock with a simple prompt ("Create a
hello world HTML file")
- [x] Verify files output includes correct path, relative_path, name,
and content
- [x] Test session continuation by passing session_id and sandbox_id
back
- [x] Build "Any API → Instant App" demo agent combining Firecrawl +
ClaudeCodeBlock + GitHub blocks
- [x] Verify generated files are pushed to GitHub with correct folder
structure using relative_path

Here are two example agents i made that can be used to test this agent,
they require github, anthropic and e2b access via api keys that are set
via the user/on the platform is testing on dev

The first agent is my

Any API → Instant App
"Transform any API documentation into a fully functional web
application. Just provide a docs URL and get a complete, ready-to-deploy
app pushed to a new GitHub repository."

[Any API → Instant
App_v36.json](https://github.com/user-attachments/files/24600326/Any.API.Instant.App_v36.json)


The second agent is my
Idea to project
"Simply enter your coding project's idea and this agent will make all of
the base initial code needed for you to start working on that project
and place it on github for you!"

[Idea to
project_v11.json](https://github.com/user-attachments/files/24600346/Idea.to.project_v11.json)

If you have any questions or issues let me know.

References
https://e2b.dev/blog/python-guide-run-claude-code-in-an-e2b-sandbox

https://github.com/e2b-dev/e2b-cookbook/tree/main/examples/anthropic-claude-code-in-sandbox-python
https://code.claude.com/docs/en/cli-reference

I tried to use E2b's "anthropic-claude-code" template but it kept
complaining it was out of date, so I make it manually spin up a E2b
instance and make it install the latest claude code and it uses that

.github/workflows/platform-frontend-ci.yml

@@ -128,7 +128,7 @@ jobs:
           token: ${{ secrets.GITHUB_TOKEN }}
           exitOnceUploaded: true
 
-  test:
+  e2e_test:
     runs-on: big-boi
     needs: setup
     strategy:
@@ -258,3 +258,39 @@ jobs:
       - name: Print Final Docker Compose logs
         if: always()
         run: docker compose -f ../docker-compose.yml logs
+
+  integration_test:
+    runs-on: ubuntu-latest
+    needs: setup
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          submodules: recursive
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22.18.0"
+
+      - name: Enable corepack
+        run: corepack enable
+
+      - name: Restore dependencies cache
+        uses: actions/cache@v4
+        with:
+          path: ~/.pnpm-store
+          key: ${{ needs.setup.outputs.cache-key }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-${{ hashFiles('autogpt_platform/frontend/pnpm-lock.yaml') }}
+            ${{ runner.os }}-pnpm-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Generate API client
+        run: pnpm generate:api
+
+      - name: Run Integration Tests
+        run: pnpm test:unit

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

@@ -48,6 +48,7 @@ from .response_model import (
     StreamUsage,
 )
 from .tools import execute_tool, tools
+from .tracking import track_user_message
 
 logger = logging.getLogger(__name__)
 
@@ -103,16 +104,33 @@ async def _build_system_prompt(user_id: str | None) -> tuple[str, Any]:
     return compiled, understanding
 
 
-async def _generate_session_title(message: str) -> str | None:
+async def _generate_session_title(
+    message: str,
+    user_id: str | None = None,
+    session_id: str | None = None,
+) -> str | None:
     """Generate a concise title for a chat session based on the first message.
 
     Args:
         message: The first user message in the session
+        user_id: User ID for OpenRouter tracing (optional)
+        session_id: Session ID for OpenRouter tracing (optional)
 
     Returns:
         A short title (3-6 words) or None if generation fails
     """
     try:
+        # Build extra_body for OpenRouter tracing and PostHog analytics
+        extra_body: dict[str, Any] = {}
+        if user_id:
+            extra_body["user"] = user_id[:128]  # OpenRouter limit
+            extra_body["posthogDistinctId"] = user_id
+        if session_id:
+            extra_body["session_id"] = session_id[:128]  # OpenRouter limit
+        extra_body["posthogProperties"] = {
+            "environment": settings.config.app_env.value,
+        }
+
         response = await client.chat.completions.create(
             model=config.title_model,
             messages=[
@@ -127,6 +145,7 @@ async def _generate_session_title(message: str) -> str | None:
                 {"role": "user", "content": message[:500]},  # Limit input length
             ],
             max_tokens=20,
+            extra_body=extra_body,
         )
         title = response.choices[0].message.content
         if title:
@@ -237,6 +256,14 @@ async def stream_chat_completion(
             f"new message_count={len(session.messages)}"
         )
 
+        # Track user message in PostHog
+        if is_user_message:
+            track_user_message(
+                user_id=user_id,
+                session_id=session_id,
+                message_length=len(message),
+            )
+
     logger.info(
         f"Upserting session: {session.session_id} with user id {session.user_id}, "
         f"message_count={len(session.messages)}"
@@ -256,10 +283,15 @@ async def stream_chat_completion(
             # stale data issues when the main flow modifies the session
             captured_session_id = session_id
             captured_message = message
+            captured_user_id = user_id
 
             async def _update_title():
                 try:
-                    title = await _generate_session_title(captured_message)
+                    title = await _generate_session_title(
+                        captured_message,
+                        user_id=captured_user_id,
+                        session_id=captured_session_id,
+                    )
                     if title:
                         # Use dedicated title update function that doesn't
                         # touch messages, avoiding race conditions
@@ -698,6 +730,20 @@ async def _stream_chat_chunks(
                     f"{f' (retry {retry_count}/{MAX_RETRIES})' if retry_count > 0 else ''}"
                 )
 
+                # Build extra_body for OpenRouter tracing and PostHog analytics
+                extra_body: dict[str, Any] = {
+                    "posthogProperties": {
+                        "environment": settings.config.app_env.value,
+                    },
+                }
+                if session.user_id:
+                    extra_body["user"] = session.user_id[:128]  # OpenRouter limit
+                    extra_body["posthogDistinctId"] = session.user_id
+                if session.session_id:
+                    extra_body["session_id"] = session.session_id[
+                        :128
+                    ]  # OpenRouter limit
+
                 # Create the stream with proper types
                 stream = await client.chat.completions.create(
                     model=model,
@@ -706,6 +752,7 @@ async def _stream_chat_chunks(
                     tool_choice="auto",
                     stream=True,
                     stream_options={"include_usage": True},
+                    extra_body=extra_body,
                 )
 
                 # Variables to accumulate tool calls

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

@@ -3,6 +3,7 @@ from typing import TYPE_CHECKING, Any
 from openai.types.chat import ChatCompletionToolParam
 
 from backend.api.features.chat.model import ChatSession
+from backend.api.features.chat.tracking import track_tool_called
 
 from .add_understanding import AddUnderstandingTool
 from .agent_output import AgentOutputTool
@@ -56,4 +57,13 @@ async def execute_tool(
     tool = TOOL_REGISTRY.get(tool_name)
     if not tool:
         raise ValueError(f"Tool {tool_name} not found")
+
+    # Track tool call in PostHog
+    track_tool_called(
+        user_id=user_id,
+        session_id=session.session_id,
+        tool_name=tool_name,
+        tool_call_id=tool_call_id,
+    )
+
     return await tool.execute(user_id, session, tool_call_id, **parameters)

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

@@ -8,6 +8,10 @@ from pydantic import BaseModel, Field, field_validator
 
 from backend.api.features.chat.config import ChatConfig
 from backend.api.features.chat.model import ChatSession
+from backend.api.features.chat.tracking import (
+    track_agent_run_success,
+    track_agent_scheduled,
+)
 from backend.api.features.library import db as library_db
 from backend.data.graph import GraphModel
 from backend.data.model import CredentialsMetaInput
@@ -453,6 +457,16 @@ class RunAgentTool(BaseTool):
             session.successful_agent_runs.get(library_agent.graph_id, 0) + 1
         )
 
+        # Track in PostHog
+        track_agent_run_success(
+            user_id=user_id,
+            session_id=session_id,
+            graph_id=library_agent.graph_id,
+            graph_name=library_agent.name,
+            execution_id=execution.id,
+            library_agent_id=library_agent.id,
+        )
+
         library_agent_link = f"/library/agents/{library_agent.id}"
         return ExecutionStartedResponse(
             message=(
@@ -534,6 +548,18 @@ class RunAgentTool(BaseTool):
             session.successful_agent_schedules.get(library_agent.graph_id, 0) + 1
         )
 
+        # Track in PostHog
+        track_agent_scheduled(
+            user_id=user_id,
+            session_id=session_id,
+            graph_id=library_agent.graph_id,
+            graph_name=library_agent.name,
+            schedule_id=result.id,
+            schedule_name=schedule_name,
+            cron=cron,
+            library_agent_id=library_agent.id,
+        )
+
         library_agent_link = f"/library/agents/{library_agent.id}"
         return ExecutionStartedResponse(
             message=(

autogpt_platform/backend/backend/api/features/chat/tracking.py

@@ -0,0 +1,229 @@
+"""PostHog analytics tracking for the chat system."""
+
+import logging
+from typing import Any
+
+from posthog import Posthog
+
+from backend.util.settings import Settings
+
+logger = logging.getLogger(__name__)
+settings = Settings()
+
+# PostHog client instance (lazily initialized)
+_posthog_client: Posthog | None = None
+
+
+def _get_posthog_client() -> Posthog | None:
+    """Get or create the PostHog client instance."""
+    global _posthog_client
+    if _posthog_client is not None:
+        return _posthog_client
+
+    if not settings.secrets.posthog_api_key:
+        return None
+
+    _posthog_client = Posthog(
+        settings.secrets.posthog_api_key,
+        host=settings.secrets.posthog_host,
+    )
+    return _posthog_client
+
+
+def _get_base_properties() -> dict[str, Any]:
+    """Get base properties included in all events."""
+    return {
+        "environment": settings.config.app_env.value,
+        "source": "chat_copilot",
+    }
+
+
+def track_user_message(
+    user_id: str | None,
+    session_id: str,
+    message_length: int,
+) -> None:
+    """Track when a user sends a message in chat.
+
+    Args:
+        user_id: The user's ID (or None for anonymous)
+        session_id: The chat session ID
+        message_length: Length of the user's message
+    """
+    client = _get_posthog_client()
+    if not client:
+        return
+
+    try:
+        properties = {
+            **_get_base_properties(),
+            "session_id": session_id,
+            "message_length": message_length,
+        }
+        client.capture(
+            distinct_id=user_id or f"anonymous_{session_id}",
+            event="chat_message_sent",
+            properties=properties,
+        )
+    except Exception as e:
+        logger.warning(f"Failed to track user message: {e}")
+
+
+def track_tool_called(
+    user_id: str | None,
+    session_id: str,
+    tool_name: str,
+    tool_call_id: str,
+) -> None:
+    """Track when a tool is called in chat.
+
+    Args:
+        user_id: The user's ID (or None for anonymous)
+        session_id: The chat session ID
+        tool_name: Name of the tool being called
+        tool_call_id: Unique ID of the tool call
+    """
+    client = _get_posthog_client()
+    if not client:
+        return
+
+    try:
+        properties = {
+            **_get_base_properties(),
+            "session_id": session_id,
+            "tool_name": tool_name,
+            "tool_call_id": tool_call_id,
+        }
+        client.capture(
+            distinct_id=user_id or f"anonymous_{session_id}",
+            event="chat_tool_called",
+            properties=properties,
+        )
+    except Exception as e:
+        logger.warning(f"Failed to track tool call: {e}")
+
+
+def track_agent_run_success(
+    user_id: str,
+    session_id: str,
+    graph_id: str,
+    graph_name: str,
+    execution_id: str,
+    library_agent_id: str,
+) -> None:
+    """Track when an agent is successfully run.
+
+    Args:
+        user_id: The user's ID
+        session_id: The chat session ID
+        graph_id: ID of the agent graph
+        graph_name: Name of the agent
+        execution_id: ID of the execution
+        library_agent_id: ID of the library agent
+    """
+    client = _get_posthog_client()
+    if not client:
+        return
+
+    try:
+        properties = {
+            **_get_base_properties(),
+            "session_id": session_id,
+            "graph_id": graph_id,
+            "graph_name": graph_name,
+            "execution_id": execution_id,
+            "library_agent_id": library_agent_id,
+        }
+        client.capture(
+            distinct_id=user_id,
+            event="chat_agent_run_success",
+            properties=properties,
+        )
+    except Exception as e:
+        logger.warning(f"Failed to track agent run: {e}")
+
+
+def track_agent_scheduled(
+    user_id: str,
+    session_id: str,
+    graph_id: str,
+    graph_name: str,
+    schedule_id: str,
+    schedule_name: str,
+    cron: str,
+    library_agent_id: str,
+) -> None:
+    """Track when an agent is successfully scheduled.
+
+    Args:
+        user_id: The user's ID
+        session_id: The chat session ID
+        graph_id: ID of the agent graph
+        graph_name: Name of the agent
+        schedule_id: ID of the schedule
+        schedule_name: Name of the schedule
+        cron: Cron expression for the schedule
+        library_agent_id: ID of the library agent
+    """
+    client = _get_posthog_client()
+    if not client:
+        return
+
+    try:
+        properties = {
+            **_get_base_properties(),
+            "session_id": session_id,
+            "graph_id": graph_id,
+            "graph_name": graph_name,
+            "schedule_id": schedule_id,
+            "schedule_name": schedule_name,
+            "cron": cron,
+            "library_agent_id": library_agent_id,
+        }
+        client.capture(
+            distinct_id=user_id,
+            event="chat_agent_scheduled",
+            properties=properties,
+        )
+    except Exception as e:
+        logger.warning(f"Failed to track agent schedule: {e}")
+
+
+def track_trigger_setup(
+    user_id: str,
+    session_id: str,
+    graph_id: str,
+    graph_name: str,
+    trigger_type: str,
+    library_agent_id: str,
+) -> None:
+    """Track when a trigger is set up for an agent.
+
+    Args:
+        user_id: The user's ID
+        session_id: The chat session ID
+        graph_id: ID of the agent graph
+        graph_name: Name of the agent
+        trigger_type: Type of trigger (e.g., 'webhook')
+        library_agent_id: ID of the library agent
+    """
+    client = _get_posthog_client()
+    if not client:
+        return
+
+    try:
+        properties = {
+            **_get_base_properties(),
+            "session_id": session_id,
+            "graph_id": graph_id,
+            "graph_name": graph_name,
+            "trigger_type": trigger_type,
+            "library_agent_id": library_agent_id,
+        }
+        client.capture(
+            distinct_id=user_id,
+            event="chat_trigger_setup",
+            properties=properties,
+        )
+    except Exception as e:
+        logger.warning(f"Failed to track trigger setup: {e}")

autogpt_platform/backend/backend/blocks/claude_code.py

@@ -0,0 +1,659 @@
+import json
+import shlex
+import uuid
+from typing import Literal, Optional
+
+from e2b import AsyncSandbox as BaseAsyncSandbox
+from pydantic import BaseModel, SecretStr
+
+from backend.data.block import (
+    Block,
+    BlockCategory,
+    BlockOutput,
+    BlockSchemaInput,
+    BlockSchemaOutput,
+)
+from backend.data.model import (
+    APIKeyCredentials,
+    CredentialsField,
+    CredentialsMetaInput,
+    SchemaField,
+)
+from backend.integrations.providers import ProviderName
+
+
+class ClaudeCodeExecutionError(Exception):
+    """Exception raised when Claude Code execution fails.
+
+    Carries the sandbox_id so it can be returned to the user for cleanup
+    when dispose_sandbox=False.
+    """
+
+    def __init__(self, message: str, sandbox_id: str = ""):
+        super().__init__(message)
+        self.sandbox_id = sandbox_id
+
+
+# Test credentials for E2B
+TEST_E2B_CREDENTIALS = APIKeyCredentials(
+    id="01234567-89ab-cdef-0123-456789abcdef",
+    provider="e2b",
+    api_key=SecretStr("mock-e2b-api-key"),
+    title="Mock E2B API key",
+    expires_at=None,
+)
+TEST_E2B_CREDENTIALS_INPUT = {
+    "provider": TEST_E2B_CREDENTIALS.provider,
+    "id": TEST_E2B_CREDENTIALS.id,
+    "type": TEST_E2B_CREDENTIALS.type,
+    "title": TEST_E2B_CREDENTIALS.title,
+}
+
+# Test credentials for Anthropic
+TEST_ANTHROPIC_CREDENTIALS = APIKeyCredentials(
+    id="2e568a2b-b2ea-475a-8564-9a676bf31c56",
+    provider="anthropic",
+    api_key=SecretStr("mock-anthropic-api-key"),
+    title="Mock Anthropic API key",
+    expires_at=None,
+)
+TEST_ANTHROPIC_CREDENTIALS_INPUT = {
+    "provider": TEST_ANTHROPIC_CREDENTIALS.provider,
+    "id": TEST_ANTHROPIC_CREDENTIALS.id,
+    "type": TEST_ANTHROPIC_CREDENTIALS.type,
+    "title": TEST_ANTHROPIC_CREDENTIALS.title,
+}
+
+
+class ClaudeCodeBlock(Block):
+    """
+    Execute tasks using Claude Code (Anthropic's AI coding assistant) in an E2B sandbox.
+
+    Claude Code can create files, install tools, run commands, and perform complex
+    coding tasks autonomously within a secure sandbox environment.
+    """
+
+    # Use base template - we'll install Claude Code ourselves for latest version
+    DEFAULT_TEMPLATE = "base"
+
+    class Input(BlockSchemaInput):
+        e2b_credentials: CredentialsMetaInput[
+            Literal[ProviderName.E2B], Literal["api_key"]
+        ] = CredentialsField(
+            description=(
+                "API key for the E2B platform to create the sandbox. "
+                "Get one on the [e2b website](https://e2b.dev/docs)"
+            ),
+        )
+
+        anthropic_credentials: CredentialsMetaInput[
+            Literal[ProviderName.ANTHROPIC], Literal["api_key"]
+        ] = CredentialsField(
+            description=(
+                "API key for Anthropic to power Claude Code. "
+                "Get one at [Anthropic's website](https://console.anthropic.com)"
+            ),
+        )
+
+        prompt: str = SchemaField(
+            description=(
+                "The task or instruction for Claude Code to execute. "
+                "Claude Code can create files, install packages, run commands, "
+                "and perform complex coding tasks."
+            ),
+            placeholder="Create a hello world index.html file",
+            default="",
+            advanced=False,
+        )
+
+        timeout: int = SchemaField(
+            description=(
+                "Sandbox timeout in seconds. Claude Code tasks can take "
+                "a while, so set this appropriately for your task complexity. "
+                "Note: This only applies when creating a new sandbox. "
+                "When reconnecting to an existing sandbox via sandbox_id, "
+                "the original timeout is retained."
+            ),
+            default=300,  # 5 minutes default
+            advanced=True,
+        )
+
+        setup_commands: list[str] = SchemaField(
+            description=(
+                "Optional shell commands to run before executing Claude Code. "
+                "Useful for installing dependencies or setting up the environment."
+            ),
+            default_factory=list,
+            advanced=True,
+        )
+
+        working_directory: str = SchemaField(
+            description="Working directory for Claude Code to operate in.",
+            default="/home/user",
+            advanced=True,
+        )
+
+        # Session/continuation support
+        session_id: str = SchemaField(
+            description=(
+                "Session ID to resume a previous conversation. "
+                "Leave empty for a new conversation. "
+                "Use the session_id from a previous run to continue that conversation."
+            ),
+            default="",
+            advanced=True,
+        )
+
+        sandbox_id: str = SchemaField(
+            description=(
+                "Sandbox ID to reconnect to an existing sandbox. "
+                "Required when resuming a session (along with session_id). "
+                "Use the sandbox_id from a previous run where dispose_sandbox was False."
+            ),
+            default="",
+            advanced=True,
+        )
+
+        conversation_history: str = SchemaField(
+            description=(
+                "Previous conversation history to continue from. "
+                "Use this to restore context on a fresh sandbox if the previous one timed out. "
+                "Pass the conversation_history output from a previous run."
+            ),
+            default="",
+            advanced=True,
+        )
+
+        dispose_sandbox: bool = SchemaField(
+            description=(
+                "Whether to dispose of the sandbox immediately after execution. "
+                "Set to False if you want to continue the conversation later "
+                "(you'll need both sandbox_id and session_id from the output)."
+            ),
+            default=True,
+            advanced=True,
+        )
+
+    class FileOutput(BaseModel):
+        """A file extracted from the sandbox."""
+
+        path: str
+        relative_path: str  # Path relative to working directory (for GitHub, etc.)
+        name: str
+        content: str
+
+    class Output(BlockSchemaOutput):
+        response: str = SchemaField(
+            description="The output/response from Claude Code execution"
+        )
+        files: list["ClaudeCodeBlock.FileOutput"] = SchemaField(
+            description=(
+                "List of text files created/modified by Claude Code during this execution. "
+                "Each file has 'path', 'relative_path', 'name', and 'content' fields."
+            )
+        )
+        conversation_history: str = SchemaField(
+            description=(
+                "Full conversation history including this turn. "
+                "Pass this to conversation_history input to continue on a fresh sandbox "
+                "if the previous sandbox timed out."
+            )
+        )
+        session_id: str = SchemaField(
+            description=(
+                "Session ID for this conversation. "
+                "Pass this back along with sandbox_id to continue the conversation."
+            )
+        )
+        sandbox_id: Optional[str] = SchemaField(
+            description=(
+                "ID of the sandbox instance. "
+                "Pass this back along with session_id to continue the conversation. "
+                "This is None if dispose_sandbox was True (sandbox was disposed)."
+            ),
+            default=None,
+        )
+        error: str = SchemaField(description="Error message if execution failed")
+
+    def __init__(self):
+        super().__init__(
+            id="4e34f4a5-9b89-4326-ba77-2dd6750b7194",
+            description=(
+                "Execute tasks using Claude Code in an E2B sandbox. "
+                "Claude Code can create files, install tools, run commands, "
+                "and perform complex coding tasks autonomously."
+            ),
+            categories={BlockCategory.DEVELOPER_TOOLS, BlockCategory.AI},
+            input_schema=ClaudeCodeBlock.Input,
+            output_schema=ClaudeCodeBlock.Output,
+            test_credentials={
+                "e2b_credentials": TEST_E2B_CREDENTIALS,
+                "anthropic_credentials": TEST_ANTHROPIC_CREDENTIALS,
+            },
+            test_input={
+                "e2b_credentials": TEST_E2B_CREDENTIALS_INPUT,
+                "anthropic_credentials": TEST_ANTHROPIC_CREDENTIALS_INPUT,
+                "prompt": "Create a hello world HTML file",
+                "timeout": 300,
+                "setup_commands": [],
+                "working_directory": "/home/user",
+                "session_id": "",
+                "sandbox_id": "",
+                "conversation_history": "",
+                "dispose_sandbox": True,
+            },
+            test_output=[
+                ("response", "Created index.html with hello world content"),
+                (
+                    "files",
+                    [
+                        {
+                            "path": "/home/user/index.html",
+                            "relative_path": "index.html",
+                            "name": "index.html",
+                            "content": "<html>Hello World</html>",
+                        }
+                    ],
+                ),
+                (
+                    "conversation_history",
+                    "User: Create a hello world HTML file\n"
+                    "Claude: Created index.html with hello world content",
+                ),
+                ("session_id", str),
+                ("sandbox_id", None),  # None because dispose_sandbox=True in test_input
+            ],
+            test_mock={
+                "execute_claude_code": lambda *args, **kwargs: (
+                    "Created index.html with hello world content",  # response
+                    [
+                        ClaudeCodeBlock.FileOutput(
+                            path="/home/user/index.html",
+                            relative_path="index.html",
+                            name="index.html",
+                            content="<html>Hello World</html>",
+                        )
+                    ],  # files
+                    "User: Create a hello world HTML file\n"
+                    "Claude: Created index.html with hello world content",  # conversation_history
+                    "test-session-id",  # session_id
+                    "sandbox_id",  # sandbox_id
+                ),
+            },
+        )
+
+    async def execute_claude_code(
+        self,
+        e2b_api_key: str,
+        anthropic_api_key: str,
+        prompt: str,
+        timeout: int,
+        setup_commands: list[str],
+        working_directory: str,
+        session_id: str,
+        existing_sandbox_id: str,
+        conversation_history: str,
+        dispose_sandbox: bool,
+    ) -> tuple[str, list["ClaudeCodeBlock.FileOutput"], str, str, str]:
+        """
+        Execute Claude Code in an E2B sandbox.
+
+        Returns:
+            Tuple of (response, files, conversation_history, session_id, sandbox_id)
+        """
+
+        # Validate that sandbox_id is provided when resuming a session
+        if session_id and not existing_sandbox_id:
+            raise ValueError(
+                "sandbox_id is required when resuming a session with session_id. "
+                "The session state is stored in the original sandbox. "
+                "If the sandbox has timed out, use conversation_history instead "
+                "to restore context on a fresh sandbox."
+            )
+
+        sandbox = None
+        sandbox_id = ""
+
+        try:
+            # Either reconnect to existing sandbox or create a new one
+            if existing_sandbox_id:
+                # Reconnect to existing sandbox for conversation continuation
+                sandbox = await BaseAsyncSandbox.connect(
+                    sandbox_id=existing_sandbox_id,
+                    api_key=e2b_api_key,
+                )
+            else:
+                # Create new sandbox
+                sandbox = await BaseAsyncSandbox.create(
+                    template=self.DEFAULT_TEMPLATE,
+                    api_key=e2b_api_key,
+                    timeout=timeout,
+                    envs={"ANTHROPIC_API_KEY": anthropic_api_key},
+                )
+
+                # Install Claude Code from npm (ensures we get the latest version)
+                install_result = await sandbox.commands.run(
+                    "npm install -g @anthropic-ai/claude-code@latest",
+                    timeout=120,  # 2 min timeout for install
+                )
+                if install_result.exit_code != 0:
+                    raise Exception(
+                        f"Failed to install Claude Code: {install_result.stderr}"
+                    )
+
+                # Run any user-provided setup commands
+                for cmd in setup_commands:
+                    setup_result = await sandbox.commands.run(cmd)
+                    if setup_result.exit_code != 0:
+                        raise Exception(
+                            f"Setup command failed: {cmd}\n"
+                            f"Exit code: {setup_result.exit_code}\n"
+                            f"Stdout: {setup_result.stdout}\n"
+                            f"Stderr: {setup_result.stderr}"
+                        )
+
+            # Capture sandbox_id immediately after creation/connection
+            # so it's available for error recovery if dispose_sandbox=False
+            sandbox_id = sandbox.sandbox_id
+
+            # Generate or use provided session ID
+            current_session_id = session_id if session_id else str(uuid.uuid4())
+
+            # Build base Claude flags
+            base_flags = "-p --dangerously-skip-permissions --output-format json"
+
+            # Add conversation history context if provided (for fresh sandbox continuation)
+            history_flag = ""
+            if conversation_history and not session_id:
+                # Inject previous conversation as context via system prompt
+                # Use consistent escaping via _escape_prompt helper
+                escaped_history = self._escape_prompt(
+                    f"Previous conversation context: {conversation_history}"
+                )
+                history_flag = f" --append-system-prompt {escaped_history}"
+
+            # Build Claude command based on whether we're resuming or starting new
+            # Use shlex.quote for working_directory and session IDs to prevent injection
+            safe_working_dir = shlex.quote(working_directory)
+            if session_id:
+                # Resuming existing session (sandbox still alive)
+                safe_session_id = shlex.quote(session_id)
+                claude_command = (
+                    f"cd {safe_working_dir} && "
+                    f"echo {self._escape_prompt(prompt)} | "
+                    f"claude --resume {safe_session_id} {base_flags}"
+                )
+            else:
+                # New session with specific ID
+                safe_current_session_id = shlex.quote(current_session_id)
+                claude_command = (
+                    f"cd {safe_working_dir} && "
+                    f"echo {self._escape_prompt(prompt)} | "
+                    f"claude --session-id {safe_current_session_id} {base_flags}{history_flag}"
+                )
+
+            # Capture timestamp before running Claude Code to filter files later
+            # Capture timestamp 1 second in the past to avoid race condition with file creation
+            timestamp_result = await sandbox.commands.run(
+                "date -u -d '1 second ago' +%Y-%m-%dT%H:%M:%S"
+            )
+            if timestamp_result.exit_code != 0:
+                raise RuntimeError(
+                    f"Failed to capture timestamp: {timestamp_result.stderr}"
+                )
+            start_timestamp = (
+                timestamp_result.stdout.strip() if timestamp_result.stdout else None
+            )
+
+            result = await sandbox.commands.run(
+                claude_command,
+                timeout=0,  # No command timeout - let sandbox timeout handle it
+            )
+
+            # Check for command failure
+            if result.exit_code != 0:
+                error_msg = result.stderr or result.stdout or "Unknown error"
+                raise Exception(
+                    f"Claude Code command failed with exit code {result.exit_code}:\n"
+                    f"{error_msg}"
+                )
+
+            raw_output = result.stdout or ""
+
+            # Parse JSON output to extract response and build conversation history
+            response = ""
+            new_conversation_history = conversation_history or ""
+
+            try:
+                # The JSON output contains the result
+                output_data = json.loads(raw_output)
+                response = output_data.get("result", raw_output)
+
+                # Build conversation history entry
+                turn_entry = f"User: {prompt}\nClaude: {response}"
+                if new_conversation_history:
+                    new_conversation_history = (
+                        f"{new_conversation_history}\n\n{turn_entry}"
+                    )
+                else:
+                    new_conversation_history = turn_entry
+
+            except json.JSONDecodeError:
+                # If not valid JSON, use raw output
+                response = raw_output
+                turn_entry = f"User: {prompt}\nClaude: {response}"
+                if new_conversation_history:
+                    new_conversation_history = (
+                        f"{new_conversation_history}\n\n{turn_entry}"
+                    )
+                else:
+                    new_conversation_history = turn_entry
+
+            # Extract files created/modified during this run
+            files = await self._extract_files(
+                sandbox, working_directory, start_timestamp
+            )
+
+            return (
+                response,
+                files,
+                new_conversation_history,
+                current_session_id,
+                sandbox_id,
+            )
+
+        except Exception as e:
+            # Wrap exception with sandbox_id so caller can access/cleanup
+            # the preserved sandbox when dispose_sandbox=False
+            raise ClaudeCodeExecutionError(str(e), sandbox_id) from e
+
+        finally:
+            if dispose_sandbox and sandbox:
+                await sandbox.kill()
+
+    async def _extract_files(
+        self,
+        sandbox: BaseAsyncSandbox,
+        working_directory: str,
+        since_timestamp: str | None = None,
+    ) -> list["ClaudeCodeBlock.FileOutput"]:
+        """
+        Extract text files created/modified during this Claude Code execution.
+
+        Args:
+            sandbox: The E2B sandbox instance
+            working_directory: Directory to search for files
+            since_timestamp: ISO timestamp - only return files modified after this time
+
+        Returns:
+            List of FileOutput objects with path, relative_path, name, and content
+        """
+        files: list[ClaudeCodeBlock.FileOutput] = []
+
+        # Text file extensions we can safely read as text
+        text_extensions = {
+            ".txt",
+            ".md",
+            ".html",
+            ".htm",
+            ".css",
+            ".js",
+            ".ts",
+            ".jsx",
+            ".tsx",
+            ".json",
+            ".xml",
+            ".yaml",
+            ".yml",
+            ".toml",
+            ".ini",
+            ".cfg",
+            ".conf",
+            ".py",
+            ".rb",
+            ".php",
+            ".java",
+            ".c",
+            ".cpp",
+            ".h",
+            ".hpp",
+            ".cs",
+            ".go",
+            ".rs",
+            ".swift",
+            ".kt",
+            ".scala",
+            ".sh",
+            ".bash",
+            ".zsh",
+            ".sql",
+            ".graphql",
+            ".env",
+            ".gitignore",
+            ".dockerfile",
+            "Dockerfile",
+            ".vue",
+            ".svelte",
+            ".astro",
+            ".mdx",
+            ".rst",
+            ".tex",
+            ".csv",
+            ".log",
+        }
+
+        try:
+            # List files recursively using find command
+            # Exclude node_modules and .git directories, but allow hidden files
+            # like .env and .gitignore (they're filtered by text_extensions later)
+            # Filter by timestamp to only get files created/modified during this run
+            safe_working_dir = shlex.quote(working_directory)
+            timestamp_filter = ""
+            if since_timestamp:
+                timestamp_filter = f"-newermt {shlex.quote(since_timestamp)} "
+            find_result = await sandbox.commands.run(
+                f"find {safe_working_dir} -type f "
+                f"{timestamp_filter}"
+                f"-not -path '*/node_modules/*' "
+                f"-not -path '*/.git/*' "
+                f"2>/dev/null"
+            )
+
+            if find_result.stdout:
+                for file_path in find_result.stdout.strip().split("\n"):
+                    if not file_path:
+                        continue
+
+                    # Check if it's a text file we can read
+                    is_text = any(
+                        file_path.endswith(ext) for ext in text_extensions
+                    ) or file_path.endswith("Dockerfile")
+
+                    if is_text:
+                        try:
+                            content = await sandbox.files.read(file_path)
+                            # Handle bytes or string
+                            if isinstance(content, bytes):
+                                content = content.decode("utf-8", errors="replace")
+
+                            # Extract filename from path
+                            file_name = file_path.split("/")[-1]
+
+                            # Calculate relative path by stripping working directory
+                            relative_path = file_path
+                            if file_path.startswith(working_directory):
+                                relative_path = file_path[len(working_directory) :]
+                                # Remove leading slash if present
+                                if relative_path.startswith("/"):
+                                    relative_path = relative_path[1:]
+
+                            files.append(
+                                ClaudeCodeBlock.FileOutput(
+                                    path=file_path,
+                                    relative_path=relative_path,
+                                    name=file_name,
+                                    content=content,
+                                )
+                            )
+                        except Exception:
+                            # Skip files that can't be read
+                            pass
+
+        except Exception:
+            # If file extraction fails, return empty results
+            pass
+
+        return files
+
+    def _escape_prompt(self, prompt: str) -> str:
+        """Escape the prompt for safe shell execution."""
+        # Use single quotes and escape any single quotes in the prompt
+        escaped = prompt.replace("'", "'\"'\"'")
+        return f"'{escaped}'"
+
+    async def run(
+        self,
+        input_data: Input,
+        *,
+        e2b_credentials: APIKeyCredentials,
+        anthropic_credentials: APIKeyCredentials,
+        **kwargs,
+    ) -> BlockOutput:
+        try:
+            (
+                response,
+                files,
+                conversation_history,
+                session_id,
+                sandbox_id,
+            ) = await self.execute_claude_code(
+                e2b_api_key=e2b_credentials.api_key.get_secret_value(),
+                anthropic_api_key=anthropic_credentials.api_key.get_secret_value(),
+                prompt=input_data.prompt,
+                timeout=input_data.timeout,
+                setup_commands=input_data.setup_commands,
+                working_directory=input_data.working_directory,
+                session_id=input_data.session_id,
+                existing_sandbox_id=input_data.sandbox_id,
+                conversation_history=input_data.conversation_history,
+                dispose_sandbox=input_data.dispose_sandbox,
+            )
+
+            yield "response", response
+            # Always yield files (empty list if none) to match Output schema
+            yield "files", [f.model_dump() for f in files]
+            # Always yield conversation_history so user can restore context on fresh sandbox
+            yield "conversation_history", conversation_history
+            # Always yield session_id so user can continue conversation
+            yield "session_id", session_id
+            # Always yield sandbox_id (None if disposed) to match Output schema
+            yield "sandbox_id", sandbox_id if not input_data.dispose_sandbox else None
+
+        except ClaudeCodeExecutionError as e:
+            yield "error", str(e)
+            # If sandbox was preserved (dispose_sandbox=False), yield sandbox_id
+            # so user can reconnect to or clean up the orphaned sandbox
+            if not input_data.dispose_sandbox and e.sandbox_id:
+                yield "sandbox_id", e.sandbox_id
+        except Exception as e:
+            yield "error", str(e)

autogpt_platform/backend/backend/util/settings.py

@@ -666,6 +666,12 @@ class Secrets(UpdateTrackingModel["Secrets"], BaseSettings):
         default="https://cloud.langfuse.com", description="Langfuse host URL"
     )
 
+    # PostHog analytics
+    posthog_api_key: str = Field(default="", description="PostHog API key")
+    posthog_host: str = Field(
+        default="https://us.i.posthog.com", description="PostHog host URL"
+    )
+
     # Add more secret fields as needed
     model_config = SettingsConfigDict(
         env_file=".env",

autogpt_platform/backend/migrations/20260109181714_add_docs_embedding/migration.sql

@@ -1,12 +1,37 @@
 -- CreateExtension
 -- Supabase: pgvector must be enabled via Dashboard → Database → Extensions first
--- Creates extension in current schema (determined by search_path from DATABASE_URL ?schema= param)
+-- Ensures vector extension is in the current schema (from DATABASE_URL ?schema= param)
+-- If it exists in a different schema (e.g., public), we drop and recreate it in the current schema
 -- This ensures vector type is in the same schema as tables, making ::vector work without explicit qualification
 DO $$
+DECLARE
+    current_schema_name text;
+    vector_schema text;
 BEGIN
-    CREATE EXTENSION IF NOT EXISTS "vector";
-EXCEPTION WHEN OTHERS THEN
-    RAISE NOTICE 'vector extension not available or already exists, skipping';
+    -- Get the current schema from search_path
+    SELECT current_schema() INTO current_schema_name;
+
+    -- Check if vector extension exists and which schema it's in
+    SELECT n.nspname INTO vector_schema
+    FROM pg_extension e
+    JOIN pg_namespace n ON e.extnamespace = n.oid
+    WHERE e.extname = 'vector';
+
+    -- Handle removal if in wrong schema
+    IF vector_schema IS NOT NULL AND vector_schema != current_schema_name THEN
+        BEGIN
+            -- Vector exists in a different schema, drop it first
+            RAISE WARNING 'pgvector found in schema "%" but need it in "%". Dropping and reinstalling...',
+                vector_schema, current_schema_name;
+            EXECUTE 'DROP EXTENSION IF EXISTS vector CASCADE';
+        EXCEPTION WHEN OTHERS THEN
+            RAISE EXCEPTION 'Failed to drop pgvector from schema "%": %. You may need to drop it manually.',
+                vector_schema, SQLERRM;
+        END;
+    END IF;
+
+    -- Create extension in current schema (let it fail naturally if not available)
+    EXECUTE format('CREATE EXTENSION IF NOT EXISTS vector SCHEMA %I', current_schema_name);
 END $$;
 
 -- CreateEnum

autogpt_platform/backend/migrations/20260112173500_add_supabase_extensions_to_platform_schema/migration.sql

@@ -1,71 +0,0 @@
--- Acknowledge Supabase-managed extensions to prevent drift warnings
--- These extensions are pre-installed by Supabase in specific schemas
--- This migration ensures they exist where available (Supabase) or skips gracefully (CI)
-
--- Create schemas (safe in both CI and Supabase)
-CREATE SCHEMA IF NOT EXISTS "extensions";
-
--- Extensions that exist in both CI and Supabase
-DO $$
-BEGIN
-    CREATE EXTENSION IF NOT EXISTS "pgcrypto" WITH SCHEMA "extensions";
-EXCEPTION WHEN OTHERS THEN
-    RAISE NOTICE 'pgcrypto extension not available, skipping';
-END $$;
-
-DO $$
-BEGIN
-    CREATE EXTENSION IF NOT EXISTS "uuid-ossp" WITH SCHEMA "extensions";
-EXCEPTION WHEN OTHERS THEN
-    RAISE NOTICE 'uuid-ossp extension not available, skipping';
-END $$;
-
--- Supabase-specific extensions (skip gracefully in CI)
-DO $$
-BEGIN
-    CREATE EXTENSION IF NOT EXISTS "pg_stat_statements" WITH SCHEMA "extensions";
-EXCEPTION WHEN OTHERS THEN
-    RAISE NOTICE 'pg_stat_statements extension not available, skipping';
-END $$;
-
-DO $$
-BEGIN
-    CREATE EXTENSION IF NOT EXISTS "pg_net" WITH SCHEMA "extensions";
-EXCEPTION WHEN OTHERS THEN
-    RAISE NOTICE 'pg_net extension not available, skipping';
-END $$;
-
-DO $$
-BEGIN
-    CREATE EXTENSION IF NOT EXISTS "pgjwt" WITH SCHEMA "extensions";
-EXCEPTION WHEN OTHERS THEN
-    RAISE NOTICE 'pgjwt extension not available, skipping';
-END $$;
-
-DO $$
-BEGIN
-    CREATE SCHEMA IF NOT EXISTS "graphql";
-    CREATE EXTENSION IF NOT EXISTS "pg_graphql" WITH SCHEMA "graphql";
-EXCEPTION WHEN OTHERS THEN
-    RAISE NOTICE 'pg_graphql extension not available, skipping';
-END $$;
-
-DO $$
-BEGIN
-    CREATE SCHEMA IF NOT EXISTS "pgsodium";
-    CREATE EXTENSION IF NOT EXISTS "pgsodium" WITH SCHEMA "pgsodium";
-EXCEPTION WHEN OTHERS THEN
-    RAISE NOTICE 'pgsodium extension not available, skipping';
-END $$;
-
-DO $$
-BEGIN
-    CREATE SCHEMA IF NOT EXISTS "vault";
-    CREATE EXTENSION IF NOT EXISTS "supabase_vault" WITH SCHEMA "vault";
-EXCEPTION WHEN OTHERS THEN
-    RAISE NOTICE 'supabase_vault extension not available, skipping';
-END $$;
-
-
--- Return to platform
-CREATE SCHEMA IF NOT EXISTS "platform";

autogpt_platform/backend/poetry.lock

@@ -4204,14 +4204,14 @@ strenum = {version = ">=0.4.9,<0.5.0", markers = "python_version < \"3.11\""}
 
 [[package]]
 name = "posthog"
-version = "6.1.1"
+version = "7.6.0"
 description = "Integrate PostHog into any python application."
 optional = false
-python-versions = ">=3.9"
+python-versions = ">=3.10"
 groups = ["main"]
 files = [
-    {file = "posthog-6.1.1-py3-none-any.whl", hash = "sha256:329fd3d06b4d54cec925f47235bd8e327c91403c2f9ec38f1deb849535934dba"},
-    {file = "posthog-6.1.1.tar.gz", hash = "sha256:b453f54c4a2589da859fd575dd3bf86fcb40580727ec399535f268b1b9f318b8"},
+    {file = "posthog-7.6.0-py3-none-any.whl", hash = "sha256:c4dd78cf77c4fecceb965f86066e5ac37886ef867d68ffe75a1db5d681d7d9ad"},
+    {file = "posthog-7.6.0.tar.gz", hash = "sha256:941dfd278ee427c9b14640f09b35b5bb52a71bdf028d7dbb7307e1838fd3002e"},
 ]
 
 [package.dependencies]
@@ -4225,7 +4225,7 @@ typing-extensions = ">=4.2.0"
 [package.extras]
 dev = ["django-stubs", "lxml", "mypy", "mypy-baseline", "packaging", "pre-commit", "pydantic", "ruff", "setuptools", "tomli", "tomli_w", "twine", "types-mock", "types-python-dateutil", "types-requests", "types-setuptools", "types-six", "wheel"]
 langchain = ["langchain (>=0.2.0)"]
-test = ["anthropic", "coverage", "django", "freezegun (==1.5.1)", "google-genai", "langchain-anthropic (>=0.3.15)", "langchain-community (>=0.3.25)", "langchain-core (>=0.3.65)", "langchain-openai (>=0.3.22)", "langgraph (>=0.4.8)", "mock (>=2.0.0)", "openai", "parameterized (>=0.8.1)", "pydantic", "pytest", "pytest-asyncio", "pytest-timeout"]
+test = ["anthropic (>=0.72)", "coverage", "django", "freezegun (==1.5.1)", "google-genai", "langchain-anthropic (>=1.0)", "langchain-community (>=0.4)", "langchain-core (>=1.0)", "langchain-openai (>=1.0)", "langgraph (>=1.0)", "mock (>=2.0.0)", "openai (>=2.0)", "parameterized (>=0.8.1)", "pydantic", "pytest", "pytest-asyncio", "pytest-timeout"]
 
 [[package]]
 name = "postmarker"
@@ -7512,4 +7512,4 @@ cffi = ["cffi (>=1.11)"]
 [metadata]
 lock-version = "2.1"
 python-versions = ">=3.10,<3.14"
-content-hash = "18b92e09596298c82432e4d0a85cb6d80a40b4229bee0a0c15f0529fd6cb21a4"
+content-hash = "ee5742dc1a9df50dfc06d4b26a1682cbb2b25cab6b79ce5625ec272f93e4f4bf"

autogpt_platform/backend/pyproject.toml

@@ -85,6 +85,7 @@ exa-py = "^1.14.20"
 croniter = "^6.0.0"
 stagehand = "^0.5.1"
 gravitas-md2gdocs = "^0.1.0"
+posthog = "^7.6.0"
 
 [tool.poetry.group.dev.dependencies]
 aiohappyeyeballs = "^2.6.1"

autogpt_platform/backend/scripts/generate_block_docs.py

@@ -34,7 +34,10 @@ logger = logging.getLogger(__name__)
 
 # Default output directory relative to repo root
 DEFAULT_OUTPUT_DIR = (
-    Path(__file__).parent.parent.parent.parent / "docs" / "integrations"
+    Path(__file__).parent.parent.parent.parent
+    / "docs"
+    / "integrations"
+    / "block-integrations"
 )
 
 
@@ -421,6 +424,14 @@ def generate_block_markdown(
     lines.append("<!-- END MANUAL -->")
     lines.append("")
 
+    # Optional per-block extras (only include if has content)
+    extras = manual_content.get("extras", "")
+    if extras:
+        lines.append("<!-- MANUAL: extras -->")
+        lines.append(extras)
+        lines.append("<!-- END MANUAL -->")
+        lines.append("")
+
     lines.append("---")
     lines.append("")
 
@@ -456,25 +467,52 @@ def get_block_file_mapping(blocks: list[BlockDoc]) -> dict[str, list[BlockDoc]]:
     return dict(file_mapping)
 
 
-def generate_overview_table(blocks: list[BlockDoc]) -> str:
-    """Generate the overview table markdown (blocks.md)."""
+def generate_overview_table(blocks: list[BlockDoc], block_dir_prefix: str = "") -> str:
+    """Generate the overview table markdown (blocks.md).
+
+    Args:
+        blocks: List of block documentation objects
+        block_dir_prefix: Prefix for block file links (e.g., "block-integrations/")
+    """
     lines = []
 
+    # GitBook YAML frontmatter
+    lines.append("---")
+    lines.append("layout:")
+    lines.append("  width: default")
+    lines.append("  title:")
+    lines.append("    visible: true")
+    lines.append("  description:")
+    lines.append("    visible: true")
+    lines.append("  tableOfContents:")
+    lines.append("    visible: false")
+    lines.append("  outline:")
+    lines.append("    visible: true")
+    lines.append("  pagination:")
+    lines.append("    visible: true")
+    lines.append("  metadata:")
+    lines.append("    visible: true")
+    lines.append("---")
+    lines.append("")
+
     lines.append("# AutoGPT Blocks Overview")
     lines.append("")
     lines.append(
         'AutoGPT uses a modular approach with various "blocks" to handle different tasks. These blocks are the building blocks of AutoGPT workflows, allowing users to create complex automations by combining simple, specialized components.'
     )
     lines.append("")
-    lines.append('!!! info "Creating Your Own Blocks"')
-    lines.append("    Want to create your own custom blocks? Check out our guides:")
-    lines.append("    ")
+    lines.append('{% hint style="info" %}')
+    lines.append("**Creating Your Own Blocks**")
+    lines.append("")
+    lines.append("Want to create your own custom blocks? Check out our guides:")
+    lines.append("")
     lines.append(
-        "    - [Build your own Blocks](https://docs.agpt.co/platform/new_blocks/) - Step-by-step tutorial with examples"
+        "* [Build your own Blocks](https://docs.agpt.co/platform/new_blocks/) - Step-by-step tutorial with examples"
     )
     lines.append(
-        "    - [Block SDK Guide](https://docs.agpt.co/platform/block-sdk-guide/) - Advanced SDK patterns with OAuth, webhooks, and provider configuration"
+        "* [Block SDK Guide](https://docs.agpt.co/platform/block-sdk-guide/) - Advanced SDK patterns with OAuth, webhooks, and provider configuration"
     )
+    lines.append("{% endhint %}")
     lines.append("")
     lines.append(
         "Below is a comprehensive list of all available blocks, categorized by their primary function. Click on any block name to view its detailed documentation."
@@ -537,7 +575,8 @@ def generate_overview_table(blocks: list[BlockDoc]) -> str:
                     else "No description"
                 )
                 short_desc = short_desc.replace("\n", " ").replace("|", "\\|")
-                lines.append(f"| [{block.name}]({file_path}#{anchor}) | {short_desc} |")
+                link_path = f"{block_dir_prefix}{file_path}"
+                lines.append(f"| [{block.name}]({link_path}#{anchor}) | {short_desc} |")
             lines.append("")
             continue
 
@@ -563,13 +602,55 @@ def generate_overview_table(blocks: list[BlockDoc]) -> str:
             )
             short_desc = short_desc.replace("\n", " ").replace("|", "\\|")
 
-            lines.append(f"| [{block.name}]({file_path}#{anchor}) | {short_desc} |")
+            link_path = f"{block_dir_prefix}{file_path}"
+            lines.append(f"| [{block.name}]({link_path}#{anchor}) | {short_desc} |")
 
         lines.append("")
 
     return "\n".join(lines)
 
 
+def generate_summary_md(
+    blocks: list[BlockDoc], root_dir: Path, block_dir_prefix: str = ""
+) -> str:
+    """Generate SUMMARY.md for GitBook navigation.
+
+    Args:
+        blocks: List of block documentation objects
+        root_dir: The root docs directory (e.g., docs/integrations/)
+        block_dir_prefix: Prefix for block file links (e.g., "block-integrations/")
+    """
+    lines = []
+    lines.append("# Table of contents")
+    lines.append("")
+    lines.append("* [AutoGPT Blocks Overview](README.md)")
+    lines.append("")
+
+    # Check for guides/ directory at the root level (docs/integrations/guides/)
+    guides_dir = root_dir / "guides"
+    if guides_dir.exists():
+        lines.append("## Guides")
+        lines.append("")
+        for guide_file in sorted(guides_dir.glob("*.md")):
+            # Use just the file name for title (replace hyphens/underscores with spaces)
+            title = file_path_to_title(guide_file.stem.replace("-", "_") + ".md")
+            lines.append(f"* [{title}](guides/{guide_file.name})")
+        lines.append("")
+
+    lines.append("## Block Integrations")
+    lines.append("")
+
+    file_mapping = get_block_file_mapping(blocks)
+    for file_path in sorted(file_mapping.keys()):
+        title = file_path_to_title(file_path)
+        link_path = f"{block_dir_prefix}{file_path}"
+        lines.append(f"* [{title}]({link_path})")
+
+    lines.append("")
+
+    return "\n".join(lines)
+
+
 def load_all_blocks_for_docs() -> list[BlockDoc]:
     """Load all blocks and extract documentation."""
     from backend.blocks import load_all_blocks
@@ -653,6 +734,16 @@ def write_block_docs(
                 )
             )
 
+        # Add file-level additional_content section if present
+        file_additional = extract_manual_content(existing_content).get(
+            "additional_content", ""
+        )
+        if file_additional:
+            content_parts.append("<!-- MANUAL: additional_content -->")
+            content_parts.append(file_additional)
+            content_parts.append("<!-- END MANUAL -->")
+            content_parts.append("")
+
         full_content = file_header + "\n" + "\n".join(content_parts)
         generated_files[str(file_path)] = full_content
 
@@ -661,14 +752,28 @@ def write_block_docs(
 
         full_path.write_text(full_content)
 
-    # Generate overview file
-    overview_content = generate_overview_table(blocks)
-    overview_path = output_dir / "README.md"
+    # Generate overview file at the parent directory (docs/integrations/)
+    # with links prefixed to point into block-integrations/
+    root_dir = output_dir.parent
+    block_dir_name = output_dir.name  # "block-integrations"
+    block_dir_prefix = f"{block_dir_name}/"
+
+    overview_content = generate_overview_table(blocks, block_dir_prefix)
+    overview_path = root_dir / "README.md"
     generated_files["README.md"] = overview_content
     overview_path.write_text(overview_content)
 
     if verbose:
-        print("  Writing README.md (overview)")
+        print("  Writing README.md (overview) to parent directory")
+
+    # Generate SUMMARY.md for GitBook navigation at the parent directory
+    summary_content = generate_summary_md(blocks, root_dir, block_dir_prefix)
+    summary_path = root_dir / "SUMMARY.md"
+    generated_files["SUMMARY.md"] = summary_content
+    summary_path.write_text(summary_content)
+
+    if verbose:
+        print("  Writing SUMMARY.md (navigation) to parent directory")
 
     return generated_files
 
@@ -748,6 +853,16 @@ def check_docs_in_sync(output_dir: Path, blocks: list[BlockDoc]) -> bool:
             elif block_match.group(1).strip() != expected_block_content.strip():
                 mismatched_blocks.append(block.name)
 
+        # Add file-level additional_content to expected content (matches write_block_docs)
+        file_additional = extract_manual_content(existing_content).get(
+            "additional_content", ""
+        )
+        if file_additional:
+            content_parts.append("<!-- MANUAL: additional_content -->")
+            content_parts.append(file_additional)
+            content_parts.append("<!-- END MANUAL -->")
+            content_parts.append("")
+
         expected_content = file_header + "\n" + "\n".join(content_parts)
 
         if existing_content.strip() != expected_content.strip():
@@ -757,11 +872,15 @@ def check_docs_in_sync(output_dir: Path, blocks: list[BlockDoc]) -> bool:
             out_of_sync_details.append((file_path, mismatched_blocks))
             all_match = False
 
-    # Check overview
-    overview_path = output_dir / "README.md"
+    # Check overview at the parent directory (docs/integrations/)
+    root_dir = output_dir.parent
+    block_dir_name = output_dir.name  # "block-integrations"
+    block_dir_prefix = f"{block_dir_name}/"
+
+    overview_path = root_dir / "README.md"
     if overview_path.exists():
         existing_overview = overview_path.read_text()
-        expected_overview = generate_overview_table(blocks)
+        expected_overview = generate_overview_table(blocks, block_dir_prefix)
         if existing_overview.strip() != expected_overview.strip():
             print("OUT OF SYNC: README.md (overview)")
             print("  The blocks overview table needs regeneration")
@@ -772,6 +891,21 @@ def check_docs_in_sync(output_dir: Path, blocks: list[BlockDoc]) -> bool:
         out_of_sync_details.append(("README.md", ["overview table"]))
         all_match = False
 
+    # Check SUMMARY.md at the parent directory
+    summary_path = root_dir / "SUMMARY.md"
+    if summary_path.exists():
+        existing_summary = summary_path.read_text()
+        expected_summary = generate_summary_md(blocks, root_dir, block_dir_prefix)
+        if existing_summary.strip() != expected_summary.strip():
+            print("OUT OF SYNC: SUMMARY.md (navigation)")
+            print("  The GitBook navigation needs regeneration")
+            out_of_sync_details.append(("SUMMARY.md", ["navigation"]))
+            all_match = False
+    else:
+        print("MISSING: SUMMARY.md (navigation)")
+        out_of_sync_details.append(("SUMMARY.md", ["navigation"]))
+        all_match = False
+
     # Check for unfilled manual sections
     unfilled_patterns = [
         "_Add a description of this category of blocks._",

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+import { expect, test } from "vitest";
+import { render, screen } from "@/tests/integrations/test-utils";
+import { MainMarkeplacePage } from "../MainMarketplacePage";
+import { server } from "@/mocks/mock-server";
+import { getDeleteV2DeleteStoreSubmissionMockHandler422 } from "@/app/api/__generated__/endpoints/store/store.msw";
+
+// Only for CI testing purpose, will remove it in future PR
+test("MainMarketplacePage", async () => {
+  server.use(getDeleteV2DeleteStoreSubmissionMockHandler422());
+
+  render(<MainMarkeplacePage />);
+  expect(
+    await screen.findByText("Featured agents", { exact: false }),
+  ).toBeDefined();
+});

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

docs/integrations/SUMMARY.md

@@ -0,0 +1,133 @@
+# Table of contents
+
+* [AutoGPT Blocks Overview](README.md)
+
+## Guides
+
+* [LLM Providers](guides/llm-providers.md)
+* [Voice Providers](guides/voice-providers.md)
+
+## Block Integrations
+
+* [Airtable Bases](block-integrations/airtable/bases.md)
+* [Airtable Records](block-integrations/airtable/records.md)
+* [Airtable Schema](block-integrations/airtable/schema.md)
+* [Airtable Triggers](block-integrations/airtable/triggers.md)
+* [Apollo Organization](block-integrations/apollo/organization.md)
+* [Apollo People](block-integrations/apollo/people.md)
+* [Apollo Person](block-integrations/apollo/person.md)
+* [Ayrshare Post To Bluesky](block-integrations/ayrshare/post_to_bluesky.md)
+* [Ayrshare Post To Facebook](block-integrations/ayrshare/post_to_facebook.md)
+* [Ayrshare Post To GMB](block-integrations/ayrshare/post_to_gmb.md)
+* [Ayrshare Post To Instagram](block-integrations/ayrshare/post_to_instagram.md)
+* [Ayrshare Post To LinkedIn](block-integrations/ayrshare/post_to_linkedin.md)
+* [Ayrshare Post To Pinterest](block-integrations/ayrshare/post_to_pinterest.md)
+* [Ayrshare Post To Reddit](block-integrations/ayrshare/post_to_reddit.md)
+* [Ayrshare Post To Snapchat](block-integrations/ayrshare/post_to_snapchat.md)
+* [Ayrshare Post To Telegram](block-integrations/ayrshare/post_to_telegram.md)
+* [Ayrshare Post To Threads](block-integrations/ayrshare/post_to_threads.md)
+* [Ayrshare Post To TikTok](block-integrations/ayrshare/post_to_tiktok.md)
+* [Ayrshare Post To X](block-integrations/ayrshare/post_to_x.md)
+* [Ayrshare Post To YouTube](block-integrations/ayrshare/post_to_youtube.md)
+* [Baas Bots](block-integrations/baas/bots.md)
+* [Bannerbear Text Overlay](block-integrations/bannerbear/text_overlay.md)
+* [Basic](block-integrations/basic.md)
+* [Compass Triggers](block-integrations/compass/triggers.md)
+* [Data](block-integrations/data.md)
+* [Dataforseo Keyword Suggestions](block-integrations/dataforseo/keyword_suggestions.md)
+* [Dataforseo Related Keywords](block-integrations/dataforseo/related_keywords.md)
+* [Discord Bot Blocks](block-integrations/discord/bot_blocks.md)
+* [Discord OAuth Blocks](block-integrations/discord/oauth_blocks.md)
+* [Enrichlayer LinkedIn](block-integrations/enrichlayer/linkedin.md)
+* [Exa Answers](block-integrations/exa/answers.md)
+* [Exa Code Context](block-integrations/exa/code_context.md)
+* [Exa Contents](block-integrations/exa/contents.md)
+* [Exa Research](block-integrations/exa/research.md)
+* [Exa Search](block-integrations/exa/search.md)
+* [Exa Similar](block-integrations/exa/similar.md)
+* [Exa Webhook Blocks](block-integrations/exa/webhook_blocks.md)
+* [Exa Websets](block-integrations/exa/websets.md)
+* [Exa Websets Enrichment](block-integrations/exa/websets_enrichment.md)
+* [Exa Websets Import Export](block-integrations/exa/websets_import_export.md)
+* [Exa Websets Items](block-integrations/exa/websets_items.md)
+* [Exa Websets Monitor](block-integrations/exa/websets_monitor.md)
+* [Exa Websets Polling](block-integrations/exa/websets_polling.md)
+* [Exa Websets Search](block-integrations/exa/websets_search.md)
+* [Fal AI Video Generator](block-integrations/fal/ai_video_generator.md)
+* [Firecrawl Crawl](block-integrations/firecrawl/crawl.md)
+* [Firecrawl Extract](block-integrations/firecrawl/extract.md)
+* [Firecrawl Map](block-integrations/firecrawl/map.md)
+* [Firecrawl Scrape](block-integrations/firecrawl/scrape.md)
+* [Firecrawl Search](block-integrations/firecrawl/search.md)
+* [Generic Webhook Triggers](block-integrations/generic_webhook/triggers.md)
+* [GitHub Checks](block-integrations/github/checks.md)
+* [GitHub CI](block-integrations/github/ci.md)
+* [GitHub Issues](block-integrations/github/issues.md)
+* [GitHub Pull Requests](block-integrations/github/pull_requests.md)
+* [GitHub Repo](block-integrations/github/repo.md)
+* [GitHub Reviews](block-integrations/github/reviews.md)
+* [GitHub Statuses](block-integrations/github/statuses.md)
+* [GitHub Triggers](block-integrations/github/triggers.md)
+* [Google Calendar](block-integrations/google/calendar.md)
+* [Google Docs](block-integrations/google/docs.md)
+* [Google Gmail](block-integrations/google/gmail.md)
+* [Google Sheets](block-integrations/google/sheets.md)
+* [HubSpot Company](block-integrations/hubspot/company.md)
+* [HubSpot Contact](block-integrations/hubspot/contact.md)
+* [HubSpot Engagement](block-integrations/hubspot/engagement.md)
+* [Jina Chunking](block-integrations/jina/chunking.md)
+* [Jina Embeddings](block-integrations/jina/embeddings.md)
+* [Jina Fact Checker](block-integrations/jina/fact_checker.md)
+* [Jina Search](block-integrations/jina/search.md)
+* [Linear Comment](block-integrations/linear/comment.md)
+* [Linear Issues](block-integrations/linear/issues.md)
+* [Linear Projects](block-integrations/linear/projects.md)
+* [LLM](block-integrations/llm.md)
+* [Logic](block-integrations/logic.md)
+* [Misc](block-integrations/misc.md)
+* [Multimedia](block-integrations/multimedia.md)
+* [Notion Create Page](block-integrations/notion/create_page.md)
+* [Notion Read Database](block-integrations/notion/read_database.md)
+* [Notion Read Page](block-integrations/notion/read_page.md)
+* [Notion Read Page Markdown](block-integrations/notion/read_page_markdown.md)
+* [Notion Search](block-integrations/notion/search.md)
+* [Nvidia Deepfake](block-integrations/nvidia/deepfake.md)
+* [Replicate Flux Advanced](block-integrations/replicate/flux_advanced.md)
+* [Replicate Replicate Block](block-integrations/replicate/replicate_block.md)
+* [Search](block-integrations/search.md)
+* [Slant3D Filament](block-integrations/slant3d/filament.md)
+* [Slant3D Order](block-integrations/slant3d/order.md)
+* [Slant3D Slicing](block-integrations/slant3d/slicing.md)
+* [Slant3D Webhook](block-integrations/slant3d/webhook.md)
+* [Smartlead Campaign](block-integrations/smartlead/campaign.md)
+* [Stagehand Blocks](block-integrations/stagehand/blocks.md)
+* [System Library Operations](block-integrations/system/library_operations.md)
+* [System Store Operations](block-integrations/system/store_operations.md)
+* [Text](block-integrations/text.md)
+* [Todoist Comments](block-integrations/todoist/comments.md)
+* [Todoist Labels](block-integrations/todoist/labels.md)
+* [Todoist Projects](block-integrations/todoist/projects.md)
+* [Todoist Sections](block-integrations/todoist/sections.md)
+* [Todoist Tasks](block-integrations/todoist/tasks.md)
+* [Twitter Blocks](block-integrations/twitter/blocks.md)
+* [Twitter Bookmark](block-integrations/twitter/bookmark.md)
+* [Twitter Follows](block-integrations/twitter/follows.md)
+* [Twitter Hide](block-integrations/twitter/hide.md)
+* [Twitter Like](block-integrations/twitter/like.md)
+* [Twitter List Follows](block-integrations/twitter/list_follows.md)
+* [Twitter List Lookup](block-integrations/twitter/list_lookup.md)
+* [Twitter List Members](block-integrations/twitter/list_members.md)
+* [Twitter List Tweets Lookup](block-integrations/twitter/list_tweets_lookup.md)
+* [Twitter Manage](block-integrations/twitter/manage.md)
+* [Twitter Manage Lists](block-integrations/twitter/manage_lists.md)
+* [Twitter Mutes](block-integrations/twitter/mutes.md)
+* [Twitter Pinned Lists](block-integrations/twitter/pinned_lists.md)
+* [Twitter Quote](block-integrations/twitter/quote.md)
+* [Twitter Retweet](block-integrations/twitter/retweet.md)
+* [Twitter Search Spaces](block-integrations/twitter/search_spaces.md)
+* [Twitter Spaces Lookup](block-integrations/twitter/spaces_lookup.md)
+* [Twitter Timeline](block-integrations/twitter/timeline.md)
+* [Twitter Tweet Lookup](block-integrations/twitter/tweet_lookup.md)
+* [Twitter User Lookup](block-integrations/twitter/user_lookup.md)
+* [Wolfram LLM API](block-integrations/wolfram/llm_api.md)
+* [Zerobounce Validate Emails](block-integrations/zerobounce/validate_emails.md)

docs/integrations/block-integrations/claude_code.md

@@ -0,0 +1,67 @@
+# Claude Code Execution
+
+## What it is
+The Claude Code block executes complex coding tasks using Anthropic's Claude Code AI assistant in a secure E2B sandbox environment.
+
+## What it does
+This block allows you to delegate coding tasks to Claude Code, which can autonomously create files, install packages, run commands, and build complete applications within a sandboxed environment. Claude Code can handle multi-step development tasks and maintain conversation context across multiple turns.
+
+## How it works
+When activated, the block:
+1. Creates or connects to an E2B sandbox (a secure, isolated Linux environment)
+2. Installs the latest version of Claude Code in the sandbox
+3. Optionally runs setup commands to prepare the environment
+4. Executes your prompt using Claude Code, which can:
+   - Create and edit files
+   - Install dependencies (npm, pip, etc.)
+   - Run terminal commands
+   - Build and test applications
+5. Extracts all text files created/modified during execution
+6. Returns the response and files, optionally keeping the sandbox alive for follow-up tasks
+
+The block supports conversation continuation through three mechanisms:
+- **Same sandbox continuation** (via `session_id` + `sandbox_id`): Resume on the same live sandbox
+- **Fresh sandbox continuation** (via `conversation_history`): Restore context on a new sandbox if the previous one timed out
+- **Dispose control** (`dispose_sandbox` flag): Keep sandbox alive for multi-turn conversations
+
+## Inputs
+| Input | Description |
+|-------|-------------|
+| E2B Credentials | API key for the E2B platform to create the sandbox. Get one at [e2b.dev](https://e2b.dev/docs) |
+| Anthropic Credentials | API key for Anthropic to power Claude Code. Get one at [Anthropic's website](https://console.anthropic.com) |
+| Prompt | The task or instruction for Claude Code to execute. Claude Code can create files, install packages, run commands, and perform complex coding tasks |
+| Timeout | Sandbox timeout in seconds (default: 300). Set higher for complex tasks. Note: Only applies when creating a new sandbox |
+| Setup Commands | Optional shell commands to run before executing Claude Code (e.g., installing dependencies) |
+| Working Directory | Working directory for Claude Code to operate in (default: /home/user) |
+| Session ID | Session ID to resume a previous conversation. Leave empty for new conversations |
+| Sandbox ID | Sandbox ID to reconnect to an existing sandbox. Required when resuming a session |
+| Conversation History | Previous conversation history to restore context on a fresh sandbox if the previous one timed out |
+| Dispose Sandbox | Whether to dispose of the sandbox after execution (default: true). Set to false to continue conversations later |
+
+## Outputs
+| Output | Description |
+|--------|-------------|
+| Response | The output/response from Claude Code execution |
+| Files | List of text files created/modified during execution. Each file includes path, relative_path, name, and content fields |
+| Conversation History | Full conversation history including this turn. Use to restore context on a fresh sandbox |
+| Session ID | Session ID for this conversation. Pass back with sandbox_id to continue the conversation |
+| Sandbox ID | ID of the sandbox instance (null if disposed). Pass back with session_id to continue the conversation |
+| Error | Error message if execution failed |
+
+## Possible use case
+**API Documentation to Full Application:**
+A product team wants to quickly prototype applications based on API documentation. They create an agent that:
+1. Uses Firecrawl to fetch API documentation from a URL
+2. Passes the docs to Claude Code with a prompt like "Create a web app that demonstrates all the key features of this API"
+3. Claude Code builds a complete application with HTML/CSS/JS frontend, proper error handling, and example API calls
+4. The Files output is used with GitHub blocks to push the generated code to a new repository
+
+The team can then iterate on the application by passing the sandbox_id and session_id back to Claude Code with refinement requests like "Add authentication" or "Improve the UI", and Claude Code will modify the existing files in the same sandbox.
+
+**Multi-turn Development:**
+A developer uses Claude Code to scaffold a new project:
+- Turn 1: "Create a Python FastAPI project with user authentication" (dispose_sandbox=false)
+- Turn 2: Uses the returned session_id + sandbox_id to ask "Add rate limiting middleware"
+- Turn 3: Continues with "Add comprehensive tests"
+
+Each turn builds on the previous work in the same sandbox environment.