fix formatting

### Changes 🏗️
- Updated the creator page to utilize React Query for data fetching,
improving performance and reliability.
- Removed legacy API calls and integrated prefetching for creator
details and agents.
- Introduced a new MainCreatorPage component for better separation of
concerns.
- Added a hydration boundary for managing server state.

### Checklist 📋

### Checklist 📋
- [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] All marketplace E2E tests are working.
- [x] I’ve tested all the links and checked if everything renders
perfectly on the marketplace page.

autogpt_platform/backend/backend/blocks/stagehand/_config.py

@@ -0,0 +1,8 @@
+from backend.sdk import BlockCostType, ProviderBuilder
+
+stagehand = (
+    ProviderBuilder("stagehand")
+    .with_api_key("STAGEHAND_API_KEY", "Stagehand API Key")
+    .with_base_cost(1, BlockCostType.RUN)
+    .build()
+)

autogpt_platform/backend/backend/blocks/stagehand/blocks.py

@@ -0,0 +1,393 @@
+import logging
+import signal
+import threading
+from contextlib import contextmanager
+from enum import Enum
+
+# Monkey patch Stagehands to prevent signal handling in worker threads
+import stagehand.main
+from stagehand import Stagehand
+
+from backend.blocks.llm import (
+    MODEL_METADATA,
+    AICredentials,
+    AICredentialsField,
+    LlmModel,
+    ModelMetadata,
+)
+from backend.blocks.stagehand._config import stagehand as stagehand_provider
+from backend.sdk import (
+    APIKeyCredentials,
+    Block,
+    BlockCategory,
+    BlockOutput,
+    BlockSchema,
+    CredentialsMetaInput,
+    SchemaField,
+)
+
+# Store the original method
+original_register_signal_handlers = stagehand.main.Stagehand._register_signal_handlers
+
+
+def safe_register_signal_handlers(self):
+    """Only register signal handlers in the main thread"""
+    if threading.current_thread() is threading.main_thread():
+        original_register_signal_handlers(self)
+    else:
+        # Skip signal handling in worker threads
+        pass
+
+
+# Replace the method
+stagehand.main.Stagehand._register_signal_handlers = safe_register_signal_handlers
+
+
+@contextmanager
+def disable_signal_handling():
+    """Context manager to temporarily disable signal handling"""
+    if threading.current_thread() is not threading.main_thread():
+        # In worker threads, temporarily replace signal.signal with a no-op
+        original_signal = signal.signal
+
+        def noop_signal(*args, **kwargs):
+            pass
+
+        signal.signal = noop_signal
+        try:
+            yield
+        finally:
+            signal.signal = original_signal
+    else:
+        # In main thread, don't modify anything
+        yield
+
+
+logger = logging.getLogger(__name__)
+
+
+class StagehandRecommendedLlmModel(str, Enum):
+    """
+    This is subset of LLModel from autogpt_platform/backend/backend/blocks/llm.py
+
+    It contains only the models recommended by Stagehand
+    """
+
+    # OpenAI
+    GPT41 = "gpt-4.1-2025-04-14"
+    GPT41_MINI = "gpt-4.1-mini-2025-04-14"
+
+    # Anthropic
+    CLAUDE_3_7_SONNET = "claude-3-7-sonnet-20250219"
+
+    @property
+    def provider_name(self) -> str:
+        """
+        Returns the provider name for the model in the required format for Stagehand:
+        provider/model_name
+        """
+        model_metadata = MODEL_METADATA[LlmModel(self.value)]
+        model_name = self.value
+
+        if len(model_name.split("/")) == 1 and not self.value.startswith(
+            model_metadata.provider
+        ):
+            assert (
+                model_metadata.provider != "open_router"
+            ), "Logic failed and open_router provider attempted to be prepended to model name! in stagehand/_config.py"
+            model_name = f"{model_metadata.provider}/{model_name}"
+
+        logger.error(f"Model name: {model_name}")
+        return model_name
+
+    @property
+    def provider(self) -> str:
+        return MODEL_METADATA[LlmModel(self.value)].provider
+
+    @property
+    def metadata(self) -> ModelMetadata:
+        return MODEL_METADATA[LlmModel(self.value)]
+
+    @property
+    def context_window(self) -> int:
+        return MODEL_METADATA[LlmModel(self.value)].context_window
+
+    @property
+    def max_output_tokens(self) -> int | None:
+        return MODEL_METADATA[LlmModel(self.value)].max_output_tokens
+
+
+class StagehandObserveBlock(Block):
+    class Input(BlockSchema):
+        # Browserbase credentials (Stagehand provider) or raw API key
+        stagehand_credentials: CredentialsMetaInput = (
+            stagehand_provider.credentials_field(
+                description="Stagehand/Browserbase API key"
+            )
+        )
+        browserbase_project_id: str = SchemaField(
+            description="Browserbase project ID (required if using Browserbase)",
+        )
+        # Model selection and credentials (provider-discriminated like llm.py)
+        model: StagehandRecommendedLlmModel = SchemaField(
+            title="LLM Model",
+            description="LLM to use for Stagehand (provider is inferred)",
+            default=StagehandRecommendedLlmModel.CLAUDE_3_7_SONNET,
+            advanced=False,
+        )
+        model_credentials: AICredentials = AICredentialsField()
+        url: str = SchemaField(
+            description="URL to navigate to.",
+        )
+        instruction: str = SchemaField(
+            description="Natural language description of elements or actions to discover.",
+        )
+        iframes: bool = SchemaField(
+            description="Whether to search within iframes. If True, Stagehand will search for actions within iframes.",
+            default=True,
+        )
+        domSettleTimeoutMs: int = SchemaField(
+            description="Timeout in milliseconds for DOM settlement.Wait longer for dynamic content",
+            default=45000,
+        )
+
+    class Output(BlockSchema):
+        selector: str = SchemaField(description="XPath selector to locate element.")
+        description: str = SchemaField(description="Human-readable description")
+        method: str | None = SchemaField(description="Suggested action method")
+        arguments: list[str] | None = SchemaField(
+            description="Additional action parameters"
+        )
+
+    def __init__(self):
+        super().__init__(
+            id="d3863944-0eaf-45c4-a0c9-63e0fe1ee8b9",
+            description="Find suggested actions for your workflows",
+            categories={BlockCategory.AI, BlockCategory.DEVELOPER_TOOLS},
+            input_schema=StagehandObserveBlock.Input,
+            output_schema=StagehandObserveBlock.Output,
+        )
+
+    async def run(
+        self,
+        input_data: Input,
+        *,
+        stagehand_credentials: APIKeyCredentials,
+        model_credentials: APIKeyCredentials,
+        **kwargs,
+    ) -> BlockOutput:
+
+        logger.info(f"OBSERVE: Stagehand credentials: {stagehand_credentials}")
+        logger.info(
+            f"OBSERVE: Model credentials: {model_credentials} for provider {model_credentials.provider} secret: {model_credentials.api_key.get_secret_value()}"
+        )
+
+        with disable_signal_handling():
+            stagehand = Stagehand(
+                api_key=stagehand_credentials.api_key.get_secret_value(),
+                project_id=input_data.browserbase_project_id,
+                model_name=input_data.model.provider_name,
+                model_api_key=model_credentials.api_key.get_secret_value(),
+            )
+
+            await stagehand.init()
+
+        page = stagehand.page
+
+        assert page is not None, "Stagehand page is not initialized"
+
+        await page.goto(input_data.url)
+
+        observe_results = await page.observe(
+            input_data.instruction,
+            iframes=input_data.iframes,
+            domSettleTimeoutMs=input_data.domSettleTimeoutMs,
+        )
+        for result in observe_results:
+            yield "selector", result.selector
+            yield "description", result.description
+            yield "method", result.method
+            yield "arguments", result.arguments
+
+
+class StagehandActBlock(Block):
+    class Input(BlockSchema):
+        # Browserbase credentials (Stagehand provider) or raw API key
+        stagehand_credentials: CredentialsMetaInput = (
+            stagehand_provider.credentials_field(
+                description="Stagehand/Browserbase API key"
+            )
+        )
+        browserbase_project_id: str = SchemaField(
+            description="Browserbase project ID (required if using Browserbase)",
+        )
+        # Model selection and credentials (provider-discriminated like llm.py)
+        model: StagehandRecommendedLlmModel = SchemaField(
+            title="LLM Model",
+            description="LLM to use for Stagehand (provider is inferred)",
+            default=StagehandRecommendedLlmModel.CLAUDE_3_7_SONNET,
+            advanced=False,
+        )
+        model_credentials: AICredentials = AICredentialsField()
+        url: str = SchemaField(
+            description="URL to navigate to.",
+        )
+        action: list[str] = SchemaField(
+            description="Action to perform. Suggested actions are: click, fill, type, press, scroll, select from dropdown. For multi-step actions, add an entry for each step.",
+        )
+        variables: dict[str, str] = SchemaField(
+            description="Variables to use in the action. Variables contains data you want the action to use.",
+            default_factory=dict,
+        )
+        iframes: bool = SchemaField(
+            description="Whether to search within iframes. If True, Stagehand will search for actions within iframes.",
+            default=True,
+        )
+        domSettleTimeoutMs: int = SchemaField(
+            description="Timeout in milliseconds for DOM settlement.Wait longer for dynamic content",
+            default=45000,
+        )
+        timeoutMs: int = SchemaField(
+            description="Timeout in milliseconds for DOM ready. Extended timeout for slow-loading forms",
+            default=60000,
+        )
+
+    class Output(BlockSchema):
+        success: bool = SchemaField(
+            description="Whether the action was completed successfully"
+        )
+        message: str = SchemaField(description="Details about the action’s execution.")
+        action: str = SchemaField(description="Action performed")
+
+    def __init__(self):
+        super().__init__(
+            id="86eba68b-9549-4c0b-a0db-47d85a56cc27",
+            description="Interact with a web page by performing actions on a web page. Use it to build self-healing and deterministic automations that adapt to website chang.",
+            categories={BlockCategory.AI, BlockCategory.DEVELOPER_TOOLS},
+            input_schema=StagehandActBlock.Input,
+            output_schema=StagehandActBlock.Output,
+        )
+
+    async def run(
+        self,
+        input_data: Input,
+        *,
+        stagehand_credentials: APIKeyCredentials,
+        model_credentials: APIKeyCredentials,
+        **kwargs,
+    ) -> BlockOutput:
+
+        logger.info(f"ACT: Stagehand credentials: {stagehand_credentials}")
+        logger.info(
+            f"ACT: Model credentials: {model_credentials} for provider {model_credentials.provider} secret: {model_credentials.api_key.get_secret_value()}"
+        )
+
+        with disable_signal_handling():
+            stagehand = Stagehand(
+                api_key=stagehand_credentials.api_key.get_secret_value(),
+                project_id=input_data.browserbase_project_id,
+                model_name=input_data.model.provider_name,
+                model_api_key=model_credentials.api_key.get_secret_value(),
+            )
+
+            await stagehand.init()
+
+        page = stagehand.page
+
+        assert page is not None, "Stagehand page is not initialized"
+
+        await page.goto(input_data.url)
+        for action in input_data.action:
+            action_results = await page.act(
+                action,
+                variables=input_data.variables,
+                iframes=input_data.iframes,
+                domSettleTimeoutMs=input_data.domSettleTimeoutMs,
+                timeoutMs=input_data.timeoutMs,
+            )
+            yield "success", action_results.success
+            yield "message", action_results.message
+            yield "action", action_results.action
+
+
+class StagehandExtractBlock(Block):
+    class Input(BlockSchema):
+        # Browserbase credentials (Stagehand provider) or raw API key
+        stagehand_credentials: CredentialsMetaInput = (
+            stagehand_provider.credentials_field(
+                description="Stagehand/Browserbase API key"
+            )
+        )
+        browserbase_project_id: str = SchemaField(
+            description="Browserbase project ID (required if using Browserbase)",
+        )
+        # Model selection and credentials (provider-discriminated like llm.py)
+        model: StagehandRecommendedLlmModel = SchemaField(
+            title="LLM Model",
+            description="LLM to use for Stagehand (provider is inferred)",
+            default=StagehandRecommendedLlmModel.CLAUDE_3_7_SONNET,
+            advanced=False,
+        )
+        model_credentials: AICredentials = AICredentialsField()
+        url: str = SchemaField(
+            description="URL to navigate to.",
+        )
+        instruction: str = SchemaField(
+            description="Natural language description of elements or actions to discover.",
+        )
+        iframes: bool = SchemaField(
+            description="Whether to search within iframes. If True, Stagehand will search for actions within iframes.",
+            default=True,
+        )
+        domSettleTimeoutMs: int = SchemaField(
+            description="Timeout in milliseconds for DOM settlement.Wait longer for dynamic content",
+            default=45000,
+        )
+
+    class Output(BlockSchema):
+        extraction: str = SchemaField(description="Extracted data from the page.")
+
+    def __init__(self):
+        super().__init__(
+            id="fd3c0b18-2ba6-46ae-9339-fcb40537ad98",
+            description="Extract structured data from a webpage.",
+            categories={BlockCategory.AI, BlockCategory.DEVELOPER_TOOLS},
+            input_schema=StagehandExtractBlock.Input,
+            output_schema=StagehandExtractBlock.Output,
+        )
+
+    async def run(
+        self,
+        input_data: Input,
+        *,
+        stagehand_credentials: APIKeyCredentials,
+        model_credentials: APIKeyCredentials,
+        **kwargs,
+    ) -> BlockOutput:
+
+        logger.info(f"EXTRACT: Stagehand credentials: {stagehand_credentials}")
+        logger.info(
+            f"EXTRACT: Model credentials: {model_credentials} for provider {model_credentials.provider} secret: {model_credentials.api_key.get_secret_value()}"
+        )
+
+        with disable_signal_handling():
+            stagehand = Stagehand(
+                api_key=stagehand_credentials.api_key.get_secret_value(),
+                project_id=input_data.browserbase_project_id,
+                model_name=input_data.model.provider_name,
+                model_api_key=model_credentials.api_key.get_secret_value(),
+            )
+
+            await stagehand.init()
+
+        page = stagehand.page
+
+        assert page is not None, "Stagehand page is not initialized"
+
+        await page.goto(input_data.url)
+        extraction = await page.extract(
+            input_data.instruction,
+            iframes=input_data.iframes,
+            domSettleTimeoutMs=input_data.domSettleTimeoutMs,
+        )
+        yield "extraction", str(extraction.model_dump()["extraction"])

autogpt_platform/backend/poetry.lock

@@ -528,6 +528,26 @@ webencodings = "*"
 [package.extras]
 css = ["tinycss2 (>=1.1.0,<1.5)"]
 
+[[package]]
+name = "browserbase"
+version = "1.4.0"
+description = "The official Python library for the Browserbase API"
+optional = false
+python-versions = ">=3.8"
+groups = ["main"]
+files = [
+    {file = "browserbase-1.4.0-py3-none-any.whl", hash = "sha256:ea9f1fb4a88921975b8b9606835c441a59d8ce82ce00313a6d48bbe8e30f79fb"},
+    {file = "browserbase-1.4.0.tar.gz", hash = "sha256:e2ed36f513c8630b94b826042c4bb9f497c333f3bd28e5b76cb708c65b4318a0"},
+]
+
+[package.dependencies]
+anyio = ">=3.5.0,<5"
+distro = ">=1.7.0,<2"
+httpx = ">=0.23.0,<1"
+pydantic = ">=1.9.0,<3"
+sniffio = "*"
+typing-extensions = ">=4.10,<5"
+
 [[package]]
 name = "build"
 version = "1.2.2.post1"
@@ -1459,6 +1479,46 @@ files = [
     {file = "frozenlist-1.7.0.tar.gz", hash = "sha256:2e310d81923c2437ea8670467121cc3e9b0f76d3043cc1d2331d56c7fb7a3a8f"},
 ]
 
+[[package]]
+name = "fsspec"
+version = "2025.7.0"
+description = "File-system specification"
+optional = false
+python-versions = ">=3.9"
+groups = ["main"]
+files = [
+    {file = "fsspec-2025.7.0-py3-none-any.whl", hash = "sha256:8b012e39f63c7d5f10474de957f3ab793b47b45ae7d39f2fb735f8bbe25c0e21"},
+    {file = "fsspec-2025.7.0.tar.gz", hash = "sha256:786120687ffa54b8283d942929540d8bc5ccfa820deb555a2b5d0ed2b737bf58"},
+]
+
+[package.extras]
+abfs = ["adlfs"]
+adl = ["adlfs"]
+arrow = ["pyarrow (>=1)"]
+dask = ["dask", "distributed"]
+dev = ["pre-commit", "ruff (>=0.5)"]
+doc = ["numpydoc", "sphinx", "sphinx-design", "sphinx-rtd-theme", "yarl"]
+dropbox = ["dropbox", "dropboxdrivefs", "requests"]
+full = ["adlfs", "aiohttp (!=4.0.0a0,!=4.0.0a1)", "dask", "distributed", "dropbox", "dropboxdrivefs", "fusepy", "gcsfs", "libarchive-c", "ocifs", "panel", "paramiko", "pyarrow (>=1)", "pygit2", "requests", "s3fs", "smbprotocol", "tqdm"]
+fuse = ["fusepy"]
+gcs = ["gcsfs"]
+git = ["pygit2"]
+github = ["requests"]
+gs = ["gcsfs"]
+gui = ["panel"]
+hdfs = ["pyarrow (>=1)"]
+http = ["aiohttp (!=4.0.0a0,!=4.0.0a1)"]
+libarchive = ["libarchive-c"]
+oci = ["ocifs"]
+s3 = ["s3fs"]
+sftp = ["paramiko"]
+smb = ["smbprotocol"]
+ssh = ["paramiko"]
+test = ["aiohttp (!=4.0.0a0,!=4.0.0a1)", "numpy", "pytest", "pytest-asyncio (!=0.22.0)", "pytest-benchmark", "pytest-cov", "pytest-mock", "pytest-recording", "pytest-rerunfailures", "requests"]
+test-downstream = ["aiobotocore (>=2.5.4,<3.0.0)", "dask[dataframe,test]", "moto[server] (>4,<5)", "pytest-timeout", "xarray"]
+test-full = ["adlfs", "aiohttp (!=4.0.0a0,!=4.0.0a1)", "cloudpickle", "dask", "distributed", "dropbox", "dropboxdrivefs", "fastparquet", "fusepy", "gcsfs", "jinja2", "kerchunk", "libarchive-c", "lz4", "notebook", "numpy", "ocifs", "pandas", "panel", "paramiko", "pyarrow", "pyarrow (>=1)", "pyftpdlib", "pygit2", "pytest", "pytest-asyncio (!=0.22.0)", "pytest-benchmark", "pytest-cov", "pytest-mock", "pytest-recording", "pytest-rerunfailures", "python-snappy", "requests", "smbprotocol", "tqdm", "urllib3", "zarr", "zstandard ; python_version < \"3.14\""]
+tqdm = ["tqdm"]
+
 [[package]]
 name = "gcloud-aio-auth"
 version = "5.4.2"
@@ -1860,7 +1920,6 @@ description = "Lightweight in-process concurrent programming"
 optional = false
 python-versions = ">=3.9"
 groups = ["main"]
-markers = "platform_machine == \"aarch64\" or platform_machine == \"ppc64le\" or platform_machine == \"x86_64\" or platform_machine == \"amd64\" or platform_machine == \"AMD64\" or platform_machine == \"win32\" or platform_machine == \"WIN32\""
 files = [
     {file = "greenlet-3.2.3-cp310-cp310-macosx_11_0_universal2.whl", hash = "sha256:1afd685acd5597349ee6d7a88a8bec83ce13c106ac78c196ee9dde7c04fe87be"},
     {file = "greenlet-3.2.3-cp310-cp310-manylinux2014_aarch64.manylinux_2_17_aarch64.whl", hash = "sha256:761917cac215c61e9dc7324b2606107b3b292a8349bdebb31503ab4de3f559ac"},
@@ -2071,6 +2130,28 @@ files = [
 hpack = ">=4.1,<5"
 hyperframe = ">=6.1,<7"
 
+[[package]]
+name = "hf-xet"
+version = "1.1.8"
+description = "Fast transfer of large files with the Hugging Face Hub."
+optional = false
+python-versions = ">=3.8"
+groups = ["main"]
+markers = "platform_machine == \"x86_64\" or platform_machine == \"amd64\" or platform_machine == \"arm64\" or platform_machine == \"aarch64\""
+files = [
+    {file = "hf_xet-1.1.8-cp37-abi3-macosx_10_12_x86_64.whl", hash = "sha256:3d5f82e533fc51c7daad0f9b655d9c7811b5308e5890236828bd1dd3ed8fea74"},
+    {file = "hf_xet-1.1.8-cp37-abi3-macosx_11_0_arm64.whl", hash = "sha256:8e2dba5896bca3ab61d0bef4f01a1647004de59640701b37e37eaa57087bbd9d"},
+    {file = "hf_xet-1.1.8-cp37-abi3-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:bfe5700bc729be3d33d4e9a9b5cc17a951bf8c7ada7ba0c9198a6ab2053b7453"},
+    {file = "hf_xet-1.1.8-cp37-abi3-manylinux_2_28_aarch64.whl", hash = "sha256:09e86514c3c4284ed8a57d6b0f3d089f9836a0af0a1ceb3c9dd664f1f3eaefef"},
+    {file = "hf_xet-1.1.8-cp37-abi3-musllinux_1_2_aarch64.whl", hash = "sha256:4a9b99ab721d385b83f4fc8ee4e0366b0b59dce03b5888a86029cc0ca634efbf"},
+    {file = "hf_xet-1.1.8-cp37-abi3-musllinux_1_2_x86_64.whl", hash = "sha256:25b9d43333bbef39aeae1616789ec329c21401a7fe30969d538791076227b591"},
+    {file = "hf_xet-1.1.8-cp37-abi3-win_amd64.whl", hash = "sha256:4171f31d87b13da4af1ed86c98cf763292e4720c088b4957cf9d564f92904ca9"},
+    {file = "hf_xet-1.1.8.tar.gz", hash = "sha256:62a0043e441753bbc446dcb5a3fe40a4d03f5fb9f13589ef1df9ab19252beb53"},
+]
+
+[package.extras]
+tests = ["pytest"]
+
 [[package]]
 name = "hpack"
 version = "4.1.0"
@@ -2213,6 +2294,45 @@ http2 = ["h2 (>=3,<5)"]
 socks = ["socksio (==1.*)"]
 zstd = ["zstandard (>=0.18.0)"]
 
+[[package]]
+name = "huggingface-hub"
+version = "0.34.4"
+description = "Client library to download and publish models, datasets and other repos on the huggingface.co hub"
+optional = false
+python-versions = ">=3.8.0"
+groups = ["main"]
+files = [
+    {file = "huggingface_hub-0.34.4-py3-none-any.whl", hash = "sha256:9b365d781739c93ff90c359844221beef048403f1bc1f1c123c191257c3c890a"},
+    {file = "huggingface_hub-0.34.4.tar.gz", hash = "sha256:a4228daa6fb001be3f4f4bdaf9a0db00e1739235702848df00885c9b5742c85c"},
+]
+
+[package.dependencies]
+filelock = "*"
+fsspec = ">=2023.5.0"
+hf-xet = {version = ">=1.1.3,<2.0.0", markers = "platform_machine == \"x86_64\" or platform_machine == \"amd64\" or platform_machine == \"arm64\" or platform_machine == \"aarch64\""}
+packaging = ">=20.9"
+pyyaml = ">=5.1"
+requests = "*"
+tqdm = ">=4.42.1"
+typing-extensions = ">=3.7.4.3"
+
+[package.extras]
+all = ["InquirerPy (==0.3.4)", "Jinja2", "Pillow", "aiohttp", "authlib (>=1.3.2)", "fastapi", "gradio (>=4.0.0)", "httpx", "itsdangerous", "jedi", "libcst (>=1.4.0)", "mypy (==1.15.0) ; python_version >= \"3.9\"", "mypy (>=1.14.1,<1.15.0) ; python_version == \"3.8\"", "numpy", "pytest (>=8.1.1,<8.2.2)", "pytest-asyncio", "pytest-cov", "pytest-env", "pytest-mock", "pytest-rerunfailures", "pytest-vcr", "pytest-xdist", "ruff (>=0.9.0)", "soundfile", "types-PyYAML", "types-requests", "types-simplejson", "types-toml", "types-tqdm", "types-urllib3", "typing-extensions (>=4.8.0)", "urllib3 (<2.0)"]
+cli = ["InquirerPy (==0.3.4)"]
+dev = ["InquirerPy (==0.3.4)", "Jinja2", "Pillow", "aiohttp", "authlib (>=1.3.2)", "fastapi", "gradio (>=4.0.0)", "httpx", "itsdangerous", "jedi", "libcst (>=1.4.0)", "mypy (==1.15.0) ; python_version >= \"3.9\"", "mypy (>=1.14.1,<1.15.0) ; python_version == \"3.8\"", "numpy", "pytest (>=8.1.1,<8.2.2)", "pytest-asyncio", "pytest-cov", "pytest-env", "pytest-mock", "pytest-rerunfailures", "pytest-vcr", "pytest-xdist", "ruff (>=0.9.0)", "soundfile", "types-PyYAML", "types-requests", "types-simplejson", "types-toml", "types-tqdm", "types-urllib3", "typing-extensions (>=4.8.0)", "urllib3 (<2.0)"]
+fastai = ["fastai (>=2.4)", "fastcore (>=1.3.27)", "toml"]
+hf-transfer = ["hf-transfer (>=0.1.4)"]
+hf-xet = ["hf-xet (>=1.1.2,<2.0.0)"]
+inference = ["aiohttp"]
+mcp = ["aiohttp", "mcp (>=1.8.0)", "typer"]
+oauth = ["authlib (>=1.3.2)", "fastapi", "httpx", "itsdangerous"]
+quality = ["libcst (>=1.4.0)", "mypy (==1.15.0) ; python_version >= \"3.9\"", "mypy (>=1.14.1,<1.15.0) ; python_version == \"3.8\"", "ruff (>=0.9.0)"]
+tensorflow = ["graphviz", "pydot", "tensorflow"]
+tensorflow-testing = ["keras (<3.0)", "tensorflow"]
+testing = ["InquirerPy (==0.3.4)", "Jinja2", "Pillow", "aiohttp", "authlib (>=1.3.2)", "fastapi", "gradio (>=4.0.0)", "httpx", "itsdangerous", "jedi", "numpy", "pytest (>=8.1.1,<8.2.2)", "pytest-asyncio", "pytest-cov", "pytest-env", "pytest-mock", "pytest-rerunfailures", "pytest-vcr", "pytest-xdist", "soundfile", "urllib3 (<2.0)"]
+torch = ["safetensors[torch]", "torch"]
+typing = ["types-PyYAML", "types-requests", "types-simplejson", "types-toml", "types-tqdm", "types-urllib3", "typing-extensions (>=4.8.0)"]
+
 [[package]]
 name = "hyperframe"
 version = "6.1.0"
@@ -2672,6 +2792,62 @@ dynamodb = ["boto3 (>=1.9.71)"]
 redis = ["redis (>=2.10.5)"]
 test-filesource = ["pyyaml (>=5.3.1)", "watchdog (>=3.0.0)"]
 
+[[package]]
+name = "litellm"
+version = "1.74.15.post2"
+description = "Library to easily interface with LLM API providers"
+optional = false
+python-versions = "!=2.7.*,!=3.0.*,!=3.1.*,!=3.2.*,!=3.3.*,!=3.4.*,!=3.5.*,!=3.6.*,!=3.7.*,>=3.8"
+groups = ["main"]
+files = [
+    {file = "litellm-1.74.15.post2.tar.gz", hash = "sha256:8eddb1c8a6a5a7048f8ba16e652aba23d6ca996dd87cb853c874ba375aa32479"},
+]
+
+[package.dependencies]
+aiohttp = ">=3.10"
+click = "*"
+httpx = ">=0.23.0"
+importlib-metadata = ">=6.8.0"
+jinja2 = ">=3.1.2,<4.0.0"
+jsonschema = ">=4.22.0,<5.0.0"
+openai = ">=1.68.2"
+pydantic = ">=2.5.0,<3.0.0"
+python-dotenv = ">=0.2.0"
+tiktoken = ">=0.7.0"
+tokenizers = "*"
+
+[package.extras]
+caching = ["diskcache (>=5.6.1,<6.0.0)"]
+extra-proxy = ["azure-identity (>=1.15.0,<2.0.0)", "azure-keyvault-secrets (>=4.8.0,<5.0.0)", "google-cloud-kms (>=2.21.3,<3.0.0)", "prisma (==0.11.0)", "redisvl (>=0.4.1,<0.5.0) ; python_version >= \"3.9\" and python_version < \"3.14\"", "resend (>=0.8.0,<0.9.0)"]
+mlflow = ["mlflow (>3.1.4) ; python_version >= \"3.10\""]
+proxy = ["PyJWT (>=2.8.0,<3.0.0)", "apscheduler (>=3.10.4,<4.0.0)", "azure-identity (>=1.15.0,<2.0.0)", "azure-storage-blob (>=12.25.1,<13.0.0)", "backoff", "boto3 (==1.34.34)", "cryptography (>=43.0.1,<44.0.0)", "fastapi (>=0.115.5,<0.116.0)", "fastapi-sso (>=0.16.0,<0.17.0)", "gunicorn (>=23.0.0,<24.0.0)", "litellm-enterprise (==0.1.16)", "litellm-proxy-extras (==0.2.16)", "mcp (>=1.10.0,<2.0.0) ; python_version >= \"3.10\"", "orjson (>=3.9.7,<4.0.0)", "polars (>=1.31.0,<2.0.0) ; python_version >= \"3.10\"", "pynacl (>=1.5.0,<2.0.0)", "python-multipart (>=0.0.18,<0.0.19)", "pyyaml (>=6.0.1,<7.0.0)", "rich (==13.7.1)", "rq", "uvicorn (>=0.29.0,<0.30.0)", "uvloop (>=0.21.0,<0.22.0) ; sys_platform != \"win32\"", "websockets (>=13.1.0,<14.0.0)"]
+semantic-router = ["semantic-router ; python_version >= \"3.9\""]
+utils = ["numpydoc"]
+
+[[package]]
+name = "markdown-it-py"
+version = "4.0.0"
+description = "Python port of markdown-it. Markdown parsing, done right!"
+optional = false
+python-versions = ">=3.10"
+groups = ["main"]
+files = [
+    {file = "markdown_it_py-4.0.0-py3-none-any.whl", hash = "sha256:87327c59b172c5011896038353a81343b6754500a08cd7a4973bb48c6d578147"},
+    {file = "markdown_it_py-4.0.0.tar.gz", hash = "sha256:cb0a2b4aa34f932c007117b194e945bd74e0ec24133ceb5bac59009cda1cb9f3"},
+]
+
+[package.dependencies]
+mdurl = ">=0.1,<1.0"
+
+[package.extras]
+benchmarking = ["psutil", "pytest", "pytest-benchmark"]
+compare = ["commonmark (>=0.9,<1.0)", "markdown (>=3.4,<4.0)", "markdown-it-pyrs", "mistletoe (>=1.0,<2.0)", "mistune (>=3.0,<4.0)", "panflute (>=2.3,<3.0)"]
+linkify = ["linkify-it-py (>=1,<3)"]
+plugins = ["mdit-py-plugins (>=0.5.0)"]
+profiling = ["gprof2dot"]
+rtd = ["ipykernel", "jupyter_sphinx", "mdit-py-plugins (>=0.5.0)", "myst-parser", "pyyaml", "sphinx", "sphinx-book-theme (>=1.0,<2.0)", "sphinx-copybutton", "sphinx-design"]
+testing = ["coverage", "pytest", "pytest-cov", "pytest-regressions", "requests"]
+
 [[package]]
 name = "markupsafe"
 version = "3.0.2"
@@ -2755,6 +2931,18 @@ files = [
     {file = "mccabe-0.7.0.tar.gz", hash = "sha256:348e0240c33b60bbdf4e523192ef919f28cb2c3d7d5c7794f74009290f236325"},
 ]
 
+[[package]]
+name = "mdurl"
+version = "0.1.2"
+description = "Markdown URL utilities"
+optional = false
+python-versions = ">=3.7"
+groups = ["main"]
+files = [
+    {file = "mdurl-0.1.2-py3-none-any.whl", hash = "sha256:84008a41e51615a49fc9966191ff91509e3c40b939176e643fd50a5c2196b8f8"},
+    {file = "mdurl-0.1.2.tar.gz", hash = "sha256:bb413d29f5eea38f31dd4754dd7377d4465116fb207585f97bf925588687c1ba"},
+]
+
 [[package]]
 name = "mem0ai"
 version = "0.1.115"
@@ -3643,6 +3831,28 @@ docs = ["furo (>=2024.8.6)", "proselint (>=0.14)", "sphinx (>=8.1.3)", "sphinx-a
 test = ["appdirs (==1.4.4)", "covdefaults (>=2.3)", "pytest (>=8.3.4)", "pytest-cov (>=6)", "pytest-mock (>=3.14)"]
 type = ["mypy (>=1.14.1)"]
 
+[[package]]
+name = "playwright"
+version = "1.54.0"
+description = "A high-level API to automate web browsers"
+optional = false
+python-versions = ">=3.9"
+groups = ["main"]
+files = [
+    {file = "playwright-1.54.0-py3-none-macosx_10_13_x86_64.whl", hash = "sha256:bf3b845af744370f1bd2286c2a9536f474cc8a88dc995b72ea9a5be714c9a77d"},
+    {file = "playwright-1.54.0-py3-none-macosx_11_0_arm64.whl", hash = "sha256:780928b3ca2077aea90414b37e54edd0c4bbb57d1aafc42f7aa0b3fd2c2fac02"},
+    {file = "playwright-1.54.0-py3-none-macosx_11_0_universal2.whl", hash = "sha256:81d0b6f28843b27f288cfe438af0a12a4851de57998009a519ea84cee6fbbfb9"},
+    {file = "playwright-1.54.0-py3-none-manylinux1_x86_64.whl", hash = "sha256:09919f45cc74c64afb5432646d7fef0d19fff50990c862cb8d9b0577093f40cc"},
+    {file = "playwright-1.54.0-py3-none-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:13ae206c55737e8e3eae51fb385d61c0312eeef31535643bb6232741b41b6fdc"},
+    {file = "playwright-1.54.0-py3-none-win32.whl", hash = "sha256:0b108622ffb6906e28566f3f31721cd57dda637d7e41c430287804ac01911f56"},
+    {file = "playwright-1.54.0-py3-none-win_amd64.whl", hash = "sha256:9e5aee9ae5ab1fdd44cd64153313a2045b136fcbcfb2541cc0a3d909132671a2"},
+    {file = "playwright-1.54.0-py3-none-win_arm64.whl", hash = "sha256:a975815971f7b8dca505c441a4c56de1aeb56a211290f8cc214eeef5524e8d75"},
+]
+
+[package.dependencies]
+greenlet = ">=3.1.1,<4.0.0"
+pyee = ">=13,<14"
+
 [[package]]
 name = "pluggy"
 version = "1.6.0"
@@ -4477,6 +4687,24 @@ gcp-secret-manager = ["google-cloud-secret-manager (>=2.23.1)"]
 toml = ["tomli (>=2.0.1)"]
 yaml = ["pyyaml (>=6.0.1)"]
 
+[[package]]
+name = "pyee"
+version = "13.0.0"
+description = "A rough port of Node.js's EventEmitter to Python with a few tricks of its own"
+optional = false
+python-versions = ">=3.8"
+groups = ["main"]
+files = [
+    {file = "pyee-13.0.0-py3-none-any.whl", hash = "sha256:48195a3cddb3b1515ce0695ed76036b5ccc2ef3a9f963ff9f77aec0139845498"},
+    {file = "pyee-13.0.0.tar.gz", hash = "sha256:b391e3c5a434d1f5118a25615001dbc8f669cf410ab67d04c4d4e07c55481c37"},
+]
+
+[package.dependencies]
+typing-extensions = "*"
+
+[package.extras]
+dev = ["black", "build", "flake8", "flake8-black", "isort", "jupyter-console", "mkdocs", "mkdocs-include-markdown-plugin", "mkdocstrings[python]", "mypy", "pytest", "pytest-asyncio ; python_version >= \"3.4\"", "pytest-trio ; python_version >= \"3.7\"", "sphinx", "toml", "tox", "trio", "trio ; python_version > \"3.6\"", "trio-typing ; python_version > \"3.6\"", "twine", "twisted", "validate-pyproject[all]"]
+
 [[package]]
 name = "pyflakes"
 version = "3.4.0"
@@ -5204,6 +5432,25 @@ files = [
 [package.dependencies]
 requests = ">=2.0.1,<3.0.0"
 
+[[package]]
+name = "rich"
+version = "14.1.0"
+description = "Render rich text, tables, progress bars, syntax highlighting, markdown and more to the terminal"
+optional = false
+python-versions = ">=3.8.0"
+groups = ["main"]
+files = [
+    {file = "rich-14.1.0-py3-none-any.whl", hash = "sha256:536f5f1785986d6dbdea3c75205c473f970777b4a0d6c6dd1b696aa05a3fa04f"},
+    {file = "rich-14.1.0.tar.gz", hash = "sha256:e497a48b844b0320d45007cdebfeaeed8db2a4f4bcf49f15e455cfc4af11eaa8"},
+]
+
+[package.dependencies]
+markdown-it-py = ">=2.2.0"
+pygments = ">=2.13.0,<3.0.0"
+
+[package.extras]
+jupyter = ["ipywidgets (>=7.5.1,<9)"]
+
 [[package]]
 name = "rpds-py"
 version = "0.26.0"
@@ -5657,6 +5904,34 @@ postgresql-psycopgbinary = ["psycopg[binary] (>=3.0.7)"]
 pymysql = ["pymysql"]
 sqlcipher = ["sqlcipher3_binary"]
 
+[[package]]
+name = "stagehand"
+version = "0.5.1"
+description = "Python SDK for Stagehand"
+optional = false
+python-versions = ">=3.9"
+groups = ["main"]
+files = [
+    {file = "stagehand-0.5.1-py3-none-any.whl", hash = "sha256:97f88ef31c4b2ad448c2ef341a3cff074b83e40c60872d8f49f79c82f9249174"},
+    {file = "stagehand-0.5.1.tar.gz", hash = "sha256:312611f776a5f93f3a10a3cae87cd4881eb020c999a87394b21bff2b123fdfc3"},
+]
+
+[package.dependencies]
+anthropic = ">=0.51.0"
+browserbase = ">=1.4.0"
+httpx = ">=0.24.0"
+litellm = ">=1.72.0,<1.75.0"
+nest-asyncio = ">=1.6.0"
+openai = ">=1.83.0,<1.99.6"
+playwright = ">=1.42.1"
+pydantic = ">=1.10.0"
+python-dotenv = ">=1.0.0"
+requests = ">=2.31.0"
+rich = ">=13.7.0"
+
+[package.extras]
+dev = ["black (>=23.3.0)", "isort (>=5.12.0)", "mypy (>=1.3.0)", "psutil (>=5.9.0)", "pytest (>=7.3.1)", "pytest-asyncio (>=0.21.0)", "pytest-cov (>=4.1.0)", "pytest-mock (>=3.10.0)", "ruff"]
+
 [[package]]
 name = "starlette"
 version = "0.47.1"
@@ -5860,6 +6135,39 @@ files = [
 [package.dependencies]
 requests = ">=2.32.3,<3.0.0"
 
+[[package]]
+name = "tokenizers"
+version = "0.21.4"
+description = ""
+optional = false
+python-versions = ">=3.9"
+groups = ["main"]
+files = [
+    {file = "tokenizers-0.21.4-cp39-abi3-macosx_10_12_x86_64.whl", hash = "sha256:2ccc10a7c3bcefe0f242867dc914fc1226ee44321eb618cfe3019b5df3400133"},
+    {file = "tokenizers-0.21.4-cp39-abi3-macosx_11_0_arm64.whl", hash = "sha256:5e2f601a8e0cd5be5cc7506b20a79112370b9b3e9cb5f13f68ab11acd6ca7d60"},
+    {file = "tokenizers-0.21.4-cp39-abi3-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:39b376f5a1aee67b4d29032ee85511bbd1b99007ec735f7f35c8a2eb104eade5"},
+    {file = "tokenizers-0.21.4-cp39-abi3-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:2107ad649e2cda4488d41dfd031469e9da3fcbfd6183e74e4958fa729ffbf9c6"},
+    {file = "tokenizers-0.21.4-cp39-abi3-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:3c73012da95afafdf235ba80047699df4384fdc481527448a078ffd00e45a7d9"},
+    {file = "tokenizers-0.21.4-cp39-abi3-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:f23186c40395fc390d27f519679a58023f368a0aad234af145e0f39ad1212732"},
+    {file = "tokenizers-0.21.4-cp39-abi3-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:cc88bb34e23a54cc42713d6d98af5f1bf79c07653d24fe984d2d695ba2c922a2"},
+    {file = "tokenizers-0.21.4-cp39-abi3-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:51b7eabb104f46c1c50b486520555715457ae833d5aee9ff6ae853d1130506ff"},
+    {file = "tokenizers-0.21.4-cp39-abi3-musllinux_1_2_aarch64.whl", hash = "sha256:714b05b2e1af1288bd1bc56ce496c4cebb64a20d158ee802887757791191e6e2"},
+    {file = "tokenizers-0.21.4-cp39-abi3-musllinux_1_2_armv7l.whl", hash = "sha256:1340ff877ceedfa937544b7d79f5b7becf33a4cfb58f89b3b49927004ef66f78"},
+    {file = "tokenizers-0.21.4-cp39-abi3-musllinux_1_2_i686.whl", hash = "sha256:3c1f4317576e465ac9ef0d165b247825a2a4078bcd01cba6b54b867bdf9fdd8b"},
+    {file = "tokenizers-0.21.4-cp39-abi3-musllinux_1_2_x86_64.whl", hash = "sha256:c212aa4e45ec0bb5274b16b6f31dd3f1c41944025c2358faaa5782c754e84c24"},
+    {file = "tokenizers-0.21.4-cp39-abi3-win32.whl", hash = "sha256:6c42a930bc5f4c47f4ea775c91de47d27910881902b0f20e4990ebe045a415d0"},
+    {file = "tokenizers-0.21.4-cp39-abi3-win_amd64.whl", hash = "sha256:475d807a5c3eb72c59ad9b5fcdb254f6e17f53dfcbb9903233b0dfa9c943b597"},
+    {file = "tokenizers-0.21.4.tar.gz", hash = "sha256:fa23f85fbc9a02ec5c6978da172cdcbac23498c3ca9f3645c5c68740ac007880"},
+]
+
+[package.dependencies]
+huggingface-hub = ">=0.16.4,<1.0"
+
+[package.extras]
+dev = ["tokenizers[testing]"]
+docs = ["setuptools-rust", "sphinx", "sphinx-rtd-theme"]
+testing = ["black (==22.3)", "datasets", "numpy", "pytest", "requests", "ruff"]
+
 [[package]]
 name = "tomli"
 version = "2.2.1"
@@ -6822,4 +7130,4 @@ cffi = ["cffi (>=1.11)"]
 [metadata]
 lock-version = "2.1"
 python-versions = ">=3.10,<3.14"
-content-hash = "e780199a6b02f5fef3f930a4f1d69443af1977b591172c3a18a299166345c37a"
+content-hash = "06ca298144a75656a31df830153013cc372f47bed0fd04c8cb02373a4f40c38b"

autogpt_platform/backend/pyproject.toml

@@ -78,6 +78,7 @@ pandas = "^2.3.1"
 firecrawl-py = "^2.16.3"
 exa-py = "^1.14.20"
 croniter = "^6.0.0"
+stagehand = "^0.5.1"
 
 [tool.poetry.group.dev.dependencies]
 aiohappyeyeballs = "^2.6.1"

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

@@ -509,7 +509,7 @@ export function AgentRunDraftView({
 
   return (
     <div className={cn("agpt-div flex gap-6", className)}>
-      <div className="flex flex-1 flex-col gap-4">
+      <div className="flex min-w-0 flex-1 flex-col gap-4">
         <Card className="agpt-box">
           <CardHeader>
             <CardTitle className="font-poppins text-lg">Input</CardTitle>

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/use-agent-runs.ts

@@ -1,5 +1,6 @@
 import {
   getV1ListGraphExecutionsResponse,
+  getV1ListGraphExecutionsResponse200,
   useGetV1ListGraphExecutionsInfinite,
 } from "@/app/api/__generated__/endpoints/graphs/graphs";
 import { GraphExecutionsPaginated } from "@/app/api/__generated__/models/graphExecutionsPaginated";
@@ -92,12 +93,14 @@ export const useAgentRunsInfinite = (graphID?: GraphID) => {
 
   const upsertAgentRun = (newAgentRun: GraphExecutionMeta) => {
     queryClient.setQueryData(
-      [queryKey, { page: 1, page_size: 20 }],
+      queryKey,
       (currentQueryData: typeof queryResults) => {
         if (!currentQueryData?.pages) return currentQueryData;
 
         const exists = currentQueryData.pages.some((page) => {
-          const response = page.data as GraphExecutionsPaginated;
+          if (page.status !== 200) return false;
+
+          const response = page.data;
           return response.executions.some((run) => run.id === newAgentRun.id);
         });
         if (exists) {
@@ -105,7 +108,8 @@ export const useAgentRunsInfinite = (graphID?: GraphID) => {
           return {
             ...currentQueryData,
             pages: currentQueryData.pages.map((page) => {
-              const response = page.data as GraphExecutionsPaginated;
+              if (page.status !== 200) return page;
+              const response = page.data;
               const executions = response.executions;
 
               const index = executions.findIndex(
@@ -122,24 +126,24 @@ export const useAgentRunsInfinite = (graphID?: GraphID) => {
                   ...response,
                   executions: newExecutions,
                 },
-              };
+              } satisfies getV1ListGraphExecutionsResponse;
             }),
           };
         }
 
         // If the run does not exist, we add it to the first page
-        const page = currentQueryData.pages[0];
-        const updatedExecutions = [
-          newAgentRun,
-          ...(page.data as GraphExecutionsPaginated).executions,
-        ];
+        const page = currentQueryData
+          .pages[0] as getV1ListGraphExecutionsResponse200 & {
+          headers: Headers;
+        };
+        const updatedExecutions = [newAgentRun, ...page.data.executions];
         const updatedPage = {
           ...page,
           data: {
             ...page.data,
             executions: updatedExecutions,
           },
-        };
+        } satisfies getV1ListGraphExecutionsResponse;
         const updatedPages = [updatedPage, ...currentQueryData.pages.slice(1)];
         return {
           ...currentQueryData,

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

@@ -0,0 +1,115 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { StarRatingIcons } from "@/components/ui/icons";
+
+interface CreatorInfoCardProps {
+  username: string;
+  handle: string;
+  avatarSrc: string;
+  categories: string[];
+  averageRating: number;
+  totalRuns: number;
+}
+
+export const CreatorInfoCard = ({
+  username,
+  handle,
+  avatarSrc,
+  categories,
+  averageRating,
+  totalRuns,
+}: CreatorInfoCardProps) => {
+  return (
+    <div
+      className="inline-flex h-auto min-h-[500px] w-full max-w-[440px] flex-col items-start justify-between rounded-[26px] bg-violet-100 p-4 dark:bg-violet-900 sm:h-[632px] sm:w-[440px] sm:p-6"
+      role="article"
+      aria-label={`Creator profile for ${username}`}
+    >
+      <div className="flex w-full flex-col items-start justify-start gap-3.5 sm:h-[218px]">
+        <Avatar className="h-[100px] w-[100px] sm:h-[130px] sm:w-[130px]">
+          <AvatarImage
+            width={130}
+            height={130}
+            src={avatarSrc}
+            alt={`${username}'s avatar`}
+          />
+          <AvatarFallback
+            size={130}
+            className="h-[100px] w-[100px] sm:h-[130px] sm:w-[130px]"
+          >
+            {username.charAt(0)}
+          </AvatarFallback>
+        </Avatar>
+        <div className="flex w-full flex-col items-start justify-start gap-1.5">
+          <div
+            data-testid="creator-title"
+            className="w-full font-poppins text-[35px] font-medium leading-10 text-neutral-900 dark:text-neutral-100 sm:text-[35px] sm:leading-10"
+          >
+            {username}
+          </div>
+          <div className="w-full text-lg font-normal leading-6 text-neutral-800 dark:text-neutral-200 sm:text-xl sm:leading-7">
+            @{handle}
+          </div>
+        </div>
+      </div>
+
+      <div className="my-4 flex w-full flex-col items-start justify-start gap-6 sm:gap-[50px]">
+        <div className="flex w-full flex-col items-start justify-start gap-3">
+          <div className="h-px w-full bg-neutral-700 dark:bg-neutral-300" />
+          <div className="flex flex-col items-start justify-start gap-2.5">
+            <div className="w-full text-base font-medium leading-normal text-neutral-800 dark:text-neutral-200">
+              Top categories
+            </div>
+            <div
+              className="flex flex-wrap items-center gap-2.5"
+              role="list"
+              aria-label="Categories"
+            >
+              {categories.map((category, index) => (
+                <div
+                  key={index}
+                  className="flex items-center justify-center gap-2.5 rounded-[34px] border border-neutral-600 px-4 py-3 dark:border-neutral-400"
+                  role="listitem"
+                >
+                  <div className="text-base font-normal leading-normal text-neutral-800 dark:text-neutral-200">
+                    {category}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="flex w-full flex-col items-start justify-start gap-3">
+          <div className="h-px w-full bg-neutral-700 dark:bg-neutral-300" />
+          <div className="flex w-full flex-col items-start justify-between gap-4 sm:flex-row sm:gap-0">
+            <div className="flex w-full flex-col items-start justify-start gap-2.5 sm:w-[164px]">
+              <div className="w-full text-base font-medium leading-normal text-neutral-800 dark:text-neutral-200">
+                Average rating
+              </div>
+              <div className="inline-flex items-center gap-2">
+                <div className="text-[18px] font-semibold leading-[28px] text-neutral-800 dark:text-neutral-200">
+                  {averageRating.toFixed(1)}
+                </div>
+                <div
+                  className="flex items-center gap-px"
+                  role="img"
+                  aria-label={`Rating: ${averageRating} out of 5 stars`}
+                >
+                  {StarRatingIcons(averageRating)}
+                </div>
+              </div>
+            </div>
+            <div className="flex w-full flex-col items-start justify-start gap-2.5 sm:w-[164px]">
+              <div className="w-full text-base font-medium leading-normal text-neutral-800 dark:text-neutral-200">
+                Number of runs
+              </div>
+              <div className="text-[18px] font-semibold leading-[28px] text-neutral-800 dark:text-neutral-200">
+                {new Intl.NumberFormat().format(totalRuns)} runs
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,43 @@
+import { getIconForSocial } from "@/components/ui/icons";
+import { Fragment } from "react";
+
+interface CreatorLinksProps {
+  links: string[];
+}
+
+export const CreatorLinks = ({ links }: CreatorLinksProps) => {
+  if (!links || links.length === 0) {
+    return null;
+  }
+
+  const renderLinkButton = (url: string) => (
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="flex min-w-[200px] flex-1 items-center justify-between rounded-[34px] border border-neutral-600 px-5 py-3 dark:border-neutral-400"
+    >
+      <div className="text-base font-medium leading-normal text-neutral-800 dark:text-neutral-200">
+        {new URL(url).hostname.replace("www.", "")}
+      </div>
+      <div className="relative h-6 w-6">
+        {getIconForSocial(url, {
+          className: "h-6 w-6 text-neutral-800 dark:text-neutral-200",
+        })}
+      </div>
+    </a>
+  );
+
+  return (
+    <div className="flex flex-col items-start justify-start gap-4">
+      <div className="text-base font-medium leading-normal text-neutral-800 dark:text-neutral-200">
+        Other links
+      </div>
+      <div className="flex w-full flex-wrap gap-3">
+        {links.map((link, index) => (
+          <Fragment key={index}>{renderLinkButton(link)}</Fragment>
+        ))}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,40 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export const CreatorPageLoading = () => {
+  return (
+    <div className="mx-auto w-screen max-w-[1360px]">
+      <main className="mt-5 px-4">
+        <Skeleton className="mb-4 h-6 w-40" />
+
+        <div className="mt-4 flex flex-col items-start gap-4 sm:mt-6 sm:gap-6 md:mt-8 md:flex-row md:gap-8">
+          <div className="w-full md:w-auto md:shrink-0">
+            <Skeleton className="h-80 w-80 rounded-xl" />
+            <div className="mt-4 space-y-2">
+              <Skeleton className="h-6 w-80" />
+              <Skeleton className="h-4 w-80" />
+            </div>
+          </div>
+
+          <div className="flex min-w-0 flex-1 flex-col gap-4">
+            <Skeleton className="h-6 w-24" />
+            <Skeleton className="h-8 w-full max-w-xl" />
+            <Skeleton className="h-4 w-1/2" />
+            <div className="flex gap-2">
+              <Skeleton className="h-8 w-8 rounded-full" />
+              <Skeleton className="h-8 w-8 rounded-full" />
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-8">
+          <Skeleton className="mb-6 h-px w-full" />
+          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3">
+            {Array.from({ length: 3 }).map((_, i) => (
+              <Skeleton key={i} className="h-32 w-full rounded-lg" />
+            ))}
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};

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

@@ -0,0 +1,90 @@
+"use client";
+
+import { Separator } from "@/components/ui/separator";
+import { AgentsSection } from "../AgentsSection/AgentsSection";
+import { MarketplaceCreatorPageParams } from "../../creator/[creator]/page";
+import { Breadcrumbs } from "@/components/molecules/Breadcrumbs/Breadcrumbs";
+import { CreatorInfoCard } from "../CreatorInfoCard/CreatorInfoCard";
+import { CreatorLinks } from "../CreatorLinks/CreatorLinks";
+import { useMainCreatorPage } from "./useMainCreatorPage";
+import { ErrorCard } from "@/components/molecules/ErrorCard/ErrorCard";
+import { CreatorPageLoading } from "../CreatorPageLoading";
+
+interface MainCreatorPageProps {
+  params: MarketplaceCreatorPageParams;
+}
+
+export const MainCreatorPage = ({ params }: MainCreatorPageProps) => {
+  const { creatorAgents, creator, isLoading, hasError } = useMainCreatorPage({
+    params,
+  });
+
+  if (isLoading) return <CreatorPageLoading />;
+
+  if (hasError) {
+    return (
+      <div className="mx-auto w-screen max-w-[1360px]">
+        <div className="flex min-h-[60vh] items-center justify-center">
+          <ErrorCard
+            isSuccess={false}
+            responseError={{ message: "Failed to load creator data" }}
+            context="creator page"
+            onRetry={() => window.location.reload()}
+            className="w-full max-w-md"
+          />
+        </div>
+      </div>
+    );
+  }
+
+  if (creator)
+    return (
+      <div className="mx-auto w-screen max-w-[1360px]">
+        <main className="mt-5 px-4">
+          <Breadcrumbs
+            items={[
+              { name: "Store", link: "/marketplace" },
+              { name: creator.name, link: "#" },
+            ]}
+          />
+
+          <div className="mt-4 flex flex-col items-start gap-4 sm:mt-6 sm:gap-6 md:mt-8 md:flex-row md:gap-8">
+            <div className="w-full md:w-auto md:shrink-0">
+              <CreatorInfoCard
+                username={creator.name}
+                handle={creator.username}
+                avatarSrc={creator.avatar_url}
+                categories={creator.top_categories}
+                averageRating={creator.agent_rating}
+                totalRuns={creator.agent_runs}
+              />
+            </div>
+            <div className="flex min-w-0 flex-1 flex-col gap-4 sm:gap-6 md:gap-8">
+              <p className="text-underline-position-from-font text-decoration-skip-none text-left font-poppins text-base font-medium leading-6">
+                About
+              </p>
+              <div
+                className="text-[48px] font-normal leading-[59px] text-neutral-900 dark:text-zinc-50"
+                style={{ whiteSpace: "pre-line" }}
+                data-testid="creator-description"
+              >
+                {creator.description}
+              </div>
+
+              <CreatorLinks links={creator.links} />
+            </div>
+          </div>
+          <div className="mt-8 sm:mt-12 md:mt-16 lg:pb-[58px]">
+            <Separator className="mb-6 bg-gray-200" />
+            {creatorAgents && (
+              <AgentsSection
+                agents={creatorAgents.agents}
+                hideAvatars={true}
+                sectionTitle={`Agents by ${creator.name}`}
+              />
+            )}
+          </div>
+        </main>
+      </div>
+    );
+};

autogpt_platform/frontend/src/app/(platform)/marketplace/components/MainCreatorPage/useMainCreatorPage.ts

@@ -0,0 +1,50 @@
+import {
+  useGetV2GetCreatorDetails,
+  useGetV2ListStoreAgents,
+} from "@/app/api/__generated__/endpoints/store/store";
+import { StoreAgentsResponse } from "@/app/api/__generated__/models/storeAgentsResponse";
+import { MarketplaceCreatorPageParams } from "../../creator/[creator]/page";
+import { CreatorDetails } from "@/app/api/__generated__/models/creatorDetails";
+
+interface useMainCreatorPageProps {
+  params: MarketplaceCreatorPageParams;
+}
+
+export const useMainCreatorPage = ({ params }: useMainCreatorPageProps) => {
+  const {
+    data: creatorAgents,
+    isLoading: isCreatorAgentsLoading,
+    isError: isCreatorAgentsError,
+  } = useGetV2ListStoreAgents(
+    { creator: params.creator },
+    {
+      query: {
+        select: (x) => {
+          return x.data as StoreAgentsResponse;
+        },
+      },
+    },
+  );
+
+  const {
+    data: creator,
+    isLoading: isCreatorDetailsLoading,
+    isError: isCreatorDetailsError,
+  } = useGetV2GetCreatorDetails(params.creator, {
+    query: {
+      select: (x) => {
+        return x.data as CreatorDetails;
+      },
+    },
+  });
+
+  const isLoading = isCreatorAgentsLoading || isCreatorDetailsLoading;
+  const hasError = isCreatorAgentsError || isCreatorDetailsError;
+
+  return {
+    creatorAgents,
+    creator,
+    isLoading,
+    hasError,
+  };
+};

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

@@ -6,52 +6,29 @@ import { HeroSection } from "../HeroSection/HeroSection";
 import { AgentsSection } from "../AgentsSection/AgentsSection";
 import { useMainMarketplacePage } from "./useMainMarketplacePage";
 import { FeaturedCreators } from "../FeaturedCreators/FeaturedCreators";
-import { Skeleton } from "@/components/ui/skeleton";
+import { MainMarketplacePageLoading } from "../MainMarketplacePageLoading";
+import { ErrorCard } from "@/components/molecules/ErrorCard/ErrorCard";
 
 export const MainMarkeplacePage = () => {
   const { featuredAgents, topAgents, featuredCreators, isLoading, hasError } =
     useMainMarketplacePage();
 
-  // FRONTEND-TODO : Add better Loading Skeletons
   if (isLoading) {
-    return (
-      <div className="mx-auto w-screen max-w-[1360px]">
-        <main className="px-4">
-          <div className="flex flex-col gap-2 pt-16">
-            <div className="flex flex-col items-center justify-center gap-8">
-              <Skeleton className="h-16 w-[60%]" />
-              <Skeleton className="h-12 w-[40%]" />
-            </div>
-            <div className="flex flex-col items-center justify-center gap-8 pt-8">
-              <Skeleton className="h-8 w-[60%]" />
-            </div>
-            <div className="mx-auto flex w-[80%] flex-wrap items-center justify-center gap-8 pt-24">
-              <Skeleton className="h-[12rem] w-[12rem]" />
-              <Skeleton className="h-[12rem] w-[12rem]" />
-              <Skeleton className="h-[12rem] w-[12rem]" />
-              <Skeleton className="h-[12rem] w-[12rem]" />
-              <Skeleton className="h-[12rem] w-[12rem]" />
-              <Skeleton className="h-[12rem] w-[12rem]" />
-              <Skeleton className="h-[12rem] w-[12rem]" />
-              <Skeleton className="h-[12rem] w-[12rem]" />
-              <Skeleton className="h-[12rem] w-[12rem]" />
-              <Skeleton className="h-[12rem] w-[12rem]" />
-            </div>
-          </div>
-        </main>
-      </div>
-    );
+    return <MainMarketplacePageLoading />;
   }
 
-  // FRONTEND-TODO : Add better Error UI
   if (hasError) {
     return (
       <div className="mx-auto w-screen max-w-[1360px]">
         <main className="px-4">
           <div className="flex min-h-[400px] items-center justify-center">
-            <div className="text-lg text-red-500">
-              Error loading marketplace data. Please try again later.
-            </div>
+            <ErrorCard
+              isSuccess={false}
+              responseError={{ message: "Failed to load marketplace data" }}
+              context="marketplace page"
+              onRetry={() => window.location.reload()}
+              className="w-full max-w-md"
+            />
           </div>
         </main>
       </div>

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

@@ -0,0 +1,31 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export const MainMarketplacePageLoading = () => {
+  return (
+    <div className="mx-auto w-screen max-w-[1360px]">
+      <main className="px-4">
+        <div className="flex flex-col gap-2 pt-16">
+          <div className="flex flex-col items-center justify-center gap-8">
+            <Skeleton className="h-16 w-[60%]" />
+            <Skeleton className="h-12 w-[40%]" />
+          </div>
+          <div className="flex flex-col items-center justify-center gap-8 pt-8">
+            <Skeleton className="h-8 w-[60%]" />
+          </div>
+          <div className="mx-auto flex w-[80%] flex-wrap items-center justify-center gap-8 pt-24">
+            <Skeleton className="h-[12rem] w-[12rem]" />
+            <Skeleton className="h-[12rem] w-[12rem]" />
+            <Skeleton className="h-[12rem] w-[12rem]" />
+            <Skeleton className="h-[12rem] w-[12rem]" />
+            <Skeleton className="h-[12rem] w-[12rem]" />
+            <Skeleton className="h-[12rem] w-[12rem]" />
+            <Skeleton className="h-[12rem] w-[12rem]" />
+            <Skeleton className="h-[12rem] w-[12rem]" />
+            <Skeleton className="h-[12rem] w-[12rem]" />
+            <Skeleton className="h-[12rem] w-[12rem]" />
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};

autogpt_platform/frontend/src/app/(platform)/marketplace/creator/[creator]/page.tsx

@@ -1,103 +1,55 @@
-import BackendAPI from "@/lib/autogpt-server-api";
-import { AgentsSection } from "@/components/agptui/composite/AgentsSection";
-import { Breadcrumbs } from "@/components/molecules/Breadcrumbs/Breadcrumbs";
+import { getQueryClient } from "@/lib/react-query/queryClient";
+import {
+  getV2GetCreatorDetails,
+  prefetchGetV2GetCreatorDetailsQuery,
+  prefetchGetV2ListStoreAgentsQuery,
+} from "@/app/api/__generated__/endpoints/store/store";
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
+import { MainCreatorPage } from "../../components/MainCreatorPage/MainCreatorPage";
 import { Metadata } from "next";
-import { CreatorInfoCard } from "@/components/agptui/CreatorInfoCard";
-import { CreatorLinks } from "@/components/agptui/CreatorLinks";
-import { Separator } from "@/components/ui/separator";
+import { CreatorDetails } from "@/app/api/__generated__/models/creatorDetails";
 
-// Force dynamic rendering to avoid static generation issues with cookies
 export const dynamic = "force-dynamic";
 
-type MarketplaceCreatorPageParams = { creator: string };
+export interface MarketplaceCreatorPageParams {
+  creator: string;
+}
 
 export async function generateMetadata({
   params: _params,
 }: {
   params: Promise<MarketplaceCreatorPageParams>;
 }): Promise<Metadata> {
-  const api = new BackendAPI();
   const params = await _params;
-  const creator = await api.getStoreCreator(params.creator.toLowerCase());
+  const { data: creator } = await getV2GetCreatorDetails(
+    params.creator.toLowerCase(),
+  );
 
   return {
-    title: `${creator.name} - AutoGPT Store`,
-    description: creator.description,
+    title: `${(creator as CreatorDetails).name} - AutoGPT Store`,
+    description: (creator as CreatorDetails).description,
   };
 }
 
-// export async function generateStaticParams() {
-//   const api = new BackendAPI();
-//   const creators = await api.getStoreCreators({ featured: true });
-//   return creators.creators.map((creator) => ({
-//     creator: creator.username,
-//   }));
-// }
-
 export default async function Page({
   params: _params,
 }: {
   params: Promise<MarketplaceCreatorPageParams>;
 }) {
-  const api = new BackendAPI();
+  const queryClient = getQueryClient();
+
   const params = await _params;
 
-  try {
-    const creator = await api.getStoreCreator(params.creator);
-    const creatorAgents = await api.getStoreAgents({ creator: params.creator });
+  await Promise.all([
+    prefetchGetV2ListStoreAgentsQuery(queryClient, {
+      creator: params.creator,
+    }),
+    prefetchGetV2GetCreatorDetailsQuery(queryClient, params.creator),
+  ]);
 
-    return (
-      <div className="mx-auto w-screen max-w-[1360px]">
-        <main className="mt-5 px-4">
-          <Breadcrumbs
-            items={[
-              { name: "Store", link: "/marketplace" },
-              { name: creator.name, link: "#" },
-            ]}
-          />
-
-          <div className="mt-4 flex flex-col items-start gap-4 sm:mt-6 sm:gap-6 md:mt-8 md:flex-row md:gap-8">
-            <div className="w-full md:w-auto md:shrink-0">
-              <CreatorInfoCard
-                username={creator.name}
-                handle={creator.username}
-                avatarSrc={creator.avatar_url}
-                categories={creator.top_categories}
-                averageRating={creator.agent_rating}
-                totalRuns={creator.agent_runs}
-              />
-            </div>
-            <div className="flex min-w-0 flex-1 flex-col gap-4 sm:gap-6 md:gap-8">
-              <p className="text-underline-position-from-font text-decoration-skip-none text-left font-poppins text-base font-medium leading-6">
-                About
-              </p>
-              <div
-                data-testid="creator-description"
-                className="text-[48px] font-normal leading-[59px] text-neutral-900 dark:text-zinc-50"
-                style={{ whiteSpace: "pre-line" }}
-              >
-                {creator.description}
-              </div>
-
-              <CreatorLinks links={creator.links} />
-            </div>
-          </div>
-          <div className="mt-8 sm:mt-12 md:mt-16 lg:pb-[58px]">
-            <Separator className="mb-6 bg-gray-200" />
-            <AgentsSection
-              agents={creatorAgents.agents}
-              hideAvatars={true}
-              sectionTitle={`Agents by ${creator.name}`}
-            />
-          </div>
-        </main>
-      </div>
-    );
-  } catch {
-    return (
-      <div className="flex h-screen w-full items-center justify-center">
-        <div className="text-2xl text-neutral-900">Creator not found</div>
-      </div>
-    );
-  }
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <MainCreatorPage params={params} />
+    </HydrationBoundary>
+  );
 }