Always yield files in ClaudeCodeBlock output

Updated the ClaudeCodeBlock to always yield the 'files' key with an empty list if no files are present, ensuring consistent output that matches the Output schema.

autogpt_platform/backend/backend/api/features/integrations/router.py

@@ -108,9 +108,6 @@ class CredentialsMetaResponse(BaseModel):
     host: str | None = Field(
         default=None, description="Host pattern for host-scoped credentials"
     )
-    is_system: bool = Field(
-        default=False, description="Whether this is a system-managed credential"
-    )
 
 
 @router.post("/{provider}/callback", summary="Exchange OAuth code for tokens")
@@ -178,8 +175,6 @@ async def callback(
         f"Successfully processed OAuth callback for user {user_id} "
         f"and provider {provider.value}"
     )
-    from backend.integrations.credentials_store import is_system_credential
-
     return CredentialsMetaResponse(
         id=credentials.id,
         provider=credentials.provider,
@@ -190,7 +185,6 @@ async def callback(
         host=(
             credentials.host if isinstance(credentials, HostScopedCredentials) else None
         ),
-        is_system=is_system_credential(credentials.id),
     )
 
 
@@ -198,24 +192,7 @@ async def callback(
 async def list_credentials(
     user_id: Annotated[str, Security(get_user_id)],
 ) -> list[CredentialsMetaResponse]:
-    from backend.integrations.credentials_store import (
-        DEFAULT_CREDENTIALS,
-        is_system_credential,
-    )
-
-    # Get user credentials and configured system credentials
     credentials = await creds_manager.store.get_all_creds(user_id)
-    
-    # Create a set of credential IDs we've already included
-    included_ids = {cred.id for cred in credentials}
-    
-    # Always include all system credentials, even if not configured
-    # This ensures the frontend can identify system credentials
-    for system_cred in DEFAULT_CREDENTIALS:
-        if system_cred.id not in included_ids:
-            credentials.append(system_cred)
-            included_ids.add(system_cred.id)
-    
     return [
         CredentialsMetaResponse(
             id=cred.id,
@@ -225,7 +202,6 @@ async def list_credentials(
             scopes=cred.scopes if isinstance(cred, OAuth2Credentials) else None,
             username=cred.username if isinstance(cred, OAuth2Credentials) else None,
             host=cred.host if isinstance(cred, HostScopedCredentials) else None,
-            is_system=is_system_credential(cred.id),
         )
         for cred in credentials
     ]
@@ -238,23 +214,7 @@ async def list_credentials_by_provider(
     ],
     user_id: Annotated[str, Security(get_user_id)],
 ) -> list[CredentialsMetaResponse]:
-    from backend.integrations.credentials_store import (
-        DEFAULT_CREDENTIALS,
-        is_system_credential,
-    )
-
-    # Get user credentials and configured system credentials for this provider
     credentials = await creds_manager.store.get_creds_by_provider(user_id, provider)
-    
-    # Create a set of credential IDs we've already included
-    included_ids = {cred.id for cred in credentials}
-    
-    # Always include system credentials for this provider, even if not configured
-    for system_cred in DEFAULT_CREDENTIALS:
-        if system_cred.provider == provider and system_cred.id not in included_ids:
-            credentials.append(system_cred)
-            included_ids.add(system_cred.id)
-    
     return [
         CredentialsMetaResponse(
             id=cred.id,
@@ -264,7 +224,6 @@ async def list_credentials_by_provider(
             scopes=cred.scopes if isinstance(cred, OAuth2Credentials) else None,
             username=cred.username if isinstance(cred, OAuth2Credentials) else None,
             host=cred.host if isinstance(cred, HostScopedCredentials) else None,
-            is_system=is_system_credential(cred.id),
         )
         for cred in credentials
     ]
@@ -872,18 +831,6 @@ async def list_providers() -> List[str]:
     return all_providers
 
 
-@router.get("/providers/system", response_model=List[str])
-async def list_system_providers() -> List[str]:
-    """
-    Get a list of providers that have platform credits (system credentials) available.
-
-    These providers can be used without the user providing their own API keys.
-    """
-    from backend.integrations.credentials_store import SYSTEM_PROVIDERS
-
-    return list(SYSTEM_PROVIDERS)
-
-
 @router.get("/providers/names", response_model=ProviderNamesResponse)
 async def get_provider_names() -> ProviderNamesResponse:
     """

autogpt_platform/backend/backend/blocks/claude_code.py

@@ -0,0 +1,602 @@
+import shlex
+from typing import Literal
+
+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
+
+# 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 at 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 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 files created/modified by Claude Code. "
+                "Each file has '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: str = SchemaField(
+            description=(
+                "ID of the sandbox instance. "
+                "Pass this back along with session_id to continue the conversation "
+                "(only available if dispose_sandbox was False)."
+            )
+        )
+
+    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),
+            ],
+            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)
+        """
+        import json
+        import uuid
+
+        # 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
+
+        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}"
+                        )
+
+            # 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}"
+                )
+
+            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 ""
+            sandbox_id = sandbox.sandbox_id
+
+            # 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 from the working directory
+            files = await self._extract_files(sandbox, working_directory)
+
+            return (
+                response,
+                files,
+                new_conversation_history,
+                current_session_id,
+                sandbox_id,
+            )
+
+        finally:
+            if dispose_sandbox and sandbox:
+                await sandbox.kill()
+
+    async def _extract_files(
+        self,
+        sandbox: BaseAsyncSandbox,
+        working_directory: str,
+    ) -> list["ClaudeCodeBlock.FileOutput"]:
+        """
+        Extract files from the sandbox working directory.
+
+        Returns:
+            List of FileOutput objects with path, name, and content
+        """
+        files: list[ClaudeCodeBlock.FileOutput] = []
+
+        # Text file extensions we can safely read
+        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)
+            safe_working_dir = shlex.quote(working_directory)
+            find_result = await sandbox.commands.run(
+                f"find {safe_working_dir} -type f "
+                f"-not -path '*/node_modules/*' "
+                f"-not -path '*/.git/*' "
+                f"2>/dev/null | head -100"
+            )
+
+            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
+            if not input_data.dispose_sandbox and sandbox_id:
+                yield "sandbox_id", sandbox_id
+
+        except Exception as e:
+            yield "error", str(e)

autogpt_platform/backend/backend/blocks/search.py

@@ -18,6 +18,7 @@ from backend.data.model import (
     SchemaField,
 )
 from backend.integrations.providers import ProviderName
+from backend.util.request import DEFAULT_USER_AGENT
 
 
 class GetWikipediaSummaryBlock(Block, GetRequest):
@@ -39,17 +40,27 @@ class GetWikipediaSummaryBlock(Block, GetRequest):
             output_schema=GetWikipediaSummaryBlock.Output,
             test_input={"topic": "Artificial Intelligence"},
             test_output=("summary", "summary content"),
-            test_mock={"get_request": lambda url, json: {"extract": "summary content"}},
+            test_mock={
+                "get_request": lambda url, headers, json: {"extract": "summary content"}
+            },
         )
 
     async def run(self, input_data: Input, **kwargs) -> BlockOutput:
         topic = input_data.topic
-        url = f"https://en.wikipedia.org/api/rest_v1/page/summary/{topic}"
+        # URL-encode the topic to handle spaces and special characters
+        encoded_topic = quote(topic, safe="")
+        url = f"https://en.wikipedia.org/api/rest_v1/page/summary/{encoded_topic}"
+
+        # Set headers per Wikimedia robot policy (https://w.wiki/4wJS)
+        # - User-Agent: Required, must identify the bot
+        # - Accept-Encoding: gzip recommended to reduce bandwidth
+        headers = {
+            "User-Agent": DEFAULT_USER_AGENT,
+            "Accept-Encoding": "gzip, deflate",
+        }
 
-        # Note: User-Agent is now automatically set by the request library
-        # to comply with Wikimedia's robot policy (https://w.wiki/4wJS)
         try:
-            response = await self.get_request(url, json=True)
+            response = await self.get_request(url, headers=headers, json=True)
             if "extract" not in response:
                 raise ValueError(f"Unable to parse Wikipedia response: {response}")
             yield "summary", response["extract"]

autogpt_platform/backend/backend/integrations/credentials_store.py

@@ -245,21 +245,6 @@ DEFAULT_CREDENTIALS = [
     webshare_proxy_credentials,
 ]
 
-SYSTEM_CREDENTIAL_IDS = {cred.id for cred in DEFAULT_CREDENTIALS}
-
-# Set of providers that have system credentials available
-SYSTEM_PROVIDERS = {cred.provider for cred in DEFAULT_CREDENTIALS}
-
-
-def is_system_credential(credential_id: str) -> bool:
-    """Check if a credential ID belongs to a system-managed credential."""
-    return credential_id in SYSTEM_CREDENTIAL_IDS
-
-
-def is_system_provider(provider: str) -> bool:
-    """Check if a provider has system-managed credentials available."""
-    return provider in SYSTEM_PROVIDERS
-
 
 class IntegrationCredentialsStore:
     def __init__(self):

autogpt_platform/frontend/next.config.mjs

@@ -3,13 +3,6 @@ import { withSentryConfig } from "@sentry/nextjs";
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   productionBrowserSourceMaps: true,
-  // Externalize OpenTelemetry packages to fix Turbopack HMR issues
-  serverExternalPackages: [
-    "@opentelemetry/instrumentation",
-    "@opentelemetry/sdk-node",
-    "import-in-the-middle",
-    "require-in-the-middle",
-  ],
   experimental: {
     serverActions: {
       bodySizeLimit: "256mb",

autogpt_platform/frontend/package.json

@@ -32,7 +32,6 @@
     "@hookform/resolvers": "5.2.2",
     "@next/third-parties": "15.4.6",
     "@phosphor-icons/react": "2.1.10",
-    "@radix-ui/react-accordion": "1.2.12",
     "@radix-ui/react-alert-dialog": "1.1.15",
     "@radix-ui/react-avatar": "1.1.10",
     "@radix-ui/react-checkbox": "1.3.3",
@@ -118,7 +117,6 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "4.1.2",
-    "@opentelemetry/instrumentation": "0.209.0",
     "@playwright/test": "1.56.1",
     "@storybook/addon-a11y": "9.1.5",
     "@storybook/addon-docs": "9.1.5",
@@ -142,7 +140,6 @@
     "eslint": "8.57.1",
     "eslint-config-next": "15.5.7",
     "eslint-plugin-storybook": "9.1.5",
-    "import-in-the-middle": "2.0.2",
     "msw": "2.11.6",
     "msw-storybook-addon": "2.0.6",
     "orval": "7.13.0",
@@ -150,7 +147,7 @@
     "postcss": "8.5.6",
     "prettier": "3.6.2",
     "prettier-plugin-tailwindcss": "0.7.1",
-    "require-in-the-middle": "8.0.1",
+    "require-in-the-middle": "7.5.2",
     "storybook": "9.1.5",
     "tailwindcss": "3.4.17",
     "typescript": "5.9.3"

autogpt_platform/frontend/pnpm-lock.yaml

@@ -20,9 +20,6 @@ importers:
       '@phosphor-icons/react':
         specifier: 2.1.10
         version: 2.1.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-accordion':
-        specifier: 1.2.12
-        version: 1.2.12(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-alert-dialog':
         specifier: 1.1.15
         version: 1.1.15(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -273,9 +270,6 @@ importers:
       '@chromatic-com/storybook':
         specifier: 4.1.2
         version: 4.1.2(storybook@9.1.5(@testing-library/dom@10.4.1)(msw@2.11.6(@types/node@24.10.0)(typescript@5.9.3))(prettier@3.6.2))
-      '@opentelemetry/instrumentation':
-        specifier: 0.209.0
-        version: 0.209.0(@opentelemetry/api@1.9.0)
       '@playwright/test':
         specifier: 1.56.1
         version: 1.56.1
@@ -345,9 +339,6 @@ importers:
       eslint-plugin-storybook:
         specifier: 9.1.5
         version: 9.1.5(eslint@8.57.1)(storybook@9.1.5(@testing-library/dom@10.4.1)(msw@2.11.6(@types/node@24.10.0)(typescript@5.9.3))(prettier@3.6.2))(typescript@5.9.3)
-      import-in-the-middle:
-        specifier: 2.0.2
-        version: 2.0.2
       msw:
         specifier: 2.11.6
         version: 2.11.6(@types/node@24.10.0)(typescript@5.9.3)
@@ -370,8 +361,8 @@ importers:
         specifier: 0.7.1
         version: 0.7.1(prettier@3.6.2)
       require-in-the-middle:
-        specifier: 8.0.1
-        version: 8.0.1
+        specifier: 7.5.2
+        version: 7.5.2
       storybook:
         specifier: 9.1.5
         version: 9.1.5(@testing-library/dom@10.4.1)(msw@2.11.6(@types/node@24.10.0)(typescript@5.9.3))(prettier@3.6.2)
@@ -1556,10 +1547,6 @@ packages:
     resolution: {integrity: sha512-CjruKY9V6NMssL/T1kAFgzosF1v9o6oeN+aX5JB/C/xPNtmgIJqcXHG7fA82Ou1zCpWGl4lROQUKwUNE1pMCyg==}
     engines: {node: '>=8.0.0'}
 
-  '@opentelemetry/api-logs@0.209.0':
-    resolution: {integrity: sha512-xomnUNi7TiAGtOgs0tb54LyrjRZLu9shJGGwkcN7NgtiPYOpNnKLkRJtzZvTjD/w6knSZH9sFZcUSUovYOPg6A==}
-    engines: {node: '>=8.0.0'}
-
   '@opentelemetry/api@1.9.0':
     resolution: {integrity: sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==}
     engines: {node: '>=8.0.0'}
@@ -1714,12 +1701,6 @@ packages:
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation@0.209.0':
-    resolution: {integrity: sha512-Cwe863ojTCnFlxVuuhG7s6ODkAOzKsAEthKAcI4MDRYz1OmGWYnmSl4X2pbyS+hBxVTdvfZePfoEA01IjqcEyw==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
   '@opentelemetry/redis-common@0.38.2':
     resolution: {integrity: sha512-1BCcU93iwSRZvDAgwUxC/DV4T/406SkMfxGqu5ojc3AvNI+I9GhV7v0J1HljsczuuhcnFLYqD5VmwVXfCGHzxA==}
     engines: {node: ^18.19.0 || >=20.6.0}
@@ -1829,19 +1810,6 @@ packages:
   '@radix-ui/primitive@1.1.3':
     resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
 
-  '@radix-ui/react-accordion@1.2.12':
-    resolution: {integrity: sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-alert-dialog@1.1.15':
     resolution: {integrity: sha512-oTVLkEw5GpdRe29BqJ0LSDFWI3qu0vR1M0mUkOQWDIUnY/QIkLpgDMWuKxP94c2NAC2LGcgVhG1ImF3jkZ5wXw==}
     peerDependencies:
@@ -4989,8 +4957,8 @@ packages:
     resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
     engines: {node: '>=6'}
 
-  import-in-the-middle@2.0.2:
-    resolution: {integrity: sha512-qet/hkGt3EbNGVtbDfPu0BM+tCqBS8wT1SYrstPaDKoWtshsC6licOemz7DVtpBEyvDNzo8UTBf9/GwWuSDZ9w==}
+  import-in-the-middle@2.0.1:
+    resolution: {integrity: sha512-bruMpJ7xz+9jwGzrwEhWgvRrlKRYCRDBrfU+ur3FcasYXLJDxTruJ//8g2Noj+QFyRBeqbpj8Bhn4Fbw6HjvhA==}
 
   imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
@@ -6534,6 +6502,10 @@ packages:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
 
+  require-in-the-middle@7.5.2:
+    resolution: {integrity: sha512-gAZ+kLqBdHarXB64XpAe2VCjB7rIRv+mU8tfRWziHRJ5umKsIHN2tLLv6EtMw7WCdP19S0ERVMldNvxYCHnhSQ==}
+    engines: {node: '>=8.6.0'}
+
   require-in-the-middle@8.0.1:
     resolution: {integrity: sha512-QT7FVMXfWOYFbeRBF6nu+I6tr2Tf3u0q8RIEjNob/heKY/nh7drD/k7eeMFmSQgnTtCzLDcCu/XEnpW2wk4xCQ==}
     engines: {node: '>=9.3.0 || >=8.10.0 <9.0.0'}
@@ -8748,10 +8720,6 @@ snapshots:
     dependencies:
       '@opentelemetry/api': 1.9.0
 
-  '@opentelemetry/api-logs@0.209.0':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-
   '@opentelemetry/api@1.9.0': {}
 
   '@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0)':
@@ -8952,16 +8920,7 @@ snapshots:
     dependencies:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/api-logs': 0.208.0
-      import-in-the-middle: 2.0.2
-      require-in-the-middle: 8.0.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation@0.209.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/api-logs': 0.209.0
-      import-in-the-middle: 2.0.2
+      import-in-the-middle: 2.0.1
       require-in-the-middle: 8.0.1
     transitivePeerDependencies:
       - supports-color
@@ -9141,7 +9100,7 @@ snapshots:
   '@prisma/instrumentation@6.19.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.209.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -9149,23 +9108,6 @@ snapshots:
 
   '@radix-ui/primitive@1.1.3': {}
 
-  '@radix-ui/react-accordion@1.2.12(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.17)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.17)(react@18.3.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.17)(react@18.3.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@18.3.17)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.17)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-    optionalDependencies:
-      '@types/react': 18.3.17
-      '@types/react-dom': 18.3.5(@types/react@18.3.17)
-
   '@radix-ui/react-alert-dialog@1.1.15(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -10002,7 +9944,7 @@ snapshots:
       '@opentelemetry/semantic-conventions': 1.38.0
       '@sentry/core': 10.27.0
       '@sentry/opentelemetry': 10.27.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.38.0)
-      import-in-the-middle: 2.0.2
+      import-in-the-middle: 2.0.1
     transitivePeerDependencies:
       - supports-color
 
@@ -10041,7 +9983,7 @@ snapshots:
       '@sentry/core': 10.27.0
       '@sentry/node-core': 10.27.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.208.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.38.0)
       '@sentry/opentelemetry': 10.27.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.38.0)
-      import-in-the-middle: 2.0.2
+      import-in-the-middle: 2.0.1
       minimatch: 9.0.5
     transitivePeerDependencies:
       - supports-color
@@ -12128,8 +12070,8 @@ snapshots:
       '@typescript-eslint/parser': 8.52.0(eslint@8.57.1)(typescript@5.9.3)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.52.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1))(eslint@8.57.1)
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.52.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.52.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@8.57.1)
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.52.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
       eslint-plugin-react: 7.37.5(eslint@8.57.1)
       eslint-plugin-react-hooks: 5.2.0(eslint@8.57.1)
@@ -12148,7 +12090,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.52.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1))(eslint@8.57.1):
+  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@8.57.1):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.4.3
@@ -12159,22 +12101,22 @@ snapshots:
       tinyglobby: 0.2.15
       unrs-resolver: 1.11.1
     optionalDependencies:
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.52.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.52.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.52.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.52.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.52.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
+  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.52.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 8.52.0(eslint@8.57.1)(typescript@5.9.3)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.52.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.52.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.52.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.52.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.9
@@ -12185,7 +12127,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.52.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.52.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.52.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -12850,7 +12792,7 @@ snapshots:
       parent-module: 1.0.1
       resolve-from: 4.0.0
 
-  import-in-the-middle@2.0.2:
+  import-in-the-middle@2.0.1:
     dependencies:
       acorn: 8.15.0
       acorn-import-attributes: 1.9.5(acorn@8.15.0)
@@ -14689,6 +14631,14 @@ snapshots:
 
   require-from-string@2.0.2: {}
 
+  require-in-the-middle@7.5.2:
+    dependencies:
+      debug: 4.4.3
+      module-details-from-path: 1.0.4
+      resolve: 1.22.11
+    transitivePeerDependencies:
+      - supports-color
+
   require-in-the-middle@8.0.1:
     dependencies:
       debug: 4.4.3

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

@@ -1,31 +1,32 @@
 "use client";
 
 import { Button } from "@/components/atoms/Button/Button";
-import { PublishAgentModal } from "@/components/contextual/PublishAgentModal/PublishAgentModal";
 import { Breadcrumbs } from "@/components/molecules/Breadcrumbs/Breadcrumbs";
 import { ErrorCard } from "@/components/molecules/ErrorCard/ErrorCard";
 import { cn } from "@/lib/utils";
 import { PlusIcon } from "@phosphor-icons/react";
 import { useEffect, useState } from "react";
-import { AgentVersionChangelog } from "./components/AgentVersionChangelog";
-import { AgentSettingsModal } from "./components/modals/AgentSettingsModal/AgentSettingsModal";
 import { RunAgentModal } from "./components/modals/RunAgentModal/RunAgentModal";
+import { useMarketplaceUpdate } from "./hooks/useMarketplaceUpdate";
+import { AgentVersionChangelog } from "./components/AgentVersionChangelog";
+import { MarketplaceBanners } from "@/components/contextual/MarketplaceBanners/MarketplaceBanners";
+import { PublishAgentModal } from "@/components/contextual/PublishAgentModal/PublishAgentModal";
+import { AgentSettingsButton } from "./components/other/AgentSettingsButton";
 import { AgentRunsLoading } from "./components/other/AgentRunsLoading";
 import { EmptySchedules } from "./components/other/EmptySchedules";
 import { EmptyTasks } from "./components/other/EmptyTasks";
 import { EmptyTemplates } from "./components/other/EmptyTemplates";
 import { EmptyTriggers } from "./components/other/EmptyTriggers";
-import { MarketplaceBanners } from "./components/other/MarketplaceBanners";
 import { SectionWrap } from "./components/other/SectionWrap";
 import { LoadingSelectedContent } from "./components/selected-views/LoadingSelectedContent";
 import { SelectedRunView } from "./components/selected-views/SelectedRunView/SelectedRunView";
 import { SelectedScheduleView } from "./components/selected-views/SelectedScheduleView/SelectedScheduleView";
+import { SelectedSettingsView } from "./components/selected-views/SelectedSettingsView/SelectedSettingsView";
 import { SelectedTemplateView } from "./components/selected-views/SelectedTemplateView/SelectedTemplateView";
 import { SelectedTriggerView } from "./components/selected-views/SelectedTriggerView/SelectedTriggerView";
 import { SelectedViewLayout } from "./components/selected-views/SelectedViewLayout";
 import { SidebarRunsList } from "./components/sidebar/SidebarRunsList/SidebarRunsList";
 import { AGENT_LIBRARY_SECTION_PADDING_X } from "./helpers";
-import { useMarketplaceUpdate } from "./hooks/useMarketplaceUpdate";
 import { useNewAgentLibraryView } from "./useNewAgentLibraryView";
 
 export function NewAgentLibraryView() {
@@ -44,6 +45,7 @@ export function NewAgentLibraryView() {
     handleSelectRun,
     handleCountsChange,
     handleClearSelectedRun,
+    handleSelectSettings,
     onRunInitiated,
     onTriggerSetup,
     onScheduleCreated,
@@ -135,16 +137,13 @@ export function NewAgentLibraryView() {
     return (
       <>
         <div className="flex h-full flex-col">
-          <div className="mx-6 flex flex-col gap-4 pt-4">
-            <div className="flex items-center justify-between">
-              <Breadcrumbs
-                items={[
-                  { name: "My Library", link: "/library" },
-                  { name: agent.name, link: `/library/agents/${agentId}` },
-                ]}
-              />
-              <AgentSettingsModal agent={agent} />
-            </div>
+          <div className="mx-6 pt-4">
+            <Breadcrumbs
+              items={[
+                { name: "My Library", link: "/library" },
+                { name: agent.name, link: `/library/agents/${agentId}` },
+              ]}
+            />
           </div>
           <div className="flex min-h-0 flex-1">
             <EmptyTasks
@@ -171,24 +170,31 @@ export function NewAgentLibraryView() {
               AGENT_LIBRARY_SECTION_PADDING_X,
             )}
           >
-            <RunAgentModal
-              triggerSlot={
-                <Button
-                  variant="primary"
-                  size="large"
-                  className="w-full"
-                  disabled={isTemplateLoading && activeTab === "templates"}
-                >
-                  <PlusIcon size={20} /> New task
-                </Button>
-              }
-              agent={agent}
-              onRunCreated={onRunInitiated}
-              onScheduleCreated={onScheduleCreated}
-              onTriggerSetup={onTriggerSetup}
-              initialInputValues={activeTemplate?.inputs}
-              initialInputCredentials={activeTemplate?.credentials}
-            />
+            <div className="flex items-center gap-2">
+              <RunAgentModal
+                triggerSlot={
+                  <Button
+                    variant="primary"
+                    size="large"
+                    className="flex-1"
+                    disabled={isTemplateLoading && activeTab === "templates"}
+                  >
+                    <PlusIcon size={20} /> New task
+                  </Button>
+                }
+                agent={agent}
+                onRunCreated={onRunInitiated}
+                onScheduleCreated={onScheduleCreated}
+                onTriggerSetup={onTriggerSetup}
+                initialInputValues={activeTemplate?.inputs}
+                initialInputCredentials={activeTemplate?.credentials}
+              />
+              <AgentSettingsButton
+                agent={agent}
+                onSelectSettings={handleSelectSettings}
+                selected={activeItem === "settings"}
+              />
+            </div>
           </div>
 
           <SidebarRunsList
@@ -202,7 +208,12 @@ export function NewAgentLibraryView() {
         </SectionWrap>
 
         {activeItem ? (
-          activeTab === "scheduled" ? (
+          activeItem === "settings" ? (
+            <SelectedSettingsView
+              agent={agent}
+              onClearSelectedRun={handleClearSelectedRun}
+            />
+          ) : activeTab === "scheduled" ? (
             <SelectedScheduleView
               agent={agent}
               scheduleId={activeItem}
@@ -235,6 +246,8 @@ export function NewAgentLibraryView() {
               onSelectRun={handleSelectRun}
               onClearSelectedRun={handleClearSelectedRun}
               banner={renderMarketplaceUpdateBanner()}
+              onSelectSettings={handleSelectSettings}
+              selectedSettings={activeItem === "settings"}
             />
           )
         ) : sidebarLoading ? (

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/AgentInputsReadOnly/AgentInputsReadOnly.tsx

@@ -4,7 +4,6 @@ import type { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
 import { Text } from "@/components/atoms/Text/Text";
 import type { CredentialsMetaInput } from "@/lib/autogpt-server-api/types";
 import { CredentialsInput } from "../CredentialsInputs/CredentialsInputs";
-import { isSystemCredential } from "../CredentialsInputs/helpers";
 import { RunAgentInputs } from "../RunAgentInputs/RunAgentInputs";
 import { getAgentCredentialsFields, getAgentInputFields } from "./helpers";
 
@@ -72,7 +71,6 @@ export function AgentInputsReadOnly({
           {credentialFieldEntries.map(([key, inputSubSchema]) => {
             const credential = credentialInputs![key];
             if (!credential) return null;
-            if (isSystemCredential(credential)) return null;
 
             return (
               <CredentialsInput

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/AgentSettingsModal/AgentSettingsModal.tsx

@@ -1,81 +0,0 @@
-"use client";
-
-import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
-import { Button } from "@/components/atoms/Button/Button";
-import { Switch } from "@/components/atoms/Switch/Switch";
-import { Text } from "@/components/atoms/Text/Text";
-import { Dialog } from "@/components/molecules/Dialog/Dialog";
-import { useAgentSafeMode } from "@/hooks/useAgentSafeMode";
-import { GearIcon } from "@phosphor-icons/react";
-import { useState } from "react";
-
-interface Props {
-  agent: LibraryAgent;
-  controlledOpen?: boolean;
-  onOpenChange?: (open: boolean) => void;
-}
-
-export function AgentSettingsModal({
-  agent,
-  controlledOpen,
-  onOpenChange,
-}: Props) {
-  const [internalIsOpen, setInternalIsOpen] = useState(false);
-  const isOpen = controlledOpen !== undefined ? controlledOpen : internalIsOpen;
-
-  function setIsOpen(open: boolean) {
-    if (onOpenChange) {
-      onOpenChange(open);
-    } else {
-      setInternalIsOpen(open);
-    }
-  }
-
-  const { currentSafeMode, isPending, hasHITLBlocks, handleToggle } =
-    useAgentSafeMode(agent);
-
-  if (!hasHITLBlocks) return null;
-
-  return (
-    <Dialog
-      controlled={{ isOpen, set: setIsOpen }}
-      styling={{ maxWidth: "600px", maxHeight: "90vh" }}
-      title="Agent Settings"
-    >
-      {controlledOpen === undefined && (
-        <Dialog.Trigger>
-          <Button
-            variant="ghost"
-            size="small"
-            className="m-0 min-w-0 rounded-full p-0 px-1"
-            aria-label="Agent Settings"
-          >
-            <GearIcon size={18} className="text-zinc-600" />
-            <Text variant="small">Agent Settings</Text>
-          </Button>
-        </Dialog.Trigger>
-      )}
-      <Dialog.Content>
-        <div className="space-y-6">
-          <div className="flex w-full flex-col items-start gap-4 rounded-xl border border-zinc-100 bg-white p-6">
-            <div className="flex w-full items-start justify-between gap-4">
-              <div className="flex-1">
-                <Text variant="large-semibold">Require human approval</Text>
-                <Text variant="large" className="mt-1 text-zinc-900">
-                  The agent will pause and wait for your review before
-                  continuing
-                </Text>
-              </div>
-              <Switch
-                checked={currentSafeMode || false}
-                onCheckedChange={handleToggle}
-                disabled={isPending}
-                className="mt-1"
-              />
-            </div>
-          </div>
-        </div>
-      </Dialog.Content>
-    </Dialog>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/CredentialsInputs.tsx

@@ -1,11 +1,5 @@
 import { Button } from "@/components/atoms/Button/Button";
 import { Text } from "@/components/atoms/Text/Text";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/molecules/Accordion/Accordion";
 import { InformationTooltip } from "@/components/molecules/InformationTooltip/InformationTooltip";
 import {
   BlockIOCredentialsSubSchema,
@@ -13,14 +7,14 @@ import {
 } from "@/lib/autogpt-server-api/types";
 import { cn } from "@/lib/utils";
 import { toDisplayName } from "@/providers/agent-credentials/helper";
-import { SlidersHorizontalIcon } from "lucide-react";
 import { APIKeyCredentialsModal } from "./components/APIKeyCredentialsModal/APIKeyCredentialsModal";
 import { CredentialRow } from "./components/CredentialRow/CredentialRow";
 import { CredentialsSelect } from "./components/CredentialsSelect/CredentialsSelect";
+import { DeleteConfirmationModal } from "./components/DeleteConfirmationModal/DeleteConfirmationModal";
 import { HostScopedCredentialsModal } from "./components/HotScopedCredentialsModal/HotScopedCredentialsModal";
 import { OAuthFlowWaitingModal } from "./components/OAuthWaitingModal/OAuthWaitingModal";
 import { PasswordCredentialsModal } from "./components/PasswordCredentialsModal/PasswordCredentialsModal";
-import { isSystemCredential } from "./helpers";
+import { getCredentialDisplayName } from "./helpers";
 import {
   CredentialsInputState,
   useCredentialsInput,
@@ -43,7 +37,6 @@ type Props = {
   isOptional?: boolean;
   showTitle?: boolean;
   variant?: "default" | "node";
-  collapseSystemCredentials?: boolean;
 };
 
 export function CredentialsInput({
@@ -57,7 +50,6 @@ export function CredentialsInput({
   isOptional = false,
   showTitle = true,
   variant = "default",
-  collapseSystemCredentials = false,
 }: Props) {
   const hookData = useCredentialsInput({
     schema,
@@ -80,63 +72,32 @@ export function CredentialsInput({
     supportsOAuth2,
     supportsUserPassword,
     supportsHostScoped,
-    isSystemProvider,
-    userCredentials,
-    systemCredentials,
+    credentialsToShow,
     oAuthError,
     isAPICredentialsModalOpen,
     isUserPasswordCredentialsModalOpen,
     isHostScopedCredentialsModalOpen,
     isOAuth2FlowInProgress,
     oAuthPopupController,
+    credentialToDelete,
+    deleteCredentialsMutation,
     actionButtonText,
     setAPICredentialsModalOpen,
     setUserPasswordCredentialsModalOpen,
     setHostScopedCredentialsModalOpen,
+    setCredentialToDelete,
     handleActionButtonClick,
     handleCredentialSelect,
+    handleDeleteCredential,
+    handleDeleteConfirm,
   } = hookData;
 
   const displayName = toDisplayName(provider);
-  const selectedCredentialIsSystem =
-    selectedCredential && isSystemCredential(selectedCredential);
-
-  const allCredentials = [...userCredentials, ...systemCredentials];
-
-  // When collapseSystemCredentials is true AND provider is a system provider,
-  // collapse ALL credentials (both user and system) under the accordion.
-  // This keeps the provider section clean when platform credits are available.
-  const shouldCollapseAll = collapseSystemCredentials && isSystemProvider;
-
-  // Determine which credentials to show in main section
-  const credentialsToShow = shouldCollapseAll
-    ? [] // All credentials go to accordion when provider has system creds
-    : collapseSystemCredentials
-      ? userCredentials // No system creds, show user creds normally
-      : allCredentials; // Show all when not collapsing
-
   const hasCredentialsToShow = credentialsToShow.length > 0;
 
-  // Credentials to show in accordion
-  const credentialsToCollapse = shouldCollapseAll
-    ? allCredentials // All credentials collapsed when provider has system creds
-    : collapseSystemCredentials
-      ? systemCredentials // Only system creds collapsed
-      : [];
-
-  const hasCredentialsToCollapse = credentialsToCollapse.length > 0;
-
-  // If required and no credential selected, keep accordion open
-  const shouldOpenAccordionByDefault =
-    shouldCollapseAll && !isOptional && !selectedCredential;
-
-  if (readOnly && selectedCredentialIsSystem) {
-    return null;
-  }
-
   return (
     <div className={cn("mb-6", className)}>
-      {showTitle && !shouldCollapseAll && (
+      {showTitle && (
         <div className="mb-2 flex items-center gap-2">
           <Text variant="large-medium">
             {displayName} credentials
@@ -168,19 +129,30 @@ export function CredentialsInput({
             />
           ) : (
             <div className="mb-4 space-y-2">
-              {credentialsToShow.map((credential) => (
-                <CredentialRow
-                  key={credential.id}
-                  credential={credential}
-                  provider={provider}
-                  displayName={displayName}
-                  onSelect={() => handleCredentialSelect(credential.id)}
-                  readOnly={readOnly}
-                />
-              ))}
+              {credentialsToShow.map((credential) => {
+                return (
+                  <CredentialRow
+                    key={credential.id}
+                    credential={credential}
+                    provider={provider}
+                    displayName={displayName}
+                    onSelect={() => handleCredentialSelect(credential.id)}
+                    onDelete={() =>
+                      handleDeleteCredential({
+                        id: credential.id,
+                        title: getCredentialDisplayName(
+                          credential,
+                          displayName,
+                        ),
+                      })
+                    }
+                    readOnly={readOnly}
+                  />
+                );
+              })}
             </div>
           )}
-          {!readOnly && !shouldCollapseAll && (
+          {!readOnly && (
             <Button
               variant="secondary"
               size="small"
@@ -193,8 +165,7 @@ export function CredentialsInput({
           )}
         </>
       ) : (
-        !readOnly &&
-        !shouldCollapseAll && (
+        !readOnly && (
           <Button
             variant="secondary"
             size="small"
@@ -207,87 +178,6 @@ export function CredentialsInput({
         )
       )}
 
-      {shouldCollapseAll && !readOnly && (
-        <Accordion
-          type="single"
-          collapsible
-          defaultValue={
-            shouldOpenAccordionByDefault ? "system-credentials" : undefined
-          }
-        >
-          <AccordionItem value="system-credentials" className="border-none">
-            <AccordionTrigger className="py-2 text-sm text-muted-foreground hover:no-underline">
-              <div className="flex items-center gap-1">
-                <SlidersHorizontalIcon className="size-4" /> System credentials
-              </div>
-            </AccordionTrigger>
-            <AccordionContent>
-              <div className="space-y-4 px-1 pt-2">
-                <div className="flex items-center gap-2">
-                  <Text variant="large-medium">
-                    {displayName} credentials
-                    {isOptional && (
-                      <span className="ml-1 text-sm font-normal text-gray-500">
-                        (optional)
-                      </span>
-                    )}
-                  </Text>
-                  {schema.description && (
-                    <InformationTooltip description={schema.description} />
-                  )}
-                </div>
-                {credentialsToCollapse.length > 0 && (
-                  <CredentialsSelect
-                    credentials={credentialsToCollapse}
-                    provider={provider}
-                    displayName={displayName}
-                    selectedCredentials={selectedCredential}
-                    onSelectCredential={handleCredentialSelect}
-                    onClearCredential={() => onSelectCredential(undefined)}
-                    readOnly={readOnly}
-                    allowNone={isOptional}
-                    variant={variant}
-                  />
-                )}
-                <Button
-                  variant="secondary"
-                  size="small"
-                  onClick={handleActionButtonClick}
-                  className="w-fit"
-                  type="button"
-                >
-                  {actionButtonText}
-                </Button>
-              </div>
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      )}
-
-      {hasCredentialsToCollapse && !shouldCollapseAll && !readOnly && (
-        <Accordion type="single" collapsible className="mt-4">
-          <AccordionItem value="system-credentials" className="border-none">
-            <AccordionTrigger className="py-2 text-sm text-muted-foreground hover:no-underline">
-              System credentials
-            </AccordionTrigger>
-            <AccordionContent>
-              <div className="space-y-2 pt-2">
-                {credentialsToCollapse.map((credential) => (
-                  <CredentialRow
-                    key={credential.id}
-                    credential={credential}
-                    provider={provider}
-                    displayName={displayName}
-                    onSelect={() => handleCredentialSelect(credential.id)}
-                    readOnly={readOnly}
-                  />
-                ))}
-              </div>
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      )}
-
       {!readOnly && (
         <>
           {supportsApiKey ? (
@@ -339,6 +229,13 @@ export function CredentialsInput({
               Error: {oAuthError}
             </Text>
           ) : null}
+
+          <DeleteConfirmationModal
+            credentialToDelete={credentialToDelete}
+            isDeleting={deleteCredentialsMutation.isPending}
+            onClose={() => setCredentialToDelete(null)}
+            onConfirm={handleDeleteConfirm}
+          />
         </>
       )}
     </div>

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/components/APIKeyCredentialsModal/APIKeyCredentialsModal.tsx

@@ -1,11 +1,11 @@
+import { Input } from "@/components/atoms/Input/Input";
+import { Button } from "@/components/atoms/Button/Button";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
 import {
   Form,
   FormDescription,
   FormField,
 } from "@/components/__legacy__/ui/form";
-import { Button } from "@/components/atoms/Button/Button";
-import { Input } from "@/components/atoms/Input/Input";
-import { Dialog } from "@/components/molecules/Dialog/Dialog";
 import {
   BlockIOCredentialsSubSchema,
   CredentialsMetaInput,
@@ -60,10 +60,7 @@ export function APIKeyCredentialsModal({
         )}
 
         <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-2 px-2"
-          >
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2">
             <FormField
               control={form.control}
               name="apiKey"
@@ -73,7 +70,8 @@ export function APIKeyCredentialsModal({
                     id="apiKey"
                     label="API Key"
                     type="password"
-                    placeholder="Enter API Key..."
+                    placeholder="Enter API key..."
+                    size="small"
                     hint={
                       schema.credentials_scopes ? (
                         <FormDescription>
@@ -100,7 +98,8 @@ export function APIKeyCredentialsModal({
                   id="title"
                   label="Name"
                   type="text"
-                  placeholder="Enter a name for this API Key..."
+                  placeholder="Enter a name for this API key..."
+                  size="small"
                   {...field}
                 />
               )}
@@ -114,12 +113,13 @@ export function APIKeyCredentialsModal({
                   label="Expiration Date"
                   type="datetime-local"
                   placeholder="Select expiration date..."
+                  size="small"
                   {...field}
                 />
               )}
             />
-            <Button type="submit" className="min-w-68">
-              Add API Key
+            <Button type="submit" size="small" className="min-w-68">
+              Save & use this API key
             </Button>
           </form>
         </Form>

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/components/CredentialRow/CredentialRow.tsx

@@ -26,7 +26,7 @@ type CredentialRowProps = {
   provider: string;
   displayName: string;
   onSelect: () => void;
-  onDelete?: () => void;
+  onDelete: () => void;
   readOnly?: boolean;
   showCaret?: boolean;
   asSelectTrigger?: boolean;
@@ -100,7 +100,7 @@ export function CredentialRow({
       {showCaret && !asSelectTrigger && (
         <CaretDown className="h-4 w-4 shrink-0 text-gray-400" />
       )}
-      {!readOnly && !showCaret && !asSelectTrigger && onDelete && (
+      {!readOnly && !showCaret && !asSelectTrigger && (
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <button

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/components/CredentialsSelect/CredentialsSelect.tsx

@@ -65,7 +65,7 @@ export function CredentialsSelect({
       >
         <SelectTrigger
           className={cn(
-            "h-auto min-h-12 w-full rounded-medium p-0 pr-4 shadow-none",
+            "h-auto min-h-12 w-full rounded-medium border-zinc-200 p-0 pr-4 shadow-none",
             variant === "node" && "overflow-hidden",
           )}
         >
@@ -87,39 +87,6 @@ export function CredentialsSelect({
                 variant={variant}
               />
             </SelectValue>
-          ) : allowNone ? (
-            <SelectValue key="__none__" asChild>
-              <div
-                className={cn(
-                  "flex items-center gap-3 rounded-medium border border-zinc-200 bg-white p-3 transition-colors",
-                  variant === "node"
-                    ? "min-w-0 flex-1 overflow-hidden border-0 bg-transparent"
-                    : "border-0 bg-transparent",
-                )}
-              >
-                <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-zinc-200">
-                  <Text
-                    variant="body"
-                    className="text-xs font-medium text-zinc-500"
-                  >
-                    —
-                  </Text>
-                </div>
-                <div
-                  className={cn(
-                    "flex min-w-0 flex-1 flex-nowrap items-center gap-4",
-                    variant === "node" && "overflow-hidden",
-                  )}
-                >
-                  <Text
-                    variant="body"
-                    className={cn("tracking-tight text-zinc-500")}
-                  >
-                    None (skip this credential)
-                  </Text>
-                </div>
-              </div>
-            </SelectValue>
           ) : (
             <SelectValue key="placeholder" placeholder="Select credential" />
           )}

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/helpers.ts

@@ -100,29 +100,3 @@ export function getCredentialDisplayName(
 
 export const OAUTH_TIMEOUT_MS = 5 * 60 * 1000;
 export const MASKED_KEY_LENGTH = 30;
-
-export function isSystemCredential(credential: {
-  title?: string | null;
-  is_system?: boolean;
-}): boolean {
-  if (credential.is_system === true) return true;
-  if (!credential.title) return false;
-  const titleLower = credential.title.toLowerCase();
-  return (
-    titleLower.includes("system") ||
-    titleLower.startsWith("use credits for") ||
-    titleLower.includes("use credits")
-  );
-}
-
-export function filterSystemCredentials<
-  T extends { title?: string; is_system?: boolean },
->(credentials: T[]): T[] {
-  return credentials.filter((cred) => !isSystemCredential(cred));
-}
-
-export function getSystemCredentials<
-  T extends { title?: string; is_system?: boolean },
->(credentials: T[]): T[] {
-  return credentials.filter((cred) => isSystemCredential(cred));
-}

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/useCredentialsInput.ts

@@ -6,11 +6,9 @@ import {
   CredentialsMetaInput,
 } from "@/lib/autogpt-server-api/types";
 import { useQueryClient } from "@tanstack/react-query";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import {
-  filterSystemCredentials,
   getActionButtonText,
-  getSystemCredentials,
   OAUTH_TIMEOUT_MS,
   OAuthPopupResultMessage,
 } from "./helpers";
@@ -56,7 +54,6 @@ export function useCredentialsInput({
   const api = useBackendAPI();
   const queryClient = useQueryClient();
   const credentials = useCredentials(schema, siblingInputs);
-  const hasAttemptedAutoSelect = useRef(false);
 
   const deleteCredentialsMutation = useDeleteV1DeleteCredentials({
     mutation: {
@@ -85,10 +82,9 @@ export function useCredentialsInput({
   useEffect(() => {
     if (readOnly) return;
     if (!credentials || !("savedCredentials" in credentials)) return;
-    const availableCreds = credentials.savedCredentials;
     if (
       selectedCredential &&
-      !availableCreds.some((c) => c.id === selectedCredential.id)
+      !credentials.savedCredentials.some((c) => c.id === selectedCredential.id)
     ) {
       onSelectCredential(undefined);
     }
@@ -100,109 +96,24 @@ export function useCredentialsInput({
       return null;
     }
 
-    const credsToUse = filterSystemCredentials(credentials.savedCredentials);
-    return credsToUse.length === 1 ? credsToUse[0] : null;
+    return credentials.savedCredentials.length === 1
+      ? credentials.savedCredentials[0]
+      : null;
   }, [credentials]);
 
-  // Auto-select the one available credential
-  // Prioritize system credentials if available
-  // For system credentials, always auto-select even if optional (they should be used by default)
+  // Auto-select the one available credential (only if not optional)
   useEffect(() => {
     if (readOnly) return;
-    if (!credentials || !("savedCredentials" in credentials)) return;
-
-    // Early return if already selected to prevent infinite loops
-    const currentSelectedId = selectedCredential?.id;
-    if (currentSelectedId) {
-      hasAttemptedAutoSelect.current = true;
-      return;
-    }
-
-    // If selectedCredential is explicitly undefined and isOptional is true,
-    // don't auto-select - this could mean "None" was explicitly selected
-    // The parent component should handle setting the initial value
-    if (selectedCredential === undefined && isOptional) {
-      // Mark as attempted to prevent auto-selection when "None" is a valid choice
-      hasAttemptedAutoSelect.current = true;
-      return;
-    }
-
-    // Only attempt auto-selection once per credential load
-    if (hasAttemptedAutoSelect.current) return;
-
-    const supportedTypes = schema.credentials_types || [];
-    const requiredScopes = schema.credentials_scopes;
-    const savedCreds = credentials.savedCredentials;
-    const systemCreds = getSystemCredentials(savedCreds);
-
-    // Filter system credentials by type and scopes (same logic as useCredentials)
-    const matchingSystemCreds = systemCreds.filter((cred) => {
-      // Check type match
-      if (!supportedTypes.includes(cred.type)) {
-        return false;
-      }
-
-      // For OAuth2 credentials, check scopes
-      if (
-        cred.type === "oauth2" &&
-        requiredScopes &&
-        requiredScopes.length > 0
-      ) {
-        const grantedScopes = new Set(cred.scopes || []);
-        const hasAllRequiredScopes = new Set(requiredScopes).isSubsetOf(
-          grantedScopes,
-        );
-        if (!hasAllRequiredScopes) {
-          return false;
-        }
-      }
-
-      return true;
-    });
-
-    // First, try to auto-select system credential if available
-    if (matchingSystemCreds.length === 1) {
-      const systemCred = matchingSystemCreds[0];
-      const credProvider = credentials.provider;
-      hasAttemptedAutoSelect.current = true;
-      onSelectCredential({
-        id: systemCred.id,
-        type: systemCred.type,
-        provider: credProvider,
-        title: (systemCred as any).title,
-      });
-      return;
-    }
-
-    // Otherwise, auto-select single credential if there's only one (and not optional)
-    if (!isOptional && singleCredential) {
-      hasAttemptedAutoSelect.current = true;
+    if (isOptional) return; // Don't auto-select when credential is optional
+    if (singleCredential && !selectedCredential) {
       onSelectCredential(singleCredential);
     }
   }, [
-    singleCredential?.id, // Only depend on the ID, not the whole object
-    selectedCredential?.id, // Only depend on the ID, not the whole object
+    singleCredential,
+    selectedCredential,
+    onSelectCredential,
     readOnly,
     isOptional,
-    credentials,
-    schema.credentials_types,
-    schema.credentials_scopes,
-    // Note: onSelectCredential removed from deps to prevent infinite loops
-    // It should be stable, but if it's not, the ref will prevent multiple calls
-  ]);
-
-  // Reset the ref when credentials change significantly
-  useEffect(() => {
-    if (credentials && "savedCredentials" in credentials) {
-      hasAttemptedAutoSelect.current = false;
-    }
-  }, [
-    credentials && "savedCredentials" in credentials
-      ? credentials.savedCredentials.length
-      : 0,
-    credentials && "savedCredentials" in credentials
-      ? credentials.provider
-      : null,
   ]);
 
   if (
@@ -224,13 +135,8 @@ export function useCredentialsInput({
     supportsHostScoped,
     savedCredentials,
     oAuthCallback,
-    isSystemProvider,
   } = credentials;
 
-  // Split credentials into user and system
-  const userCredentials = filterSystemCredentials(savedCredentials);
-  const systemCredentials = getSystemCredentials(savedCredentials);
-
   async function handleOAuthLogin() {
     setOAuthError(null);
     const { login_url, state_token } = await api.oAuthLogin(
@@ -385,10 +291,7 @@ export function useCredentialsInput({
     supportsOAuth2,
     supportsUserPassword,
     supportsHostScoped,
-    isSystemProvider,
-    userCredentials,
-    systemCredentials,
-    allCredentials: savedCredentials,
+    credentialsToShow: savedCredentials,
     selectedCredential,
     oAuthError,
     isAPICredentialsModalOpen,
@@ -403,7 +306,7 @@ export function useCredentialsInput({
       supportsApiKey,
       supportsUserPassword,
       supportsHostScoped,
-      userCredentials.length > 0,
+      savedCredentials.length > 0,
     ),
     setAPICredentialsModalOpen,
     setUserPasswordCredentialsModalOpen,

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/RunAgentModal.tsx

@@ -12,7 +12,7 @@ import {
   TooltipTrigger,
 } from "@/components/atoms/Tooltip/BaseTooltip";
 import { Dialog } from "@/components/molecules/Dialog/Dialog";
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import { ScheduleAgentModal } from "../ScheduleAgentModal/ScheduleAgentModal";
 import { ModalHeader } from "./components/ModalHeader/ModalHeader";
 import { ModalRunSection } from "./components/ModalRunSection/ModalRunSection";
@@ -82,8 +82,6 @@ export function RunAgentModal({
   });
 
   const [isScheduleModalOpen, setIsScheduleModalOpen] = useState(false);
-  const [hasOverflow, setHasOverflow] = useState(false);
-  const contentRef = useRef<HTMLDivElement>(null);
 
   const hasAnySetupFields =
     Object.keys(agentInputFields || {}).length > 0 ||
@@ -91,43 +89,6 @@ export function RunAgentModal({
 
   const isTriggerRunType = defaultRunType.includes("trigger");
 
-  useEffect(() => {
-    if (!isOpen) return;
-
-    function checkOverflow() {
-      if (!contentRef.current) return;
-      const scrollableParent = contentRef.current
-        .closest("[data-dialog-content]")
-        ?.querySelector('[class*="overflow-y-auto"]');
-      if (scrollableParent) {
-        setHasOverflow(
-          scrollableParent.scrollHeight > scrollableParent.clientHeight,
-        );
-      }
-    }
-
-    const timeoutId = setTimeout(checkOverflow, 100);
-    const resizeObserver = new ResizeObserver(checkOverflow);
-    if (contentRef.current) {
-      const scrollableParent = contentRef.current
-        .closest("[data-dialog-content]")
-        ?.querySelector('[class*="overflow-y-auto"]');
-      if (scrollableParent) {
-        resizeObserver.observe(scrollableParent);
-      }
-    }
-
-    return () => {
-      clearTimeout(timeoutId);
-      resizeObserver.disconnect();
-    };
-  }, [
-    isOpen,
-    hasAnySetupFields,
-    agentInputFields,
-    agentCredentialsInputFields,
-  ]);
-
   function handleInputChange(key: string, value: string) {
     setInputValues((prev) => ({
       ...prev,
@@ -173,97 +134,91 @@ export function RunAgentModal({
       >
         <Dialog.Trigger>{triggerSlot}</Dialog.Trigger>
         <Dialog.Content>
-          <div ref={contentRef} className="flex min-h-full flex-col">
-            <div className="flex-1">
-              {/* Header */}
-              <ModalHeader agent={agent} />
+          {/* Header */}
+          <ModalHeader agent={agent} />
 
-              {/* Content */}
-              {hasAnySetupFields ? (
-                <div className="mt-10 pb-32">
-                  <RunAgentModalContextProvider
-                    value={{
-                      agent,
-                      defaultRunType,
-                      presetName,
-                      setPresetName,
-                      presetDescription,
-                      setPresetDescription,
-                      inputValues,
-                      setInputValue: handleInputChange,
-                      agentInputFields,
-                      inputCredentials,
-                      setInputCredentialsValue: handleCredentialsChange,
-                      agentCredentialsInputFields,
-                    }}
-                  >
-                    <ModalRunSection />
-                  </RunAgentModalContextProvider>
-                </div>
-              ) : null}
+          {/* Content */}
+          {hasAnySetupFields ? (
+            <div className="mt-10">
+              <RunAgentModalContextProvider
+                value={{
+                  agent,
+                  defaultRunType,
+                  presetName,
+                  setPresetName,
+                  presetDescription,
+                  setPresetDescription,
+                  inputValues,
+                  setInputValue: handleInputChange,
+                  agentInputFields,
+                  inputCredentials,
+                  setInputCredentialsValue: handleCredentialsChange,
+                  agentCredentialsInputFields,
+                }}
+              >
+                <ModalRunSection />
+              </RunAgentModalContextProvider>
             </div>
+          ) : null}
 
-            <Dialog.Footer
-              className={`sticky bottom-0 z-10 bg-white pt-4 ${
-                hasOverflow
-                  ? "border-t border-neutral-100 shadow-[0_-2px_8px_rgba(0,0,0,0.04)]"
-                  : ""
-              }`}
-            >
-              <div className="flex items-center justify-end gap-3">
-                {isTriggerRunType ? null : !allRequiredInputsAreSet ? (
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <span>
-                          <Button
-                            variant="secondary"
-                            onClick={handleOpenScheduleModal}
-                            disabled={
-                              isExecuting ||
-                              isSettingUpTrigger ||
-                              !allRequiredInputsAreSet
-                            }
-                          >
-                            Schedule Task
-                          </Button>
-                        </span>
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        <p>
-                          Please set up all required inputs and credentials
-                          before scheduling
-                        </p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-                ) : (
-                  <Button
-                    variant="secondary"
-                    onClick={handleOpenScheduleModal}
-                    disabled={isExecuting || isSettingUpTrigger}
-                  >
-                    Schedule Task
-                  </Button>
-                )}
-                <RunActions
-                  defaultRunType={defaultRunType}
-                  onRun={handleRun}
-                  isExecuting={isExecuting}
-                  isSettingUpTrigger={isSettingUpTrigger}
-                  isRunReady={allRequiredInputsAreSet}
-                />
-              </div>
-              <ScheduleAgentModal
-                isOpen={isScheduleModalOpen}
-                onClose={handleCloseScheduleModal}
-                agent={agent}
-                inputValues={inputValues}
-                inputCredentials={inputCredentials}
-                onScheduleCreated={handleScheduleCreated}
+          <Dialog.Footer className="mt-6 bg-white pt-4">
+            <div className="flex items-center justify-end gap-3">
+              {isTriggerRunType ? null : !allRequiredInputsAreSet ? (
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <span>
+                        <Button
+                          variant="secondary"
+                          onClick={handleOpenScheduleModal}
+                          disabled={
+                            isExecuting ||
+                            isSettingUpTrigger ||
+                            !allRequiredInputsAreSet
+                          }
+                        >
+                          Schedule Task
+                        </Button>
+                      </span>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>
+                        Please set up all required inputs and credentials before
+                        scheduling
+                      </p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              ) : (
+                <Button
+                  variant="secondary"
+                  onClick={handleOpenScheduleModal}
+                  disabled={
+                    isExecuting ||
+                    isSettingUpTrigger ||
+                    !allRequiredInputsAreSet
+                  }
+                >
+                  Schedule Task
+                </Button>
+              )}
+              <RunActions
+                defaultRunType={defaultRunType}
+                onRun={handleRun}
+                isExecuting={isExecuting}
+                isSettingUpTrigger={isSettingUpTrigger}
+                isRunReady={allRequiredInputsAreSet}
               />
-            </Dialog.Footer>
-          </div>
+            </div>
+            <ScheduleAgentModal
+              isOpen={isScheduleModalOpen}
+              onClose={handleCloseScheduleModal}
+              agent={agent}
+              inputValues={inputValues}
+              inputCredentials={inputCredentials}
+              onScheduleCreated={handleScheduleCreated}
+            />
+          </Dialog.Footer>
         </Dialog.Content>
       </Dialog>
     </>

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/components/ModalRunSection/ModalRunSection.tsx

@@ -1,8 +1,6 @@
 import { CredentialsInput } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/CredentialsInputs";
 import { Input } from "@/components/atoms/Input/Input";
 import { InformationTooltip } from "@/components/molecules/InformationTooltip/InformationTooltip";
-import { CredentialsProvidersContext } from "@/providers/agent-credentials/credentials-provider";
-import { useContext, useMemo } from "react";
 import { RunAgentInputs } from "../../../RunAgentInputs/RunAgentInputs";
 import { useRunAgentModalContext } from "../../context";
 import { ModalSection } from "../ModalSection/ModalSection";
@@ -24,45 +22,10 @@ export function ModalRunSection() {
     agentCredentialsInputFields,
   } = useRunAgentModalContext();
 
-  const allProviders = useContext(CredentialsProvidersContext);
-
   const inputFields = Object.entries(agentInputFields || {});
+  const credentialFields = Object.entries(agentCredentialsInputFields || {});
 
-  // Sort credential fields: user credentials first, system credentials at the bottom
-  const sortedCredentialFields = useMemo(() => {
-    if (!allProviders || !agentCredentialsInputFields) return [];
-
-    const entries = Object.entries(agentCredentialsInputFields);
-
-    return entries.sort(([_keyA, schemaA], [_keyB, schemaB]) => {
-      const providerNamesA = schemaA.credentials_provider || [];
-      const providerNamesB = schemaB.credentials_provider || [];
-
-      // Check if A has system credentials
-      const aHasSystemCred = providerNamesA.some((providerName: string) => {
-        const providerData = allProviders[providerName];
-        if (!providerData) return false;
-        return providerData.savedCredentials.some(
-          (cred: { is_system?: boolean }) => cred.is_system === true,
-        );
-      });
-
-      // Check if B has system credentials
-      const bHasSystemCred = providerNamesB.some((providerName: string) => {
-        const providerData = allProviders[providerName];
-        if (!providerData) return false;
-        return providerData.savedCredentials.some(
-          (cred: { is_system?: boolean }) => cred.is_system === true,
-        );
-      });
-
-      // User credentials first, system credentials at the bottom
-      if (aHasSystemCred && !bHasSystemCred) return 1;
-      if (!aHasSystemCred && bHasSystemCred) return -1;
-      return 0;
-    });
-  }, [agentCredentialsInputFields, allProviders]);
-
+  // Get the list of required credentials from the schema
   const requiredCredentials = new Set(
     (agent.credentials_input_schema?.required as string[]) || [],
   );
@@ -129,31 +92,28 @@ export function ModalRunSection() {
         </ModalSection>
       ) : null}
 
-      {sortedCredentialFields.length > 0 ? (
+      {credentialFields.length > 0 ? (
         <ModalSection
           title="Task Credentials"
           subtitle="These are the credentials the agent will use to perform this task"
         >
           <div className="space-y-6">
-            {sortedCredentialFields.map(([key, inputSubSchema]) => {
-              const selectedCred = inputCredentials?.[key];
-
-              return (
+            {Object.entries(agentCredentialsInputFields || {}).map(
+              ([key, inputSubSchema]) => (
                 <CredentialsInput
                   key={key}
                   schema={
                     { ...inputSubSchema, discriminator: undefined } as any
                   }
-                  selectedCredentials={selectedCred}
-                  onSelectCredentials={(value) => {
-                    setInputCredentialsValue(key, value);
-                  }}
+                  selectedCredentials={inputCredentials?.[key]}
+                  onSelectCredentials={(value) =>
+                    setInputCredentialsValue(key, value)
+                  }
                   siblingInputs={inputValues}
                   isOptional={!requiredCredentials.has(key)}
-                  collapseSystemCredentials
                 />
-              );
-            })}
+              ),
+            )}
           </div>
         </ModalSection>
       ) : null}

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/useAgentRunModal.tsx

@@ -11,18 +11,9 @@ import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
 import { LibraryAgentPreset } from "@/app/api/__generated__/models/libraryAgentPreset";
 import { useToast } from "@/components/molecules/Toast/use-toast";
 import { isEmpty } from "@/lib/utils";
-import { CredentialsProvidersContext } from "@/providers/agent-credentials/credentials-provider";
 import { analytics } from "@/services/analytics";
 import { useQueryClient } from "@tanstack/react-query";
-import {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { getSystemCredentials } from "../CredentialsInputs/helpers";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { showExecutionErrorToast } from "./errorHelpers";
 
 export type RunVariant =
@@ -51,10 +42,8 @@ export function useAgentRunModal(
   const [inputCredentials, setInputCredentials] = useState<Record<string, any>>(
     callbacks?.initialInputCredentials || {},
   );
-
   const [presetName, setPresetName] = useState<string>("");
   const [presetDescription, setPresetDescription] = useState<string>("");
-  const hasInitializedSystemCreds = useRef(false);
 
   // Determine the default run type based on agent capabilities
   const defaultRunType: RunVariant = agent.trigger_setup_info
@@ -69,91 +58,6 @@ export function useAgentRunModal(
     setInputCredentials(callbacks?.initialInputCredentials || {});
   }, [callbacks?.initialInputValues, callbacks?.initialInputCredentials]);
 
-  const allProviders = useContext(CredentialsProvidersContext);
-
-  // Initialize credentials with default system credentials
-  useEffect(() => {
-    if (!allProviders || !agent.credentials_input_schema?.properties) return;
-    if (callbacks?.initialInputCredentials) {
-      hasInitializedSystemCreds.current = true;
-      return;
-    }
-    if (hasInitializedSystemCreds.current) return;
-
-    const properties = agent.credentials_input_schema.properties as Record<
-      string,
-      any
-    >;
-
-    setInputCredentials((currentCreds) => {
-      const credsToAdd: Record<string, any> = {};
-
-      for (const [key, schema] of Object.entries(properties)) {
-        if (currentCreds[key]) continue;
-
-        const providerNames = schema.credentials_provider || [];
-        const supportedTypes = schema.credentials_types || [];
-        const requiredScopes = schema.credentials_scopes;
-
-        for (const providerName of providerNames) {
-          const providerData = allProviders[providerName];
-          if (!providerData) continue;
-
-          const systemCreds = getSystemCredentials(
-            providerData.savedCredentials,
-          );
-          const matchingSystemCreds = systemCreds.filter((cred) => {
-            if (!supportedTypes.includes(cred.type)) return false;
-
-            if (
-              cred.type === "oauth2" &&
-              requiredScopes &&
-              requiredScopes.length > 0
-            ) {
-              const grantedScopes = new Set(cred.scopes || []);
-              const hasAllRequiredScopes = new Set(requiredScopes).isSubsetOf(
-                grantedScopes,
-              );
-              if (!hasAllRequiredScopes) return false;
-            }
-
-            return true;
-          });
-
-          if (matchingSystemCreds.length === 1) {
-            const systemCred = matchingSystemCreds[0];
-            credsToAdd[key] = {
-              id: systemCred.id,
-              type: systemCred.type,
-              provider: providerName,
-              title: systemCred.title,
-            };
-            break;
-          }
-        }
-      }
-
-      if (Object.keys(credsToAdd).length > 0) {
-        hasInitializedSystemCreds.current = true;
-        return {
-          ...currentCreds,
-          ...credsToAdd,
-        };
-      }
-
-      return currentCreds;
-    });
-  }, [
-    allProviders,
-    agent.credentials_input_schema,
-    callbacks?.initialInputCredentials,
-  ]);
-
-  // Reset initialization flag when modal closes/opens or agent changes
-  useEffect(() => {
-    hasInitializedSystemCreds.current = false;
-  }, [isOpen, agent.graph_id]);
-
   // API mutations
   const executeGraphMutation = usePostV1ExecuteGraphAgent({
     mutation: {
@@ -162,6 +66,7 @@ export function useAgentRunModal(
           toast({
             title: "Agent execution started",
           });
+          // Invalidate runs list for this graph
           queryClient.invalidateQueries({
             queryKey: getGetV1ListGraphExecutionsQueryKey(agent.graph_id),
           });
@@ -258,10 +163,14 @@ export function useAgentRunModal(
   }, [agentInputSchema.required, inputValues]);
 
   const [allCredentialsAreSet, missingCredentials] = useMemo(() => {
+    // Only check required credentials from schema, not all properties
+    // Credentials marked as optional in node metadata won't be in the required array
     const requiredCredentials = new Set(
       (agent.credentials_input_schema?.required as string[]) || [],
     );
 
+    // Check if required credentials have valid id (not just key existence)
+    // A credential is valid only if it has an id field set
     const missing = [...requiredCredentials].filter((key) => {
       const cred = inputCredentials[key];
       return !cred || !cred.id;
@@ -275,6 +184,7 @@ export function useAgentRunModal(
     [agentCredentialsInputFields],
   );
 
+  // Final readiness flag combining inputs + credentials when credentials are shown
   const allRequiredInputsAreSet = useMemo(
     () =>
       allRequiredInputsAreSetRaw &&
@@ -313,6 +223,7 @@ export function useAgentRunModal(
       defaultRunType === "automatic-trigger" ||
       defaultRunType === "manual-trigger"
     ) {
+      // Setup trigger
       if (!presetName.trim()) {
         toast({
           title: "⚠️ Trigger name required",
@@ -333,6 +244,9 @@ export function useAgentRunModal(
         },
       });
     } else {
+      // Manual execution
+      // Filter out incomplete credentials (optional ones not selected)
+      // Only send credentials that have a valid id field
       const validCredentials = Object.fromEntries(
         Object.entries(inputCredentials).filter(([_, cred]) => cred && cred.id),
       );
@@ -366,24 +280,41 @@ export function useAgentRunModal(
   }, [agentInputFields]);
 
   return {
+    // UI state
     isOpen,
     setIsOpen,
+
+    // Run mode
     defaultRunType: defaultRunType as RunVariant,
+
+    // Form: regular inputs
     inputValues,
     setInputValues,
+
+    // Form: credentials
     inputCredentials,
     setInputCredentials,
+
+    // Preset/trigger labels
     presetName,
     presetDescription,
     setPresetName,
     setPresetDescription,
+
+    // Validation/readiness
     allRequiredInputsAreSet,
     missingInputs,
+
+    // Schemas for rendering
     agentInputFields,
     agentCredentialsInputFields,
     hasInputFields,
+
+    // Async states
     isExecuting: executeGraphMutation.isPending,
     isSettingUpTrigger: setupTriggerMutation.isPending,
+
+    // Actions
     handleRun,
   };
 }

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/AgentSettingsButton.tsx

@@ -1,17 +1,37 @@
 import { Button } from "@/components/atoms/Button/Button";
-import { Text } from "@/components/atoms/Text/Text";
 import { GearIcon } from "@phosphor-icons/react";
+import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
+import { useAgentSafeMode } from "@/hooks/useAgentSafeMode";
+
+interface Props {
+  agent: LibraryAgent;
+  onSelectSettings: () => void;
+  selected?: boolean;
+}
+
+export function AgentSettingsButton({
+  agent,
+  onSelectSettings,
+  selected,
+}: Props) {
+  const { hasHITLBlocks } = useAgentSafeMode(agent);
+
+  if (!hasHITLBlocks) {
+    return null;
+  }
 
-export function AgentSettingsButton() {
   return (
     <Button
-      variant="ghost"
+      variant={selected ? "secondary" : "ghost"}
       size="small"
       className="m-0 min-w-0 rounded-full p-0 px-1"
+      onClick={onSelectSettings}
       aria-label="Agent Settings"
     >
-      <GearIcon size={18} className="text-zinc-600" />
-      <Text variant="small">Agent Settings</Text>
+      <GearIcon
+        size={18}
+        className={selected ? "text-zinc-900" : "text-zinc-600"}
+      />
     </Button>
   );
 }

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/EmptySchedules.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { Text } from "@/components/atoms/Text/Text";
 
 export function EmptySchedules() {

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/EmptyTemplates.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { Text } from "@/components/atoms/Text/Text";
 
 export function EmptyTemplates() {

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/EmptyTriggers.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { Text } from "@/components/atoms/Text/Text";
 
 export function EmptyTriggers() {

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/SectionWrap.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { cn } from "@/lib/utils";
 
 type Props = {

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

@@ -1,16 +1,22 @@
-import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
 import { Skeleton } from "@/components/__legacy__/ui/skeleton";
 import { cn } from "@/lib/utils";
+import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
 import { AGENT_LIBRARY_SECTION_PADDING_X } from "../../helpers";
 import { SelectedViewLayout } from "./SelectedViewLayout";
 
 interface Props {
   agent: LibraryAgent;
+  onSelectSettings?: () => void;
+  selectedSettings?: boolean;
 }
 
 export function LoadingSelectedContent(props: Props) {
   return (
-    <SelectedViewLayout agent={props.agent}>
+    <SelectedViewLayout
+      agent={props.agent}
+      onSelectSettings={props.onSelectSettings}
+      selectedSettings={props.selectedSettings}
+    >
       <div
         className={cn("flex flex-col gap-4", AGENT_LIBRARY_SECTION_PADDING_X)}
       >

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

@@ -33,6 +33,8 @@ interface Props {
   onSelectRun?: (id: string) => void;
   onClearSelectedRun?: () => void;
   banner?: React.ReactNode;
+  onSelectSettings?: () => void;
+  selectedSettings?: boolean;
 }
 
 export function SelectedRunView({
@@ -41,6 +43,8 @@ export function SelectedRunView({
   onSelectRun,
   onClearSelectedRun,
   banner,
+  onSelectSettings,
+  selectedSettings,
 }: Props) {
   const { run, preset, isLoading, responseError, httpError } =
     useSelectedRunView(agent.graph_id, runId);
@@ -80,7 +84,12 @@ export function SelectedRunView({
   return (
     <div className="flex h-full w-full gap-4">
       <div className="flex min-h-0 min-w-0 flex-1 flex-col">
-        <SelectedViewLayout agent={agent} banner={banner}>
+        <SelectedViewLayout
+          agent={agent}
+          banner={banner}
+          onSelectSettings={onSelectSettings}
+          selectedSettings={selectedSettings}
+        >
           <div className="flex flex-col gap-4">
             <RunDetailHeader agent={agent} run={run} />
 

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

@@ -21,6 +21,8 @@ interface Props {
   scheduleId: string;
   onClearSelectedRun?: () => void;
   banner?: React.ReactNode;
+  onSelectSettings?: () => void;
+  selectedSettings?: boolean;
 }
 
 export function SelectedScheduleView({
@@ -28,6 +30,8 @@ export function SelectedScheduleView({
   scheduleId,
   onClearSelectedRun,
   banner,
+  onSelectSettings,
+  selectedSettings,
 }: Props) {
   const { schedule, isLoading, error } = useSelectedScheduleView(
     agent.graph_id,
@@ -72,7 +76,12 @@ export function SelectedScheduleView({
   return (
     <div className="flex h-full w-full gap-4">
       <div className="flex min-h-0 min-w-0 flex-1 flex-col">
-        <SelectedViewLayout agent={agent} banner={banner}>
+        <SelectedViewLayout
+          agent={agent}
+          banner={banner}
+          onSelectSettings={onSelectSettings}
+          selectedSettings={selectedSettings}
+        >
           <div className="flex flex-col gap-4">
             <div className="flex w-full flex-col gap-0">
               <RunDetailHeader

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

@@ -1,11 +1,11 @@
 import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
-import { Button } from "@/components/atoms/Button/Button";
-import { Switch } from "@/components/atoms/Switch/Switch";
 import { Text } from "@/components/atoms/Text/Text";
-import { useAgentSafeMode } from "@/hooks/useAgentSafeMode";
+import { Switch } from "@/components/atoms/Switch/Switch";
+import { Button } from "@/components/atoms/Button/Button";
 import { ArrowLeftIcon } from "@phosphor-icons/react";
-import { AGENT_LIBRARY_SECTION_PADDING_X } from "../../../helpers";
+import { useAgentSafeMode } from "@/hooks/useAgentSafeMode";
 import { SelectedViewLayout } from "../SelectedViewLayout";
+import { AGENT_LIBRARY_SECTION_PADDING_X } from "../../../helpers";
 
 interface Props {
   agent: LibraryAgent;
@@ -17,7 +17,7 @@ export function SelectedSettingsView({ agent, onClearSelectedRun }: Props) {
     useAgentSafeMode(agent);
 
   return (
-    <SelectedViewLayout agent={agent}>
+    <SelectedViewLayout agent={agent} onSelectSettings={() => {}}>
       <div className="flex flex-col gap-4">
         <div
           className={`${AGENT_LIBRARY_SECTION_PADDING_X} mb-8 flex items-center gap-3`}
@@ -33,8 +33,15 @@ export function SelectedSettingsView({ agent, onClearSelectedRun }: Props) {
           <Text variant="h2">Agent Settings</Text>
         </div>
 
-        <div className={`${AGENT_LIBRARY_SECTION_PADDING_X} space-y-6`}>
-          {hasHITLBlocks ? (
+        <div className={AGENT_LIBRARY_SECTION_PADDING_X}>
+          {!hasHITLBlocks ? (
+            <div className="rounded-xl border border-zinc-100 bg-white p-6">
+              <Text variant="body" className="text-muted-foreground">
+                This agent doesn&apos;t have any human-in-the-loop blocks, so
+                there are no settings to configure.
+              </Text>
+            </div>
+          ) : (
             <div className="flex w-full max-w-2xl flex-col items-start gap-4 rounded-xl border border-zinc-100 bg-white p-6">
               <div className="flex w-full items-start justify-between gap-4">
                 <div className="flex-1">
@@ -52,12 +59,6 @@ export function SelectedSettingsView({ agent, onClearSelectedRun }: Props) {
                 />
               </div>
             </div>
-          ) : (
-            <div className="rounded-xl border border-zinc-100 bg-white p-6">
-              <Text variant="body" className="text-muted-foreground">
-                This agent doesn&apos;t have any configurable settings.
-              </Text>
-            </div>
           )}
         </div>
       </div>

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

@@ -1,7 +1,7 @@
-import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
 import { Breadcrumbs } from "@/components/molecules/Breadcrumbs/Breadcrumbs";
+import { AgentSettingsButton } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/AgentSettingsButton";
+import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
 import { AGENT_LIBRARY_SECTION_PADDING_X } from "../../helpers";
-import { AgentSettingsModal } from "../modals/AgentSettingsModal/AgentSettingsModal";
 import { SectionWrap } from "../other/SectionWrap";
 
 interface Props {
@@ -9,6 +9,8 @@ interface Props {
   children: React.ReactNode;
   banner?: React.ReactNode;
   additionalBreadcrumb?: { name: string; link?: string };
+  onSelectSettings?: () => void;
+  selectedSettings?: boolean;
 }
 
 export function SelectedViewLayout(props: Props) {
@@ -17,8 +19,8 @@ export function SelectedViewLayout(props: Props) {
       <div
         className={`${AGENT_LIBRARY_SECTION_PADDING_X} flex-shrink-0 border-b border-zinc-100 pb-0 lg:pb-4`}
       >
-        {props.banner}
-        <div className="relative flex w-full items-center justify-between">
+        {props.banner && <div className="mb-4">{props.banner}</div>}
+        <div className="relative flex w-fit items-center gap-2">
           <Breadcrumbs
             items={[
               { name: "My Library", link: "/library" },
@@ -31,9 +33,15 @@ export function SelectedViewLayout(props: Props) {
                 : []),
             ]}
           />
-          <div className="absolute right-0">
-            <AgentSettingsModal agent={props.agent} />
-          </div>
+          {props.agent && props.onSelectSettings && (
+            <div className="absolute -right-8">
+              <AgentSettingsButton
+                agent={props.agent}
+                onSelectSettings={props.onSelectSettings}
+                selected={props.selectedSettings}
+              />
+            </div>
+          )}
         </div>
       </div>
       <div className="flex min-h-0 flex-1 flex-col overflow-y-auto overflow-x-visible">

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

@@ -2775,28 +2775,6 @@
         }
       }
     },
-    "/api/integrations/providers/system": {
-      "get": {
-        "tags": ["v1", "integrations"],
-        "summary": "List System Providers",
-        "description": "Get a list of providers that have platform credits (system credentials) available.\n\nThese providers can be used without the user providing their own API keys.",
-        "operationId": "getV1ListSystemProviders",
-        "responses": {
-          "200": {
-            "description": "Successful Response",
-            "content": {
-              "application/json": {
-                "schema": {
-                  "items": { "type": "string" },
-                  "type": "array",
-                  "title": "Response Getv1Listsystemproviders"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
     "/api/integrations/webhooks/{webhook_id}/ping": {
       "post": {
         "tags": ["v1", "integrations"],
@@ -6814,12 +6792,6 @@
             "anyOf": [{ "type": "string" }, { "type": "null" }],
             "title": "Host",
             "description": "Host pattern for host-scoped credentials"
-          },
-          "is_system": {
-            "type": "boolean",
-            "title": "Is System",
-            "description": "Whether this is a system-managed credential",
-            "default": false
           }
         },
         "type": "object",

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

@@ -20,7 +20,6 @@ export function Button(props: ButtonProps) {
     rightIcon,
     children,
     as = "button",
-    asChild: _asChild, // Destructure to prevent passing to DOM
     ...restProps
   } = props;
 

autogpt_platform/frontend/src/components/contextual/MarketplaceBanners/MarketplaceBanners.tsx

@@ -3,7 +3,7 @@
 import { Button } from "@/components/atoms/Button/Button";
 import { Text } from "@/components/atoms/Text/Text";
 
-interface Props {
+interface MarketplaceBannersProps {
   hasUpdate?: boolean;
   latestVersion?: number;
   hasUnpublishedChanges?: boolean;
@@ -21,7 +21,7 @@ export function MarketplaceBanners({
   isUpdating,
   onUpdate,
   onPublish,
-}: Props) {
+}: MarketplaceBannersProps) {
   const renderUpdateBanner = () => {
     if (hasUpdate && latestVersion) {
       return (

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

@@ -1,203 +0,0 @@
-import type { Meta } from "@storybook/nextjs";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "./Accordion";
-
-const meta: Meta<typeof Accordion> = {
-  title: "Molecules/Accordion",
-  component: Accordion,
-  parameters: {
-    layout: "centered",
-    docs: {
-      description: {
-        component: `
-## Accordion Component
-
-A vertically stacked set of interactive headings that each reveal an associated section of content.
-
-### ✨ Features
-
-- **Built on Radix UI** - Uses @radix-ui/react-accordion for accessibility and functionality
-- **Single or multiple** - Supports single or multiple items open at once
-- **Smooth animations** - Built-in expand/collapse animations
-- **Accessible** - Full keyboard navigation and screen reader support
-- **Customizable** - Style with Tailwind CSS classes
-
-### 🎯 Usage
-
-\`\`\`tsx
-<Accordion type="single" collapsible>
-  <AccordionItem value="item-1">
-    <AccordionTrigger>Is it accessible?</AccordionTrigger>
-    <AccordionContent>
-      Yes. It adheres to the WAI-ARIA design pattern.
-    </AccordionContent>
-  </AccordionItem>
-</Accordion>
-\`\`\`
-
-### Props
-
-**Accordion**:
-- **type**: "single" | "multiple" - Whether one or multiple items can be open
-- **collapsible**: boolean - When type is "single", allows closing all items
-- **defaultValue**: string | string[] - Default open item(s)
-- **value**: string | string[] - Controlled open item(s)
-- **onValueChange**: (value) => void - Callback when value changes
-
-**AccordionItem**:
-- **value**: string - Unique identifier for the item
-- **disabled**: boolean - Whether the item is disabled
-
-**AccordionTrigger**:
-- Standard button props
-
-**AccordionContent**:
-- Standard div props
-        `,
-      },
-    },
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    type: {
-      control: "radio",
-      options: ["single", "multiple"],
-      description: "Whether one or multiple items can be open at the same time",
-      table: {
-        defaultValue: { summary: "single" },
-      },
-    },
-    collapsible: {
-      control: "boolean",
-      description:
-        'When type is "single", allows closing content when clicking on open trigger',
-      table: {
-        defaultValue: { summary: "false" },
-      },
-    },
-  },
-};
-
-export default meta;
-
-export function Default() {
-  return (
-    <Accordion type="single" collapsible className="w-96">
-      <AccordionItem value="item-1">
-        <AccordionTrigger>Is it accessible?</AccordionTrigger>
-        <AccordionContent>
-          Yes. It adheres to the WAI-ARIA design pattern.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-2">
-        <AccordionTrigger>Is it styled?</AccordionTrigger>
-        <AccordionContent>
-          Yes. It comes with default styles that match your design system.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-3">
-        <AccordionTrigger>Is it animated?</AccordionTrigger>
-        <AccordionContent>
-          Yes. It&apos;s animated by default with smooth expand/collapse
-          transitions.
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  );
-}
-
-export function Multiple() {
-  return (
-    <Accordion type="multiple" className="w-96">
-      <AccordionItem value="item-1">
-        <AccordionTrigger>First section</AccordionTrigger>
-        <AccordionContent>
-          Multiple items can be open at the same time when type is set to
-          &quot;multiple&quot;.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-2">
-        <AccordionTrigger>Second section</AccordionTrigger>
-        <AccordionContent>
-          Try opening this one while the first is still open.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-3">
-        <AccordionTrigger>Third section</AccordionTrigger>
-        <AccordionContent>
-          All three can be open simultaneously.
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  );
-}
-
-export function DefaultOpen() {
-  return (
-    <Accordion type="single" collapsible defaultValue="item-2" className="w-96">
-      <AccordionItem value="item-1">
-        <AccordionTrigger>Closed by default</AccordionTrigger>
-        <AccordionContent>This item starts closed.</AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-2">
-        <AccordionTrigger>Open by default</AccordionTrigger>
-        <AccordionContent>
-          This item starts open because defaultValue is set to
-          &quot;item-2&quot;.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-3">
-        <AccordionTrigger>Also closed</AccordionTrigger>
-        <AccordionContent>This item also starts closed.</AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  );
-}
-
-export function WithDisabledItem() {
-  return (
-    <Accordion type="single" collapsible className="w-96">
-      <AccordionItem value="item-1">
-        <AccordionTrigger>Available item</AccordionTrigger>
-        <AccordionContent>This item can be toggled.</AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-2" disabled>
-        <AccordionTrigger>Disabled item</AccordionTrigger>
-        <AccordionContent>
-          This content cannot be accessed because the item is disabled.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-3">
-        <AccordionTrigger>Another available item</AccordionTrigger>
-        <AccordionContent>This item can also be toggled.</AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  );
-}
-
-export function CustomStyled() {
-  return (
-    <Accordion type="single" collapsible className="w-96">
-      <AccordionItem value="item-1" className="border-none">
-        <AccordionTrigger className="rounded-lg bg-zinc-100 px-4 hover:bg-zinc-200 hover:no-underline">
-          Custom styled trigger
-        </AccordionTrigger>
-        <AccordionContent className="px-4 pt-2">
-          You can customize the styling using className props.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-2" className="mt-2 border-none">
-        <AccordionTrigger className="rounded-lg bg-blue-50 px-4 text-blue-700 hover:bg-blue-100 hover:no-underline">
-          Blue themed
-        </AccordionTrigger>
-        <AccordionContent className="px-4 pt-2 text-blue-600">
-          Each item can have different styles.
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  );
-}

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

@@ -1,8 +0,0 @@
-"use client";
-
-export {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";

autogpt_platform/frontend/src/components/molecules/Dialog/components/DrawerWrap.tsx

@@ -49,12 +49,7 @@ export function DrawerWrap({
         >
           {title ? (
             <Drawer.Title className={drawerStyles.title}>{title}</Drawer.Title>
-          ) : (
-            <span className="sr-only">
-              {/* Title is required for a11y compliance even if not displayed so screen readers can announce it */}
-              <Drawer.Title>{title}</Drawer.Title>
-            </span>
-          )}
+          ) : null}
 
           {!isForceOpen ? (
             title ? (

autogpt_platform/frontend/src/components/ui/accordion.tsx

@@ -1,57 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDown } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const Accordion = AccordionPrimitive.Root
-
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item
-    ref={ref}
-    className={cn("border-b", className)}
-    {...props}
-  />
-))
-AccordionItem.displayName = "AccordionItem"
-
-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronDown className="h-4 w-4 shrink-0 text-neutral-500 transition-transform duration-200 dark:text-neutral-400" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
-
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-    {...props}
-  >
-    <div className={cn("pb-4 pt-0", className)}>{children}</div>
-  </AccordionPrimitive.Content>
-))
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

autogpt_platform/frontend/src/lib/autogpt-server-api/client.ts

@@ -352,10 +352,6 @@ export default class BackendAPI {
     return this._get("/integrations/providers");
   }
 
-  listSystemProviders(): Promise<string[]> {
-    return this._get("/integrations/providers/system");
-  }
-
   listCredentials(provider?: string): Promise<CredentialsMetaResponse[]> {
     return this._get(
       provider

autogpt_platform/frontend/src/lib/autogpt-server-api/types.ts

@@ -593,7 +593,6 @@ export type CredentialsMetaResponse = {
   scopes?: Array<string>;
   username?: string;
   host?: string;
-  is_system?: boolean;
 };
 
 /* Mirror of backend/server/integrations/router.py:CredentialsDeletionResponse */

autogpt_platform/frontend/src/providers/agent-credentials/credentials-provider.tsx

@@ -1,4 +1,5 @@
-import { useToastOnFail } from "@/components/molecules/Toast/use-toast";
+import { createContext, useCallback, useEffect, useState } from "react";
+import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
 import {
   APIKeyCredentials,
   CredentialsDeleteNeedConfirmationResponse,
@@ -9,9 +10,8 @@ import {
   UserPasswordCredentials,
 } from "@/lib/autogpt-server-api";
 import { useBackendAPI } from "@/lib/autogpt-server-api/context";
-import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
+import { useToastOnFail } from "@/components/molecules/Toast/use-toast";
 import { toDisplayName } from "@/providers/agent-credentials/helper";
-import { createContext, useCallback, useEffect, useState } from "react";
 
 type APIKeyCredentialsCreatable = Omit<
   APIKeyCredentials,
@@ -32,8 +32,6 @@ export type CredentialsProviderData = {
   provider: CredentialsProviderName;
   providerName: string;
   savedCredentials: CredentialsMetaResponse[];
-  /** Whether this provider has platform credits available (system credentials) */
-  isSystemProvider: boolean;
   oAuthCallback: (
     code: string,
     state_token: string,
@@ -70,9 +68,6 @@ export default function CredentialsProvider({
   const [providers, setProviders] =
     useState<CredentialsProvidersContextType | null>(null);
   const [providerNames, setProviderNames] = useState<string[]>([]);
-  const [systemProviders, setSystemProviders] = useState<Set<string>>(
-    new Set(),
-  );
   const { isLoggedIn } = useSupabase();
   const api = useBackendAPI();
   const onFailToast = useToastOnFail();
@@ -223,7 +218,17 @@ export default function CredentialsProvider({
     [api, onFailToast],
   );
 
-  const loadCredentials = useCallback(() => {
+  // Fetch provider names on mount
+  useEffect(() => {
+    api
+      .listProviders()
+      .then((names) => {
+        setProviderNames(names);
+      })
+      .catch(onFailToast("load provider names"));
+  }, [api, onFailToast]);
+
+  useEffect(() => {
     if (!isLoggedIn || providerNames.length === 0) {
       if (isLoggedIn == false) setProviders({});
       return;
@@ -246,32 +251,27 @@ export default function CredentialsProvider({
         setProviders((prev) => ({
           ...prev,
           ...Object.fromEntries(
-            providerNames.map((provider) => {
-              const providerCredentials = credentialsByProvider[provider] ?? [];
-
-              return [
+            providerNames.map((provider) => [
+              provider,
+              {
                 provider,
-                {
-                  provider,
-                  providerName: toDisplayName(provider as string),
-                  savedCredentials: providerCredentials,
-                  isSystemProvider: systemProviders.has(provider),
-                  oAuthCallback: (code: string, state_token: string) =>
-                    oAuthCallback(provider, code, state_token),
-                  createAPIKeyCredentials: (
-                    credentials: APIKeyCredentialsCreatable,
-                  ) => createAPIKeyCredentials(provider, credentials),
-                  createUserPasswordCredentials: (
-                    credentials: UserPasswordCredentialsCreatable,
-                  ) => createUserPasswordCredentials(provider, credentials),
-                  createHostScopedCredentials: (
-                    credentials: HostScopedCredentialsCreatable,
-                  ) => createHostScopedCredentials(provider, credentials),
-                  deleteCredentials: (id: string, force: boolean = false) =>
-                    deleteCredentials(provider, id, force),
-                } satisfies CredentialsProviderData,
-              ];
-            }),
+                providerName: toDisplayName(provider as string),
+                savedCredentials: credentialsByProvider[provider] ?? [],
+                oAuthCallback: (code: string, state_token: string) =>
+                  oAuthCallback(provider, code, state_token),
+                createAPIKeyCredentials: (
+                  credentials: APIKeyCredentialsCreatable,
+                ) => createAPIKeyCredentials(provider, credentials),
+                createUserPasswordCredentials: (
+                  credentials: UserPasswordCredentialsCreatable,
+                ) => createUserPasswordCredentials(provider, credentials),
+                createHostScopedCredentials: (
+                  credentials: HostScopedCredentialsCreatable,
+                ) => createHostScopedCredentials(provider, credentials),
+                deleteCredentials: (id: string, force: boolean = false) =>
+                  deleteCredentials(provider, id, force),
+              } satisfies CredentialsProviderData,
+            ]),
           ),
         }));
       })
@@ -280,7 +280,6 @@ export default function CredentialsProvider({
     api,
     isLoggedIn,
     providerNames,
-    systemProviders,
     createAPIKeyCredentials,
     createUserPasswordCredentials,
     createHostScopedCredentials,
@@ -289,20 +288,6 @@ export default function CredentialsProvider({
     onFailToast,
   ]);
 
-  // Fetch provider names and system providers on mount
-  useEffect(() => {
-    Promise.all([api.listProviders(), api.listSystemProviders()])
-      .then(([names, systemList]) => {
-        setProviderNames(names);
-        setSystemProviders(new Set(systemList));
-      })
-      .catch(onFailToast("Load provider names"));
-  }, [api, onFailToast]);
-
-  useEffect(() => {
-    loadCredentials();
-  }, [loadCredentials]);
-
   return (
     <CredentialsProvidersContext.Provider value={providers}>
       {children}

autogpt_platform/frontend/tailwind.config.ts

@@ -22,7 +22,13 @@ const config = {
         poppins: ["var(--font-poppins)"],
       },
       colors: {
+        // *** APPROVED DESIGN SYSTEM COLORS ***
+        // These are the ONLY colors that should be used in our app
         ...colors,
+
+        // Legacy colors - DO NOT USE THESE IN NEW CODE
+        // These are kept only to prevent breaking existing styles
+        // Use the approved design system colors above instead
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
@@ -57,66 +63,70 @@ const config = {
           foreground: "hsl(var(--card-foreground))",
         },
         customGray: {
-          "100": "#d9d9d9",
-          "200": "#a8a8a8",
-          "300": "#878787",
-          "400": "#646464",
-          "500": "#474747",
-          "600": "#282828",
-          "700": "#272727",
+          100: "#d9d9d9",
+          200: "#a8a8a8",
+          300: "#878787",
+          400: "#646464",
+          500: "#474747",
+          600: "#282828",
+          700: "#272727",
         },
       },
       spacing: {
-        "0": "0rem",
-        "1": "0.25rem",
-        "2": "0.5rem",
-        "3": "0.75rem",
-        "4": "1rem",
-        "5": "1.25rem",
-        "6": "1.5rem",
-        "7": "1.75rem",
-        "8": "2rem",
-        "9": "2.25rem",
-        "10": "2.5rem",
-        "11": "2.75rem",
-        "12": "3rem",
-        "14": "3.5rem",
-        "16": "4rem",
-        "18": "4.5rem",
-        "20": "5rem",
-        "24": "6rem",
-        "28": "7rem",
-        "32": "8rem",
-        "36": "9rem",
-        "40": "10rem",
-        "44": "11rem",
-        "48": "12rem",
-        "52": "13rem",
-        "56": "14rem",
-        "60": "15rem",
-        "64": "16rem",
-        "68": "17rem",
-        "70": "17.5rem",
-        "71": "17.75rem",
-        "72": "18rem",
-        "76": "19rem",
-        "80": "20rem",
-        "96": "24rem",
-        "0.5": "0.125rem",
-        "1.5": "0.375rem",
-        "2.5": "0.625rem",
-        "3.5": "0.875rem",
-        "7.5": "1.875rem",
-        "8.5": "2.125rem",
+        // Tailwind spacing + custom sizes
+        0: "0rem", // 0px
+        0.5: "0.125rem", // 2px
+        1: "0.25rem", // 4px
+        1.5: "0.375rem", // 6px
+        2: "0.5rem", // 8px
+        2.5: "0.625rem", // 10px
+        3: "0.75rem", // 12px
+        3.5: "0.875rem", // 14px
+        4: "1rem", // 16px
+        5: "1.25rem", // 20px
+        6: "1.5rem", // 24px
+        7: "1.75rem", // 28px
+        7.5: "1.875rem", // 30px
+        8: "2rem", // 32px
+        8.5: "2.125rem", // 34px
+        9: "2.25rem", // 36px
+        10: "2.5rem", // 40px
+        11: "2.75rem", // 44px
+        12: "3rem", // 48px
+        14: "3.5rem", // 56px
+        16: "4rem", // 64px
+        18: "4.5rem", // 72px
+        20: "5rem", // 80px
+        24: "6rem", // 96px
+        28: "7rem", // 112px
+        32: "8rem", // 128px
+        36: "9rem", // 144px
+        40: "10rem", // 160px
+        44: "11rem", // 176px
+        48: "12rem", // 192px
+        52: "13rem", // 208px
+        56: "14rem", // 224px
+        60: "15rem", // 240px
+        64: "16rem", // 256px
+        68: "17rem", // 272px
+        70: "17.5rem", // 280px
+        71: "17.75rem", // 284px
+        72: "18rem", // 288px
+        76: "19rem", // 304px
+        80: "20rem", // 320px
+        96: "24rem", // 384px
       },
       borderRadius: {
-        xsmall: "0.25rem",
-        small: "0.5rem",
-        medium: "0.75rem",
-        large: "1rem",
-        xlarge: "1.25rem",
-        "2xlarge": "1.5rem",
-        full: "9999px",
+        // Design system border radius tokens from Figma
+        xsmall: "0.25rem", // 4px
+        small: "0.5rem", // 8px
+        medium: "0.75rem", // 12px
+        large: "1rem", // 16px
+        xlarge: "1.25rem", // 20px
+        "2xlarge": "1.5rem", // 24px
+        full: "9999px", // For pill buttons
+
+        // Legacy values - kept for backward compatibility
         lg: "var(--radius)",
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
@@ -126,28 +136,16 @@ const config = {
       },
       keyframes: {
         "accordion-down": {
-          from: {
-            height: "0",
-          },
-          to: {
-            height: "var(--radix-accordion-content-height)",
-          },
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
         },
         "accordion-up": {
-          from: {
-            height: "var(--radix-accordion-content-height)",
-          },
-          to: {
-            height: "0",
-          },
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
         },
         "fade-in": {
-          "0%": {
-            opacity: "0",
-          },
-          "100%": {
-            opacity: "1",
-          },
+          "0%": { opacity: "0" }, // Start with opacity 0
+          "100%": { opacity: "1" }, // End with opacity 1
         },
       },
       animation: {