feat(backend/blocks): Add integration tests and trusted_origins support

- Add a test MCP server (test_server.py) for integration testing
- Add 14 integration tests that hit a real local MCP server over HTTP
- Add trusted_origins support to MCPClient for localhost/internal servers
- MCPToolBlock now trusts the user-configured server URL by default
- Add local conftest.py to avoid SpinTestServer overhead for MCP tests

Test results: 34 unit tests + 14 integration tests = 48 total, all passing

autogpt_platform/backend/MCP_BLOCK_IMPLEMENTATION.md

@@ -0,0 +1,125 @@
+# MCP Block Implementation Plan
+
+## Overview
+
+Create a single **MCPBlock** that dynamically integrates with any MCP (Model Context Protocol)
+server. Users provide a server URL, the block discovers available tools, presents them as a
+dropdown, and dynamically adjusts input/output schema based on the selected tool — exactly like
+`AgentExecutorBlock` handles dynamic schemas.
+
+## Architecture
+
+```
+User provides MCP server URL + credentials
+         ↓
+MCPBlock fetches tools via MCP protocol (tools/list)
+         ↓
+User selects tool from dropdown (stored in constantInput)
+         ↓
+Input schema dynamically updates based on selected tool's inputSchema
+         ↓
+On execution: MCPBlock calls the tool via MCP protocol (tools/call)
+         ↓
+Result yielded as block output
+```
+
+## Design Decisions
+
+1. **Single block, not many blocks** — One `MCPBlock` handles all MCP servers/tools
+2. **Dynamic schema via AgentExecutorBlock pattern** — Override `get_input_schema()`,
+   `get_input_defaults()`, `get_missing_input()` on the Input class
+3. **Auth via API key credentials** — Use existing `APIKeyCredentials` with `ProviderName.MCP`
+   provider. The API key is sent as Bearer token in the HTTP Authorization header to the MCP
+   server. This keeps it simple and uses existing infrastructure.
+4. **HTTP-based MCP client** — Use `aiohttp` (already a dependency) to implement MCP Streamable
+   HTTP transport directly. No need for the `mcp` Python SDK — the protocol is simple JSON-RPC
+   over HTTP.
+5. **No new DB tables** — Everything fits in existing `AgentBlock` + `AgentNode` tables
+
+## Implementation Files
+
+### New Files
+- `backend/blocks/mcp/` — MCP block package
+  - `__init__.py`
+  - `block.py` — MCPToolBlock implementation
+  - `client.py` — MCP HTTP client (list_tools, call_tool)
+  - `test_mcp.py` — Tests (34 tests)
+
+### Modified Files
+- `backend/integrations/providers.py` — Add `MCP = "mcp"` to ProviderName
+- `pyproject.toml` — No changes needed (using aiohttp which is already a dep)
+
+## Detailed Design
+
+### MCP Client (`client.py`)
+
+Simple async HTTP client for MCP Streamable HTTP protocol:
+
+```python
+class MCPClient:
+    async def list_tools(server_url: str, headers: dict) -> list[MCPTool]
+    async def call_tool(server_url: str, tool_name: str, arguments: dict, headers: dict) -> Any
+```
+
+Uses JSON-RPC 2.0 over HTTP POST:
+- `tools/list` → `{"jsonrpc": "2.0", "method": "tools/list", "id": 1}`
+- `tools/call` → `{"jsonrpc": "2.0", "method": "tools/call", "params": {"name": "...", "arguments": {...}}, "id": 2}`
+
+### MCPBlock (`block.py`)
+
+Key fields:
+- `server_url: str` — MCP server endpoint URL
+- `credentials: MCPCredentialsInput` — API key for auth (optional)
+- `available_tools: dict` — Cached tools list from server (populated by frontend API call)
+- `selected_tool: str` — Which tool the user selected
+- `tool_input_schema: dict` — JSON schema of the selected tool's inputs
+- `tool_arguments: dict` — The actual tool arguments (dynamic, validated against tool_input_schema)
+
+Dynamic schema pattern (like AgentExecutorBlock):
+```python
+@classmethod
+def get_input_schema(cls, data: BlockInput) -> dict[str, Any]:
+    return data.get("tool_input_schema", {})
+
+@classmethod
+def get_input_defaults(cls, data: BlockInput) -> BlockInput:
+    return data.get("tool_arguments", {})
+
+@classmethod
+def get_missing_input(cls, data: BlockInput) -> set[str]:
+    required = cls.get_input_schema(data).get("required", [])
+    return set(required) - set(data)
+```
+
+### Auth
+
+Use existing `APIKeyCredentials` with provider `"mcp"`:
+- User creates an API key credential for their MCP server
+- Block sends it as `Authorization: Bearer <key>` header
+- Credentials are optional (some MCP servers don't need auth)
+
+## Dev Loop
+
+```bash
+cd /Users/majdyz/Code/AutoGPT2/autogpt_platform/backend
+poetry run pytest backend/blocks/test/test_mcp_block.py -xvs  # Run MCP-specific tests
+poetry run pytest backend/blocks/test/test_block.py -xvs -k "MCP"  # Run block test suite for MCP
+```
+
+## Dev Loop
+
+```bash
+cd /Users/majdyz/Code/AutoGPT2/autogpt_platform/backend
+poetry run pytest backend/blocks/mcp/test_mcp.py -xvs        # Run MCP-specific tests (34 tests)
+poetry run pytest backend/blocks/test/test_block.py -xvs -k "MCP"  # Run block test suite for MCP
+```
+
+## Status
+
+- [x] Research & Design
+- [x] Add ProviderName.MCP
+- [x] Implement MCP client (client.py)
+- [x] Implement MCPToolBlock (block.py)
+- [x] Write unit tests (34 tests — all passing)
+- [x] Run tests & fix issues
+- [ ] Create PR

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

@@ -18,10 +18,6 @@ class ResponseType(str, Enum):
     START = "start"
     FINISH = "finish"
 
-    # Step lifecycle (one LLM API call within a message)
-    START_STEP = "start-step"
-    FINISH_STEP = "finish-step"
-
     # Text streaming
     TEXT_START = "text-start"
     TEXT_DELTA = "text-delta"
@@ -61,16 +57,6 @@ class StreamStart(StreamBaseResponse):
         description="Task ID for SSE reconnection. Clients can reconnect using GET /tasks/{taskId}/stream",
     )
 
-    def to_sse(self) -> str:
-        """Convert to SSE format, excluding non-protocol fields like taskId."""
-        import json
-
-        data: dict[str, Any] = {
-            "type": self.type.value,
-            "messageId": self.messageId,
-        }
-        return f"data: {json.dumps(data)}\n\n"
-
 
 class StreamFinish(StreamBaseResponse):
     """End of message/stream."""
@@ -78,26 +64,6 @@ class StreamFinish(StreamBaseResponse):
     type: ResponseType = ResponseType.FINISH
 
 
-class StreamStartStep(StreamBaseResponse):
-    """Start of a step (one LLM API call within a message).
-
-    The AI SDK uses this to add a step-start boundary to message.parts,
-    enabling visual separation between multiple LLM calls in a single message.
-    """
-
-    type: ResponseType = ResponseType.START_STEP
-
-
-class StreamFinishStep(StreamBaseResponse):
-    """End of a step (one LLM API call within a message).
-
-    The AI SDK uses this to reset activeTextParts and activeReasoningParts,
-    so the next LLM call in a tool-call continuation starts with clean state.
-    """
-
-    type: ResponseType = ResponseType.FINISH_STEP
-
-
 # ========== Text Streaming ==========
 
 
@@ -151,7 +117,7 @@ class StreamToolOutputAvailable(StreamBaseResponse):
     type: ResponseType = ResponseType.TOOL_OUTPUT_AVAILABLE
     toolCallId: str = Field(..., description="Tool call ID this responds to")
     output: str | dict[str, Any] = Field(..., description="Tool execution output")
-    # Keep these for internal backend use
+    # Additional fields for internal use (not part of AI SDK spec but useful)
     toolName: str | None = Field(
         default=None, description="Name of the tool that was executed"
     )
@@ -159,17 +125,6 @@ class StreamToolOutputAvailable(StreamBaseResponse):
         default=True, description="Whether the tool execution succeeded"
     )
 
-    def to_sse(self) -> str:
-        """Convert to SSE format, excluding non-spec fields."""
-        import json
-
-        data = {
-            "type": self.type.value,
-            "toolCallId": self.toolCallId,
-            "output": self.output,
-        }
-        return f"data: {json.dumps(data)}\n\n"
-
 
 # ========== Other ==========
 

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

@@ -6,7 +6,7 @@ from collections.abc import AsyncGenerator
 from typing import Annotated
 
 from autogpt_libs import auth
-from fastapi import APIRouter, Depends, Header, HTTPException, Query, Response, Security
+from fastapi import APIRouter, Depends, Header, HTTPException, Query, Security
 from fastapi.responses import StreamingResponse
 from pydantic import BaseModel
 
@@ -17,29 +17,7 @@ from . import stream_registry
 from .completion_handler import process_operation_failure, process_operation_success
 from .config import ChatConfig
 from .model import ChatSession, create_chat_session, get_chat_session, get_user_sessions
-from .response_model import StreamFinish, StreamHeartbeat
-from .tools.models import (
-    AgentDetailsResponse,
-    AgentOutputResponse,
-    AgentPreviewResponse,
-    AgentSavedResponse,
-    AgentsFoundResponse,
-    BlockListResponse,
-    BlockOutputResponse,
-    ClarificationNeededResponse,
-    DocPageResponse,
-    DocSearchResultsResponse,
-    ErrorResponse,
-    ExecutionStartedResponse,
-    InputValidationErrorResponse,
-    NeedLoginResponse,
-    NoResultsResponse,
-    OperationInProgressResponse,
-    OperationPendingResponse,
-    OperationStartedResponse,
-    SetupRequirementsResponse,
-    UnderstandingUpdatedResponse,
-)
+from .response_model import StreamFinish, StreamHeartbeat, StreamStart
 
 config = ChatConfig()
 
@@ -306,6 +284,10 @@ async def stream_chat_post(
     # Background task that runs the AI generation independently of SSE connection
     async def run_ai_generation():
         try:
+            # Emit a start event with task_id for reconnection
+            start_chunk = StreamStart(messageId=task_id, taskId=task_id)
+            await stream_registry.publish_chunk(task_id, start_chunk)
+
             async for chunk in chat_service.stream_chat_completion(
                 session_id,
                 request.message,
@@ -313,7 +295,6 @@ async def stream_chat_post(
                 user_id=user_id,
                 session=session,  # Pass pre-fetched session to avoid double-fetch
                 context=request.context,
-                _task_id=task_id,  # Pass task_id so service emits start with taskId for reconnection
             ):
                 # Write to Redis (subscribers will receive via XREAD)
                 await stream_registry.publish_chunk(task_id, chunk)
@@ -393,73 +374,63 @@ async def stream_chat_post(
 @router.get(
     "/sessions/{session_id}/stream",
 )
-async def resume_session_stream(
+async def stream_chat_get(
     session_id: str,
+    message: Annotated[str, Query(min_length=1, max_length=10000)],
     user_id: str | None = Depends(auth.get_user_id),
+    is_user_message: bool = Query(default=True),
 ):
     """
-    Resume an active stream for a session.
+    Stream chat responses for a session (GET - legacy endpoint).
 
-    Called by the AI SDK's ``useChat(resume: true)`` on page load.
-    Checks for an active (in-progress) task on the session and either replays
-    the full SSE stream or returns 204 No Content if nothing is running.
+    Streams the AI/completion responses in real time over Server-Sent Events (SSE), including:
+      - Text fragments as they are generated
+      - Tool call UI elements (if invoked)
+      - Tool execution results
 
     Args:
-        session_id: The chat session identifier.
+        session_id: The chat session identifier to associate with the streamed messages.
+        message: The user's new message to process.
         user_id: Optional authenticated user ID.
-
+        is_user_message: Whether the message is a user message.
     Returns:
-        StreamingResponse (SSE) when an active stream exists,
-        or 204 No Content when there is nothing to resume.
+        StreamingResponse: SSE-formatted response chunks.
+
     """
-    import asyncio
-
-    active_task, _last_id = await stream_registry.get_active_task_for_session(
-        session_id, user_id
-    )
-
-    if not active_task:
-        return Response(status_code=204)
-
-    subscriber_queue = await stream_registry.subscribe_to_task(
-        task_id=active_task.task_id,
-        user_id=user_id,
-        last_message_id="0-0",  # Full replay so useChat rebuilds the message
-    )
-
-    if subscriber_queue is None:
-        return Response(status_code=204)
+    session = await _validate_and_get_session(session_id, user_id)
 
     async def event_generator() -> AsyncGenerator[str, None]:
-        try:
-            while True:
-                try:
-                    chunk = await asyncio.wait_for(
-                        subscriber_queue.get(), timeout=30.0
-                    )
-                    yield chunk.to_sse()
-
-                    if isinstance(chunk, StreamFinish):
-                        break
-                except asyncio.TimeoutError:
-                    yield StreamHeartbeat().to_sse()
-        except GeneratorExit:
-            pass
-        except Exception as e:
-            logger.error(
-                f"Error in resume stream for session {session_id}: {e}"
-            )
-        finally:
-            try:
-                await stream_registry.unsubscribe_from_task(
-                    active_task.task_id, subscriber_queue
+        chunk_count = 0
+        first_chunk_type: str | None = None
+        async for chunk in chat_service.stream_chat_completion(
+            session_id,
+            message,
+            is_user_message=is_user_message,
+            user_id=user_id,
+            session=session,  # Pass pre-fetched session to avoid double-fetch
+        ):
+            if chunk_count < 3:
+                logger.info(
+                    "Chat stream chunk",
+                    extra={
+                        "session_id": session_id,
+                        "chunk_type": str(chunk.type),
+                    },
                 )
-            except Exception as unsub_err:
-                logger.error(
-                    f"Error unsubscribing from task {active_task.task_id}: {unsub_err}",
-                    exc_info=True,
-                )
-            yield "data: [DONE]\n\n"
+            if not first_chunk_type:
+                first_chunk_type = str(chunk.type)
+            chunk_count += 1
+            yield chunk.to_sse()
+        logger.info(
+            "Chat stream completed",
+            extra={
+                "session_id": session_id,
+                "chunk_count": chunk_count,
+                "first_chunk_type": first_chunk_type,
+            },
+        )
+        # AI SDK protocol termination
+        yield "data: [DONE]\n\n"
 
     return StreamingResponse(
         event_generator(),
@@ -467,8 +438,8 @@ async def resume_session_stream(
         headers={
             "Cache-Control": "no-cache",
             "Connection": "keep-alive",
-            "X-Accel-Buffering": "no",
-            "x-vercel-ai-ui-message-stream": "v1",
+            "X-Accel-Buffering": "no",  # Disable nginx buffering
+            "x-vercel-ai-ui-message-stream": "v1",  # AI SDK protocol header
         },
     )
 
@@ -780,42 +751,3 @@ async def health_check() -> dict:
         "service": "chat",
         "version": "0.1.0",
     }
-
-
-# ========== Schema Export (for OpenAPI / Orval codegen) ==========
-
-ToolResponseUnion = (
-    AgentsFoundResponse
-    | NoResultsResponse
-    | AgentDetailsResponse
-    | SetupRequirementsResponse
-    | ExecutionStartedResponse
-    | NeedLoginResponse
-    | ErrorResponse
-    | InputValidationErrorResponse
-    | AgentOutputResponse
-    | UnderstandingUpdatedResponse
-    | AgentPreviewResponse
-    | AgentSavedResponse
-    | ClarificationNeededResponse
-    | BlockListResponse
-    | BlockOutputResponse
-    | DocSearchResultsResponse
-    | DocPageResponse
-    | OperationStartedResponse
-    | OperationPendingResponse
-    | OperationInProgressResponse
-)
-
-
-@router.get(
-    "/schema/tool-responses",
-    response_model=ToolResponseUnion,
-    include_in_schema=True,
-    summary="[Dummy] Tool response type export for codegen",
-    description="This endpoint is not meant to be called. It exists solely to "
-    "expose tool response models in the OpenAPI schema for frontend codegen.",
-)
-async def _tool_response_schema() -> ToolResponseUnion:  # type: ignore[return]
-    """Never called at runtime. Exists only so Orval generates TS types."""
-    raise HTTPException(status_code=501, detail="Schema-only endpoint")

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

@@ -52,10 +52,8 @@ from .response_model import (
     StreamBaseResponse,
     StreamError,
     StreamFinish,
-    StreamFinishStep,
     StreamHeartbeat,
     StreamStart,
-    StreamStartStep,
     StreamTextDelta,
     StreamTextEnd,
     StreamTextStart,
@@ -353,10 +351,6 @@ async def stream_chat_completion(
     retry_count: int = 0,
     session: ChatSession | None = None,
     context: dict[str, str] | None = None,  # {url: str, content: str}
-    _continuation_message_id: (
-        str | None
-    ) = None,  # Internal: reuse message ID for tool call continuations
-    _task_id: str | None = None,  # Internal: task ID for SSE reconnection support
 ) -> AsyncGenerator[StreamBaseResponse, None]:
     """Main entry point for streaming chat completions with database handling.
 
@@ -485,17 +479,11 @@ async def stream_chat_completion(
     # Generate unique IDs for AI SDK protocol
     import uuid as uuid_module
 
-    is_continuation = _continuation_message_id is not None
-    message_id = _continuation_message_id or str(uuid_module.uuid4())
+    message_id = str(uuid_module.uuid4())
     text_block_id = str(uuid_module.uuid4())
 
-    # Only yield message start for the initial call, not for continuations.
-    # This is the single place where StreamStart is emitted (removed from routes.py).
-    if not is_continuation:
-        yield StreamStart(messageId=message_id, taskId=_task_id)
-
-    # Emit start-step before each LLM call (AI SDK uses this to add step boundaries)
-    yield StreamStartStep()
+    # Yield message start
+    yield StreamStart(messageId=message_id)
 
     try:
         async for chunk in _stream_chat_chunks(
@@ -597,10 +585,6 @@ async def stream_chat_completion(
                     )
                 yield chunk
             elif isinstance(chunk, StreamFinish):
-                if has_done_tool_call:
-                    # Tool calls happened — close the step but don't send message-level finish.
-                    # The continuation will open a new step, and finish will come at the end.
-                    yield StreamFinishStep()
                 if not has_done_tool_call:
                     # Emit text-end before finish if we received text but haven't closed it
                     if has_received_text and not text_streaming_ended:
@@ -632,8 +616,6 @@ async def stream_chat_completion(
                             has_saved_assistant_message = True
 
                     has_yielded_end = True
-                    # Emit finish-step before finish (resets AI SDK text/reasoning state)
-                    yield StreamFinishStep()
                     yield chunk
             elif isinstance(chunk, StreamError):
                 has_yielded_error = True
@@ -718,7 +700,6 @@ async def stream_chat_completion(
                 error_response = StreamError(errorText=error_message)
                 yield error_response
             if not has_yielded_end:
-                yield StreamFinishStep()
                 yield StreamFinish()
             return
 
@@ -733,8 +714,6 @@ async def stream_chat_completion(
             retry_count=retry_count + 1,
             session=session,
             context=context,
-            _continuation_message_id=message_id,  # Reuse message ID since start was already sent
-            _task_id=_task_id,
         ):
             yield chunk
         return  # Exit after retry to avoid double-saving in finally block
@@ -804,8 +783,6 @@ async def stream_chat_completion(
             session=session,  # Pass session object to avoid Redis refetch
             context=context,
             tool_call_response=str(tool_response_messages),
-            _continuation_message_id=message_id,  # Reuse message ID to avoid duplicates
-            _task_id=_task_id,
         ):
             yield chunk
 
@@ -1588,7 +1565,6 @@ async def _execute_long_running_tool_with_streaming(
             task_id,
             StreamError(errorText=str(e)),
         )
-        await stream_registry.publish_chunk(task_id, StreamFinishStep())
         await stream_registry.publish_chunk(task_id, StreamFinish())
 
         await _update_pending_operation(
@@ -1846,7 +1822,6 @@ async def _generate_llm_continuation_with_streaming(
 
         # Publish start event
         await stream_registry.publish_chunk(task_id, StreamStart(messageId=message_id))
-        await stream_registry.publish_chunk(task_id, StreamStartStep())
         await stream_registry.publish_chunk(task_id, StreamTextStart(id=text_block_id))
 
         # Stream the response
@@ -1870,7 +1845,6 @@ async def _generate_llm_continuation_with_streaming(
 
         # Publish end events
         await stream_registry.publish_chunk(task_id, StreamTextEnd(id=text_block_id))
-        await stream_registry.publish_chunk(task_id, StreamFinishStep())
 
         if assistant_content:
             # Reload session from DB to avoid race condition with user messages
@@ -1912,5 +1886,4 @@ async def _generate_llm_continuation_with_streaming(
             task_id,
             StreamError(errorText=f"Failed to generate response: {e}"),
         )
-        await stream_registry.publish_chunk(task_id, StreamFinishStep())
         await stream_registry.publish_chunk(task_id, StreamFinish())

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

@@ -598,10 +598,8 @@ def _reconstruct_chunk(chunk_data: dict) -> StreamBaseResponse | None:
         ResponseType,
         StreamError,
         StreamFinish,
-        StreamFinishStep,
         StreamHeartbeat,
         StreamStart,
-        StreamStartStep,
         StreamTextDelta,
         StreamTextEnd,
         StreamTextStart,
@@ -615,8 +613,6 @@ def _reconstruct_chunk(chunk_data: dict) -> StreamBaseResponse | None:
     type_to_class: dict[str, type[StreamBaseResponse]] = {
         ResponseType.START.value: StreamStart,
         ResponseType.FINISH.value: StreamFinish,
-        ResponseType.START_STEP.value: StreamStartStep,
-        ResponseType.FINISH_STEP.value: StreamFinishStep,
         ResponseType.TEXT_START.value: StreamTextStart,
         ResponseType.TEXT_DELTA.value: StreamTextDelta,
         ResponseType.TEXT_END.value: StreamTextEnd,

autogpt_platform/backend/backend/blocks/mcp/block.py

@@ -0,0 +1,254 @@
+"""
+MCP (Model Context Protocol) Tool Block.
+
+A single dynamic block that can connect to any MCP server, discover available tools,
+and execute them. Works like AgentExecutorBlock — the user selects a tool from a
+dropdown and the input/output schema adapts dynamically.
+"""
+
+import json
+import logging
+from typing import Any, Literal
+
+from pydantic import SecretStr
+
+from backend.blocks.mcp.client import MCPClient, MCPClientError
+from backend.data.block import (
+    Block,
+    BlockCategory,
+    BlockInput,
+    BlockOutput,
+    BlockSchemaInput,
+    BlockSchemaOutput,
+    BlockType,
+)
+from backend.data.model import (
+    APIKeyCredentials,
+    CredentialsField,
+    CredentialsMetaInput,
+    SchemaField,
+)
+from backend.integrations.providers import ProviderName
+from backend.util.json import validate_with_jsonschema
+
+logger = logging.getLogger(__name__)
+
+MCPCredentialsInput = CredentialsMetaInput[
+    Literal[ProviderName.MCP], Literal["api_key"]
+]
+
+TEST_CREDENTIALS = APIKeyCredentials(
+    id="01234567-89ab-cdef-0123-456789abcdef",
+    provider="mcp",
+    api_key=SecretStr("test-mcp-token"),
+    title="Mock MCP Credentials",
+)
+TEST_CREDENTIALS_INPUT = {
+    "provider": TEST_CREDENTIALS.provider,
+    "id": TEST_CREDENTIALS.id,
+    "type": TEST_CREDENTIALS.type,
+    "title": TEST_CREDENTIALS.title,
+}
+
+
+class MCPToolBlock(Block):
+    """
+    A block that connects to an MCP server, lets the user pick a tool,
+    and executes it with dynamic input/output schema.
+
+    The flow:
+    1. User provides an MCP server URL (and optional credentials)
+    2. Frontend calls the backend to get tool list from that URL
+    3. User selects a tool from a dropdown (available_tools)
+    4. The block's input schema updates to reflect the selected tool's parameters
+    5. On execution, the block calls the MCP server to run the tool
+    """
+
+    class Input(BlockSchemaInput):
+        # -- Static fields (always shown) --
+        credentials: MCPCredentialsInput = CredentialsField(
+            description="API key / Bearer token for the MCP server (optional for "
+            "public servers — create a credential with any placeholder value).",
+        )
+        server_url: str = SchemaField(
+            description="URL of the MCP server (Streamable HTTP endpoint)",
+            placeholder="https://mcp.example.com/mcp",
+        )
+        available_tools: dict[str, Any] = SchemaField(
+            description="Available tools on the MCP server. "
+            "This is populated automatically when a server URL is provided.",
+            default={},
+            hidden=True,
+        )
+        selected_tool: str = SchemaField(
+            description="The MCP tool to execute",
+            placeholder="Select a tool",
+            default="",
+        )
+        tool_input_schema: dict[str, Any] = SchemaField(
+            description="JSON Schema for the selected tool's input parameters. "
+            "Populated automatically when a tool is selected.",
+            default={},
+            hidden=True,
+        )
+
+        # -- Dynamic field: actual arguments for the selected tool --
+        tool_arguments: dict[str, Any] = SchemaField(
+            description="Arguments to pass to the selected MCP tool. "
+            "The fields here are defined by the tool's input schema.",
+            default={},
+        )
+
+        @classmethod
+        def get_input_schema(cls, data: BlockInput) -> dict[str, Any]:
+            """Return the tool's input schema so the builder UI renders dynamic fields."""
+            return data.get("tool_input_schema", {})
+
+        @classmethod
+        def get_input_defaults(cls, data: BlockInput) -> BlockInput:
+            """Return the current tool_arguments as defaults for the dynamic fields."""
+            return data.get("tool_arguments", {})
+
+        @classmethod
+        def get_missing_input(cls, data: BlockInput) -> set[str]:
+            """Check which required tool arguments are missing."""
+            required_fields = cls.get_input_schema(data).get("required", [])
+            return set(required_fields) - set(data)
+
+        @classmethod
+        def get_mismatch_error(cls, data: BlockInput) -> str | None:
+            """Validate tool_arguments against the tool's input schema."""
+            tool_schema = cls.get_input_schema(data)
+            if not tool_schema:
+                return None
+            return validate_with_jsonschema(tool_schema, data)
+
+    class Output(BlockSchemaOutput):
+        result: Any = SchemaField(
+            description="The result returned by the MCP tool"
+        )
+        error: str = SchemaField(description="Error message if the tool call failed")
+
+    def __init__(self):
+        super().__init__(
+            id="a0a4b1c2-d3e4-4f56-a7b8-c9d0e1f2a3b4",
+            description="Connect to any MCP server and execute its tools. "
+            "Provide a server URL, select a tool, and pass arguments dynamically.",
+            categories={BlockCategory.DEVELOPER_TOOLS},
+            input_schema=MCPToolBlock.Input,
+            output_schema=MCPToolBlock.Output,
+            block_type=BlockType.STANDARD,
+            test_input={
+                "server_url": "https://mcp.example.com/mcp",
+                "credentials": TEST_CREDENTIALS_INPUT,
+                "selected_tool": "get_weather",
+                "tool_input_schema": {
+                    "type": "object",
+                    "properties": {"city": {"type": "string"}},
+                    "required": ["city"],
+                },
+                "tool_arguments": {"city": "London"},
+            },
+            test_output=[
+                (
+                    "result",
+                    {"weather": "sunny", "temperature": 20},
+                ),
+            ],
+            test_mock={
+                "_call_mcp_tool": lambda *a, **kw: {
+                    "weather": "sunny",
+                    "temperature": 20,
+                },
+            },
+            test_credentials=TEST_CREDENTIALS,
+        )
+
+    async def _call_mcp_tool(
+        self,
+        server_url: str,
+        tool_name: str,
+        arguments: dict[str, Any],
+        auth_token: str | None = None,
+    ) -> Any:
+        """Call a tool on the MCP server. Extracted for easy mocking in tests."""
+        # Trust the user-configured server URL to allow internal/localhost servers
+        client = MCPClient(
+            server_url,
+            auth_token=auth_token,
+            trusted_origins=[server_url],
+        )
+        await client.initialize()
+        result = await client.call_tool(tool_name, arguments)
+
+        if result.is_error:
+            error_text = ""
+            for item in result.content:
+                if item.get("type") == "text":
+                    error_text += item.get("text", "")
+            raise MCPClientError(
+                f"MCP tool '{tool_name}' returned an error: "
+                f"{error_text or 'Unknown error'}"
+            )
+
+        # Extract text content from the result
+        output_parts = []
+        for item in result.content:
+            if item.get("type") == "text":
+                text = item.get("text", "")
+                # Try to parse as JSON for structured output
+                try:
+                    output_parts.append(json.loads(text))
+                except (json.JSONDecodeError, ValueError):
+                    output_parts.append(text)
+            elif item.get("type") == "image":
+                output_parts.append(
+                    {
+                        "type": "image",
+                        "data": item.get("data"),
+                        "mimeType": item.get("mimeType"),
+                    }
+                )
+            elif item.get("type") == "resource":
+                output_parts.append(item.get("resource", {}))
+
+        # If single result, unwrap
+        if len(output_parts) == 1:
+            return output_parts[0]
+        return output_parts if output_parts else None
+
+    async def run(
+        self,
+        input_data: Input,
+        *,
+        credentials: APIKeyCredentials,
+        **kwargs,
+    ) -> BlockOutput:
+        if not input_data.server_url:
+            yield "error", "MCP server URL is required"
+            return
+
+        if not input_data.selected_tool:
+            yield "error", "No tool selected. Please select a tool from the dropdown."
+            return
+
+        auth_token: str | None = None
+        if credentials and credentials.api_key:
+            token_value = credentials.api_key.get_secret_value()
+            # Skip placeholder/fake tokens
+            if token_value and token_value not in ("", "FAKE_API_KEY", "placeholder"):
+                auth_token = token_value
+
+        try:
+            result = await self._call_mcp_tool(
+                server_url=input_data.server_url,
+                tool_name=input_data.selected_tool,
+                arguments=input_data.tool_arguments,
+                auth_token=auth_token,
+            )
+            yield "result", result
+        except MCPClientError as e:
+            yield "error", str(e)
+        except Exception as e:
+            logger.exception(f"MCP tool call failed: {e}")
+            yield "error", f"MCP tool call failed: {str(e)}"

autogpt_platform/backend/backend/blocks/mcp/client.py

@@ -0,0 +1,186 @@
+"""
+MCP (Model Context Protocol) HTTP client.
+
+Implements the MCP Streamable HTTP transport for listing tools and calling tools
+on remote MCP servers. Uses JSON-RPC 2.0 over HTTP POST.
+
+Reference: https://modelcontextprotocol.io/docs/concepts/transports
+"""
+
+import logging
+from dataclasses import dataclass, field
+from typing import Any
+
+from backend.util.request import Requests
+
+logger = logging.getLogger(__name__)
+
+
+@dataclass
+class MCPTool:
+    """Represents an MCP tool discovered from a server."""
+
+    name: str
+    description: str
+    input_schema: dict[str, Any]
+
+
+@dataclass
+class MCPCallResult:
+    """Result from calling an MCP tool."""
+
+    content: list[dict[str, Any]] = field(default_factory=list)
+    is_error: bool = False
+
+
+class MCPClientError(Exception):
+    """Raised when an MCP protocol error occurs."""
+
+    pass
+
+
+class MCPClient:
+    """
+    Async HTTP client for the MCP Streamable HTTP transport.
+
+    Communicates with MCP servers using JSON-RPC 2.0 over HTTP POST.
+    Supports optional Bearer token authentication.
+    """
+
+    def __init__(
+        self,
+        server_url: str,
+        auth_token: str | None = None,
+        trusted_origins: list[str] | None = None,
+    ):
+        self.server_url = server_url.rstrip("/")
+        self.auth_token = auth_token
+        self.trusted_origins = trusted_origins or []
+        self._request_id = 0
+
+    def _next_id(self) -> int:
+        self._request_id += 1
+        return self._request_id
+
+    def _build_headers(self) -> dict[str, str]:
+        headers = {
+            "Content-Type": "application/json",
+            "Accept": "application/json, text/event-stream",
+        }
+        if self.auth_token:
+            headers["Authorization"] = f"Bearer {self.auth_token}"
+        return headers
+
+    def _build_jsonrpc_request(
+        self, method: str, params: dict[str, Any] | None = None
+    ) -> dict[str, Any]:
+        req: dict[str, Any] = {
+            "jsonrpc": "2.0",
+            "method": method,
+            "id": self._next_id(),
+        }
+        if params is not None:
+            req["params"] = params
+        return req
+
+    async def _send_request(
+        self, method: str, params: dict[str, Any] | None = None
+    ) -> Any:
+        """Send a JSON-RPC request to the MCP server and return the result."""
+        payload = self._build_jsonrpc_request(method, params)
+        headers = self._build_headers()
+
+        requests = Requests(
+            raise_for_status=True,
+            extra_headers=headers,
+            trusted_origins=self.trusted_origins,
+        )
+        response = await requests.post(self.server_url, json=payload)
+        body = response.json()
+
+        # Handle JSON-RPC error
+        if "error" in body:
+            error = body["error"]
+            raise MCPClientError(
+                f"MCP server error [{error.get('code', '?')}]: "
+                f"{error.get('message', 'Unknown error')}"
+            )
+
+        return body.get("result")
+
+    async def _send_notification(self, method: str) -> None:
+        """Send a JSON-RPC notification (no id, no response expected)."""
+        headers = self._build_headers()
+        notification = {"jsonrpc": "2.0", "method": method}
+        requests = Requests(
+            raise_for_status=False,
+            extra_headers=headers,
+            trusted_origins=self.trusted_origins,
+        )
+        await requests.post(self.server_url, json=notification)
+
+    async def initialize(self) -> dict[str, Any]:
+        """
+        Send the MCP initialize request.
+
+        This is required by the MCP protocol before any other requests.
+        Returns the server's capabilities.
+        """
+        result = await self._send_request(
+            "initialize",
+            {
+                "protocolVersion": "2025-03-26",
+                "capabilities": {},
+                "clientInfo": {"name": "AutoGPT-Platform", "version": "1.0.0"},
+            },
+        )
+        # Send initialized notification (no response expected)
+        await self._send_notification("notifications/initialized")
+
+        return result or {}
+
+    async def list_tools(self) -> list[MCPTool]:
+        """
+        Discover available tools from the MCP server.
+
+        Returns a list of MCPTool objects with name, description, and input schema.
+        """
+        result = await self._send_request("tools/list")
+        if not result or "tools" not in result:
+            return []
+
+        tools = []
+        for tool_data in result["tools"]:
+            tools.append(
+                MCPTool(
+                    name=tool_data.get("name", ""),
+                    description=tool_data.get("description", ""),
+                    input_schema=tool_data.get("inputSchema", {}),
+                )
+            )
+        return tools
+
+    async def call_tool(
+        self, tool_name: str, arguments: dict[str, Any]
+    ) -> MCPCallResult:
+        """
+        Call a tool on the MCP server.
+
+        Args:
+            tool_name: The name of the tool to call.
+            arguments: The arguments to pass to the tool.
+
+        Returns:
+            MCPCallResult with the tool's response content.
+        """
+        result = await self._send_request(
+            "tools/call",
+            {"name": tool_name, "arguments": arguments},
+        )
+        if not result:
+            return MCPCallResult(is_error=True)
+
+        return MCPCallResult(
+            content=result.get("content", []),
+            is_error=result.get("isError", False),
+        )

autogpt_platform/backend/backend/blocks/mcp/conftest.py

@@ -0,0 +1,21 @@
+"""
+Conftest for MCP block tests.
+
+Override the session-scoped server and graph_cleanup fixtures from
+backend/conftest.py so that MCP integration tests don't spin up the
+full SpinTestServer infrastructure.
+"""
+
+import pytest
+
+
+@pytest.fixture(scope="session")
+def server():
+    """No-op override — MCP tests don't need the full platform server."""
+    yield None
+
+
+@pytest.fixture(scope="session", autouse=True)
+def graph_cleanup(server):
+    """No-op override — MCP tests don't create graphs."""
+    yield

autogpt_platform/backend/backend/blocks/mcp/test_integration.py

@@ -0,0 +1,374 @@
+"""
+Integration tests for MCP client and MCPToolBlock against a real HTTP server.
+
+These tests spin up a local MCP test server and run the full client/block flow
+against it — no mocking, real HTTP requests.
+"""
+
+import asyncio
+import json
+import threading
+
+import pytest
+from aiohttp import web
+from pydantic import SecretStr
+
+from backend.blocks.mcp.block import MCPToolBlock
+from backend.blocks.mcp.client import MCPClient
+from backend.blocks.mcp.test_server import create_test_mcp_app
+from backend.data.model import APIKeyCredentials
+
+
+class _MCPTestServer:
+    """
+    Run an MCP test server in a background thread with its own event loop.
+    This avoids event loop conflicts with pytest-asyncio.
+    """
+
+    def __init__(self, auth_token: str | None = None):
+        self.auth_token = auth_token
+        self.url: str = ""
+        self._runner: web.AppRunner | None = None
+        self._loop: asyncio.AbstractEventLoop | None = None
+        self._thread: threading.Thread | None = None
+        self._started = threading.Event()
+
+    def _run(self):
+        self._loop = asyncio.new_event_loop()
+        asyncio.set_event_loop(self._loop)
+        self._loop.run_until_complete(self._start())
+        self._started.set()
+        self._loop.run_forever()
+
+    async def _start(self):
+        app = create_test_mcp_app(auth_token=self.auth_token)
+        self._runner = web.AppRunner(app)
+        await self._runner.setup()
+        site = web.TCPSite(self._runner, "127.0.0.1", 0)
+        await site.start()
+        port = site._server.sockets[0].getsockname()[1]
+        self.url = f"http://127.0.0.1:{port}/mcp"
+
+    def start(self):
+        self._thread = threading.Thread(target=self._run, daemon=True)
+        self._thread.start()
+        self._started.wait(timeout=5)
+        return self
+
+    def stop(self):
+        if self._loop and self._runner:
+            asyncio.run_coroutine_threadsafe(
+                self._runner.cleanup(), self._loop
+            ).result(timeout=5)
+            self._loop.call_soon_threadsafe(self._loop.stop)
+        if self._thread:
+            self._thread.join(timeout=5)
+
+
+@pytest.fixture(scope="module")
+def mcp_server():
+    """Start a local MCP test server in a background thread."""
+    server = _MCPTestServer()
+    server.start()
+    yield server.url
+    server.stop()
+
+
+@pytest.fixture(scope="module")
+def mcp_server_with_auth():
+    """Start a local MCP test server with auth in a background thread."""
+    server = _MCPTestServer(auth_token="test-secret-token")
+    server.start()
+    yield server.url, "test-secret-token"
+    server.stop()
+
+
+def _make_client(url: str, auth_token: str | None = None) -> MCPClient:
+    """Create an MCPClient with localhost trusted for integration tests."""
+    return MCPClient(url, auth_token=auth_token, trusted_origins=[url])
+
+
+def _make_fake_creds(api_key: str = "FAKE_API_KEY") -> APIKeyCredentials:
+    return APIKeyCredentials(
+        id="test-integration",
+        provider="mcp",
+        api_key=SecretStr(api_key),
+        title="test",
+    )
+
+
+# ── MCPClient integration tests ──────────────────────────────────────
+
+
+class TestMCPClientIntegration:
+    """Test MCPClient against a real local MCP server."""
+
+    @pytest.mark.asyncio
+    async def test_initialize(self, mcp_server):
+        client = _make_client(mcp_server)
+        result = await client.initialize()
+
+        assert result["protocolVersion"] == "2025-03-26"
+        assert result["serverInfo"]["name"] == "test-mcp-server"
+        assert "tools" in result["capabilities"]
+
+    @pytest.mark.asyncio
+    async def test_list_tools(self, mcp_server):
+        client = _make_client(mcp_server)
+        await client.initialize()
+        tools = await client.list_tools()
+
+        assert len(tools) == 3
+
+        tool_names = {t.name for t in tools}
+        assert tool_names == {"get_weather", "add_numbers", "echo"}
+
+        # Check get_weather schema
+        weather = next(t for t in tools if t.name == "get_weather")
+        assert weather.description == "Get current weather for a city"
+        assert "city" in weather.input_schema["properties"]
+        assert weather.input_schema["required"] == ["city"]
+
+        # Check add_numbers schema
+        add = next(t for t in tools if t.name == "add_numbers")
+        assert "a" in add.input_schema["properties"]
+        assert "b" in add.input_schema["properties"]
+
+    @pytest.mark.asyncio
+    async def test_call_tool_get_weather(self, mcp_server):
+        client = _make_client(mcp_server)
+        await client.initialize()
+        result = await client.call_tool("get_weather", {"city": "London"})
+
+        assert not result.is_error
+        assert len(result.content) == 1
+        assert result.content[0]["type"] == "text"
+
+        data = json.loads(result.content[0]["text"])
+        assert data["city"] == "London"
+        assert data["temperature"] == 22
+        assert data["condition"] == "sunny"
+
+    @pytest.mark.asyncio
+    async def test_call_tool_add_numbers(self, mcp_server):
+        client = _make_client(mcp_server)
+        await client.initialize()
+        result = await client.call_tool("add_numbers", {"a": 3, "b": 7})
+
+        assert not result.is_error
+        data = json.loads(result.content[0]["text"])
+        assert data["result"] == 10
+
+    @pytest.mark.asyncio
+    async def test_call_tool_echo(self, mcp_server):
+        client = _make_client(mcp_server)
+        await client.initialize()
+        result = await client.call_tool("echo", {"message": "Hello MCP!"})
+
+        assert not result.is_error
+        assert result.content[0]["text"] == "Hello MCP!"
+
+    @pytest.mark.asyncio
+    async def test_call_unknown_tool(self, mcp_server):
+        client = _make_client(mcp_server)
+        await client.initialize()
+        result = await client.call_tool("nonexistent_tool", {})
+
+        assert result.is_error
+        assert "Unknown tool" in result.content[0]["text"]
+
+    @pytest.mark.asyncio
+    async def test_auth_success(self, mcp_server_with_auth):
+        url, token = mcp_server_with_auth
+        client = _make_client(url, auth_token=token)
+        result = await client.initialize()
+
+        assert result["protocolVersion"] == "2025-03-26"
+
+        tools = await client.list_tools()
+        assert len(tools) == 3
+
+    @pytest.mark.asyncio
+    async def test_auth_failure(self, mcp_server_with_auth):
+        url, _ = mcp_server_with_auth
+        client = _make_client(url, auth_token="wrong-token")
+
+        with pytest.raises(Exception):
+            await client.initialize()
+
+    @pytest.mark.asyncio
+    async def test_auth_missing(self, mcp_server_with_auth):
+        url, _ = mcp_server_with_auth
+        client = _make_client(url)
+
+        with pytest.raises(Exception):
+            await client.initialize()
+
+
+# ── MCPToolBlock integration tests ───────────────────────────────────
+
+
+class TestMCPToolBlockIntegration:
+    """Test MCPToolBlock end-to-end against a real local MCP server."""
+
+    @pytest.mark.asyncio
+    async def test_full_flow_get_weather(self, mcp_server):
+        """Full flow: discover tools, select one, execute it."""
+        # Step 1: Discover tools (simulating what the frontend/API would do)
+        client = _make_client(mcp_server)
+        await client.initialize()
+        tools = await client.list_tools()
+        assert len(tools) == 3
+
+        # Step 2: User selects "get_weather" and we get its schema
+        weather_tool = next(t for t in tools if t.name == "get_weather")
+
+        # Step 3: Execute the block with the selected tool
+        block = MCPToolBlock()
+        input_data = MCPToolBlock.Input(
+            server_url=mcp_server,
+            selected_tool="get_weather",
+            tool_input_schema=weather_tool.input_schema,
+            tool_arguments={"city": "Paris"},
+            credentials={  # type: ignore
+                "provider": "mcp",
+                "id": "test",
+                "type": "api_key",
+                "title": "test",
+            },
+        )
+
+        outputs = []
+        async for name, data in block.run(
+            input_data, credentials=_make_fake_creds()
+        ):
+            outputs.append((name, data))
+
+        assert len(outputs) == 1
+        assert outputs[0][0] == "result"
+        result = outputs[0][1]
+        assert result["city"] == "Paris"
+        assert result["temperature"] == 22
+        assert result["condition"] == "sunny"
+
+    @pytest.mark.asyncio
+    async def test_full_flow_add_numbers(self, mcp_server):
+        """Full flow for add_numbers tool."""
+        client = _make_client(mcp_server)
+        await client.initialize()
+        tools = await client.list_tools()
+        add_tool = next(t for t in tools if t.name == "add_numbers")
+
+        block = MCPToolBlock()
+        input_data = MCPToolBlock.Input(
+            server_url=mcp_server,
+            selected_tool="add_numbers",
+            tool_input_schema=add_tool.input_schema,
+            tool_arguments={"a": 42, "b": 58},
+            credentials={  # type: ignore
+                "provider": "mcp",
+                "id": "test",
+                "type": "api_key",
+                "title": "test",
+            },
+        )
+
+        outputs = []
+        async for name, data in block.run(
+            input_data, credentials=_make_fake_creds()
+        ):
+            outputs.append((name, data))
+
+        assert len(outputs) == 1
+        assert outputs[0][0] == "result"
+        assert outputs[0][1]["result"] == 100
+
+    @pytest.mark.asyncio
+    async def test_full_flow_echo_plain_text(self, mcp_server):
+        """Verify plain text (non-JSON) responses work."""
+        block = MCPToolBlock()
+        input_data = MCPToolBlock.Input(
+            server_url=mcp_server,
+            selected_tool="echo",
+            tool_input_schema={
+                "type": "object",
+                "properties": {"message": {"type": "string"}},
+                "required": ["message"],
+            },
+            tool_arguments={"message": "Hello from AutoGPT!"},
+            credentials={  # type: ignore
+                "provider": "mcp",
+                "id": "test",
+                "type": "api_key",
+                "title": "test",
+            },
+        )
+
+        outputs = []
+        async for name, data in block.run(
+            input_data, credentials=_make_fake_creds()
+        ):
+            outputs.append((name, data))
+
+        assert len(outputs) == 1
+        assert outputs[0][0] == "result"
+        assert outputs[0][1] == "Hello from AutoGPT!"
+
+    @pytest.mark.asyncio
+    async def test_full_flow_unknown_tool_yields_error(self, mcp_server):
+        """Calling an unknown tool should yield an error output."""
+        block = MCPToolBlock()
+        input_data = MCPToolBlock.Input(
+            server_url=mcp_server,
+            selected_tool="nonexistent_tool",
+            tool_arguments={},
+            credentials={  # type: ignore
+                "provider": "mcp",
+                "id": "test",
+                "type": "api_key",
+                "title": "test",
+            },
+        )
+
+        outputs = []
+        async for name, data in block.run(
+            input_data, credentials=_make_fake_creds()
+        ):
+            outputs.append((name, data))
+
+        assert len(outputs) == 1
+        assert outputs[0][0] == "error"
+        assert "returned an error" in outputs[0][1]
+
+    @pytest.mark.asyncio
+    async def test_full_flow_with_auth(self, mcp_server_with_auth):
+        """Full flow with authentication."""
+        url, token = mcp_server_with_auth
+
+        block = MCPToolBlock()
+        input_data = MCPToolBlock.Input(
+            server_url=url,
+            selected_tool="echo",
+            tool_input_schema={
+                "type": "object",
+                "properties": {"message": {"type": "string"}},
+                "required": ["message"],
+            },
+            tool_arguments={"message": "Authenticated!"},
+            credentials={  # type: ignore
+                "provider": "mcp",
+                "id": "test",
+                "type": "api_key",
+                "title": "test",
+            },
+        )
+
+        outputs = []
+        async for name, data in block.run(
+            input_data, credentials=_make_fake_creds(api_key=token)
+        ):
+            outputs.append((name, data))
+
+        assert len(outputs) == 1
+        assert outputs[0][0] == "result"
+        assert outputs[0][1] == "Authenticated!"

autogpt_platform/backend/backend/blocks/mcp/test_mcp.py

@@ -0,0 +1,536 @@
+"""
+Tests for MCP client and MCPToolBlock.
+"""
+
+import json
+from unittest.mock import AsyncMock, patch
+
+import pytest
+
+from backend.blocks.mcp.block import MCPToolBlock, TEST_CREDENTIALS, TEST_CREDENTIALS_INPUT
+from backend.blocks.mcp.client import MCPCallResult, MCPClient, MCPClientError, MCPTool
+from backend.util.test import execute_block_test
+
+
+# ── MCPClient unit tests ─────────────────────────────────────────────
+
+
+class TestMCPClient:
+    """Tests for the MCP HTTP client."""
+
+    def test_build_headers_without_auth(self):
+        client = MCPClient("https://mcp.example.com")
+        headers = client._build_headers()
+        assert "Authorization" not in headers
+        assert headers["Content-Type"] == "application/json"
+
+    def test_build_headers_with_auth(self):
+        client = MCPClient("https://mcp.example.com", auth_token="my-token")
+        headers = client._build_headers()
+        assert headers["Authorization"] == "Bearer my-token"
+
+    def test_build_jsonrpc_request(self):
+        client = MCPClient("https://mcp.example.com")
+        req = client._build_jsonrpc_request("tools/list")
+        assert req["jsonrpc"] == "2.0"
+        assert req["method"] == "tools/list"
+        assert "id" in req
+        assert "params" not in req
+
+    def test_build_jsonrpc_request_with_params(self):
+        client = MCPClient("https://mcp.example.com")
+        req = client._build_jsonrpc_request(
+            "tools/call", {"name": "test", "arguments": {"x": 1}}
+        )
+        assert req["params"] == {"name": "test", "arguments": {"x": 1}}
+
+    def test_request_id_increments(self):
+        client = MCPClient("https://mcp.example.com")
+        req1 = client._build_jsonrpc_request("tools/list")
+        req2 = client._build_jsonrpc_request("tools/list")
+        assert req2["id"] > req1["id"]
+
+    def test_server_url_trailing_slash_stripped(self):
+        client = MCPClient("https://mcp.example.com/mcp/")
+        assert client.server_url == "https://mcp.example.com/mcp"
+
+    @pytest.mark.asyncio
+    async def test_send_request_success(self):
+        client = MCPClient("https://mcp.example.com")
+
+        mock_response = AsyncMock()
+        mock_response.json.return_value = {
+            "jsonrpc": "2.0",
+            "result": {"tools": []},
+            "id": 1,
+        }
+
+        with patch.object(client, "_send_request", return_value={"tools": []}):
+            result = await client._send_request("tools/list")
+            assert result == {"tools": []}
+
+    @pytest.mark.asyncio
+    async def test_send_request_error(self):
+        client = MCPClient("https://mcp.example.com")
+
+        async def mock_send(*args, **kwargs):
+            raise MCPClientError("MCP server error [-32600]: Invalid Request")
+
+        with patch.object(client, "_send_request", side_effect=mock_send):
+            with pytest.raises(MCPClientError, match="Invalid Request"):
+                await client._send_request("tools/list")
+
+    @pytest.mark.asyncio
+    async def test_list_tools(self):
+        client = MCPClient("https://mcp.example.com")
+
+        mock_result = {
+            "tools": [
+                {
+                    "name": "get_weather",
+                    "description": "Get current weather for a city",
+                    "inputSchema": {
+                        "type": "object",
+                        "properties": {"city": {"type": "string"}},
+                        "required": ["city"],
+                    },
+                },
+                {
+                    "name": "search",
+                    "description": "Search the web",
+                    "inputSchema": {
+                        "type": "object",
+                        "properties": {"query": {"type": "string"}},
+                        "required": ["query"],
+                    },
+                },
+            ]
+        }
+
+        with patch.object(client, "_send_request", return_value=mock_result):
+            tools = await client.list_tools()
+
+        assert len(tools) == 2
+        assert tools[0].name == "get_weather"
+        assert tools[0].description == "Get current weather for a city"
+        assert tools[0].input_schema["properties"]["city"]["type"] == "string"
+        assert tools[1].name == "search"
+
+    @pytest.mark.asyncio
+    async def test_list_tools_empty(self):
+        client = MCPClient("https://mcp.example.com")
+
+        with patch.object(client, "_send_request", return_value={"tools": []}):
+            tools = await client.list_tools()
+
+        assert tools == []
+
+    @pytest.mark.asyncio
+    async def test_list_tools_none_result(self):
+        client = MCPClient("https://mcp.example.com")
+
+        with patch.object(client, "_send_request", return_value=None):
+            tools = await client.list_tools()
+
+        assert tools == []
+
+    @pytest.mark.asyncio
+    async def test_call_tool_success(self):
+        client = MCPClient("https://mcp.example.com")
+
+        mock_result = {
+            "content": [
+                {"type": "text", "text": json.dumps({"temp": 20, "city": "London"})}
+            ],
+            "isError": False,
+        }
+
+        with patch.object(client, "_send_request", return_value=mock_result):
+            result = await client.call_tool("get_weather", {"city": "London"})
+
+        assert not result.is_error
+        assert len(result.content) == 1
+        assert result.content[0]["type"] == "text"
+
+    @pytest.mark.asyncio
+    async def test_call_tool_error(self):
+        client = MCPClient("https://mcp.example.com")
+
+        mock_result = {
+            "content": [{"type": "text", "text": "City not found"}],
+            "isError": True,
+        }
+
+        with patch.object(client, "_send_request", return_value=mock_result):
+            result = await client.call_tool("get_weather", {"city": "???"})
+
+        assert result.is_error
+
+    @pytest.mark.asyncio
+    async def test_call_tool_none_result(self):
+        client = MCPClient("https://mcp.example.com")
+
+        with patch.object(client, "_send_request", return_value=None):
+            result = await client.call_tool("get_weather", {"city": "London"})
+
+        assert result.is_error
+
+    @pytest.mark.asyncio
+    async def test_initialize(self):
+        client = MCPClient("https://mcp.example.com")
+
+        mock_result = {
+            "protocolVersion": "2025-03-26",
+            "capabilities": {"tools": {}},
+            "serverInfo": {"name": "test-server", "version": "1.0.0"},
+        }
+
+        with (
+            patch.object(
+                client, "_send_request", return_value=mock_result
+            ) as mock_req,
+            patch.object(client, "_send_notification") as mock_notif,
+        ):
+            result = await client.initialize()
+
+        mock_req.assert_called_once()
+        mock_notif.assert_called_once_with("notifications/initialized")
+        assert result["protocolVersion"] == "2025-03-26"
+
+
+# ── MCPToolBlock unit tests ──────────────────────────────────────────
+
+
+class TestMCPToolBlock:
+    """Tests for the MCPToolBlock."""
+
+    def test_block_instantiation(self):
+        block = MCPToolBlock()
+        assert block.id == "a0a4b1c2-d3e4-4f56-a7b8-c9d0e1f2a3b4"
+        assert block.name == "MCPToolBlock"
+
+    def test_input_schema_has_required_fields(self):
+        block = MCPToolBlock()
+        schema = block.input_schema.jsonschema()
+        props = schema.get("properties", {})
+        assert "server_url" in props
+        assert "selected_tool" in props
+        assert "tool_arguments" in props
+        assert "credentials" in props
+
+    def test_output_schema(self):
+        block = MCPToolBlock()
+        schema = block.output_schema.jsonschema()
+        props = schema.get("properties", {})
+        assert "result" in props
+        assert "error" in props
+
+    def test_get_input_schema_with_tool_schema(self):
+        tool_schema = {
+            "type": "object",
+            "properties": {"query": {"type": "string"}},
+            "required": ["query"],
+        }
+        data = {"tool_input_schema": tool_schema}
+        result = MCPToolBlock.Input.get_input_schema(data)
+        assert result == tool_schema
+
+    def test_get_input_schema_without_tool_schema(self):
+        result = MCPToolBlock.Input.get_input_schema({})
+        assert result == {}
+
+    def test_get_input_defaults(self):
+        data = {"tool_arguments": {"city": "London"}}
+        result = MCPToolBlock.Input.get_input_defaults(data)
+        assert result == {"city": "London"}
+
+    def test_get_missing_input(self):
+        data = {
+            "tool_input_schema": {
+                "type": "object",
+                "properties": {
+                    "city": {"type": "string"},
+                    "units": {"type": "string"},
+                },
+                "required": ["city", "units"],
+            },
+            "city": "London",
+        }
+        missing = MCPToolBlock.Input.get_missing_input(data)
+        assert missing == {"units"}
+
+    def test_get_missing_input_all_present(self):
+        data = {
+            "tool_input_schema": {
+                "type": "object",
+                "properties": {"city": {"type": "string"}},
+                "required": ["city"],
+            },
+            "city": "London",
+        }
+        missing = MCPToolBlock.Input.get_missing_input(data)
+        assert missing == set()
+
+    @pytest.mark.asyncio
+    async def test_run_with_mock(self):
+        """Test the block using the built-in test infrastructure."""
+        block = MCPToolBlock()
+        await execute_block_test(block)
+
+    @pytest.mark.asyncio
+    async def test_run_missing_server_url(self):
+        block = MCPToolBlock()
+        input_data = MCPToolBlock.Input(
+            server_url="",
+            selected_tool="test",
+            credentials=TEST_CREDENTIALS_INPUT,  # type: ignore
+        )
+        outputs = []
+        async for name, data in block.run(
+            input_data, credentials=TEST_CREDENTIALS
+        ):
+            outputs.append((name, data))
+        assert outputs == [("error", "MCP server URL is required")]
+
+    @pytest.mark.asyncio
+    async def test_run_missing_tool(self):
+        block = MCPToolBlock()
+        input_data = MCPToolBlock.Input(
+            server_url="https://mcp.example.com/mcp",
+            selected_tool="",
+            credentials=TEST_CREDENTIALS_INPUT,  # type: ignore
+        )
+        outputs = []
+        async for name, data in block.run(
+            input_data, credentials=TEST_CREDENTIALS
+        ):
+            outputs.append((name, data))
+        assert outputs == [
+            ("error", "No tool selected. Please select a tool from the dropdown.")
+        ]
+
+    @pytest.mark.asyncio
+    async def test_run_success(self):
+        block = MCPToolBlock()
+        input_data = MCPToolBlock.Input(
+            server_url="https://mcp.example.com/mcp",
+            selected_tool="get_weather",
+            tool_input_schema={
+                "type": "object",
+                "properties": {"city": {"type": "string"}},
+            },
+            tool_arguments={"city": "London"},
+            credentials=TEST_CREDENTIALS_INPUT,  # type: ignore
+        )
+
+        async def mock_call(*args, **kwargs):
+            return {"temp": 20, "city": "London"}
+
+        block._call_mcp_tool = mock_call  # type: ignore
+
+        outputs = []
+        async for name, data in block.run(
+            input_data, credentials=TEST_CREDENTIALS
+        ):
+            outputs.append((name, data))
+
+        assert len(outputs) == 1
+        assert outputs[0][0] == "result"
+        assert outputs[0][1] == {"temp": 20, "city": "London"}
+
+    @pytest.mark.asyncio
+    async def test_run_mcp_error(self):
+        block = MCPToolBlock()
+        input_data = MCPToolBlock.Input(
+            server_url="https://mcp.example.com/mcp",
+            selected_tool="bad_tool",
+            credentials=TEST_CREDENTIALS_INPUT,  # type: ignore
+        )
+
+        async def mock_call(*args, **kwargs):
+            raise MCPClientError("Tool not found")
+
+        block._call_mcp_tool = mock_call  # type: ignore
+
+        outputs = []
+        async for name, data in block.run(
+            input_data, credentials=TEST_CREDENTIALS
+        ):
+            outputs.append((name, data))
+
+        assert outputs[0][0] == "error"
+        assert "Tool not found" in outputs[0][1]
+
+    @pytest.mark.asyncio
+    async def test_call_mcp_tool_parses_json_text(self):
+        block = MCPToolBlock()
+
+        mock_result = MCPCallResult(
+            content=[
+                {"type": "text", "text": '{"temp": 20}'},
+            ],
+            is_error=False,
+        )
+
+        async def mock_init(self):
+            return {}
+
+        async def mock_call(self, name, args):
+            return mock_result
+
+        with (
+            patch.object(MCPClient, "initialize", mock_init),
+            patch.object(MCPClient, "call_tool", mock_call),
+        ):
+            result = await block._call_mcp_tool(
+                "https://mcp.example.com", "test_tool", {}
+            )
+
+        assert result == {"temp": 20}
+
+    @pytest.mark.asyncio
+    async def test_call_mcp_tool_plain_text(self):
+        block = MCPToolBlock()
+
+        mock_result = MCPCallResult(
+            content=[
+                {"type": "text", "text": "Hello, world!"},
+            ],
+            is_error=False,
+        )
+
+        async def mock_init(self):
+            return {}
+
+        async def mock_call(self, name, args):
+            return mock_result
+
+        with (
+            patch.object(MCPClient, "initialize", mock_init),
+            patch.object(MCPClient, "call_tool", mock_call),
+        ):
+            result = await block._call_mcp_tool(
+                "https://mcp.example.com", "test_tool", {}
+            )
+
+        assert result == "Hello, world!"
+
+    @pytest.mark.asyncio
+    async def test_call_mcp_tool_multiple_content(self):
+        block = MCPToolBlock()
+
+        mock_result = MCPCallResult(
+            content=[
+                {"type": "text", "text": "Part 1"},
+                {"type": "text", "text": '{"part": 2}'},
+            ],
+            is_error=False,
+        )
+
+        async def mock_init(self):
+            return {}
+
+        async def mock_call(self, name, args):
+            return mock_result
+
+        with (
+            patch.object(MCPClient, "initialize", mock_init),
+            patch.object(MCPClient, "call_tool", mock_call),
+        ):
+            result = await block._call_mcp_tool(
+                "https://mcp.example.com", "test_tool", {}
+            )
+
+        assert result == ["Part 1", {"part": 2}]
+
+    @pytest.mark.asyncio
+    async def test_call_mcp_tool_error_result(self):
+        block = MCPToolBlock()
+
+        mock_result = MCPCallResult(
+            content=[{"type": "text", "text": "Something went wrong"}],
+            is_error=True,
+        )
+
+        async def mock_init(self):
+            return {}
+
+        async def mock_call(self, name, args):
+            return mock_result
+
+        with (
+            patch.object(MCPClient, "initialize", mock_init),
+            patch.object(MCPClient, "call_tool", mock_call),
+        ):
+            with pytest.raises(MCPClientError, match="returned an error"):
+                await block._call_mcp_tool(
+                    "https://mcp.example.com", "test_tool", {}
+                )
+
+    @pytest.mark.asyncio
+    async def test_call_mcp_tool_image_content(self):
+        block = MCPToolBlock()
+
+        mock_result = MCPCallResult(
+            content=[
+                {
+                    "type": "image",
+                    "data": "base64data==",
+                    "mimeType": "image/png",
+                }
+            ],
+            is_error=False,
+        )
+
+        async def mock_init(self):
+            return {}
+
+        async def mock_call(self, name, args):
+            return mock_result
+
+        with (
+            patch.object(MCPClient, "initialize", mock_init),
+            patch.object(MCPClient, "call_tool", mock_call),
+        ):
+            result = await block._call_mcp_tool(
+                "https://mcp.example.com", "test_tool", {}
+            )
+
+        assert result == {
+            "type": "image",
+            "data": "base64data==",
+            "mimeType": "image/png",
+        }
+
+    @pytest.mark.asyncio
+    async def test_run_skips_placeholder_credentials(self):
+        """Ensure placeholder API keys are not sent to the MCP server."""
+        from backend.data.model import APIKeyCredentials
+        from pydantic import SecretStr
+
+        block = MCPToolBlock()
+        input_data = MCPToolBlock.Input(
+            server_url="https://mcp.example.com/mcp",
+            selected_tool="test_tool",
+            credentials=TEST_CREDENTIALS_INPUT,  # type: ignore
+        )
+
+        placeholder_creds = APIKeyCredentials(
+            id="test-id",
+            provider="mcp",
+            api_key=SecretStr("FAKE_API_KEY"),
+            title="Placeholder",
+        )
+
+        captured_tokens = []
+
+        async def mock_call(server_url, tool_name, arguments, auth_token=None):
+            captured_tokens.append(auth_token)
+            return "ok"
+
+        block._call_mcp_tool = mock_call  # type: ignore
+
+        async for _ in block.run(input_data, credentials=placeholder_creds):
+            pass
+
+        assert captured_tokens == [None]

autogpt_platform/backend/backend/blocks/mcp/test_server.py

@@ -0,0 +1,163 @@
+"""
+Minimal MCP server for integration testing.
+
+Implements the MCP Streamable HTTP transport (JSON-RPC 2.0 over HTTP POST)
+with a few sample tools. Runs on localhost with a random available port.
+"""
+
+import json
+import logging
+from aiohttp import web
+
+logger = logging.getLogger(__name__)
+
+# Sample tools this test server exposes
+TEST_TOOLS = [
+    {
+        "name": "get_weather",
+        "description": "Get current weather for a city",
+        "inputSchema": {
+            "type": "object",
+            "properties": {
+                "city": {
+                    "type": "string",
+                    "description": "City name",
+                },
+            },
+            "required": ["city"],
+        },
+    },
+    {
+        "name": "add_numbers",
+        "description": "Add two numbers together",
+        "inputSchema": {
+            "type": "object",
+            "properties": {
+                "a": {"type": "number", "description": "First number"},
+                "b": {"type": "number", "description": "Second number"},
+            },
+            "required": ["a", "b"],
+        },
+    },
+    {
+        "name": "echo",
+        "description": "Echo back the input message",
+        "inputSchema": {
+            "type": "object",
+            "properties": {
+                "message": {"type": "string", "description": "Message to echo"},
+            },
+            "required": ["message"],
+        },
+    },
+]
+
+
+def _handle_initialize(params: dict) -> dict:
+    return {
+        "protocolVersion": "2025-03-26",
+        "capabilities": {"tools": {"listChanged": False}},
+        "serverInfo": {"name": "test-mcp-server", "version": "1.0.0"},
+    }
+
+
+def _handle_tools_list(params: dict) -> dict:
+    return {"tools": TEST_TOOLS}
+
+
+def _handle_tools_call(params: dict) -> dict:
+    tool_name = params.get("name", "")
+    arguments = params.get("arguments", {})
+
+    if tool_name == "get_weather":
+        city = arguments.get("city", "Unknown")
+        return {
+            "content": [
+                {
+                    "type": "text",
+                    "text": json.dumps(
+                        {"city": city, "temperature": 22, "condition": "sunny"}
+                    ),
+                }
+            ],
+        }
+
+    elif tool_name == "add_numbers":
+        a = arguments.get("a", 0)
+        b = arguments.get("b", 0)
+        return {
+            "content": [{"type": "text", "text": json.dumps({"result": a + b})}],
+        }
+
+    elif tool_name == "echo":
+        message = arguments.get("message", "")
+        return {
+            "content": [{"type": "text", "text": message}],
+        }
+
+    else:
+        return {
+            "content": [{"type": "text", "text": f"Unknown tool: {tool_name}"}],
+            "isError": True,
+        }
+
+
+HANDLERS = {
+    "initialize": _handle_initialize,
+    "tools/list": _handle_tools_list,
+    "tools/call": _handle_tools_call,
+}
+
+
+async def handle_mcp_request(request: web.Request) -> web.Response:
+    """Handle incoming MCP JSON-RPC 2.0 requests."""
+    # Check auth if configured
+    expected_token = request.app.get("auth_token")
+    if expected_token:
+        auth_header = request.headers.get("Authorization", "")
+        if auth_header != f"Bearer {expected_token}":
+            return web.json_response(
+                {
+                    "jsonrpc": "2.0",
+                    "error": {"code": -32001, "message": "Unauthorized"},
+                    "id": None,
+                },
+                status=401,
+            )
+
+    body = await request.json()
+
+    # Handle notifications (no id field) — just acknowledge
+    if "id" not in body:
+        return web.Response(status=202)
+
+    method = body.get("method", "")
+    params = body.get("params", {})
+    request_id = body.get("id")
+
+    handler = HANDLERS.get(method)
+    if not handler:
+        return web.json_response(
+            {
+                "jsonrpc": "2.0",
+                "error": {
+                    "code": -32601,
+                    "message": f"Method not found: {method}",
+                },
+                "id": request_id,
+            }
+        )
+
+    result = handler(params)
+    return web.json_response(
+        {"jsonrpc": "2.0", "result": result, "id": request_id}
+    )
+
+
+def create_test_mcp_app(auth_token: str | None = None) -> web.Application:
+    """Create an aiohttp app that acts as an MCP server."""
+    app = web.Application()
+    app.router.add_post("/mcp", handle_mcp_request)
+    if auth_token:
+        app["auth_token"] = auth_token
+    return app

autogpt_platform/backend/backend/integrations/providers.py

@@ -30,6 +30,7 @@ class ProviderName(str, Enum):
     IDEOGRAM = "ideogram"
     JINA = "jina"
     LLAMA_API = "llama_api"
+    MCP = "mcp"
     MEDIUM = "medium"
     MEM0 = "mem0"
     NOTION = "notion"

autogpt_platform/frontend/package.json

@@ -30,7 +30,6 @@
     "defaults"
   ],
   "dependencies": {
-    "@ai-sdk/react": "3.0.61",
     "@faker-js/faker": "10.0.0",
     "@hookform/resolvers": "5.2.2",
     "@next/third-parties": "15.4.6",
@@ -61,10 +60,6 @@
     "@rjsf/utils": "6.1.2",
     "@rjsf/validator-ajv8": "6.1.2",
     "@sentry/nextjs": "10.27.0",
-    "@streamdown/cjk": "1.0.1",
-    "@streamdown/code": "1.0.1",
-    "@streamdown/math": "1.0.1",
-    "@streamdown/mermaid": "1.0.1",
     "@supabase/ssr": "0.7.0",
     "@supabase/supabase-js": "2.78.0",
     "@tanstack/react-query": "5.90.6",
@@ -73,7 +68,6 @@
     "@vercel/analytics": "1.5.0",
     "@vercel/speed-insights": "1.2.0",
     "@xyflow/react": "12.9.2",
-    "ai": "6.0.59",
     "boring-avatars": "1.11.2",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
@@ -118,11 +112,9 @@
     "remark-math": "6.0.0",
     "shepherd.js": "14.5.1",
     "sonner": "2.0.7",
-    "streamdown": "2.1.0",
     "tailwind-merge": "2.6.0",
     "tailwind-scrollbar": "3.1.0",
     "tailwindcss-animate": "1.0.7",
-    "use-stick-to-bottom": "1.1.2",
     "uuid": "11.1.0",
     "vaul": "1.1.2",
     "zod": "3.25.76",

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

@@ -1,71 +0,0 @@
-"use client";
-import { ChatInput } from "@/components/contextual/Chat/components/ChatInput/ChatInput";
-import { UIDataTypes, UIMessage, UITools } from "ai";
-import { LayoutGroup, motion } from "framer-motion";
-import { ChatMessagesContainer } from "../ChatMessagesContainer/ChatMessagesContainer";
-import { CopilotChatActionsProvider } from "../CopilotChatActionsProvider/CopilotChatActionsProvider";
-import { EmptySession } from "../EmptySession/EmptySession";
-
-export interface ChatContainerProps {
-  messages: UIMessage<unknown, UIDataTypes, UITools>[];
-  status: string;
-  error: Error | undefined;
-  sessionId: string | null;
-  isLoadingSession: boolean;
-  isCreatingSession: boolean;
-  onCreateSession: () => void | Promise<string>;
-  onSend: (message: string) => void | Promise<void>;
-}
-export const ChatContainer = ({
-  messages,
-  status,
-  error,
-  sessionId,
-  isLoadingSession,
-  isCreatingSession,
-  onCreateSession,
-  onSend,
-}: ChatContainerProps) => {
-  const inputLayoutId = "copilot-2-chat-input";
-
-  return (
-    <CopilotChatActionsProvider onSend={onSend}>
-      <LayoutGroup id="copilot-2-chat-layout">
-        <div className="flex h-full min-h-0 w-full flex-col bg-[#f8f8f9] px-2 lg:px-0">
-          {sessionId ? (
-            <div className="mx-auto flex h-full min-h-0 w-full max-w-3xl flex-col">
-              <ChatMessagesContainer
-                messages={messages}
-                status={status}
-                error={error}
-                isLoading={isLoadingSession}
-              />
-              <motion.div
-                layoutId={inputLayoutId}
-                transition={{ type: "spring", bounce: 0.2, duration: 0.65 }}
-                className="relative px-3 pb-2 pt-2"
-              >
-                <div className="pointer-events-none absolute left-0 right-0 top-[-18px] z-10 h-6 bg-gradient-to-b from-transparent to-[#f8f8f9]" />
-                <ChatInput
-                  inputId="chat-input-session"
-                  onSend={onSend}
-                  disabled={status === "streaming"}
-                  isStreaming={status === "streaming"}
-                  onStop={() => {}}
-                  placeholder="What else can I help with?"
-                />
-              </motion.div>
-            </div>
-          ) : (
-            <EmptySession
-              inputLayoutId={inputLayoutId}
-              isCreatingSession={isCreatingSession}
-              onCreateSession={onCreateSession}
-              onSend={onSend}
-            />
-          )}
-        </div>
-      </LayoutGroup>
-    </CopilotChatActionsProvider>
-  );
-};

autogpt_platform/frontend/src/app/(platform)/copilot-2/components/ChatMessagesContainer/ChatMessagesContainer.tsx

@@ -1,144 +0,0 @@
-import {
-  Conversation,
-  ConversationContent,
-  ConversationScrollButton,
-} from "@/components/ai-elements/conversation";
-import {
-  Message,
-  MessageContent,
-  MessageResponse,
-} from "@/components/ai-elements/message";
-import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
-import { UIDataTypes, UIMessage, UITools, ToolUIPart } from "ai";
-import { FindBlocksTool } from "../../tools/FindBlocks/FindBlocks";
-import { FindAgentsTool } from "../../tools/FindAgents/FindAgents";
-import { SearchDocsTool } from "../../tools/SearchDocs/SearchDocs";
-import { RunBlockTool } from "../../tools/RunBlock/RunBlock";
-import { RunAgentTool } from "../../tools/RunAgent/RunAgent";
-import { ViewAgentOutputTool } from "../../tools/ViewAgentOutput/ViewAgentOutput";
-import { CreateAgentTool } from "../../tools/CreateAgent/CreateAgent";
-import { EditAgentTool } from "../../tools/EditAgent/EditAgent";
-
-interface ChatMessagesContainerProps {
-  messages: UIMessage<unknown, UIDataTypes, UITools>[];
-  status: string;
-  error: Error | undefined;
-  isLoading: boolean;
-}
-
-export const ChatMessagesContainer = ({
-  messages,
-  status,
-  error,
-  isLoading,
-}: ChatMessagesContainerProps) => {
-  return (
-    <Conversation className="min-h-0 flex-1">
-      <ConversationContent className="gap-6 px-3 py-6">
-        {isLoading && messages.length === 0 && (
-          <div className="flex flex-1 items-center justify-center">
-            <LoadingSpinner size="large" className="text-neutral-400" />
-          </div>
-        )}
-        {messages.map((message) => (
-          <Message from={message.role} key={message.id}>
-            <MessageContent
-              className={
-                "text-[1rem] leading-relaxed " +
-                "group-[.is-user]:rounded-xl group-[.is-user]:bg-purple-100 group-[.is-user]:px-3 group-[.is-user]:py-2.5 group-[.is-user]:text-slate-900 group-[.is-user]:[border-bottom-right-radius:0] " +
-                "group-[.is-assistant]:bg-transparent group-[.is-assistant]:text-slate-900"
-              }
-            >
-              {message.parts.map((part, i) => {
-                switch (part.type) {
-                  case "text":
-                    return (
-                      <MessageResponse key={`${message.id}-${i}`}>
-                        {part.text}
-                      </MessageResponse>
-                    );
-                  case "tool-find_block":
-                    return (
-                      <FindBlocksTool
-                        key={`${message.id}-${i}`}
-                        part={part as ToolUIPart}
-                      />
-                    );
-                  case "tool-find_agent":
-                  case "tool-find_library_agent":
-                    return (
-                      <FindAgentsTool
-                        key={`${message.id}-${i}`}
-                        part={part as ToolUIPart}
-                      />
-                    );
-                  case "tool-search_docs":
-                  case "tool-get_doc_page":
-                    return (
-                      <SearchDocsTool
-                        key={`${message.id}-${i}`}
-                        part={part as ToolUIPart}
-                      />
-                    );
-                  case "tool-run_block":
-                    return (
-                      <RunBlockTool
-                        key={`${message.id}-${i}`}
-                        part={part as ToolUIPart}
-                      />
-                    );
-                  case "tool-run_agent":
-                  case "tool-schedule_agent":
-                    return (
-                      <RunAgentTool
-                        key={`${message.id}-${i}`}
-                        part={part as ToolUIPart}
-                      />
-                    );
-                  case "tool-create_agent":
-                    return (
-                      <CreateAgentTool
-                        key={`${message.id}-${i}`}
-                        part={part as ToolUIPart}
-                      />
-                    );
-                  case "tool-edit_agent":
-                    return (
-                      <EditAgentTool
-                        key={`${message.id}-${i}`}
-                        part={part as ToolUIPart}
-                      />
-                    );
-                  case "tool-view_agent_output":
-                    return (
-                      <ViewAgentOutputTool
-                        key={`${message.id}-${i}`}
-                        part={part as ToolUIPart}
-                      />
-                    );
-                  default:
-                    return null;
-                }
-              })}
-            </MessageContent>
-          </Message>
-        ))}
-        {status === "submitted" && (
-          <Message from="assistant">
-            <MessageContent className="text-[1rem] leading-relaxed">
-              <span className="inline-block animate-shimmer bg-gradient-to-r from-neutral-400 via-neutral-600 to-neutral-400 bg-[length:200%_100%] bg-clip-text text-transparent">
-                Thinking...
-              </span>
-            </MessageContent>
-          </Message>
-        )}
-        {error && (
-          <div className="rounded-lg bg-red-50 p-3 text-red-600">
-            Error: {error.message}
-          </div>
-        )}
-      </ConversationContent>
-      <ConversationScrollButton />
-    </Conversation>
-  );
-};

autogpt_platform/frontend/src/app/(platform)/copilot-2/components/ChatSidebar/ChatSidebar.tsx

@@ -1,191 +0,0 @@
-"use client";
-import { useGetV2ListSessions } from "@/app/api/__generated__/endpoints/chat/chat";
-import { Button } from "@/components/atoms/Button/Button";
-import { Text } from "@/components/atoms/Text/Text";
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarHeader,
-  SidebarTrigger,
-  useSidebar,
-} from "@/components/ui/sidebar";
-import { cn } from "@/lib/utils";
-import {
-  PlusCircleIcon,
-  PlusIcon,
-  SpinnerGapIcon,
-} from "@phosphor-icons/react";
-import { motion } from "framer-motion";
-import { parseAsString, useQueryState } from "nuqs";
-
-export function ChatSidebar() {
-  const { state } = useSidebar();
-  const isCollapsed = state === "collapsed";
-  const [sessionId, setSessionId] = useQueryState("sessionId", parseAsString);
-
-  const { data: sessionsResponse, isLoading: isLoadingSessions } =
-    useGetV2ListSessions({ limit: 50 });
-
-  const sessions =
-    sessionsResponse?.status === 200 ? sessionsResponse.data.sessions : [];
-
-  function handleNewChat() {
-    setSessionId(null);
-  }
-
-  function handleSelectSession(id: string) {
-    setSessionId(id);
-  }
-
-  function formatDate(dateString: string) {
-    const date = new Date(dateString);
-    const now = new Date();
-    const diffMs = now.getTime() - date.getTime();
-    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
-
-    if (diffDays === 0) return "Today";
-    if (diffDays === 1) return "Yesterday";
-    if (diffDays < 7) return `${diffDays} days ago`;
-
-    const day = date.getDate();
-    const ordinal =
-      day % 10 === 1 && day !== 11
-        ? "st"
-        : day % 10 === 2 && day !== 12
-          ? "nd"
-          : day % 10 === 3 && day !== 13
-            ? "rd"
-            : "th";
-    const month = date.toLocaleDateString("en-US", { month: "short" });
-    const year = date.getFullYear();
-
-    return `${day}${ordinal} ${month} ${year}`;
-  }
-
-  return (
-    <Sidebar
-      variant="inset"
-      collapsible="icon"
-      className="!top-[50px] !h-[calc(100vh-50px)] border-r border-zinc-100 px-0"
-    >
-      {isCollapsed && (
-        <SidebarHeader
-          className={cn(
-            "flex",
-            isCollapsed
-              ? "flex-row items-center justify-between gap-y-4 md:flex-col md:items-start md:justify-start"
-              : "flex-row items-center justify-between",
-          )}
-        >
-          <motion.div
-            key={isCollapsed ? "header-collapsed" : "header-expanded"}
-            className="flex flex-col items-center gap-3 pt-4"
-            initial={{ opacity: 0, filter: "blur(3px)" }}
-            animate={{ opacity: 1, filter: "blur(0px)" }}
-            transition={{ type: "spring", bounce: 0.2 }}
-          >
-            <div className="flex flex-col items-center gap-2">
-              <SidebarTrigger />
-              <Button
-                variant="ghost"
-                onClick={handleNewChat}
-                style={{ minWidth: "auto", width: "auto" }}
-              >
-                <PlusCircleIcon className="!size-5" />
-                <span className="sr-only">New Chat</span>
-              </Button>
-            </div>
-          </motion.div>
-        </SidebarHeader>
-      )}
-      <SidebarContent className="gap-4 overflow-y-auto px-4 py-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-        {!isCollapsed && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.2, delay: 0.1 }}
-            className="flex items-center justify-between px-3"
-          >
-            <Text variant="h3" size="body-medium">
-              Your chats
-            </Text>
-            <div className="relative left-6">
-              <SidebarTrigger />
-            </div>
-          </motion.div>
-        )}
-
-        {!isCollapsed && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.2, delay: 0.15 }}
-            className="mt-4 flex flex-col gap-1"
-          >
-            {isLoadingSessions ? (
-              <div className="flex items-center justify-center py-4">
-                <SpinnerGapIcon className="h-5 w-5 animate-spin text-neutral-400" />
-              </div>
-            ) : sessions.length === 0 ? (
-              <p className="py-4 text-center text-sm text-neutral-500">
-                No conversations yet
-              </p>
-            ) : (
-              sessions.map((session) => (
-                <button
-                  key={session.id}
-                  onClick={() => handleSelectSession(session.id)}
-                  className={cn(
-                    "w-full rounded-lg px-3 py-2.5 text-left transition-colors",
-                    session.id === sessionId
-                      ? "bg-zinc-100"
-                      : "hover:bg-zinc-50",
-                  )}
-                >
-                  <div className="flex min-w-0 max-w-full flex-col overflow-hidden">
-                    <div className="min-w-0 max-w-full">
-                      <Text
-                        variant="body"
-                        className={cn(
-                          "truncate font-normal",
-                          session.id === sessionId
-                            ? "text-zinc-600"
-                            : "text-zinc-800",
-                        )}
-                      >
-                        {session.title || `Untitled chat`}
-                      </Text>
-                    </div>
-                    <Text variant="small" className="text-neutral-400">
-                      {formatDate(session.updated_at)}
-                    </Text>
-                  </div>
-                </button>
-              ))
-            )}
-          </motion.div>
-        )}
-      </SidebarContent>
-      {!isCollapsed && sessionId && (
-        <SidebarFooter className="shrink-0 bg-zinc-50 p-3 pb-1 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.2, delay: 0.2 }}
-          >
-            <Button
-              variant="primary"
-              size="small"
-              onClick={handleNewChat}
-              className="w-full"
-              leftIcon={<PlusIcon className="h-4 w-4" weight="bold" />}
-            >
-              New Chat
-            </Button>
-          </motion.div>
-        </SidebarFooter>
-      )}
-    </Sidebar>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot-2/components/CopilotChatActionsProvider/CopilotChatActionsProvider.tsx

@@ -1,16 +0,0 @@
-"use client";
-
-import { CopilotChatActionsContext } from "./useCopilotChatActions";
-
-interface Props {
-  onSend: (message: string) => void | Promise<void>;
-  children: React.ReactNode;
-}
-
-export function CopilotChatActionsProvider({ onSend, children }: Props) {
-  return (
-    <CopilotChatActionsContext.Provider value={{ onSend }}>
-      {children}
-    </CopilotChatActionsContext.Provider>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot-2/components/CopilotChatActionsProvider/useCopilotChatActions.ts

@@ -1,23 +0,0 @@
-"use client";
-
-import { createContext, useContext } from "react";
-
-interface CopilotChatActions {
-  onSend: (message: string) => void | Promise<void>;
-}
-
-const CopilotChatActionsContext = createContext<CopilotChatActions | null>(
-  null,
-);
-
-export function useCopilotChatActions(): CopilotChatActions {
-  const ctx = useContext(CopilotChatActionsContext);
-  if (!ctx) {
-    throw new Error(
-      "useCopilotChatActions must be used within CopilotChatActionsProvider",
-    );
-  }
-  return ctx;
-}
-
-export { CopilotChatActionsContext };

autogpt_platform/frontend/src/app/(platform)/copilot-2/components/EmptySession/EmptySession.tsx

@@ -1,111 +0,0 @@
-"use client";
-
-import {
-  getGreetingName,
-  getInputPlaceholder,
-  getQuickActions,
-} from "@/app/(platform)/copilot/helpers";
-import { Button } from "@/components/atoms/Button/Button";
-import { Text } from "@/components/atoms/Text/Text";
-import { ChatInput } from "@/components/contextual/Chat/components/ChatInput/ChatInput";
-import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
-import { SpinnerGapIcon } from "@phosphor-icons/react";
-import { motion } from "framer-motion";
-import { useEffect, useState } from "react";
-
-interface Props {
-  inputLayoutId: string;
-  isCreatingSession: boolean;
-  onCreateSession: () => void | Promise<string>;
-  onSend: (message: string) => void | Promise<void>;
-}
-
-export function EmptySession({
-  inputLayoutId,
-  isCreatingSession,
-  onSend,
-}: Props) {
-  const { user } = useSupabase();
-  const greetingName = getGreetingName(user);
-  const quickActions = getQuickActions();
-  const [loadingAction, setLoadingAction] = useState<string | null>(null);
-  const [inputPlaceholder, setInputPlaceholder] = useState(
-    getInputPlaceholder(),
-  );
-
-  useEffect(() => {
-    setInputPlaceholder(getInputPlaceholder(window.innerWidth));
-  }, [window.innerWidth]);
-
-  async function handleQuickActionClick(action: string) {
-    if (isCreatingSession || loadingAction) return;
-
-    setLoadingAction(action);
-    try {
-      await onSend(action);
-    } finally {
-      setLoadingAction(null);
-    }
-  }
-
-  return (
-    <div className="flex h-full flex-1 items-center justify-center overflow-y-auto bg-[#f8f8f9] px-0 py-5 md:px-6 md:py-10">
-      <motion.div
-        className="w-full max-w-3xl text-center"
-        initial={{ opacity: 0, y: 14, filter: "blur(6px)" }}
-        animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
-        transition={{ type: "spring", bounce: 0.2, duration: 0.7 }}
-      >
-        <div className="mx-auto max-w-3xl">
-          <Text variant="h3" className="mb-1 !text-[1.375rem] text-zinc-700">
-            Hey, <span className="text-violet-600">{greetingName}</span>
-          </Text>
-          <Text variant="h3" className="mb-8 !font-normal">
-            Tell me about your work — I&apos;ll find what to automate.
-          </Text>
-
-          <div className="mb-6">
-            <motion.div
-              layoutId={inputLayoutId}
-              transition={{ type: "spring", bounce: 0.2, duration: 0.65 }}
-              className="w-full px-2"
-            >
-              <ChatInput
-                inputId="chat-input-empty"
-                onSend={onSend}
-                disabled={isCreatingSession}
-                placeholder={inputPlaceholder}
-                className="w-full"
-              />
-            </motion.div>
-          </div>
-        </div>
-
-        <div className="flex flex-wrap items-center justify-center gap-3 overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-          {quickActions.map((action) => (
-            <Button
-              key={action}
-              type="button"
-              variant="outline"
-              size="small"
-              onClick={() => void handleQuickActionClick(action)}
-              disabled={isCreatingSession || loadingAction !== null}
-              aria-busy={loadingAction === action}
-              leftIcon={
-                loadingAction === action ? (
-                  <SpinnerGapIcon
-                    className="h-4 w-4 animate-spin"
-                    weight="bold"
-                  />
-                ) : null
-              }
-              className="h-auto shrink-0 border-zinc-300 px-3 py-2 text-[.9rem] text-zinc-600"
-            >
-              {action}
-            </Button>
-          ))}
-        </div>
-      </motion.div>
-    </div>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot-2/components/EmptySession/helpers.ts

@@ -1,11 +0,0 @@
-export function getInputPlaceholder(width?: number) {
-  if (!width) return "What's your role and what eats up most of your day?";
-
-  if (width < 500) {
-    return "I'm a chef and I hate...";
-  }
-  if (width <= 1080) {
-    return "What's your role and what eats up most of your day?";
-  }
-  return "What's your role and what eats up most of your day? e.g. 'I'm a recruiter and I hate...'";
-}

autogpt_platform/frontend/src/app/(platform)/copilot-2/components/MobileDrawer/MobileDrawer.tsx

@@ -1,140 +0,0 @@
-import type { SessionSummaryResponse } from "@/app/api/__generated__/models/sessionSummaryResponse";
-import { Button } from "@/components/atoms/Button/Button";
-import { Text } from "@/components/atoms/Text/Text";
-import { scrollbarStyles } from "@/components/styles/scrollbars";
-import { cn } from "@/lib/utils";
-import { PlusIcon, SpinnerGapIcon, X } from "@phosphor-icons/react";
-import { Drawer } from "vaul";
-
-interface Props {
-  isOpen: boolean;
-  sessions: SessionSummaryResponse[];
-  currentSessionId: string | null;
-  isLoading: boolean;
-  onSelectSession: (sessionId: string) => void;
-  onNewChat: () => void;
-  onClose: () => void;
-  onOpenChange: (open: boolean) => void;
-}
-
-function formatDate(dateString: string) {
-  const date = new Date(dateString);
-  const now = new Date();
-  const diffMs = now.getTime() - date.getTime();
-  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
-
-  if (diffDays === 0) return "Today";
-  if (diffDays === 1) return "Yesterday";
-  if (diffDays < 7) return `${diffDays} days ago`;
-
-  const day = date.getDate();
-  const ordinal =
-    day % 10 === 1 && day !== 11
-      ? "st"
-      : day % 10 === 2 && day !== 12
-        ? "nd"
-        : day % 10 === 3 && day !== 13
-          ? "rd"
-          : "th";
-  const month = date.toLocaleDateString("en-US", { month: "short" });
-  const year = date.getFullYear();
-
-  return `${day}${ordinal} ${month} ${year}`;
-}
-
-export function MobileDrawer({
-  isOpen,
-  sessions,
-  currentSessionId,
-  isLoading,
-  onSelectSession,
-  onNewChat,
-  onClose,
-  onOpenChange,
-}: Props) {
-  return (
-    <Drawer.Root open={isOpen} onOpenChange={onOpenChange} direction="left">
-      <Drawer.Portal>
-        <Drawer.Overlay className="fixed inset-0 z-[60] bg-black/10 backdrop-blur-sm" />
-        <Drawer.Content className="fixed left-0 top-0 z-[70] flex h-full w-80 flex-col border-r border-zinc-200 bg-zinc-50">
-          <div className="shrink-0 border-b border-zinc-200 px-4 py-2">
-            <div className="flex items-center justify-between">
-              <Drawer.Title className="text-lg font-semibold text-zinc-800">
-                Your chats
-              </Drawer.Title>
-              <Button
-                variant="icon"
-                size="icon"
-                aria-label="Close sessions"
-                onClick={onClose}
-              >
-                <X width="1rem" height="1rem" />
-              </Button>
-            </div>
-          </div>
-          <div
-            className={cn(
-              "flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto px-3 py-3",
-              scrollbarStyles,
-            )}
-          >
-            {isLoading ? (
-              <div className="flex items-center justify-center py-4">
-                <SpinnerGapIcon className="h-5 w-5 animate-spin text-neutral-400" />
-              </div>
-            ) : sessions.length === 0 ? (
-              <p className="py-4 text-center text-sm text-neutral-500">
-                No conversations yet
-              </p>
-            ) : (
-              sessions.map((session) => (
-                <button
-                  key={session.id}
-                  onClick={() => onSelectSession(session.id)}
-                  className={cn(
-                    "w-full rounded-lg px-3 py-2.5 text-left transition-colors",
-                    session.id === currentSessionId
-                      ? "bg-zinc-100"
-                      : "hover:bg-zinc-50",
-                  )}
-                >
-                  <div className="flex min-w-0 max-w-full flex-col overflow-hidden">
-                    <div className="min-w-0 max-w-full">
-                      <Text
-                        variant="body"
-                        className={cn(
-                          "truncate font-normal",
-                          session.id === currentSessionId
-                            ? "text-zinc-600"
-                            : "text-zinc-800",
-                        )}
-                      >
-                        {session.title || "Untitled chat"}
-                      </Text>
-                    </div>
-                    <Text variant="small" className="text-neutral-400">
-                      {formatDate(session.updated_at)}
-                    </Text>
-                  </div>
-                </button>
-              ))
-            )}
-          </div>
-          {currentSessionId && (
-            <div className="shrink-0 bg-white p-3 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
-              <Button
-                variant="primary"
-                size="small"
-                onClick={onNewChat}
-                className="w-full"
-                leftIcon={<PlusIcon width="1rem" height="1rem" />}
-              >
-                New Chat
-              </Button>
-            </div>
-          )}
-        </Drawer.Content>
-      </Drawer.Portal>
-    </Drawer.Root>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot-2/components/MobileHeader/MobileHeader.tsx

@@ -1,22 +0,0 @@
-import { Button } from "@/components/atoms/Button/Button";
-import { NAVBAR_HEIGHT_PX } from "@/lib/constants";
-import { ListIcon } from "@phosphor-icons/react";
-
-interface Props {
-  onOpenDrawer: () => void;
-}
-
-export function MobileHeader({ onOpenDrawer }: Props) {
-  return (
-    <Button
-      variant="icon"
-      size="icon"
-      aria-label="Open sessions"
-      onClick={onOpenDrawer}
-      className="fixed z-50 bg-white shadow-md"
-      style={{ left: "1rem", top: `${NAVBAR_HEIGHT_PX + 20}px` }}
-    >
-      <ListIcon width="1.25rem" height="1.25rem" />
-    </Button>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot-2/components/MorphingTextAnimation/MorphingTextAnimation.tsx

@@ -1,54 +0,0 @@
-import { cn } from "@/lib/utils";
-import { AnimatePresence, motion } from "framer-motion";
-
-interface Props {
-  text: string;
-  className?: string;
-}
-
-export function MorphingTextAnimation({ text, className }: Props) {
-  const letters = text.split("");
-
-  return (
-    <div className={cn(className)}>
-      <AnimatePresence mode="popLayout" initial={false}>
-        <motion.div key={text} className="whitespace-nowrap">
-          <motion.span className="inline-flex overflow-hidden">
-            {letters.map((char, index) => (
-              <motion.span
-                key={`${text}-${index}`}
-                initial={{
-                  opacity: 0,
-                  y: 8,
-                  rotateX: "80deg",
-                  filter: "blur(6px)",
-                }}
-                animate={{
-                  opacity: 1,
-                  y: 0,
-                  rotateX: "0deg",
-                  filter: "blur(0px)",
-                }}
-                exit={{
-                  opacity: 0,
-                  y: -8,
-                  rotateX: "-80deg",
-                  filter: "blur(6px)",
-                }}
-                style={{ willChange: "transform" }}
-                transition={{
-                  delay: 0.015 * index,
-                  type: "spring",
-                  bounce: 0.5,
-                }}
-                className="inline-block"
-              >
-                {char === " " ? "\u00A0" : char}
-              </motion.span>
-            ))}
-          </motion.span>
-        </motion.div>
-      </AnimatePresence>
-    </div>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot-2/components/ToolAccordion/ToolAccordion.tsx

@@ -1,92 +0,0 @@
-"use client";
-
-import { cn } from "@/lib/utils";
-import { CaretDownIcon } from "@phosphor-icons/react";
-import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
-import { useId } from "react";
-import { useToolAccordion } from "./useToolAccordion";
-
-interface Props {
-  badgeText: string;
-  title: React.ReactNode;
-  description?: React.ReactNode;
-  children: React.ReactNode;
-  className?: string;
-  defaultExpanded?: boolean;
-  expanded?: boolean;
-  onExpandedChange?: (expanded: boolean) => void;
-}
-
-export function ToolAccordion({
-  badgeText,
-  title,
-  description,
-  children,
-  className,
-  defaultExpanded,
-  expanded,
-  onExpandedChange,
-}: Props) {
-  const shouldReduceMotion = useReducedMotion();
-  const contentId = useId();
-  const { isExpanded, toggle } = useToolAccordion({
-    expanded,
-    defaultExpanded,
-    onExpandedChange,
-  });
-
-  return (
-    <div className={cn("mt-2 w-full rounded-lg border px-3 py-2", className)}>
-      <button
-        type="button"
-        aria-expanded={isExpanded}
-        aria-controls={contentId}
-        onClick={toggle}
-        className="flex w-full items-center justify-between gap-3 py-1 text-left"
-      >
-        <div className="flex min-w-0 items-center gap-2">
-          <span className="px-2 py-0.5 text-[11px] font-medium text-muted-foreground">
-            {badgeText}
-          </span>
-          <div className="min-w-0">
-            <p className="truncate text-sm font-medium text-foreground">
-              {title}
-            </p>
-            {description && (
-              <p className="truncate text-xs text-muted-foreground">
-                {description}
-              </p>
-            )}
-          </div>
-        </div>
-        <CaretDownIcon
-          className={cn(
-            "h-4 w-4 shrink-0 text-muted-foreground transition-transform",
-            isExpanded && "rotate-180",
-          )}
-          weight="bold"
-        />
-      </button>
-
-      <AnimatePresence initial={false}>
-        {isExpanded && (
-          <motion.div
-            id={contentId}
-            initial={{ height: 0, opacity: 0, filter: "blur(10px)" }}
-            animate={{ height: "auto", opacity: 1, filter: "blur(0px)" }}
-            exit={{ height: 0, opacity: 0, filter: "blur(10px)" }}
-            transition={
-              shouldReduceMotion
-                ? { duration: 0 }
-                : { type: "spring", bounce: 0.35, duration: 0.55 }
-            }
-            className="overflow-hidden"
-            style={{ willChange: "height, opacity, filter" }}
-          >
-            <div className="pb-2 pt-3">{children}</div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot-2/components/ToolAccordion/useToolAccordion.ts

@@ -1,32 +0,0 @@
-import { useState } from "react";
-
-interface UseToolAccordionOptions {
-  expanded?: boolean;
-  defaultExpanded?: boolean;
-  onExpandedChange?: (expanded: boolean) => void;
-}
-
-interface UseToolAccordionResult {
-  isExpanded: boolean;
-  toggle: () => void;
-}
-
-export function useToolAccordion({
-  expanded,
-  defaultExpanded = false,
-  onExpandedChange,
-}: UseToolAccordionOptions): UseToolAccordionResult {
-  const [uncontrolledExpanded, setUncontrolledExpanded] =
-    useState(defaultExpanded);
-
-  const isControlled = typeof expanded === "boolean";
-  const isExpanded = isControlled ? expanded : uncontrolledExpanded;
-
-  function toggle() {
-    const next = !isExpanded;
-    if (!isControlled) setUncontrolledExpanded(next);
-    onExpandedChange?.(next);
-  }
-
-  return { isExpanded, toggle };
-}

autogpt_platform/frontend/src/app/(platform)/copilot-2/helpers/convertChatSessionToUiMessages.ts

@@ -1,128 +0,0 @@
-import type { UIMessage, UIDataTypes, UITools } from "ai";
-
-interface SessionChatMessage {
-  role: string;
-  content: string | null;
-  tool_call_id: string | null;
-  tool_calls: unknown[] | null;
-}
-
-function coerceSessionChatMessages(
-  rawMessages: unknown[],
-): SessionChatMessage[] {
-  return rawMessages
-    .map((m) => {
-      if (!m || typeof m !== "object") return null;
-      const msg = m as Record<string, unknown>;
-
-      const role = typeof msg.role === "string" ? msg.role : null;
-      if (!role) return null;
-
-      return {
-        role,
-        content:
-          typeof msg.content === "string"
-            ? msg.content
-            : msg.content == null
-              ? null
-              : String(msg.content),
-        tool_call_id:
-          typeof msg.tool_call_id === "string"
-            ? msg.tool_call_id
-            : msg.tool_call_id == null
-              ? null
-              : String(msg.tool_call_id),
-        tool_calls: Array.isArray(msg.tool_calls) ? msg.tool_calls : null,
-      };
-    })
-    .filter((m): m is SessionChatMessage => m !== null);
-}
-
-function safeJsonParse(value: string): unknown {
-  try {
-    return JSON.parse(value) as unknown;
-  } catch {
-    return value;
-  }
-}
-
-function toToolInput(rawArguments: unknown): unknown {
-  if (typeof rawArguments === "string") {
-    const trimmed = rawArguments.trim();
-    return trimmed ? safeJsonParse(trimmed) : {};
-  }
-  if (rawArguments && typeof rawArguments === "object") return rawArguments;
-  return {};
-}
-
-export function convertChatSessionMessagesToUiMessages(
-  sessionId: string,
-  rawMessages: unknown[],
-): UIMessage<unknown, UIDataTypes, UITools>[] {
-  const messages = coerceSessionChatMessages(rawMessages);
-  const toolOutputsByCallId = new Map<string, unknown>();
-
-  for (const msg of messages) {
-    if (msg.role !== "tool") continue;
-    if (!msg.tool_call_id) continue;
-    if (msg.content == null) continue;
-    toolOutputsByCallId.set(msg.tool_call_id, msg.content);
-  }
-
-  const uiMessages: UIMessage<unknown, UIDataTypes, UITools>[] = [];
-
-  messages.forEach((msg, index) => {
-    if (msg.role === "tool") return;
-    if (msg.role !== "user" && msg.role !== "assistant") return;
-
-    const parts: UIMessage<unknown, UIDataTypes, UITools>["parts"] = [];
-
-    if (typeof msg.content === "string" && msg.content.trim()) {
-      parts.push({ type: "text", text: msg.content, state: "done" });
-    }
-
-    if (msg.role === "assistant" && Array.isArray(msg.tool_calls)) {
-      for (const rawToolCall of msg.tool_calls) {
-        if (!rawToolCall || typeof rawToolCall !== "object") continue;
-        const toolCall = rawToolCall as {
-          id?: unknown;
-          function?: { name?: unknown; arguments?: unknown };
-        };
-
-        const toolCallId = String(toolCall.id ?? "").trim();
-        const toolName = String(toolCall.function?.name ?? "").trim();
-        if (!toolCallId || !toolName) continue;
-
-        const input = toToolInput(toolCall.function?.arguments);
-        const output = toolOutputsByCallId.get(toolCallId);
-
-        if (output !== undefined) {
-          parts.push({
-            type: `tool-${toolName}`,
-            toolCallId,
-            state: "output-available",
-            input,
-            output: typeof output === "string" ? safeJsonParse(output) : output,
-          });
-        } else {
-          parts.push({
-            type: `tool-${toolName}`,
-            toolCallId,
-            state: "input-available",
-            input,
-          });
-        }
-      }
-    }
-
-    if (parts.length === 0) return;
-
-    uiMessages.push({
-      id: `${sessionId}-${index}`,
-      role: msg.role,
-      parts,
-    });
-  });
-
-  return uiMessages;
-}

autogpt_platform/frontend/src/app/(platform)/copilot-2/page.tsx

@@ -1,67 +0,0 @@
-"use client";
-
-import { SidebarProvider } from "@/components/ui/sidebar";
-import { ChatContainer } from "./components/ChatContainer/ChatContainer";
-import { ChatSidebar } from "./components/ChatSidebar/ChatSidebar";
-import { MobileDrawer } from "./components/MobileDrawer/MobileDrawer";
-import { MobileHeader } from "./components/MobileHeader/MobileHeader";
-import { useCopilotPage } from "./useCopilotPage";
-
-export default function Page() {
-  const {
-    sessionId,
-    messages,
-    status,
-    error,
-    isLoadingSession,
-    isCreatingSession,
-    createSession,
-    onSend,
-    // Mobile drawer
-    isMobile,
-    isDrawerOpen,
-    sessions,
-    isLoadingSessions,
-    handleOpenDrawer,
-    handleCloseDrawer,
-    handleDrawerOpenChange,
-    handleSelectSession,
-    handleNewChat,
-  } = useCopilotPage();
-
-  return (
-    <SidebarProvider
-      defaultOpen={true}
-      className="h-[calc(100vh-72px)] min-h-0"
-    >
-      {!isMobile && <ChatSidebar />}
-      <div className="relative flex h-full w-full flex-col overflow-hidden bg-[#f8f8f9] px-0">
-        {isMobile && <MobileHeader onOpenDrawer={handleOpenDrawer} />}
-        <div className="flex-1 overflow-hidden">
-          <ChatContainer
-            messages={messages}
-            status={status}
-            error={error}
-            sessionId={sessionId}
-            isLoadingSession={isLoadingSession}
-            isCreatingSession={isCreatingSession}
-            onCreateSession={createSession}
-            onSend={onSend}
-          />
-        </div>
-      </div>
-      {isMobile && (
-        <MobileDrawer
-          isOpen={isDrawerOpen}
-          sessions={sessions}
-          currentSessionId={sessionId}
-          isLoading={isLoadingSessions}
-          onSelectSession={handleSelectSession}
-          onNewChat={handleNewChat}
-          onClose={handleCloseDrawer}
-          onOpenChange={handleDrawerOpenChange}
-        />
-      )}
-    </SidebarProvider>
-  );
-}

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

@@ -1,218 +0,0 @@
-"use client";
-
-import type { ToolUIPart } from "ai";
-import Link from "next/link";
-import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
-import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
-import { useCopilotChatActions } from "../../components/CopilotChatActionsProvider/useCopilotChatActions";
-import {
-  ClarificationQuestionsWidget,
-  type ClarifyingQuestion as WidgetClarifyingQuestion,
-} from "@/components/contextual/Chat/components/ClarificationQuestionsWidget/ClarificationQuestionsWidget";
-import {
-  formatMaybeJson,
-  getAnimationText,
-  getCreateAgentToolOutput,
-  isAgentPreviewOutput,
-  isAgentSavedOutput,
-  isClarificationNeededOutput,
-  isErrorOutput,
-  isOperationInProgressOutput,
-  isOperationPendingOutput,
-  isOperationStartedOutput,
-  ToolIcon,
-  truncateText,
-  type CreateAgentToolOutput,
-} from "./helpers";
-
-export interface CreateAgentToolPart {
-  type: string;
-  toolCallId: string;
-  state: ToolUIPart["state"];
-  input?: unknown;
-  output?: unknown;
-}
-
-interface Props {
-  part: CreateAgentToolPart;
-}
-
-function getAccordionMeta(output: CreateAgentToolOutput): {
-  badgeText: string;
-  title: string;
-  description?: string;
-} {
-  if (isAgentSavedOutput(output)) {
-    return { badgeText: "Create agent", title: output.agent_name };
-  }
-  if (isAgentPreviewOutput(output)) {
-    return {
-      badgeText: "Create agent",
-      title: output.agent_name,
-      description: `${output.node_count} block${output.node_count === 1 ? "" : "s"}`,
-    };
-  }
-  if (isClarificationNeededOutput(output)) {
-    const questions = output.questions ?? [];
-    return {
-      badgeText: "Create agent",
-      title: "Needs clarification",
-      description: `${questions.length} question${questions.length === 1 ? "" : "s"}`,
-    };
-  }
-  if (
-    isOperationStartedOutput(output) ||
-    isOperationPendingOutput(output) ||
-    isOperationInProgressOutput(output)
-  ) {
-    return { badgeText: "Create agent", title: "Creating agent" };
-  }
-  return { badgeText: "Create agent", title: "Error" };
-}
-
-export function CreateAgentTool({ part }: Props) {
-  const text = getAnimationText(part);
-  const { onSend } = useCopilotChatActions();
-  const isStreaming =
-    part.state === "input-streaming" || part.state === "input-available";
-
-  const output = getCreateAgentToolOutput(part);
-  const isError =
-    part.state === "output-error" || (!!output && isErrorOutput(output));
-  const hasExpandableContent =
-    part.state === "output-available" &&
-    !!output &&
-    (isOperationStartedOutput(output) ||
-      isOperationPendingOutput(output) ||
-      isOperationInProgressOutput(output) ||
-      isAgentPreviewOutput(output) ||
-      isAgentSavedOutput(output) ||
-      isClarificationNeededOutput(output) ||
-      isErrorOutput(output));
-
-  function handleClarificationAnswers(answers: Record<string, string>) {
-    const contextMessage = Object.entries(answers)
-      .map(([keyword, answer]) => `${keyword}: ${answer}`)
-      .join("\n");
-
-    onSend(
-      `I have the answers to your questions:\n\n${contextMessage}\n\nPlease proceed with creating the agent.`,
-    );
-  }
-
-  return (
-    <div className="py-2">
-      <div className="flex items-center gap-2 text-sm text-muted-foreground">
-        <ToolIcon isStreaming={isStreaming} isError={isError} />
-        <MorphingTextAnimation
-          text={text}
-          className={isError ? "text-red-500" : undefined}
-        />
-      </div>
-
-      {hasExpandableContent && output && (
-        <ToolAccordion
-          {...getAccordionMeta(output)}
-          defaultExpanded={isClarificationNeededOutput(output)}
-        >
-          {(isOperationStartedOutput(output) ||
-            isOperationPendingOutput(output)) && (
-            <div className="grid gap-2">
-              <p className="text-sm text-foreground">{output.message}</p>
-              <p className="text-xs text-muted-foreground">
-                Operation: {output.operation_id}
-              </p>
-              <p className="text-xs italic text-muted-foreground">
-                Check your library in a few minutes.
-              </p>
-            </div>
-          )}
-
-          {isOperationInProgressOutput(output) && (
-            <div className="grid gap-2">
-              <p className="text-sm text-foreground">{output.message}</p>
-              <p className="text-xs italic text-muted-foreground">
-                Please wait for the current operation to finish.
-              </p>
-            </div>
-          )}
-
-          {isAgentSavedOutput(output) && (
-            <div className="grid gap-2">
-              <p className="text-sm text-foreground">{output.message}</p>
-              <div className="flex flex-wrap gap-2">
-                <Link
-                  href={output.library_agent_link}
-                  className="text-xs font-medium text-purple-600 hover:text-purple-700"
-                >
-                  Open in library
-                </Link>
-                <Link
-                  href={output.agent_page_link}
-                  className="text-xs font-medium text-purple-600 hover:text-purple-700"
-                >
-                  Open in builder
-                </Link>
-              </div>
-              <pre className="whitespace-pre-wrap rounded-2xl border bg-muted/30 p-3 text-xs text-muted-foreground">
-                {truncateText(
-                  formatMaybeJson({ agent_id: output.agent_id }),
-                  800,
-                )}
-              </pre>
-            </div>
-          )}
-
-          {isAgentPreviewOutput(output) && (
-            <div className="grid gap-2">
-              <p className="text-sm text-foreground">{output.message}</p>
-              {output.description?.trim() && (
-                <p className="text-xs text-muted-foreground">
-                  {output.description}
-                </p>
-              )}
-              <pre className="whitespace-pre-wrap rounded-2xl border bg-muted/30 p-3 text-xs text-muted-foreground">
-                {truncateText(formatMaybeJson(output.agent_json), 1600)}
-              </pre>
-            </div>
-          )}
-
-          {isClarificationNeededOutput(output) && (
-            <ClarificationQuestionsWidget
-              questions={(output.questions ?? []).map((q) => {
-                const item: WidgetClarifyingQuestion = {
-                  question: q.question,
-                  keyword: q.keyword,
-                };
-                const example =
-                  typeof q.example === "string" && q.example.trim()
-                    ? q.example.trim()
-                    : null;
-                if (example) item.example = example;
-                return item;
-              })}
-              message={output.message}
-              onSubmitAnswers={handleClarificationAnswers}
-            />
-          )}
-
-          {isErrorOutput(output) && (
-            <div className="grid gap-2">
-              <p className="text-sm text-foreground">{output.message}</p>
-              {output.error && (
-                <pre className="whitespace-pre-wrap rounded-2xl border bg-muted/30 p-3 text-xs text-muted-foreground">
-                  {formatMaybeJson(output.error)}
-                </pre>
-              )}
-              {output.details && (
-                <pre className="whitespace-pre-wrap rounded-2xl border bg-muted/30 p-3 text-xs text-muted-foreground">
-                  {formatMaybeJson(output.details)}
-                </pre>
-              )}
-            </div>
-          )}
-        </ToolAccordion>
-      )}
-    </div>
-  );
-}

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

@@ -1,181 +0,0 @@
-import type { ToolUIPart } from "ai";
-import { PlusIcon } from "@phosphor-icons/react";
-import type { AgentPreviewResponse } from "@/app/api/__generated__/models/agentPreviewResponse";
-import type { AgentSavedResponse } from "@/app/api/__generated__/models/agentSavedResponse";
-import type { ClarificationNeededResponse } from "@/app/api/__generated__/models/clarificationNeededResponse";
-import type { ErrorResponse } from "@/app/api/__generated__/models/errorResponse";
-import type { OperationInProgressResponse } from "@/app/api/__generated__/models/operationInProgressResponse";
-import type { OperationPendingResponse } from "@/app/api/__generated__/models/operationPendingResponse";
-import type { OperationStartedResponse } from "@/app/api/__generated__/models/operationStartedResponse";
-import { ResponseType } from "@/app/api/__generated__/models/responseType";
-
-export type CreateAgentToolOutput =
-  | OperationStartedResponse
-  | OperationPendingResponse
-  | OperationInProgressResponse
-  | AgentPreviewResponse
-  | AgentSavedResponse
-  | ClarificationNeededResponse
-  | ErrorResponse;
-
-function parseOutput(output: unknown): CreateAgentToolOutput | null {
-  if (!output) return null;
-  if (typeof output === "string") {
-    const trimmed = output.trim();
-    if (!trimmed) return null;
-    try {
-      return parseOutput(JSON.parse(trimmed) as unknown);
-    } catch {
-      return null;
-    }
-  }
-  if (typeof output === "object") {
-    const type = (output as { type?: unknown }).type;
-    if (
-      type === ResponseType.operation_started ||
-      type === ResponseType.operation_pending ||
-      type === ResponseType.operation_in_progress ||
-      type === ResponseType.agent_preview ||
-      type === ResponseType.agent_saved ||
-      type === ResponseType.clarification_needed ||
-      type === ResponseType.error
-    ) {
-      return output as CreateAgentToolOutput;
-    }
-    if ("operation_id" in output && "tool_name" in output)
-      return output as OperationStartedResponse | OperationPendingResponse;
-    if ("tool_call_id" in output) return output as OperationInProgressResponse;
-    if ("agent_json" in output && "agent_name" in output)
-      return output as AgentPreviewResponse;
-    if ("agent_id" in output && "library_agent_id" in output)
-      return output as AgentSavedResponse;
-    if ("questions" in output) return output as ClarificationNeededResponse;
-    if ("error" in output || "details" in output)
-      return output as ErrorResponse;
-  }
-  return null;
-}
-
-export function getCreateAgentToolOutput(
-  part: unknown,
-): CreateAgentToolOutput | null {
-  if (!part || typeof part !== "object") return null;
-  return parseOutput((part as { output?: unknown }).output);
-}
-
-export function isOperationStartedOutput(
-  output: CreateAgentToolOutput,
-): output is OperationStartedResponse {
-  return (
-    output.type === ResponseType.operation_started ||
-    ("operation_id" in output && "tool_name" in output)
-  );
-}
-
-export function isOperationPendingOutput(
-  output: CreateAgentToolOutput,
-): output is OperationPendingResponse {
-  return output.type === ResponseType.operation_pending;
-}
-
-export function isOperationInProgressOutput(
-  output: CreateAgentToolOutput,
-): output is OperationInProgressResponse {
-  return (
-    output.type === ResponseType.operation_in_progress ||
-    "tool_call_id" in output
-  );
-}
-
-export function isAgentPreviewOutput(
-  output: CreateAgentToolOutput,
-): output is AgentPreviewResponse {
-  return output.type === ResponseType.agent_preview || "agent_json" in output;
-}
-
-export function isAgentSavedOutput(
-  output: CreateAgentToolOutput,
-): output is AgentSavedResponse {
-  return (
-    output.type === ResponseType.agent_saved || "agent_page_link" in output
-  );
-}
-
-export function isClarificationNeededOutput(
-  output: CreateAgentToolOutput,
-): output is ClarificationNeededResponse {
-  return (
-    output.type === ResponseType.clarification_needed || "questions" in output
-  );
-}
-
-export function isErrorOutput(
-  output: CreateAgentToolOutput,
-): output is ErrorResponse {
-  return output.type === ResponseType.error || "error" in output;
-}
-
-export function getAnimationText(part: {
-  state: ToolUIPart["state"];
-  input?: unknown;
-  output?: unknown;
-}): string {
-  switch (part.state) {
-    case "input-streaming":
-    case "input-available":
-      return "Creating a new agent";
-    case "output-available": {
-      const output = parseOutput(part.output);
-      if (!output) return "Creating a new agent";
-      if (isOperationStartedOutput(output)) return "Agent creation started";
-      if (isOperationPendingOutput(output)) return "Agent creation in progress";
-      if (isOperationInProgressOutput(output))
-        return "Agent creation already in progress";
-      if (isAgentSavedOutput(output)) return `Saved "${output.agent_name}"`;
-      if (isAgentPreviewOutput(output)) return `Preview "${output.agent_name}"`;
-      if (isClarificationNeededOutput(output)) return "Needs clarification";
-      return "Error creating agent";
-    }
-    case "output-error":
-      return "Error creating agent";
-    default:
-      return "Creating a new agent";
-  }
-}
-
-export function ToolIcon({
-  isStreaming,
-  isError,
-}: {
-  isStreaming?: boolean;
-  isError?: boolean;
-}) {
-  return (
-    <PlusIcon
-      size={14}
-      weight="regular"
-      className={
-        isError
-          ? "text-red-500"
-          : isStreaming
-            ? "text-neutral-500"
-            : "text-neutral-400"
-      }
-    />
-  );
-}
-
-export function formatMaybeJson(value: unknown): string {
-  if (typeof value === "string") return value;
-  try {
-    return JSON.stringify(value, null, 2);
-  } catch {
-    return String(value);
-  }
-}
-
-export function truncateText(text: string, maxChars: number): string {
-  const trimmed = text.trim();
-  if (trimmed.length <= maxChars) return trimmed;
-  return `${trimmed.slice(0, maxChars).trimEnd()}…`;
-}

autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/EditAgent/EditAgent.tsx

@@ -1,218 +0,0 @@
-"use client";
-
-import type { ToolUIPart } from "ai";
-import Link from "next/link";
-import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
-import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
-import { useCopilotChatActions } from "../../components/CopilotChatActionsProvider/useCopilotChatActions";
-import {
-  ClarificationQuestionsWidget,
-  type ClarifyingQuestion as WidgetClarifyingQuestion,
-} from "@/components/contextual/Chat/components/ClarificationQuestionsWidget/ClarificationQuestionsWidget";
-import {
-  formatMaybeJson,
-  getAnimationText,
-  getEditAgentToolOutput,
-  isAgentPreviewOutput,
-  isAgentSavedOutput,
-  isClarificationNeededOutput,
-  isErrorOutput,
-  isOperationInProgressOutput,
-  isOperationPendingOutput,
-  isOperationStartedOutput,
-  ToolIcon,
-  truncateText,
-  type EditAgentToolOutput,
-} from "./helpers";
-
-export interface EditAgentToolPart {
-  type: string;
-  toolCallId: string;
-  state: ToolUIPart["state"];
-  input?: unknown;
-  output?: unknown;
-}
-
-interface Props {
-  part: EditAgentToolPart;
-}
-
-function getAccordionMeta(output: EditAgentToolOutput): {
-  badgeText: string;
-  title: string;
-  description?: string;
-} {
-  if (isAgentSavedOutput(output)) {
-    return { badgeText: "Edit agent", title: output.agent_name };
-  }
-  if (isAgentPreviewOutput(output)) {
-    return {
-      badgeText: "Edit agent",
-      title: output.agent_name,
-      description: `${output.node_count} block${output.node_count === 1 ? "" : "s"}`,
-    };
-  }
-  if (isClarificationNeededOutput(output)) {
-    const questions = output.questions ?? [];
-    return {
-      badgeText: "Edit agent",
-      title: "Needs clarification",
-      description: `${questions.length} question${questions.length === 1 ? "" : "s"}`,
-    };
-  }
-  if (
-    isOperationStartedOutput(output) ||
-    isOperationPendingOutput(output) ||
-    isOperationInProgressOutput(output)
-  ) {
-    return { badgeText: "Edit agent", title: "Editing agent" };
-  }
-  return { badgeText: "Edit agent", title: "Error" };
-}
-
-export function EditAgentTool({ part }: Props) {
-  const text = getAnimationText(part);
-  const { onSend } = useCopilotChatActions();
-  const isStreaming =
-    part.state === "input-streaming" || part.state === "input-available";
-
-  const output = getEditAgentToolOutput(part);
-  const isError =
-    part.state === "output-error" || (!!output && isErrorOutput(output));
-  const hasExpandableContent =
-    part.state === "output-available" &&
-    !!output &&
-    (isOperationStartedOutput(output) ||
-      isOperationPendingOutput(output) ||
-      isOperationInProgressOutput(output) ||
-      isAgentPreviewOutput(output) ||
-      isAgentSavedOutput(output) ||
-      isClarificationNeededOutput(output) ||
-      isErrorOutput(output));
-
-  function handleClarificationAnswers(answers: Record<string, string>) {
-    const contextMessage = Object.entries(answers)
-      .map(([keyword, answer]) => `${keyword}: ${answer}`)
-      .join("\n");
-
-    onSend(
-      `I have the answers to your questions:\n\n${contextMessage}\n\nPlease proceed with editing the agent.`,
-    );
-  }
-
-  return (
-    <div className="py-2">
-      <div className="flex items-center gap-2 text-sm text-muted-foreground">
-        <ToolIcon isStreaming={isStreaming} isError={isError} />
-        <MorphingTextAnimation
-          text={text}
-          className={isError ? "text-red-500" : undefined}
-        />
-      </div>
-
-      {hasExpandableContent && output && (
-        <ToolAccordion
-          {...getAccordionMeta(output)}
-          defaultExpanded={isClarificationNeededOutput(output)}
-        >
-          {(isOperationStartedOutput(output) ||
-            isOperationPendingOutput(output)) && (
-            <div className="grid gap-2">
-              <p className="text-sm text-foreground">{output.message}</p>
-              <p className="text-xs text-muted-foreground">
-                Operation: {output.operation_id}
-              </p>
-              <p className="text-xs italic text-muted-foreground">
-                Check your library in a few minutes.
-              </p>
-            </div>
-          )}
-
-          {isOperationInProgressOutput(output) && (
-            <div className="grid gap-2">
-              <p className="text-sm text-foreground">{output.message}</p>
-              <p className="text-xs italic text-muted-foreground">
-                Please wait for the current operation to finish.
-              </p>
-            </div>
-          )}
-
-          {isAgentSavedOutput(output) && (
-            <div className="grid gap-2">
-              <p className="text-sm text-foreground">{output.message}</p>
-              <div className="flex flex-wrap gap-2">
-                <Link
-                  href={output.library_agent_link}
-                  className="text-xs font-medium text-purple-600 hover:text-purple-700"
-                >
-                  Open in library
-                </Link>
-                <Link
-                  href={output.agent_page_link}
-                  className="text-xs font-medium text-purple-600 hover:text-purple-700"
-                >
-                  Open in builder
-                </Link>
-              </div>
-              <pre className="whitespace-pre-wrap rounded-2xl border bg-muted/30 p-3 text-xs text-muted-foreground">
-                {truncateText(
-                  formatMaybeJson({ agent_id: output.agent_id }),
-                  800,
-                )}
-              </pre>
-            </div>
-          )}
-
-          {isAgentPreviewOutput(output) && (
-            <div className="grid gap-2">
-              <p className="text-sm text-foreground">{output.message}</p>
-              {output.description?.trim() && (
-                <p className="text-xs text-muted-foreground">
-                  {output.description}
-                </p>
-              )}
-              <pre className="whitespace-pre-wrap rounded-2xl border bg-muted/30 p-3 text-xs text-muted-foreground">
-                {truncateText(formatMaybeJson(output.agent_json), 1600)}
-              </pre>
-            </div>
-          )}
-
-          {isClarificationNeededOutput(output) && (
-            <ClarificationQuestionsWidget
-              questions={(output.questions ?? []).map((q) => {
-                const item: WidgetClarifyingQuestion = {
-                  question: q.question,
-                  keyword: q.keyword,
-                };
-                const example =
-                  typeof q.example === "string" && q.example.trim()
-                    ? q.example.trim()
-                    : null;
-                if (example) item.example = example;
-                return item;
-              })}
-              message={output.message}
-              onSubmitAnswers={handleClarificationAnswers}
-            />
-          )}
-
-          {isErrorOutput(output) && (
-            <div className="grid gap-2">
-              <p className="text-sm text-foreground">{output.message}</p>
-              {output.error && (
-                <pre className="whitespace-pre-wrap rounded-2xl border bg-muted/30 p-3 text-xs text-muted-foreground">
-                  {formatMaybeJson(output.error)}
-                </pre>
-              )}
-              {output.details && (
-                <pre className="whitespace-pre-wrap rounded-2xl border bg-muted/30 p-3 text-xs text-muted-foreground">
-                  {formatMaybeJson(output.details)}
-                </pre>
-              )}
-            </div>
-          )}
-        </ToolAccordion>
-      )}
-    </div>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/EditAgent/helpers.tsx

@@ -1,181 +0,0 @@
-import type { ToolUIPart } from "ai";
-import { PencilLineIcon } from "@phosphor-icons/react";
-import type { AgentPreviewResponse } from "@/app/api/__generated__/models/agentPreviewResponse";
-import type { AgentSavedResponse } from "@/app/api/__generated__/models/agentSavedResponse";
-import type { ClarificationNeededResponse } from "@/app/api/__generated__/models/clarificationNeededResponse";
-import type { ErrorResponse } from "@/app/api/__generated__/models/errorResponse";
-import type { OperationInProgressResponse } from "@/app/api/__generated__/models/operationInProgressResponse";
-import type { OperationPendingResponse } from "@/app/api/__generated__/models/operationPendingResponse";
-import type { OperationStartedResponse } from "@/app/api/__generated__/models/operationStartedResponse";
-import { ResponseType } from "@/app/api/__generated__/models/responseType";
-
-export type EditAgentToolOutput =
-  | OperationStartedResponse
-  | OperationPendingResponse
-  | OperationInProgressResponse
-  | AgentPreviewResponse
-  | AgentSavedResponse
-  | ClarificationNeededResponse
-  | ErrorResponse;
-
-function parseOutput(output: unknown): EditAgentToolOutput | null {
-  if (!output) return null;
-  if (typeof output === "string") {
-    const trimmed = output.trim();
-    if (!trimmed) return null;
-    try {
-      return parseOutput(JSON.parse(trimmed) as unknown);
-    } catch {
-      return null;
-    }
-  }
-  if (typeof output === "object") {
-    const type = (output as { type?: unknown }).type;
-    if (
-      type === ResponseType.operation_started ||
-      type === ResponseType.operation_pending ||
-      type === ResponseType.operation_in_progress ||
-      type === ResponseType.agent_preview ||
-      type === ResponseType.agent_saved ||
-      type === ResponseType.clarification_needed ||
-      type === ResponseType.error
-    ) {
-      return output as EditAgentToolOutput;
-    }
-    if ("operation_id" in output && "tool_name" in output)
-      return output as OperationStartedResponse | OperationPendingResponse;
-    if ("tool_call_id" in output) return output as OperationInProgressResponse;
-    if ("agent_json" in output && "agent_name" in output)
-      return output as AgentPreviewResponse;
-    if ("agent_id" in output && "library_agent_id" in output)
-      return output as AgentSavedResponse;
-    if ("questions" in output) return output as ClarificationNeededResponse;
-    if ("error" in output || "details" in output)
-      return output as ErrorResponse;
-  }
-  return null;
-}
-
-export function getEditAgentToolOutput(
-  part: unknown,
-): EditAgentToolOutput | null {
-  if (!part || typeof part !== "object") return null;
-  return parseOutput((part as { output?: unknown }).output);
-}
-
-export function isOperationStartedOutput(
-  output: EditAgentToolOutput,
-): output is OperationStartedResponse {
-  return (
-    output.type === ResponseType.operation_started ||
-    ("operation_id" in output && "tool_name" in output)
-  );
-}
-
-export function isOperationPendingOutput(
-  output: EditAgentToolOutput,
-): output is OperationPendingResponse {
-  return output.type === ResponseType.operation_pending;
-}
-
-export function isOperationInProgressOutput(
-  output: EditAgentToolOutput,
-): output is OperationInProgressResponse {
-  return (
-    output.type === ResponseType.operation_in_progress ||
-    "tool_call_id" in output
-  );
-}
-
-export function isAgentPreviewOutput(
-  output: EditAgentToolOutput,
-): output is AgentPreviewResponse {
-  return output.type === ResponseType.agent_preview || "agent_json" in output;
-}
-
-export function isAgentSavedOutput(
-  output: EditAgentToolOutput,
-): output is AgentSavedResponse {
-  return (
-    output.type === ResponseType.agent_saved || "agent_page_link" in output
-  );
-}
-
-export function isClarificationNeededOutput(
-  output: EditAgentToolOutput,
-): output is ClarificationNeededResponse {
-  return (
-    output.type === ResponseType.clarification_needed || "questions" in output
-  );
-}
-
-export function isErrorOutput(
-  output: EditAgentToolOutput,
-): output is ErrorResponse {
-  return output.type === ResponseType.error || "error" in output;
-}
-
-export function getAnimationText(part: {
-  state: ToolUIPart["state"];
-  input?: unknown;
-  output?: unknown;
-}): string {
-  switch (part.state) {
-    case "input-streaming":
-    case "input-available":
-      return "Editing the agent";
-    case "output-available": {
-      const output = parseOutput(part.output);
-      if (!output) return "Editing the agent";
-      if (isOperationStartedOutput(output)) return "Agent update started";
-      if (isOperationPendingOutput(output)) return "Agent update in progress";
-      if (isOperationInProgressOutput(output))
-        return "Agent update already in progress";
-      if (isAgentSavedOutput(output)) return `Saved "${output.agent_name}"`;
-      if (isAgentPreviewOutput(output)) return `Preview "${output.agent_name}"`;
-      if (isClarificationNeededOutput(output)) return "Needs clarification";
-      return "Error editing agent";
-    }
-    case "output-error":
-      return "Error editing agent";
-    default:
-      return "Editing the agent";
-  }
-}
-
-export function ToolIcon({
-  isStreaming,
-  isError,
-}: {
-  isStreaming?: boolean;
-  isError?: boolean;
-}) {
-  return (
-    <PencilLineIcon
-      size={14}
-      weight="regular"
-      className={
-        isError
-          ? "text-red-500"
-          : isStreaming
-            ? "text-neutral-500"
-            : "text-neutral-400"
-      }
-    />
-  );
-}
-
-export function formatMaybeJson(value: unknown): string {
-  if (typeof value === "string") return value;
-  try {
-    return JSON.stringify(value, null, 2);
-  } catch {
-    return String(value);
-  }
-}
-
-export function truncateText(text: string, maxChars: number): string {
-  const trimmed = text.trim();
-  if (trimmed.length <= maxChars) return trimmed;
-  return `${trimmed.slice(0, maxChars).trimEnd()}…`;
-}

autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/FindAgents/FindAgents.tsx

@@ -1,131 +0,0 @@
-"use client";
-
-import { ToolUIPart } from "ai";
-import Link from "next/link";
-import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
-import {
-  getAgentHref,
-  getAnimationText,
-  getFindAgentsOutput,
-  getSourceLabelFromToolType,
-  isAgentsFoundOutput,
-  isErrorOutput,
-  ToolIcon,
-} from "./helpers";
-import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
-
-export interface FindAgentsToolPart {
-  type: string;
-  toolCallId: string;
-  state: ToolUIPart["state"];
-  input?: unknown;
-  output?: unknown;
-}
-
-interface Props {
-  part: FindAgentsToolPart;
-}
-
-export function FindAgentsTool({ part }: Props) {
-  const text = getAnimationText(part);
-  const output = getFindAgentsOutput(part);
-  const isStreaming =
-    part.state === "input-streaming" || part.state === "input-available";
-  const isError =
-    part.state === "output-error" || (!!output && isErrorOutput(output));
-
-  const query =
-    typeof part.input === "object" && part.input !== null
-      ? String((part.input as { query?: unknown }).query ?? "").trim()
-      : "";
-
-  const agentsFoundOutput =
-    part.state === "output-available" && output && isAgentsFoundOutput(output)
-      ? output
-      : null;
-
-  const hasAgents =
-    !!agentsFoundOutput &&
-    agentsFoundOutput.agents.length > 0 &&
-    (typeof agentsFoundOutput.count !== "number" ||
-      agentsFoundOutput.count > 0);
-  const totalCount = agentsFoundOutput ? agentsFoundOutput.count : 0;
-  const { label: sourceLabel, source } = getSourceLabelFromToolType(part.type);
-  const scopeText =
-    source === "library"
-      ? "in your library"
-      : source === "marketplace"
-        ? "in marketplace"
-        : "";
-  const accordionDescription = `Found ${totalCount}${scopeText ? ` ${scopeText}` : ""}${
-    query ? ` for "${query}"` : ""
-  }`;
-
-  return (
-    <div className="py-2">
-      <div className="flex items-center gap-2 text-sm text-muted-foreground">
-        <ToolIcon
-          toolType={part.type}
-          isStreaming={isStreaming}
-          isError={isError}
-        />
-        <MorphingTextAnimation
-          text={text}
-          className={isError ? "text-red-500" : undefined}
-        />
-      </div>
-
-      {hasAgents && agentsFoundOutput && (
-        <ToolAccordion
-          badgeText={sourceLabel}
-          title="Agent results"
-          description={accordionDescription}
-        >
-          <div className="grid gap-2 sm:grid-cols-2">
-            {agentsFoundOutput.agents.map((agent) => {
-              const href = getAgentHref(agent);
-              const agentSource =
-                agent.source === "library"
-                  ? "Library"
-                  : agent.source === "marketplace"
-                    ? "Marketplace"
-                    : null;
-              return (
-                <div
-                  key={agent.id}
-                  className="rounded-2xl border bg-background p-3"
-                >
-                  <div className="flex items-start justify-between gap-2">
-                    <div className="min-w-0">
-                      <div className="flex items-center gap-2">
-                        <p className="truncate text-sm font-medium text-foreground">
-                          {agent.name}
-                        </p>
-                        {agentSource && (
-                          <span className="shrink-0 rounded-full border bg-muted px-2 py-0.5 text-[11px] text-muted-foreground">
-                            {agentSource}
-                          </span>
-                        )}
-                      </div>
-                      <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">
-                        {agent.description}
-                      </p>
-                    </div>
-                    {href && (
-                      <Link
-                        href={href}
-                        className="shrink-0 text-xs font-medium text-purple-600 hover:text-purple-700"
-                      >
-                        Open
-                      </Link>
-                    )}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        </ToolAccordion>
-      )}
-    </div>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/FindAgents/helpers.tsx

@@ -1,176 +0,0 @@
-import { ToolUIPart } from "ai";
-import { MagnifyingGlassIcon, SquaresFourIcon } from "@phosphor-icons/react";
-import type { AgentInfo } from "@/app/api/__generated__/models/agentInfo";
-import type { AgentsFoundResponse } from "@/app/api/__generated__/models/agentsFoundResponse";
-import type { ErrorResponse } from "@/app/api/__generated__/models/errorResponse";
-import type { NoResultsResponse } from "@/app/api/__generated__/models/noResultsResponse";
-import { ResponseType } from "@/app/api/__generated__/models/responseType";
-
-export interface FindAgentInput {
-  query: string;
-}
-
-export type FindAgentsOutput =
-  | AgentsFoundResponse
-  | NoResultsResponse
-  | ErrorResponse;
-
-export type FindAgentsToolType =
-  | "tool-find_agent"
-  | "tool-find_library_agent"
-  | (string & {});
-
-function parseOutput(output: unknown): FindAgentsOutput | null {
-  if (!output) return null;
-  if (typeof output === "string") {
-    const trimmed = output.trim();
-    if (!trimmed) return null;
-    try {
-      return parseOutput(JSON.parse(trimmed) as unknown);
-    } catch {
-      return null;
-    }
-  }
-  if (typeof output === "object") {
-    const type = (output as { type?: unknown }).type;
-    if (
-      type === ResponseType.agents_found ||
-      type === ResponseType.no_results ||
-      type === ResponseType.error
-    ) {
-      return output as FindAgentsOutput;
-    }
-    if ("agents" in output && "count" in output)
-      return output as AgentsFoundResponse;
-    if ("suggestions" in output && !("error" in output))
-      return output as NoResultsResponse;
-    if ("error" in output || "details" in output)
-      return output as ErrorResponse;
-  }
-  return null;
-}
-
-export function getFindAgentsOutput(part: unknown): FindAgentsOutput | null {
-  if (!part || typeof part !== "object") return null;
-  return parseOutput((part as { output?: unknown }).output);
-}
-
-export function isAgentsFoundOutput(
-  output: FindAgentsOutput,
-): output is AgentsFoundResponse {
-  return output.type === ResponseType.agents_found || "agents" in output;
-}
-
-export function isNoResultsOutput(
-  output: FindAgentsOutput,
-): output is NoResultsResponse {
-  return (
-    output.type === ResponseType.no_results ||
-    ("suggestions" in output && !("error" in output))
-  );
-}
-
-export function isErrorOutput(
-  output: FindAgentsOutput,
-): output is ErrorResponse {
-  return output.type === ResponseType.error || "error" in output;
-}
-
-export function getSourceLabelFromToolType(toolType?: FindAgentsToolType): {
-  source: "marketplace" | "library" | "unknown";
-  label: string;
-} {
-  if (toolType === "tool-find_library_agent") {
-    return { source: "library", label: "Library" };
-  }
-  if (toolType === "tool-find_agent") {
-    return { source: "marketplace", label: "Marketplace" };
-  }
-  return { source: "unknown", label: "Agents" };
-}
-
-export function getAnimationText(part: {
-  type?: FindAgentsToolType;
-  state: ToolUIPart["state"];
-  input?: unknown;
-  output?: unknown;
-}): string {
-  const { source } = getSourceLabelFromToolType(part.type);
-  const query = (part.input as FindAgentInput | undefined)?.query?.trim();
-
-  // Action phrase matching legacy ToolCallMessage
-  const actionPhrase =
-    source === "library"
-      ? "Looking for library agents"
-      : "Looking for agents in the marketplace";
-
-  const queryText = query ? ` matching "${query}"` : "";
-
-  switch (part.state) {
-    case "input-streaming":
-    case "input-available":
-      return `${actionPhrase}${queryText}`;
-
-    case "output-available": {
-      const output = parseOutput(part.output);
-      if (!output) {
-        return `${actionPhrase}${queryText}`;
-      }
-      if (isNoResultsOutput(output)) {
-        return `No agents found${queryText}`;
-      }
-      if (isAgentsFoundOutput(output)) {
-        const count = output.count ?? output.agents?.length ?? 0;
-        return `Found ${count} agent${count === 1 ? "" : "s"}${queryText}`;
-      }
-      if (isErrorOutput(output)) {
-        return `Error finding agents${queryText}`;
-      }
-      return `${actionPhrase}${queryText}`;
-    }
-
-    case "output-error":
-      return `Error finding agents${queryText}`;
-
-    default:
-      return actionPhrase;
-  }
-}
-
-export function getAgentHref(agent: AgentInfo): string | null {
-  if (agent.source === "library") {
-    return `/library/agents/${encodeURIComponent(agent.id)}`;
-  }
-
-  const [creator, slug, ...rest] = agent.id.split("/");
-  if (!creator || !slug || rest.length > 0) return null;
-  return `/marketplace/agent/${encodeURIComponent(creator)}/${encodeURIComponent(slug)}`;
-}
-
-export function ToolIcon({
-  toolType,
-  isStreaming,
-  isError,
-}: {
-  toolType?: FindAgentsToolType;
-  isStreaming?: boolean;
-  isError?: boolean;
-}) {
-  const { source } = getSourceLabelFromToolType(toolType);
-  const IconComponent =
-    source === "library" ? MagnifyingGlassIcon : SquaresFourIcon;
-
-  return (
-    <IconComponent
-      size={14}
-      weight="regular"
-      className={
-        isError
-          ? "text-red-500"
-          : isStreaming
-            ? "text-neutral-500"
-            : "text-neutral-400"
-      }
-    />
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/FindBlocks/FindBlocks.tsx

@@ -1,41 +0,0 @@
-import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
-import type { BlockListResponse } from "@/app/api/__generated__/models/blockListResponse";
-import { ToolUIPart } from "ai";
-import { getAnimationText, ToolIcon } from "./helpers";
-
-export interface FindBlockInput {
-  query: string;
-}
-
-export type FindBlockOutput = BlockListResponse;
-
-export interface FindBlockToolPart {
-  type: string;
-  toolName?: string;
-  toolCallId: string;
-  state: ToolUIPart["state"];
-  input?: FindBlockInput | unknown;
-  output?: string | FindBlockOutput | unknown;
-  title?: string;
-}
-
-interface Props {
-  part: FindBlockToolPart;
-}
-
-export function FindBlocksTool({ part }: Props) {
-  const text = getAnimationText(part);
-  const isStreaming =
-    part.state === "input-streaming" || part.state === "input-available";
-  const isError = part.state === "output-error";
-
-  return (
-    <div className="flex items-center gap-2 py-2 text-sm text-muted-foreground">
-      <ToolIcon isStreaming={isStreaming} isError={isError} />
-      <MorphingTextAnimation
-        text={text}
-        className={isError ? "text-red-500" : undefined}
-      />
-    </div>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/FindBlocks/helpers.tsx

@@ -1,72 +0,0 @@
-import { ToolUIPart } from "ai";
-import type { BlockListResponse } from "@/app/api/__generated__/models/blockListResponse";
-import { ResponseType } from "@/app/api/__generated__/models/responseType";
-import { FindBlockInput, FindBlockToolPart } from "./FindBlocks";
-import { PackageIcon } from "@phosphor-icons/react";
-
-function parseOutput(output: unknown): BlockListResponse | null {
-  if (!output) return null;
-  if (typeof output === "string") {
-    const trimmed = output.trim();
-    if (!trimmed) return null;
-    try {
-      return parseOutput(JSON.parse(trimmed) as unknown);
-    } catch {
-      return null;
-    }
-  }
-  if (typeof output === "object") {
-    const type = (output as { type?: unknown }).type;
-    if (type === ResponseType.block_list || "blocks" in output) {
-      return output as BlockListResponse;
-    }
-  }
-  return null;
-}
-
-export function getAnimationText(part: FindBlockToolPart): string {
-  const query = (part.input as FindBlockInput | undefined)?.query?.trim();
-  const queryText = query ? ` matching "${query}"` : "";
-
-  switch (part.state) {
-    case "input-streaming":
-    case "input-available":
-      return `Searching for blocks${queryText}`;
-
-    case "output-available": {
-      const parsed = parseOutput(part.output);
-      if (parsed) {
-        return `Found ${parsed.count} block${parsed.count === 1 ? "" : "s"}${queryText}`;
-      }
-      return `Searching for blocks${queryText}`;
-    }
-
-    case "output-error":
-      return `Error finding blocks${queryText}`;
-
-    default:
-      return "Searching for blocks";
-  }
-}
-
-export function ToolIcon({
-  isStreaming,
-  isError,
-}: {
-  isStreaming?: boolean;
-  isError?: boolean;
-}) {
-  return (
-    <PackageIcon
-      size={14}
-      weight="regular"
-      className={
-        isError
-          ? "text-red-500"
-          : isStreaming
-            ? "text-neutral-500"
-            : "text-neutral-400"
-      }
-    />
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/RunAgent/RunAgent.tsx

@@ -1,377 +0,0 @@
-"use client";
-
-import type { ToolUIPart } from "ai";
-import Link from "next/link";
-import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
-import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
-import { useCopilotChatActions } from "../../components/CopilotChatActionsProvider/useCopilotChatActions";
-import {
-  ChatCredentialsSetup,
-  type CredentialInfo,
-} from "@/components/contextual/Chat/components/ChatCredentialsSetup/ChatCredentialsSetup";
-import {
-  formatMaybeJson,
-  getAnimationText,
-  getRunAgentToolOutput,
-  isRunAgentAgentDetailsOutput,
-  isRunAgentErrorOutput,
-  isRunAgentExecutionStartedOutput,
-  isRunAgentNeedLoginOutput,
-  isRunAgentSetupRequirementsOutput,
-  ToolIcon,
-  type RunAgentToolOutput,
-} from "./helpers";
-
-export interface RunAgentToolPart {
-  type: string;
-  toolCallId: string;
-  state: ToolUIPart["state"];
-  input?: unknown;
-  output?: unknown;
-}
-
-interface Props {
-  part: RunAgentToolPart;
-}
-
-function getAccordionMeta(output: RunAgentToolOutput): {
-  badgeText: string;
-  title: string;
-  description?: string;
-} {
-  if (isRunAgentExecutionStartedOutput(output)) {
-    const statusText =
-      typeof output.status === "string" && output.status.trim()
-        ? output.status.trim()
-        : "started";
-    return {
-      badgeText: "Run agent",
-      title: output.graph_name,
-      description: `Status: ${statusText}`,
-    };
-  }
-
-  if (isRunAgentAgentDetailsOutput(output)) {
-    return {
-      badgeText: "Run agent",
-      title: output.agent.name,
-      description: "Inputs required",
-    };
-  }
-
-  if (isRunAgentSetupRequirementsOutput(output)) {
-    const missingCredsCount = Object.keys(
-      (output.setup_info.user_readiness?.missing_credentials ?? {}) as Record<
-        string,
-        unknown
-      >,
-    ).length;
-    return {
-      badgeText: "Run agent",
-      title: output.setup_info.agent_name,
-      description:
-        missingCredsCount > 0
-          ? `Missing ${missingCredsCount} credential${missingCredsCount === 1 ? "" : "s"}`
-          : output.message,
-    };
-  }
-
-  if (isRunAgentNeedLoginOutput(output)) {
-    return { badgeText: "Run agent", title: "Sign in required" };
-  }
-
-  return { badgeText: "Run agent", title: "Error" };
-}
-
-function coerceMissingCredentials(
-  rawMissingCredentials: unknown,
-): CredentialInfo[] {
-  const missing =
-    rawMissingCredentials && typeof rawMissingCredentials === "object"
-      ? (rawMissingCredentials as Record<string, unknown>)
-      : {};
-
-  const validTypes = new Set([
-    "api_key",
-    "oauth2",
-    "user_password",
-    "host_scoped",
-  ]);
-
-  const results: CredentialInfo[] = [];
-
-  Object.values(missing).forEach((value) => {
-    if (!value || typeof value !== "object") return;
-    const cred = value as Record<string, unknown>;
-
-    const provider =
-      typeof cred.provider === "string" ? cred.provider.trim() : "";
-    if (!provider) return;
-
-    const providerName =
-      typeof cred.provider_name === "string" && cred.provider_name.trim()
-        ? cred.provider_name.trim()
-        : provider.replace(/_/g, " ");
-
-    const title =
-      typeof cred.title === "string" && cred.title.trim()
-        ? cred.title.trim()
-        : providerName;
-
-    const types =
-      Array.isArray(cred.types) && cred.types.length > 0
-        ? cred.types
-        : typeof cred.type === "string"
-          ? [cred.type]
-          : [];
-
-    const credentialTypes = types
-      .map((t) => (typeof t === "string" ? t.trim() : ""))
-      .filter(
-        (t): t is "api_key" | "oauth2" | "user_password" | "host_scoped" =>
-          validTypes.has(t),
-      );
-
-    if (credentialTypes.length === 0) return;
-
-    const scopes = Array.isArray(cred.scopes)
-      ? cred.scopes.filter((s): s is string => typeof s === "string")
-      : undefined;
-
-    const item: CredentialInfo = {
-      provider,
-      providerName,
-      credentialTypes,
-      title,
-    };
-    if (scopes && scopes.length > 0) {
-      item.scopes = scopes;
-    }
-    results.push(item);
-  });
-
-  return results;
-}
-
-function coerceExpectedInputs(rawInputs: unknown): Array<{
-  name: string;
-  title: string;
-  type: string;
-  description?: string;
-  required: boolean;
-}> {
-  if (!Array.isArray(rawInputs)) return [];
-  const results: Array<{
-    name: string;
-    title: string;
-    type: string;
-    description?: string;
-    required: boolean;
-  }> = [];
-
-  rawInputs.forEach((value, index) => {
-    if (!value || typeof value !== "object") return;
-    const input = value as Record<string, unknown>;
-
-    const name =
-      typeof input.name === "string" && input.name.trim()
-        ? input.name.trim()
-        : `input-${index}`;
-    const title =
-      typeof input.title === "string" && input.title.trim()
-        ? input.title.trim()
-        : name;
-    const type = typeof input.type === "string" ? input.type : "unknown";
-    const description =
-      typeof input.description === "string" && input.description.trim()
-        ? input.description.trim()
-        : undefined;
-    const required = Boolean(input.required);
-
-    const item: {
-      name: string;
-      title: string;
-      type: string;
-      description?: string;
-      required: boolean;
-    } = { name, title, type, required };
-    if (description) item.description = description;
-    results.push(item);
-  });
-
-  return results;
-}
-
-export function RunAgentTool({ part }: Props) {
-  const text = getAnimationText(part);
-  const { onSend } = useCopilotChatActions();
-  const isStreaming =
-    part.state === "input-streaming" || part.state === "input-available";
-
-  const output = getRunAgentToolOutput(part);
-  const isError =
-    part.state === "output-error" ||
-    (!!output && isRunAgentErrorOutput(output));
-  const hasExpandableContent =
-    part.state === "output-available" &&
-    !!output &&
-    (isRunAgentExecutionStartedOutput(output) ||
-      isRunAgentAgentDetailsOutput(output) ||
-      isRunAgentSetupRequirementsOutput(output) ||
-      isRunAgentNeedLoginOutput(output) ||
-      isRunAgentErrorOutput(output));
-
-  function handleAllCredentialsComplete() {
-    onSend(
-      "I've configured the required credentials. Please check if everything is ready and proceed with running the agent.",
-    );
-  }
-
-  return (
-    <div className="py-2">
-      <div className="flex items-center gap-2 text-sm text-muted-foreground">
-        <ToolIcon isStreaming={isStreaming} isError={isError} />
-        <MorphingTextAnimation
-          text={text}
-          className={isError ? "text-red-500" : undefined}
-        />
-      </div>
-
-      {hasExpandableContent && output && (
-        <ToolAccordion
-          {...getAccordionMeta(output)}
-          defaultExpanded={
-            isRunAgentSetupRequirementsOutput(output) ||
-            isRunAgentAgentDetailsOutput(output)
-          }
-        >
-          {isRunAgentExecutionStartedOutput(output) && (
-            <div className="grid gap-2">
-              <div className="rounded-2xl border bg-background p-3">
-                <div className="flex items-start justify-between gap-3">
-                  <div className="min-w-0">
-                    <p className="text-sm font-medium text-foreground">
-                      Execution started
-                    </p>
-                    <p className="mt-0.5 truncate text-xs text-muted-foreground">
-                      {output.execution_id}
-                    </p>
-                    <p className="mt-2 text-xs text-muted-foreground">
-                      {output.message}
-                    </p>
-                  </div>
-                  {output.library_agent_link && (
-                    <Link
-                      href={output.library_agent_link}
-                      className="shrink-0 text-xs font-medium text-purple-600 hover:text-purple-700"
-                    >
-                      Open
-                    </Link>
-                  )}
-                </div>
-              </div>
-            </div>
-          )}
-
-          {isRunAgentAgentDetailsOutput(output) && (
-            <div className="grid gap-2">
-              <p className="text-sm text-foreground">{output.message}</p>
-
-              {output.agent.description?.trim() && (
-                <p className="text-xs text-muted-foreground">
-                  {output.agent.description}
-                </p>
-              )}
-
-              <div className="rounded-2xl border bg-background p-3">
-                <p className="text-xs font-medium text-foreground">Inputs</p>
-                <p className="mt-1 text-xs text-muted-foreground">
-                  Provide required inputs in chat, or ask to run with defaults.
-                </p>
-                <pre className="mt-2 whitespace-pre-wrap text-xs text-muted-foreground">
-                  {formatMaybeJson(output.agent.inputs)}
-                </pre>
-              </div>
-            </div>
-          )}
-
-          {isRunAgentSetupRequirementsOutput(output) && (
-            <div className="grid gap-2">
-              <p className="text-sm text-foreground">{output.message}</p>
-
-              {coerceMissingCredentials(
-                output.setup_info.user_readiness?.missing_credentials,
-              ).length > 0 && (
-                <ChatCredentialsSetup
-                  credentials={coerceMissingCredentials(
-                    output.setup_info.user_readiness?.missing_credentials,
-                  )}
-                  agentName={output.setup_info.agent_name}
-                  message={output.message}
-                  onAllCredentialsComplete={handleAllCredentialsComplete}
-                  onCancel={() => {}}
-                />
-              )}
-
-              {coerceExpectedInputs(
-                (output.setup_info.requirements as Record<string, unknown>)
-                  ?.inputs,
-              ).length > 0 && (
-                <div className="rounded-2xl border bg-background p-3">
-                  <p className="text-xs font-medium text-foreground">
-                    Expected inputs
-                  </p>
-                  <div className="mt-2 grid gap-2">
-                    {coerceExpectedInputs(
-                      (
-                        output.setup_info.requirements as Record<
-                          string,
-                          unknown
-                        >
-                      )?.inputs,
-                    ).map((input) => (
-                      <div key={input.name} className="rounded-xl border p-2">
-                        <div className="flex items-center justify-between gap-2">
-                          <p className="truncate text-xs font-medium text-foreground">
-                            {input.title}
-                          </p>
-                          <span className="shrink-0 rounded-full border bg-muted px-2 py-0.5 text-[11px] text-muted-foreground">
-                            {input.required ? "Required" : "Optional"}
-                          </span>
-                        </div>
-                        <p className="mt-1 text-xs text-muted-foreground">
-                          {input.name} • {input.type}
-                          {input.description ? ` • ${input.description}` : ""}
-                        </p>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
-
-          {isRunAgentNeedLoginOutput(output) && (
-            <p className="text-sm text-foreground">{output.message}</p>
-          )}
-
-          {isRunAgentErrorOutput(output) && (
-            <div className="grid gap-2">
-              <p className="text-sm text-foreground">{output.message}</p>
-              {output.error && (
-                <pre className="whitespace-pre-wrap rounded-2xl border bg-muted/30 p-3 text-xs text-muted-foreground">
-                  {formatMaybeJson(output.error)}
-                </pre>
-              )}
-              {output.details && (
-                <pre className="whitespace-pre-wrap rounded-2xl border bg-muted/30 p-3 text-xs text-muted-foreground">
-                  {formatMaybeJson(output.details)}
-                </pre>
-              )}
-            </div>
-          )}
-        </ToolAccordion>
-      )}
-    </div>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/RunAgent/helpers.tsx

@@ -1,191 +0,0 @@
-import type { ToolUIPart } from "ai";
-import { PlayIcon } from "@phosphor-icons/react";
-import type { AgentDetailsResponse } from "@/app/api/__generated__/models/agentDetailsResponse";
-import type { ErrorResponse } from "@/app/api/__generated__/models/errorResponse";
-import type { ExecutionStartedResponse } from "@/app/api/__generated__/models/executionStartedResponse";
-import type { NeedLoginResponse } from "@/app/api/__generated__/models/needLoginResponse";
-import { ResponseType } from "@/app/api/__generated__/models/responseType";
-import type { SetupRequirementsResponse } from "@/app/api/__generated__/models/setupRequirementsResponse";
-
-export interface RunAgentInput {
-  username_agent_slug?: string;
-  library_agent_id?: string;
-  inputs?: Record<string, unknown>;
-  use_defaults?: boolean;
-  schedule_name?: string;
-  cron?: string;
-  timezone?: string;
-}
-
-export type RunAgentToolOutput =
-  | SetupRequirementsResponse
-  | ExecutionStartedResponse
-  | AgentDetailsResponse
-  | NeedLoginResponse
-  | ErrorResponse;
-
-const RUN_AGENT_OUTPUT_TYPES = new Set<string>([
-  ResponseType.setup_requirements,
-  ResponseType.execution_started,
-  ResponseType.agent_details,
-  ResponseType.need_login,
-  ResponseType.error,
-]);
-
-export function isRunAgentSetupRequirementsOutput(
-  output: RunAgentToolOutput,
-): output is SetupRequirementsResponse {
-  return (
-    output.type === ResponseType.setup_requirements ||
-    ("setup_info" in output && typeof output.setup_info === "object")
-  );
-}
-
-export function isRunAgentExecutionStartedOutput(
-  output: RunAgentToolOutput,
-): output is ExecutionStartedResponse {
-  return (
-    output.type === ResponseType.execution_started || "execution_id" in output
-  );
-}
-
-export function isRunAgentAgentDetailsOutput(
-  output: RunAgentToolOutput,
-): output is AgentDetailsResponse {
-  return output.type === ResponseType.agent_details || "agent" in output;
-}
-
-export function isRunAgentNeedLoginOutput(
-  output: RunAgentToolOutput,
-): output is NeedLoginResponse {
-  return output.type === ResponseType.need_login;
-}
-
-export function isRunAgentErrorOutput(
-  output: RunAgentToolOutput,
-): output is ErrorResponse {
-  return output.type === ResponseType.error || "error" in output;
-}
-
-function parseOutput(output: unknown): RunAgentToolOutput | null {
-  if (!output) return null;
-  if (typeof output === "string") {
-    const trimmed = output.trim();
-    if (!trimmed) return null;
-    try {
-      return parseOutput(JSON.parse(trimmed) as unknown);
-    } catch {
-      return null;
-    }
-  }
-  if (typeof output === "object") {
-    const type = (output as { type?: unknown }).type;
-    if (typeof type === "string" && RUN_AGENT_OUTPUT_TYPES.has(type)) {
-      return output as RunAgentToolOutput;
-    }
-    if ("execution_id" in output) return output as ExecutionStartedResponse;
-    if ("setup_info" in output) return output as SetupRequirementsResponse;
-    if ("agent" in output) return output as AgentDetailsResponse;
-    if ("error" in output || "details" in output)
-      return output as ErrorResponse;
-    if (type === ResponseType.need_login) return output as NeedLoginResponse;
-  }
-  return null;
-}
-
-export function getRunAgentToolOutput(
-  part: unknown,
-): RunAgentToolOutput | null {
-  if (!part || typeof part !== "object") return null;
-  return parseOutput((part as { output?: unknown }).output);
-}
-
-function getAgentIdentifierText(
-  input: RunAgentInput | undefined,
-): string | null {
-  if (!input) return null;
-  const slug = input.username_agent_slug?.trim();
-  if (slug) return slug;
-  const libraryId = input.library_agent_id?.trim();
-  if (libraryId) return `Library agent ${libraryId}`;
-  return null;
-}
-
-function getExecutionModeText(input: RunAgentInput | undefined): string | null {
-  if (!input) return null;
-  const isSchedule = Boolean(input.schedule_name?.trim() || input.cron?.trim());
-  return isSchedule ? "Scheduled run" : "Run";
-}
-
-export function getAnimationText(part: {
-  state: ToolUIPart["state"];
-  input?: unknown;
-  output?: unknown;
-}): string {
-  const input = part.input as RunAgentInput | undefined;
-  const agentIdentifier = getAgentIdentifierText(input);
-  const isSchedule = Boolean(
-    input?.schedule_name?.trim() || input?.cron?.trim(),
-  );
-  const actionPhrase = isSchedule
-    ? "Scheduling the agent to run"
-    : "Running the agent";
-  const identifierText = agentIdentifier ? ` "${agentIdentifier}"` : "";
-
-  switch (part.state) {
-    case "input-streaming":
-    case "input-available":
-      return `${actionPhrase}${identifierText}`;
-    case "output-available": {
-      const output = parseOutput(part.output);
-      if (!output) return `${actionPhrase}${identifierText}`;
-      if (isRunAgentExecutionStartedOutput(output)) {
-        return `Started "${output.graph_name}"`;
-      }
-      if (isRunAgentAgentDetailsOutput(output)) {
-        return `Agent inputs needed for "${output.agent.name}"`;
-      }
-      if (isRunAgentSetupRequirementsOutput(output)) {
-        return `Setup needed for "${output.setup_info.agent_name}"`;
-      }
-      if (isRunAgentNeedLoginOutput(output))
-        return "Sign in required to run agent";
-      return "Error running agent";
-    }
-    case "output-error":
-      return "Error running agent";
-    default:
-      return actionPhrase;
-  }
-}
-
-export function ToolIcon({
-  isStreaming,
-  isError,
-}: {
-  isStreaming?: boolean;
-  isError?: boolean;
-}) {
-  return (
-    <PlayIcon
-      size={14}
-      weight="regular"
-      className={
-        isError
-          ? "text-red-500"
-          : isStreaming
-            ? "text-neutral-500"
-            : "text-neutral-400"
-      }
-    />
-  );
-}
-
-export function formatMaybeJson(value: unknown): string {
-  if (typeof value === "string") return value;
-  try {
-    return JSON.stringify(value, null, 2);
-  } catch {
-    return String(value);
-  }
-}

autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/RunBlock/RunBlock.tsx

@@ -1,325 +0,0 @@
-"use client";
-
-import type { ToolUIPart } from "ai";
-import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
-import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
-import { useCopilotChatActions } from "../../components/CopilotChatActionsProvider/useCopilotChatActions";
-import {
-  ChatCredentialsSetup,
-  type CredentialInfo,
-} from "@/components/contextual/Chat/components/ChatCredentialsSetup/ChatCredentialsSetup";
-import {
-  formatMaybeJson,
-  getAnimationText,
-  getRunBlockToolOutput,
-  isRunBlockBlockOutput,
-  isRunBlockErrorOutput,
-  isRunBlockSetupRequirementsOutput,
-  ToolIcon,
-  type RunBlockToolOutput,
-} from "./helpers";
-
-export interface RunBlockToolPart {
-  type: string;
-  toolCallId: string;
-  state: ToolUIPart["state"];
-  input?: unknown;
-  output?: unknown;
-}
-
-interface Props {
-  part: RunBlockToolPart;
-}
-
-function getAccordionMeta(output: RunBlockToolOutput): {
-  badgeText: string;
-  title: string;
-  description?: string;
-} {
-  if (isRunBlockBlockOutput(output)) {
-    const keys = Object.keys(output.outputs ?? {});
-    return {
-      badgeText: "Run block",
-      title: output.block_name,
-      description:
-        keys.length > 0
-          ? `${keys.length} output key${keys.length === 1 ? "" : "s"}`
-          : output.message,
-    };
-  }
-
-  if (isRunBlockSetupRequirementsOutput(output)) {
-    const missingCredsCount = Object.keys(
-      (output.setup_info.user_readiness?.missing_credentials ?? {}) as Record<
-        string,
-        unknown
-      >,
-    ).length;
-    return {
-      badgeText: "Run block",
-      title: output.setup_info.agent_name,
-      description:
-        missingCredsCount > 0
-          ? `Missing ${missingCredsCount} credential${missingCredsCount === 1 ? "" : "s"}`
-          : output.message,
-    };
-  }
-
-  return { badgeText: "Run block", title: "Error" };
-}
-
-function coerceMissingCredentials(
-  rawMissingCredentials: unknown,
-): CredentialInfo[] {
-  const missing =
-    rawMissingCredentials && typeof rawMissingCredentials === "object"
-      ? (rawMissingCredentials as Record<string, unknown>)
-      : {};
-
-  const validTypes = new Set([
-    "api_key",
-    "oauth2",
-    "user_password",
-    "host_scoped",
-  ]);
-
-  const results: CredentialInfo[] = [];
-
-  Object.values(missing).forEach((value) => {
-    if (!value || typeof value !== "object") return;
-    const cred = value as Record<string, unknown>;
-
-    const provider =
-      typeof cred.provider === "string" ? cred.provider.trim() : "";
-    if (!provider) return;
-
-    const providerName =
-      typeof cred.provider_name === "string" && cred.provider_name.trim()
-        ? cred.provider_name.trim()
-        : provider.replace(/_/g, " ");
-
-    const title =
-      typeof cred.title === "string" && cred.title.trim()
-        ? cred.title.trim()
-        : providerName;
-
-    const types =
-      Array.isArray(cred.types) && cred.types.length > 0
-        ? cred.types
-        : typeof cred.type === "string"
-          ? [cred.type]
-          : [];
-
-    const credentialTypes = types
-      .map((t) => (typeof t === "string" ? t.trim() : ""))
-      .filter(
-        (t): t is "api_key" | "oauth2" | "user_password" | "host_scoped" =>
-          validTypes.has(t),
-      );
-
-    if (credentialTypes.length === 0) return;
-
-    const scopes = Array.isArray(cred.scopes)
-      ? cred.scopes.filter((s): s is string => typeof s === "string")
-      : undefined;
-
-    const item: CredentialInfo = {
-      provider,
-      providerName,
-      credentialTypes,
-      title,
-    };
-    if (scopes && scopes.length > 0) {
-      item.scopes = scopes;
-    }
-    results.push(item);
-  });
-
-  return results;
-}
-
-function coerceExpectedInputs(rawInputs: unknown): Array<{
-  name: string;
-  title: string;
-  type: string;
-  description?: string;
-  required: boolean;
-}> {
-  if (!Array.isArray(rawInputs)) return [];
-  const results: Array<{
-    name: string;
-    title: string;
-    type: string;
-    description?: string;
-    required: boolean;
-  }> = [];
-
-  rawInputs.forEach((value, index) => {
-    if (!value || typeof value !== "object") return;
-    const input = value as Record<string, unknown>;
-
-    const name =
-      typeof input.name === "string" && input.name.trim()
-        ? input.name.trim()
-        : `input-${index}`;
-    const title =
-      typeof input.title === "string" && input.title.trim()
-        ? input.title.trim()
-        : name;
-    const type = typeof input.type === "string" ? input.type : "unknown";
-    const description =
-      typeof input.description === "string" && input.description.trim()
-        ? input.description.trim()
-        : undefined;
-    const required = Boolean(input.required);
-
-    const item: {
-      name: string;
-      title: string;
-      type: string;
-      description?: string;
-      required: boolean;
-    } = { name, title, type, required };
-    if (description) item.description = description;
-    results.push(item);
-  });
-
-  return results;
-}
-
-export function RunBlockTool({ part }: Props) {
-  const text = getAnimationText(part);
-  const { onSend } = useCopilotChatActions();
-  const isStreaming =
-    part.state === "input-streaming" || part.state === "input-available";
-
-  const output = getRunBlockToolOutput(part);
-  const isError =
-    part.state === "output-error" ||
-    (!!output && isRunBlockErrorOutput(output));
-  const hasExpandableContent =
-    part.state === "output-available" &&
-    !!output &&
-    (isRunBlockBlockOutput(output) ||
-      isRunBlockSetupRequirementsOutput(output) ||
-      isRunBlockErrorOutput(output));
-
-  function handleAllCredentialsComplete() {
-    onSend(
-      "I've configured the required credentials. Please re-run the block now.",
-    );
-  }
-
-  return (
-    <div className="py-2">
-      <div className="flex items-center gap-2 text-sm text-muted-foreground">
-        <ToolIcon isStreaming={isStreaming} isError={isError} />
-        <MorphingTextAnimation
-          text={text}
-          className={isError ? "text-red-500" : undefined}
-        />
-      </div>
-
-      {hasExpandableContent && output && (
-        <ToolAccordion
-          {...getAccordionMeta(output)}
-          defaultExpanded={isRunBlockSetupRequirementsOutput(output)}
-        >
-          {isRunBlockBlockOutput(output) && (
-            <div className="grid gap-2">
-              <p className="text-sm text-foreground">{output.message}</p>
-
-              {Object.entries(output.outputs ?? {}).map(([key, items]) => (
-                <div key={key} className="rounded-2xl border bg-background p-3">
-                  <div className="flex items-center justify-between gap-2">
-                    <p className="truncate text-xs font-medium text-foreground">
-                      {key}
-                    </p>
-                    <span className="shrink-0 rounded-full border bg-muted px-2 py-0.5 text-[11px] text-muted-foreground">
-                      {items.length} item{items.length === 1 ? "" : "s"}
-                    </span>
-                  </div>
-                  <pre className="mt-2 whitespace-pre-wrap text-xs text-muted-foreground">
-                    {formatMaybeJson(items.slice(0, 3))}
-                  </pre>
-                </div>
-              ))}
-            </div>
-          )}
-
-          {isRunBlockSetupRequirementsOutput(output) && (
-            <div className="grid gap-2">
-              <p className="text-sm text-foreground">{output.message}</p>
-
-              {coerceMissingCredentials(
-                output.setup_info.user_readiness?.missing_credentials,
-              ).length > 0 && (
-                <ChatCredentialsSetup
-                  credentials={coerceMissingCredentials(
-                    output.setup_info.user_readiness?.missing_credentials,
-                  )}
-                  agentName={output.setup_info.agent_name}
-                  message={output.message}
-                  onAllCredentialsComplete={handleAllCredentialsComplete}
-                  onCancel={() => {}}
-                />
-              )}
-
-              {coerceExpectedInputs(
-                (output.setup_info.requirements as Record<string, unknown>)
-                  ?.inputs,
-              ).length > 0 && (
-                <div className="rounded-2xl border bg-background p-3">
-                  <p className="text-xs font-medium text-foreground">
-                    Expected inputs
-                  </p>
-                  <div className="mt-2 grid gap-2">
-                    {coerceExpectedInputs(
-                      (
-                        output.setup_info.requirements as Record<
-                          string,
-                          unknown
-                        >
-                      )?.inputs,
-                    ).map((input) => (
-                      <div key={input.name} className="rounded-xl border p-2">
-                        <div className="flex items-center justify-between gap-2">
-                          <p className="truncate text-xs font-medium text-foreground">
-                            {input.title}
-                          </p>
-                          <span className="shrink-0 rounded-full border bg-muted px-2 py-0.5 text-[11px] text-muted-foreground">
-                            {input.required ? "Required" : "Optional"}
-                          </span>
-                        </div>
-                        <p className="mt-1 text-xs text-muted-foreground">
-                          {input.name} • {input.type}
-                          {input.description ? ` • ${input.description}` : ""}
-                        </p>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
-
-          {isRunBlockErrorOutput(output) && (
-            <div className="grid gap-2">
-              <p className="text-sm text-foreground">{output.message}</p>
-              {output.error && (
-                <pre className="whitespace-pre-wrap rounded-2xl border bg-muted/30 p-3 text-xs text-muted-foreground">
-                  {formatMaybeJson(output.error)}
-                </pre>
-              )}
-              {output.details && (
-                <pre className="whitespace-pre-wrap rounded-2xl border bg-muted/30 p-3 text-xs text-muted-foreground">
-                  {formatMaybeJson(output.details)}
-                </pre>
-              )}
-            </div>
-          )}
-        </ToolAccordion>
-      )}
-    </div>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/RunBlock/helpers.tsx

@@ -1,140 +0,0 @@
-import type { ToolUIPart } from "ai";
-import { PlayIcon } from "@phosphor-icons/react";
-import type { BlockOutputResponse } from "@/app/api/__generated__/models/blockOutputResponse";
-import type { ErrorResponse } from "@/app/api/__generated__/models/errorResponse";
-import { ResponseType } from "@/app/api/__generated__/models/responseType";
-import type { SetupRequirementsResponse } from "@/app/api/__generated__/models/setupRequirementsResponse";
-
-export interface RunBlockInput {
-  block_id?: string;
-  input_data?: Record<string, unknown>;
-}
-
-export type RunBlockToolOutput =
-  | SetupRequirementsResponse
-  | BlockOutputResponse
-  | ErrorResponse;
-
-const RUN_BLOCK_OUTPUT_TYPES = new Set<string>([
-  ResponseType.setup_requirements,
-  ResponseType.block_output,
-  ResponseType.error,
-]);
-
-export function isRunBlockSetupRequirementsOutput(
-  output: RunBlockToolOutput,
-): output is SetupRequirementsResponse {
-  return (
-    output.type === ResponseType.setup_requirements ||
-    ("setup_info" in output && typeof output.setup_info === "object")
-  );
-}
-
-export function isRunBlockBlockOutput(
-  output: RunBlockToolOutput,
-): output is BlockOutputResponse {
-  return output.type === ResponseType.block_output || "block_id" in output;
-}
-
-export function isRunBlockErrorOutput(
-  output: RunBlockToolOutput,
-): output is ErrorResponse {
-  return output.type === ResponseType.error || "error" in output;
-}
-
-function parseOutput(output: unknown): RunBlockToolOutput | null {
-  if (!output) return null;
-  if (typeof output === "string") {
-    const trimmed = output.trim();
-    if (!trimmed) return null;
-    try {
-      return parseOutput(JSON.parse(trimmed) as unknown);
-    } catch {
-      return null;
-    }
-  }
-  if (typeof output === "object") {
-    const type = (output as { type?: unknown }).type;
-    if (typeof type === "string" && RUN_BLOCK_OUTPUT_TYPES.has(type)) {
-      return output as RunBlockToolOutput;
-    }
-    if ("block_id" in output) return output as BlockOutputResponse;
-    if ("setup_info" in output) return output as SetupRequirementsResponse;
-    if ("error" in output || "details" in output)
-      return output as ErrorResponse;
-  }
-  return null;
-}
-
-export function getRunBlockToolOutput(
-  part: unknown,
-): RunBlockToolOutput | null {
-  if (!part || typeof part !== "object") return null;
-  return parseOutput((part as { output?: unknown }).output);
-}
-
-function getBlockLabel(input: RunBlockInput | undefined): string | null {
-  const blockId = input?.block_id?.trim();
-  if (!blockId) return null;
-  return `Block ${blockId.slice(0, 8)}…`;
-}
-
-export function getAnimationText(part: {
-  state: ToolUIPart["state"];
-  input?: unknown;
-  output?: unknown;
-}): string {
-  const input = part.input as RunBlockInput | undefined;
-  const blockId = input?.block_id?.trim();
-  const blockText = blockId ? ` "${blockId}"` : "";
-
-  switch (part.state) {
-    case "input-streaming":
-    case "input-available":
-      return `Running the block${blockText}`;
-    case "output-available": {
-      const output = parseOutput(part.output);
-      if (!output) return `Running the block${blockText}`;
-      if (isRunBlockBlockOutput(output)) return `Ran "${output.block_name}"`;
-      if (isRunBlockSetupRequirementsOutput(output)) {
-        return `Setup needed for "${output.setup_info.agent_name}"`;
-      }
-      return "Error running block";
-    }
-    case "output-error":
-      return "Error running block";
-    default:
-      return "Running the block";
-  }
-}
-
-export function ToolIcon({
-  isStreaming,
-  isError,
-}: {
-  isStreaming?: boolean;
-  isError?: boolean;
-}) {
-  return (
-    <PlayIcon
-      size={14}
-      weight="regular"
-      className={
-        isError
-          ? "text-red-500"
-          : isStreaming
-            ? "text-neutral-500"
-            : "text-neutral-400"
-      }
-    />
-  );
-}
-
-export function formatMaybeJson(value: unknown): string {
-  if (typeof value === "string") return value;
-  try {
-    return JSON.stringify(value, null, 2);
-  } catch {
-    return String(value);
-  }
-}

autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/SearchDocs/SearchDocs.tsx

@@ -1,197 +0,0 @@
-"use client";
-
-import type { ToolUIPart } from "ai";
-import Link from "next/link";
-import { useMemo } from "react";
-import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
-import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
-import {
-  getDocsToolOutput,
-  getDocsToolTitle,
-  getToolLabel,
-  getAnimationText,
-  isDocPageOutput,
-  isDocSearchResultsOutput,
-  isErrorOutput,
-  isNoResultsOutput,
-  ToolIcon,
-  toDocsUrl,
-  type DocsToolType,
-} from "./helpers";
-
-export interface DocsToolPart {
-  type: DocsToolType;
-  toolCallId: string;
-  state: ToolUIPart["state"];
-  input?: unknown;
-  output?: unknown;
-}
-
-interface Props {
-  part: DocsToolPart;
-}
-
-function truncate(text: string, maxChars: number): string {
-  const trimmed = text.trim();
-  if (trimmed.length <= maxChars) return trimmed;
-  return `${trimmed.slice(0, maxChars).trimEnd()}…`;
-}
-
-export function SearchDocsTool({ part }: Props) {
-  const output = getDocsToolOutput(part);
-  const text = getAnimationText(part);
-  const isStreaming =
-    part.state === "input-streaming" || part.state === "input-available";
-  const isError =
-    part.state === "output-error" || (!!output && isErrorOutput(output));
-
-  const normalized = useMemo(() => {
-    if (!output) return null;
-    const title = getDocsToolTitle(part.type, output);
-    const label = getToolLabel(part.type);
-    return { title, label };
-  }, [output, part.type]);
-
-  const isOutputAvailable = part.state === "output-available" && !!output;
-
-  const docSearchOutput =
-    isOutputAvailable && output && isDocSearchResultsOutput(output)
-      ? output
-      : null;
-  const docPageOutput =
-    isOutputAvailable && output && isDocPageOutput(output) ? output : null;
-  const noResultsOutput =
-    isOutputAvailable && output && isNoResultsOutput(output) ? output : null;
-  const errorOutput =
-    isOutputAvailable && output && isErrorOutput(output) ? output : null;
-
-  const hasExpandableContent =
-    isOutputAvailable &&
-    ((!!docSearchOutput && docSearchOutput.count > 0) ||
-      !!docPageOutput ||
-      !!noResultsOutput ||
-      !!errorOutput);
-
-  const accordionDescription =
-    hasExpandableContent && docSearchOutput
-      ? `Found ${docSearchOutput.count} result${docSearchOutput.count === 1 ? "" : "s"} for "${docSearchOutput.query}"`
-      : hasExpandableContent && docPageOutput
-        ? docPageOutput.path
-        : hasExpandableContent && (noResultsOutput || errorOutput)
-          ? ((noResultsOutput ?? errorOutput)?.message ?? null)
-          : null;
-
-  return (
-    <div className="py-2">
-      <div className="flex items-center gap-2 text-sm text-muted-foreground">
-        <ToolIcon
-          toolType={part.type}
-          isStreaming={isStreaming}
-          isError={isError}
-        />
-        <MorphingTextAnimation
-          text={text}
-          className={isError ? "text-red-500" : undefined}
-        />
-      </div>
-
-      {hasExpandableContent && normalized && (
-        <ToolAccordion
-          badgeText={normalized.label}
-          title={normalized.title}
-          description={accordionDescription}
-        >
-          {docSearchOutput && (
-            <div className="grid gap-2">
-              {docSearchOutput.results.map((r) => {
-                const href = r.doc_url ?? toDocsUrl(r.path);
-                return (
-                  <div
-                    key={r.path}
-                    className="rounded-2xl border bg-background p-3"
-                  >
-                    <div className="flex items-start justify-between gap-2">
-                      <div className="min-w-0">
-                        <p className="truncate text-sm font-medium text-foreground">
-                          {r.title}
-                        </p>
-                        <p className="mt-0.5 truncate text-xs text-muted-foreground">
-                          {r.path}
-                          {r.section ? ` • ${r.section}` : ""}
-                        </p>
-                        <p className="mt-2 text-xs text-muted-foreground">
-                          {truncate(r.snippet, 240)}
-                        </p>
-                      </div>
-                      <Link
-                        href={href}
-                        target="_blank"
-                        rel="noreferrer"
-                        className="shrink-0 text-xs font-medium text-purple-600 hover:text-purple-700"
-                      >
-                        Open
-                      </Link>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          )}
-
-          {docPageOutput && (
-            <div>
-              <div className="flex items-start justify-between gap-2">
-                <div className="min-w-0">
-                  <p className="truncate text-sm font-medium text-foreground">
-                    {docPageOutput.title}
-                  </p>
-                  <p className="mt-0.5 truncate text-xs text-muted-foreground">
-                    {docPageOutput.path}
-                  </p>
-                </div>
-                <Link
-                  href={docPageOutput.doc_url ?? toDocsUrl(docPageOutput.path)}
-                  target="_blank"
-                  rel="noreferrer"
-                  className="shrink-0 text-xs font-medium text-purple-600 hover:text-purple-700"
-                >
-                  Open
-                </Link>
-              </div>
-              <p className="mt-2 whitespace-pre-wrap text-xs text-muted-foreground">
-                {truncate(docPageOutput.content, 800)}
-              </p>
-            </div>
-          )}
-
-          {noResultsOutput && (
-            <div>
-              <p className="text-sm text-foreground">
-                {noResultsOutput.message}
-              </p>
-              {noResultsOutput.suggestions &&
-                noResultsOutput.suggestions.length > 0 && (
-                  <ul className="mt-2 list-disc space-y-1 pl-5 text-xs text-muted-foreground">
-                    {noResultsOutput.suggestions.slice(0, 5).map((s) => (
-                      <li key={s}>{s}</li>
-                    ))}
-                  </ul>
-                )}
-            </div>
-          )}
-
-          {errorOutput && (
-            <div>
-              <p className="text-sm text-foreground">{errorOutput.message}</p>
-              {errorOutput.error && (
-                <p className="mt-2 text-xs text-muted-foreground">
-                  {errorOutput.error}
-                </p>
-              )}
-            </div>
-          )}
-        </ToolAccordion>
-      )}
-    </div>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/SearchDocs/helpers.tsx

@@ -1,205 +0,0 @@
-import { ToolUIPart } from "ai";
-import { FileMagnifyingGlassIcon, FileTextIcon } from "@phosphor-icons/react";
-import type { DocPageResponse } from "@/app/api/__generated__/models/docPageResponse";
-import type { DocSearchResultsResponse } from "@/app/api/__generated__/models/docSearchResultsResponse";
-import type { ErrorResponse } from "@/app/api/__generated__/models/errorResponse";
-import type { NoResultsResponse } from "@/app/api/__generated__/models/noResultsResponse";
-import { ResponseType } from "@/app/api/__generated__/models/responseType";
-
-export interface SearchDocsInput {
-  query: string;
-}
-
-export interface GetDocPageInput {
-  path: string;
-}
-
-export type DocsToolOutput =
-  | DocSearchResultsResponse
-  | DocPageResponse
-  | NoResultsResponse
-  | ErrorResponse;
-
-export type DocsToolType = "tool-search_docs" | "tool-get_doc_page" | string;
-
-export function getToolLabel(toolType: DocsToolType): string {
-  switch (toolType) {
-    case "tool-search_docs":
-      return "Docs";
-    case "tool-get_doc_page":
-      return "Docs page";
-    default:
-      return "Docs";
-  }
-}
-
-function parseOutput(output: unknown): DocsToolOutput | null {
-  if (!output) return null;
-  if (typeof output === "string") {
-    const trimmed = output.trim();
-    if (!trimmed) return null;
-    try {
-      return parseOutput(JSON.parse(trimmed) as unknown);
-    } catch {
-      return null;
-    }
-  }
-  if (typeof output === "object") {
-    const type = (output as { type?: unknown }).type;
-    if (
-      type === ResponseType.doc_search_results ||
-      type === ResponseType.doc_page ||
-      type === ResponseType.no_results ||
-      type === ResponseType.error
-    ) {
-      return output as DocsToolOutput;
-    }
-    if ("results" in output && "query" in output)
-      return output as DocSearchResultsResponse;
-    if ("content" in output && "path" in output)
-      return output as DocPageResponse;
-    if ("suggestions" in output && !("error" in output))
-      return output as NoResultsResponse;
-    if ("error" in output || "details" in output)
-      return output as ErrorResponse;
-  }
-  return null;
-}
-
-export function getDocsToolOutput(part: unknown): DocsToolOutput | null {
-  if (!part || typeof part !== "object") return null;
-  return parseOutput((part as { output?: unknown }).output);
-}
-
-export function isDocSearchResultsOutput(
-  output: DocsToolOutput,
-): output is DocSearchResultsResponse {
-  return output.type === ResponseType.doc_search_results || "results" in output;
-}
-
-export function isDocPageOutput(
-  output: DocsToolOutput,
-): output is DocPageResponse {
-  return output.type === ResponseType.doc_page || "content" in output;
-}
-
-export function isNoResultsOutput(
-  output: DocsToolOutput,
-): output is NoResultsResponse {
-  return (
-    output.type === ResponseType.no_results ||
-    ("suggestions" in output && !("error" in output))
-  );
-}
-
-export function isErrorOutput(output: DocsToolOutput): output is ErrorResponse {
-  return output.type === ResponseType.error || "error" in output;
-}
-
-export function getDocsToolTitle(
-  toolType: DocsToolType,
-  output: DocsToolOutput,
-): string {
-  if (toolType === "tool-search_docs") {
-    if (isDocSearchResultsOutput(output)) return "Documentation results";
-    if (isNoResultsOutput(output)) return "No documentation found";
-    return "Documentation search error";
-  }
-
-  if (isDocPageOutput(output)) return "Documentation page";
-  if (isNoResultsOutput(output)) return "No documentation found";
-  return "Documentation page error";
-}
-
-export function getAnimationText(part: {
-  type: DocsToolType;
-  state: ToolUIPart["state"];
-  input?: unknown;
-  output?: unknown;
-}): string {
-  switch (part.type) {
-    case "tool-search_docs": {
-      const query = (part.input as SearchDocsInput | undefined)?.query?.trim();
-      const queryText = query ? ` for "${query}"` : "";
-
-      switch (part.state) {
-        case "input-streaming":
-        case "input-available":
-          return `Searching documentation${queryText}`;
-        case "output-available": {
-          const output = parseOutput(part.output);
-          if (!output) return `Searching documentation${queryText}`;
-          if (isDocSearchResultsOutput(output)) {
-            const count = output.count ?? output.results.length;
-            return `Found ${count} result${count === 1 ? "" : "s"}${queryText}`;
-          }
-          if (isNoResultsOutput(output)) {
-            return `No results found${queryText}`;
-          }
-          return `Error searching documentation${queryText}`;
-        }
-        case "output-error":
-          return `Error searching documentation${queryText}`;
-        default:
-          return "Searching documentation";
-      }
-    }
-    case "tool-get_doc_page": {
-      const path = (part.input as GetDocPageInput | undefined)?.path?.trim();
-      const pathText = path ? ` "${path}"` : "";
-
-      switch (part.state) {
-        case "input-streaming":
-        case "input-available":
-          return `Loading documentation page${pathText}`;
-        case "output-available": {
-          const output = parseOutput(part.output);
-          if (!output) return `Loading documentation page${pathText}`;
-          if (isDocPageOutput(output)) return `Loaded "${output.title}"`;
-          if (isNoResultsOutput(output)) return "Documentation page not found";
-          return "Error loading documentation page";
-        }
-        case "output-error":
-          return "Error loading documentation page";
-        default:
-          return "Loading documentation page";
-      }
-    }
-  }
-
-  return "Processing";
-}
-
-export function ToolIcon({
-  toolType,
-  isStreaming,
-  isError,
-}: {
-  toolType: DocsToolType;
-  isStreaming?: boolean;
-  isError?: boolean;
-}) {
-  const IconComponent =
-    toolType === "tool-get_doc_page" ? FileTextIcon : FileMagnifyingGlassIcon;
-
-  return (
-    <IconComponent
-      size={14}
-      weight="regular"
-      className={
-        isError
-          ? "text-red-500"
-          : isStreaming
-            ? "text-neutral-500"
-            : "text-neutral-400"
-      }
-    />
-  );
-}
-
-export function toDocsUrl(path: string): string {
-  const urlPath = path.includes(".")
-    ? path.slice(0, path.lastIndexOf("."))
-    : path;
-  return `https://docs.agpt.co/${urlPath}`;
-}

autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/ViewAgentOutput/ViewAgentOutput.tsx

@@ -1,181 +0,0 @@
-"use client";
-
-import type { ToolUIPart } from "ai";
-import Link from "next/link";
-import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
-import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
-import {
-  formatMaybeJson,
-  getAnimationText,
-  getViewAgentOutputToolOutput,
-  isAgentOutputResponse,
-  isErrorResponse,
-  isNoResultsResponse,
-  ToolIcon,
-  type ViewAgentOutputToolOutput,
-} from "./helpers";
-
-export interface ViewAgentOutputToolPart {
-  type: string;
-  toolCallId: string;
-  state: ToolUIPart["state"];
-  input?: unknown;
-  output?: unknown;
-}
-
-interface Props {
-  part: ViewAgentOutputToolPart;
-}
-
-function getAccordionMeta(output: ViewAgentOutputToolOutput): {
-  badgeText: string;
-  title: string;
-  description?: string;
-} {
-  if (isAgentOutputResponse(output)) {
-    const status = output.execution?.status;
-    return {
-      badgeText: "Agent output",
-      title: output.agent_name,
-      description: status ? `Status: ${status}` : output.message,
-    };
-  }
-  if (isNoResultsResponse(output)) {
-    return { badgeText: "Agent output", title: "No results" };
-  }
-  return { badgeText: "Agent output", title: "Error" };
-}
-
-export function ViewAgentOutputTool({ part }: Props) {
-  const text = getAnimationText(part);
-  const isStreaming =
-    part.state === "input-streaming" || part.state === "input-available";
-
-  const output = getViewAgentOutputToolOutput(part);
-  const isError =
-    part.state === "output-error" || (!!output && isErrorResponse(output));
-  const hasExpandableContent =
-    part.state === "output-available" &&
-    !!output &&
-    (isAgentOutputResponse(output) ||
-      isNoResultsResponse(output) ||
-      isErrorResponse(output));
-
-  return (
-    <div className="py-2">
-      <div className="flex items-center gap-2 text-sm text-muted-foreground">
-        <ToolIcon isStreaming={isStreaming} isError={isError} />
-        <MorphingTextAnimation
-          text={text}
-          className={isError ? "text-red-500" : undefined}
-        />
-      </div>
-
-      {hasExpandableContent && output && (
-        <ToolAccordion {...getAccordionMeta(output)}>
-          {isAgentOutputResponse(output) && (
-            <div className="grid gap-2">
-              <div className="flex items-start justify-between gap-3">
-                <p className="text-sm text-foreground">{output.message}</p>
-                {output.library_agent_link && (
-                  <Link
-                    href={output.library_agent_link}
-                    className="shrink-0 text-xs font-medium text-purple-600 hover:text-purple-700"
-                  >
-                    Open
-                  </Link>
-                )}
-              </div>
-
-              {output.execution ? (
-                <div className="grid gap-2">
-                  <div className="rounded-2xl border bg-background p-3">
-                    <p className="text-xs font-medium text-foreground">
-                      Execution
-                    </p>
-                    <p className="mt-1 truncate text-xs text-muted-foreground">
-                      {output.execution.execution_id}
-                    </p>
-                    <p className="mt-1 text-xs text-muted-foreground">
-                      Status: {output.execution.status}
-                    </p>
-                  </div>
-
-                  {output.execution.inputs_summary && (
-                    <div className="rounded-2xl border bg-background p-3">
-                      <p className="text-xs font-medium text-foreground">
-                        Inputs summary
-                      </p>
-                      <pre className="mt-2 whitespace-pre-wrap text-xs text-muted-foreground">
-                        {formatMaybeJson(output.execution.inputs_summary)}
-                      </pre>
-                    </div>
-                  )}
-
-                  {Object.entries(output.execution.outputs ?? {}).map(
-                    ([key, items]) => (
-                      <div
-                        key={key}
-                        className="rounded-2xl border bg-background p-3"
-                      >
-                        <div className="flex items-center justify-between gap-2">
-                          <p className="truncate text-xs font-medium text-foreground">
-                            {key}
-                          </p>
-                          <span className="shrink-0 rounded-full border bg-muted px-2 py-0.5 text-[11px] text-muted-foreground">
-                            {items.length} item{items.length === 1 ? "" : "s"}
-                          </span>
-                        </div>
-                        <pre className="mt-2 whitespace-pre-wrap text-xs text-muted-foreground">
-                          {formatMaybeJson(items.slice(0, 3))}
-                        </pre>
-                      </div>
-                    ),
-                  )}
-                </div>
-              ) : (
-                <div className="rounded-2xl border bg-background p-3">
-                  <p className="text-sm text-foreground">
-                    No execution selected.
-                  </p>
-                  <p className="mt-1 text-xs text-muted-foreground">
-                    Try asking for a specific run or execution_id.
-                  </p>
-                </div>
-              )}
-            </div>
-          )}
-
-          {isNoResultsResponse(output) && (
-            <div className="grid gap-2">
-              <p className="text-sm text-foreground">{output.message}</p>
-              {output.suggestions && output.suggestions.length > 0 && (
-                <ul className="mt-1 list-disc space-y-1 pl-5 text-xs text-muted-foreground">
-                  {output.suggestions.slice(0, 5).map((s) => (
-                    <li key={s}>{s}</li>
-                  ))}
-                </ul>
-              )}
-            </div>
-          )}
-
-          {isErrorResponse(output) && (
-            <div className="grid gap-2">
-              <p className="text-sm text-foreground">{output.message}</p>
-              {output.error && (
-                <pre className="whitespace-pre-wrap rounded-2xl border bg-muted/30 p-3 text-xs text-muted-foreground">
-                  {formatMaybeJson(output.error)}
-                </pre>
-              )}
-              {output.details && (
-                <pre className="whitespace-pre-wrap rounded-2xl border bg-muted/30 p-3 text-xs text-muted-foreground">
-                  {formatMaybeJson(output.details)}
-                </pre>
-              )}
-            </div>
-          )}
-        </ToolAccordion>
-      )}
-    </div>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/ViewAgentOutput/helpers.tsx

@@ -1,154 +0,0 @@
-import type { ToolUIPart } from "ai";
-import { EyeIcon } from "@phosphor-icons/react";
-import type { AgentOutputResponse } from "@/app/api/__generated__/models/agentOutputResponse";
-import type { ErrorResponse } from "@/app/api/__generated__/models/errorResponse";
-import type { NoResultsResponse } from "@/app/api/__generated__/models/noResultsResponse";
-import { ResponseType } from "@/app/api/__generated__/models/responseType";
-
-export interface ViewAgentOutputInput {
-  agent_name?: string;
-  library_agent_id?: string;
-  store_slug?: string;
-  execution_id?: string;
-  run_time?: string;
-}
-
-export type ViewAgentOutputToolOutput =
-  | AgentOutputResponse
-  | NoResultsResponse
-  | ErrorResponse;
-
-function parseOutput(output: unknown): ViewAgentOutputToolOutput | null {
-  if (!output) return null;
-  if (typeof output === "string") {
-    const trimmed = output.trim();
-    if (!trimmed) return null;
-    try {
-      return parseOutput(JSON.parse(trimmed) as unknown);
-    } catch {
-      return null;
-    }
-  }
-  if (typeof output === "object") {
-    const type = (output as { type?: unknown }).type;
-    if (
-      type === ResponseType.agent_output ||
-      type === ResponseType.no_results ||
-      type === ResponseType.error
-    ) {
-      return output as ViewAgentOutputToolOutput;
-    }
-    if ("agent_id" in output && "agent_name" in output) {
-      return output as AgentOutputResponse;
-    }
-    if ("suggestions" in output && !("error" in output)) {
-      return output as NoResultsResponse;
-    }
-    if ("error" in output || "details" in output)
-      return output as ErrorResponse;
-  }
-  return null;
-}
-
-export function isAgentOutputResponse(
-  output: ViewAgentOutputToolOutput,
-): output is AgentOutputResponse {
-  return output.type === ResponseType.agent_output || "agent_id" in output;
-}
-
-export function isNoResultsResponse(
-  output: ViewAgentOutputToolOutput,
-): output is NoResultsResponse {
-  return (
-    output.type === ResponseType.no_results ||
-    ("suggestions" in output && !("error" in output))
-  );
-}
-
-export function isErrorResponse(
-  output: ViewAgentOutputToolOutput,
-): output is ErrorResponse {
-  return output.type === ResponseType.error || "error" in output;
-}
-
-export function getViewAgentOutputToolOutput(
-  part: unknown,
-): ViewAgentOutputToolOutput | null {
-  if (!part || typeof part !== "object") return null;
-  return parseOutput((part as { output?: unknown }).output);
-}
-
-function getAgentIdentifierText(
-  input: ViewAgentOutputInput | undefined,
-): string | null {
-  if (!input) return null;
-  const libraryId = input.library_agent_id?.trim();
-  if (libraryId) return `Library agent ${libraryId}`;
-  const slug = input.store_slug?.trim();
-  if (slug) return slug;
-  const name = input.agent_name?.trim();
-  if (name) return name;
-  return null;
-}
-
-export function getAnimationText(part: {
-  state: ToolUIPart["state"];
-  input?: unknown;
-  output?: unknown;
-}): string {
-  const input = part.input as ViewAgentOutputInput | undefined;
-  const agent = getAgentIdentifierText(input);
-  const agentText = agent ? ` "${agent}"` : "";
-
-  switch (part.state) {
-    case "input-streaming":
-    case "input-available":
-      return `Retrieving agent output${agentText}`;
-    case "output-available": {
-      const output = parseOutput(part.output);
-      if (!output) return `Retrieving agent output${agentText}`;
-      if (isAgentOutputResponse(output)) {
-        if (output.execution)
-          return `Retrieved output (${output.execution.status})`;
-        return "Retrieved agent output";
-      }
-      if (isNoResultsResponse(output)) return "No outputs found";
-      return "Error loading agent output";
-    }
-    case "output-error":
-      return "Error loading agent output";
-    default:
-      return "Retrieving agent output";
-  }
-}
-
-export function ToolIcon({
-  isStreaming,
-  isError,
-}: {
-  isStreaming?: boolean;
-  isError?: boolean;
-}) {
-  return (
-    <EyeIcon
-      size={14}
-      weight="regular"
-      className={
-        isError
-          ? "text-red-500"
-          : isStreaming
-            ? "text-neutral-500"
-            : "text-neutral-400"
-      }
-    />
-  );
-}
-
-export function formatMaybeJson(value: unknown): string {
-  if (typeof value === "string") return value;
-  try {
-    return JSON.stringify(value, null, 2);
-  } catch {
-    return String(value);
-  }
-}

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

@@ -1,64 +0,0 @@
-import {
-  getGetV2ListSessionsQueryKey,
-  useGetV2GetSession,
-  usePostV2CreateSession,
-} from "@/app/api/__generated__/endpoints/chat/chat";
-import { useQueryClient } from "@tanstack/react-query";
-import { parseAsString, useQueryState } from "nuqs";
-import { useMemo } from "react";
-import { convertChatSessionMessagesToUiMessages } from "./helpers/convertChatSessionToUiMessages";
-
-export function useChatSession() {
-  const [sessionId, setSessionId] = useQueryState("sessionId", parseAsString);
-  const queryClient = useQueryClient();
-
-  const sessionQuery = useGetV2GetSession(sessionId ?? "", {
-    query: {
-      staleTime: Infinity,
-      refetchOnWindowFocus: false,
-      refetchOnReconnect: false,
-    },
-  });
-
-  // Memoize so the effect in useCopilotPage doesn't infinite-loop on a new
-  // array reference every render. Re-derives only when query data changes.
-  const hydratedMessages = useMemo(() => {
-    if (sessionQuery.data?.status !== 200 || !sessionId) return undefined;
-    return convertChatSessionMessagesToUiMessages(
-      sessionId,
-      sessionQuery.data.data.messages ?? [],
-    );
-  }, [sessionQuery.data, sessionId]);
-
-  const { mutateAsync: createSessionMutation, isPending: isCreatingSession } =
-    usePostV2CreateSession({
-      mutation: {
-        onSuccess: (response) => {
-          if (response.status === 200 && response.data?.id) {
-            setSessionId(response.data.id);
-            queryClient.invalidateQueries({
-              queryKey: getGetV2ListSessionsQueryKey(),
-            });
-          }
-        },
-      },
-    });
-
-  async function createSession() {
-    if (sessionId) return sessionId;
-    const response = await createSessionMutation();
-    if (response.status !== 200 || !response.data?.id) {
-      throw new Error("Failed to create session");
-    }
-    return response.data.id;
-  }
-
-  return {
-    sessionId,
-    setSessionId,
-    hydratedMessages,
-    isLoadingSession: sessionQuery.isLoading,
-    createSession,
-    isCreatingSession,
-  };
-}

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

@@ -1,137 +0,0 @@
-import { useGetV2ListSessions } from "@/app/api/__generated__/endpoints/chat/chat";
-import { useBreakpoint } from "@/lib/hooks/useBreakpoint";
-import { useChat } from "@ai-sdk/react";
-import { DefaultChatTransport } from "ai";
-import { useCallback, useEffect, useState } from "react";
-import { useChatSession } from "./useChatSession";
-
-export function useCopilotPage() {
-  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-  const [pendingMessage, setPendingMessage] = useState<string | null>(null);
-
-  const {
-    sessionId,
-    setSessionId,
-    hydratedMessages,
-    isLoadingSession,
-    createSession,
-    isCreatingSession,
-  } = useChatSession();
-
-  const breakpoint = useBreakpoint();
-  const isMobile =
-    breakpoint === "base" || breakpoint === "sm" || breakpoint === "md";
-
-  const transport = sessionId
-    ? new DefaultChatTransport({
-        api: `/api/chat/sessions/${sessionId}/stream`,
-        prepareSendMessagesRequest: ({ messages }) => {
-          const last = messages[messages.length - 1];
-          return {
-            body: {
-              message: last.parts
-                ?.map((p) => (p.type === "text" ? p.text : ""))
-                .join(""),
-              is_user_message: last.role === "user",
-              context: null,
-            },
-          };
-        },
-        // Resume uses GET on the same endpoint (no message param → backend resumes)
-        prepareReconnectToStreamRequest: () => ({
-          api: `/api/chat/sessions/${sessionId}/stream`,
-        }),
-      })
-    : null;
-
-  const { messages, sendMessage, status, error, setMessages } = useChat({
-    id: sessionId ?? undefined,
-    transport: transport ?? undefined,
-    resume: !!sessionId,
-  });
-
-  useEffect(() => {
-    if (!hydratedMessages || hydratedMessages.length === 0) return;
-    setMessages((prev) => {
-      if (prev.length > hydratedMessages.length) return prev;
-      return hydratedMessages;
-    });
-  }, [hydratedMessages, setMessages]);
-
-  // Clear messages when session is null
-  useEffect(() => {
-    if (!sessionId) setMessages([]);
-  }, [sessionId, setMessages]);
-
-  useEffect(() => {
-    if (!sessionId || !pendingMessage) return;
-    const msg = pendingMessage;
-    setPendingMessage(null);
-    sendMessage({ text: msg });
-  }, [sessionId, pendingMessage, sendMessage]);
-
-  async function onSend(message: string) {
-    const trimmed = message.trim();
-    if (!trimmed) return;
-
-    if (sessionId) {
-      sendMessage({ text: trimmed });
-      return;
-    }
-
-    setPendingMessage(trimmed);
-    await createSession();
-  }
-
-  const { data: sessionsResponse, isLoading: isLoadingSessions } =
-    useGetV2ListSessions({ limit: 50 });
-
-  const sessions =
-    sessionsResponse?.status === 200 ? sessionsResponse.data.sessions : [];
-
-  const handleOpenDrawer = useCallback(() => {
-    setIsDrawerOpen(true);
-  }, []);
-
-  const handleCloseDrawer = useCallback(() => {
-    setIsDrawerOpen(false);
-  }, []);
-
-  const handleDrawerOpenChange = useCallback((open: boolean) => {
-    setIsDrawerOpen(open);
-  }, []);
-
-  const handleSelectSession = useCallback(
-    (id: string) => {
-      setSessionId(id);
-      if (isMobile) setIsDrawerOpen(false);
-    },
-    [setSessionId, isMobile],
-  );
-
-  const handleNewChat = useCallback(() => {
-    setSessionId(null);
-    if (isMobile) setIsDrawerOpen(false);
-  }, [setSessionId, isMobile]);
-
-  return {
-    sessionId,
-    messages,
-    status,
-    error,
-    isLoadingSession,
-    isCreatingSession,
-    createSession,
-    onSend,
-    // Mobile drawer
-    isMobile,
-    isDrawerOpen,
-    sessions,
-    isLoadingSessions,
-    handleOpenDrawer,
-    handleCloseDrawer,
-    handleDrawerOpenChange,
-    handleSelectSession,
-    handleNewChat,
-  };
-}

autogpt_platform/frontend/src/app/api/chat/sessions/[sessionId]/stream/route.ts

@@ -88,27 +88,39 @@ export async function POST(
 }
 
 /**
- * Resume an active stream for a session.
- *
- * Called by the AI SDK's `useChat(resume: true)` on page load.
- * Proxies to the backend which checks for an active stream and either
- * replays it (200 + SSE) or returns 204 No Content.
+ * Legacy GET endpoint for backward compatibility
  */
 export async function GET(
-  _request: NextRequest,
+  request: NextRequest,
   { params }: { params: Promise<{ sessionId: string }> },
 ) {
   const { sessionId } = await params;
+  const searchParams = request.nextUrl.searchParams;
+  const message = searchParams.get("message");
+  const isUserMessage = searchParams.get("is_user_message");
+
+  if (!message) {
+    return new Response("Missing message parameter", { status: 400 });
+  }
 
   try {
+    // Get auth token from server-side session
     const token = await getServerAuthToken();
 
+    // Build backend URL
     const backendUrl = environment.getAGPTServerBaseUrl();
     const streamUrl = new URL(
       `/api/chat/sessions/${sessionId}/stream`,
       backendUrl,
     );
+    streamUrl.searchParams.set("message", message);
 
+    // Pass is_user_message parameter if provided
+    if (isUserMessage !== null) {
+      streamUrl.searchParams.set("is_user_message", isUserMessage);
+    }
+
+    // Forward request to backend with auth header
     const headers: Record<string, string> = {
       Accept: "text/event-stream",
       "Cache-Control": "no-cache",
@@ -124,11 +136,6 @@ export async function GET(
       headers,
     });
 
-    // 204 = no active stream to resume
-    if (response.status === 204) {
-      return new Response(null, { status: 204 });
-    }
-
     if (!response.ok) {
       const error = await response.text();
       return new Response(error, {
@@ -137,17 +144,17 @@ export async function GET(
       });
     }
 
+    // Return the SSE stream directly
     return new Response(response.body, {
       headers: {
         "Content-Type": "text/event-stream",
         "Cache-Control": "no-cache, no-transform",
         Connection: "keep-alive",
         "X-Accel-Buffering": "no",
-        "x-vercel-ai-ui-message-stream": "v1",
       },
     });
   } catch (error) {
-    console.error("Resume stream proxy error:", error);
+    console.error("SSE proxy error:", error);
     return new Response(
       JSON.stringify({
         error: "Failed to connect to chat service",

autogpt_platform/frontend/src/app/globals.css

@@ -1,7 +1,6 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@source "../node_modules/streamdown/dist/*.js";
 
 @layer base {
   :root {
@@ -30,14 +29,6 @@
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 
   .dark {
@@ -65,14 +56,6 @@
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 
   * {

autogpt_platform/frontend/src/components/ai-elements/conversation.tsx

@@ -1,109 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import { scrollbarStyles } from "@/components/styles/scrollbars";
-import { cn } from "@/lib/utils";
-import { ArrowDownIcon } from "lucide-react";
-import type { ComponentProps } from "react";
-import { useCallback } from "react";
-import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
-
-export type ConversationProps = ComponentProps<typeof StickToBottom>;
-
-export const Conversation = ({ className, ...props }: ConversationProps) => (
-  <StickToBottom
-    className={cn(
-      "relative flex-1 overflow-y-hidden",
-      scrollbarStyles,
-      className,
-    )}
-    initial="smooth"
-    resize="smooth"
-    role="log"
-    {...props}
-  />
-);
-
-export type ConversationContentProps = ComponentProps<
-  typeof StickToBottom.Content
->;
-
-export const ConversationContent = ({
-  className,
-  ...props
-}: ConversationContentProps) => (
-  <StickToBottom.Content
-    className={cn("flex flex-col gap-8 p-4", className)}
-    {...props}
-  />
-);
-
-export type ConversationEmptyStateProps = ComponentProps<"div"> & {
-  title?: string;
-  description?: string;
-  icon?: React.ReactNode;
-};
-
-export const ConversationEmptyState = ({
-  className,
-  title = "No messages yet",
-  description = "Start a conversation to see messages here",
-  icon,
-  children,
-  ...props
-}: ConversationEmptyStateProps) => (
-  <div
-    className={cn(
-      "flex size-full flex-col items-center justify-center gap-3 p-8 text-center",
-      className,
-    )}
-    {...props}
-  >
-    {children ?? (
-      <>
-        {icon && (
-          <div className="text-neutral-500 dark:text-neutral-400">{icon}</div>
-        )}
-        <div className="space-y-1">
-          <h3 className="text-sm font-medium">{title}</h3>
-          {description && (
-            <p className="text-sm text-neutral-500 dark:text-neutral-400">
-              {description}
-            </p>
-          )}
-        </div>
-      </>
-    )}
-  </div>
-);
-
-export type ConversationScrollButtonProps = ComponentProps<typeof Button>;
-
-export const ConversationScrollButton = ({
-  className,
-  ...props
-}: ConversationScrollButtonProps) => {
-  const { isAtBottom, scrollToBottom } = useStickToBottomContext();
-
-  const handleScrollToBottom = useCallback(() => {
-    scrollToBottom();
-  }, [scrollToBottom]);
-
-  return (
-    !isAtBottom && (
-      <Button
-        className={cn(
-          "absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full dark:bg-white dark:dark:bg-neutral-950 dark:dark:hover:bg-neutral-800 dark:hover:bg-neutral-100",
-          className,
-        )}
-        onClick={handleScrollToBottom}
-        size="icon"
-        type="button"
-        variant="outline"
-        {...props}
-      >
-        <ArrowDownIcon className="size-4" />
-      </Button>
-    )
-  );
-};

autogpt_platform/frontend/src/components/ai-elements/message.tsx

@@ -1,338 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import { ButtonGroup, ButtonGroupText } from "@/components/ui/button-group";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
-import { cjk } from "@streamdown/cjk";
-import { code } from "@streamdown/code";
-import { math } from "@streamdown/math";
-import { mermaid } from "@streamdown/mermaid";
-import type { UIMessage } from "ai";
-import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
-import type { ComponentProps, HTMLAttributes, ReactElement } from "react";
-import { createContext, memo, useContext, useEffect, useState } from "react";
-import { Streamdown } from "streamdown";
-
-export type MessageProps = HTMLAttributes<HTMLDivElement> & {
-  from: UIMessage["role"];
-};
-
-export const Message = ({ className, from, ...props }: MessageProps) => (
-  <div
-    className={cn(
-      "group flex w-full max-w-[95%] flex-col gap-2",
-      from === "user" ? "is-user ml-auto justify-end" : "is-assistant",
-      className,
-    )}
-    {...props}
-  />
-);
-
-export type MessageContentProps = HTMLAttributes<HTMLDivElement>;
-
-export const MessageContent = ({
-  children,
-  className,
-  ...props
-}: MessageContentProps) => (
-  <div
-    className={cn(
-      "is-user:dark flex w-full min-w-0 max-w-full flex-col gap-2 overflow-hidden text-sm",
-      "group-[.is-user]:w-fit",
-      "group-[.is-user]:ml-auto group-[.is-user]:rounded-lg group-[.is-user]:bg-neutral-100 group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-neutral-950 dark:group-[.is-user]:bg-neutral-800 dark:group-[.is-user]:text-neutral-50",
-      "group-[.is-assistant]:text-neutral-950 dark:group-[.is-assistant]:text-neutral-50",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-  </div>
-);
-
-export type MessageActionsProps = ComponentProps<"div">;
-
-export const MessageActions = ({
-  className,
-  children,
-  ...props
-}: MessageActionsProps) => (
-  <div className={cn("flex items-center gap-1", className)} {...props}>
-    {children}
-  </div>
-);
-
-export type MessageActionProps = ComponentProps<typeof Button> & {
-  tooltip?: string;
-  label?: string;
-};
-
-export const MessageAction = ({
-  tooltip,
-  children,
-  label,
-  variant = "ghost",
-  size = "icon-sm",
-  ...props
-}: MessageActionProps) => {
-  const button = (
-    <Button size={size} type="button" variant={variant} {...props}>
-      {children}
-      <span className="sr-only">{label || tooltip}</span>
-    </Button>
-  );
-
-  if (tooltip) {
-    return (
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>{button}</TooltipTrigger>
-          <TooltipContent>
-            <p>{tooltip}</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    );
-  }
-
-  return button;
-};
-
-interface MessageBranchContextType {
-  currentBranch: number;
-  totalBranches: number;
-  goToPrevious: () => void;
-  goToNext: () => void;
-  branches: ReactElement[];
-  setBranches: (branches: ReactElement[]) => void;
-}
-
-const MessageBranchContext = createContext<MessageBranchContextType | null>(
-  null,
-);
-
-const useMessageBranch = () => {
-  const context = useContext(MessageBranchContext);
-
-  if (!context) {
-    throw new Error("MessageBranch components must be used within");
-  }
-
-  return context;
-};
-
-export type MessageBranchProps = HTMLAttributes<HTMLDivElement> & {
-  defaultBranch?: number;
-  onBranchChange?: (branchIndex: number) => void;
-};
-
-export const MessageBranch = ({
-  defaultBranch = 0,
-  onBranchChange,
-  className,
-  ...props
-}: MessageBranchProps) => {
-  const [currentBranch, setCurrentBranch] = useState(defaultBranch);
-  const [branches, setBranches] = useState<ReactElement[]>([]);
-
-  const handleBranchChange = (newBranch: number) => {
-    setCurrentBranch(newBranch);
-    onBranchChange?.(newBranch);
-  };
-
-  const goToPrevious = () => {
-    const newBranch =
-      currentBranch > 0 ? currentBranch - 1 : branches.length - 1;
-    handleBranchChange(newBranch);
-  };
-
-  const goToNext = () => {
-    const newBranch =
-      currentBranch < branches.length - 1 ? currentBranch + 1 : 0;
-    handleBranchChange(newBranch);
-  };
-
-  const contextValue: MessageBranchContextType = {
-    currentBranch,
-    totalBranches: branches.length,
-    goToPrevious,
-    goToNext,
-    branches,
-    setBranches,
-  };
-
-  return (
-    <MessageBranchContext.Provider value={contextValue}>
-      <div
-        className={cn("grid w-full gap-2 [&>div]:pb-0", className)}
-        {...props}
-      />
-    </MessageBranchContext.Provider>
-  );
-};
-
-export type MessageBranchContentProps = HTMLAttributes<HTMLDivElement>;
-
-export const MessageBranchContent = ({
-  children,
-  ...props
-}: MessageBranchContentProps) => {
-  const { currentBranch, setBranches, branches } = useMessageBranch();
-  const childrenArray = Array.isArray(children) ? children : [children];
-
-  // Use useEffect to update branches when they change
-  useEffect(() => {
-    if (branches.length !== childrenArray.length) {
-      setBranches(childrenArray);
-    }
-  }, [childrenArray, branches, setBranches]);
-
-  return childrenArray.map((branch, index) => (
-    <div
-      className={cn(
-        "grid gap-2 overflow-hidden [&>div]:pb-0",
-        index === currentBranch ? "block" : "hidden",
-      )}
-      key={branch.key}
-      {...props}
-    >
-      {branch}
-    </div>
-  ));
-};
-
-export type MessageBranchSelectorProps = HTMLAttributes<HTMLDivElement> & {
-  from: UIMessage["role"];
-};
-
-export const MessageBranchSelector = ({
-  className,
-  from: _from,
-  ...props
-}: MessageBranchSelectorProps) => {
-  const { totalBranches } = useMessageBranch();
-
-  // Don't render if there's only one branch
-  if (totalBranches <= 1) {
-    return null;
-  }
-
-  return (
-    <ButtonGroup
-      className={cn(
-        "[&>*:not(:first-child)]:rounded-l-md [&>*:not(:last-child)]:rounded-r-md",
-        className,
-      )}
-      orientation="horizontal"
-      {...props}
-    />
-  );
-};
-
-export type MessageBranchPreviousProps = ComponentProps<typeof Button>;
-
-export const MessageBranchPrevious = ({
-  children,
-  ...props
-}: MessageBranchPreviousProps) => {
-  const { goToPrevious, totalBranches } = useMessageBranch();
-
-  return (
-    <Button
-      aria-label="Previous branch"
-      disabled={totalBranches <= 1}
-      onClick={goToPrevious}
-      size="icon-sm"
-      type="button"
-      variant="ghost"
-      {...props}
-    >
-      {children ?? <ChevronLeftIcon size={14} />}
-    </Button>
-  );
-};
-
-export type MessageBranchNextProps = ComponentProps<typeof Button>;
-
-export const MessageBranchNext = ({
-  children,
-  ...props
-}: MessageBranchNextProps) => {
-  const { goToNext, totalBranches } = useMessageBranch();
-
-  return (
-    <Button
-      aria-label="Next branch"
-      disabled={totalBranches <= 1}
-      onClick={goToNext}
-      size="icon-sm"
-      type="button"
-      variant="ghost"
-      {...props}
-    >
-      {children ?? <ChevronRightIcon size={14} />}
-    </Button>
-  );
-};
-
-export type MessageBranchPageProps = HTMLAttributes<HTMLSpanElement>;
-
-export const MessageBranchPage = ({
-  className,
-  ...props
-}: MessageBranchPageProps) => {
-  const { currentBranch, totalBranches } = useMessageBranch();
-
-  return (
-    <ButtonGroupText
-      className={cn(
-        "border-none bg-transparent text-neutral-500 shadow-none dark:text-neutral-400",
-        className,
-      )}
-      {...props}
-    >
-      {currentBranch + 1} of {totalBranches}
-    </ButtonGroupText>
-  );
-};
-
-export type MessageResponseProps = ComponentProps<typeof Streamdown>;
-
-export const MessageResponse = memo(
-  ({ className, ...props }: MessageResponseProps) => (
-    <Streamdown
-      className={cn(
-        "size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
-        className,
-      )}
-      plugins={{ code, mermaid, math, cjk }}
-      {...props}
-    />
-  ),
-  (prevProps, nextProps) => prevProps.children === nextProps.children,
-);
-
-MessageResponse.displayName = "MessageResponse";
-
-export type MessageToolbarProps = ComponentProps<"div">;
-
-export const MessageToolbar = ({
-  className,
-  children,
-  ...props
-}: MessageToolbarProps) => (
-  <div
-    className={cn(
-      "mt-4 flex w-full items-center justify-between gap-4",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-  </div>
-);

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

@@ -77,7 +77,7 @@ export function OverflowText(props: Props) {
         "block min-w-0 overflow-hidden text-ellipsis whitespace-nowrap",
       )}
     >
-      <Text variant={variant} as="span" className={className} {...restProps}>
+      <Text variant={variant} className={className} {...restProps}>
         {value}
       </Text>
     </span>

autogpt_platform/frontend/src/components/contextual/Chat/components/ChatInput/ChatInput.tsx

@@ -6,19 +6,17 @@ import {
   MicrophoneIcon,
   StopIcon,
 } from "@phosphor-icons/react";
-import { ChangeEvent, useCallback } from "react";
 import { RecordingIndicator } from "./components/RecordingIndicator";
 import { useChatInput } from "./useChatInput";
 import { useVoiceRecording } from "./useVoiceRecording";
 
 export interface Props {
-  onSend: (message: string) => void | Promise<void>;
+  onSend: (message: string) => void;
   disabled?: boolean;
   isStreaming?: boolean;
   onStop?: () => void;
   placeholder?: string;
   className?: string;
-  inputId?: string;
 }
 
 export function ChatInput({
@@ -28,14 +26,14 @@ export function ChatInput({
   onStop,
   placeholder = "Type your message...",
   className,
-  inputId = "chat-input",
 }: Props) {
+  const inputId = "chat-input";
   const {
     value,
     setValue,
     handleKeyDown: baseHandleKeyDown,
     handleSubmit,
-    handleChange: baseHandleChange,
+    handleChange,
     hasMultipleLines,
   } = useChatInput({
     onSend,
@@ -62,15 +60,6 @@ export function ChatInput({
     inputId,
   });
 
-  // Block text changes when recording
-  const handleChange = useCallback(
-    (e: ChangeEvent<HTMLTextAreaElement>) => {
-      if (isRecording) return;
-      baseHandleChange(e);
-    },
-    [isRecording, baseHandleChange],
-  );
-
   return (
     <form onSubmit={handleSubmit} className={cn("relative flex-1", className)}>
       <div className="relative">

autogpt_platform/frontend/src/components/contextual/Chat/components/ChatInput/useChatInput.ts

@@ -21,7 +21,6 @@ export function useChatInput({
 }: Args) {
   const [value, setValue] = useState("");
   const [hasMultipleLines, setHasMultipleLines] = useState(false);
-  const [isSending, setIsSending] = useState(false);
 
   useEffect(
     function focusOnMount() {
@@ -101,40 +100,34 @@ export function useChatInput({
     }
   }, [value, maxRows, inputId]);
 
-  async function handleSend() {
-    if (disabled || isSending || !value.trim()) return;
-
-    setIsSending(true);
-    try {
-      await onSend(value.trim());
-      setValue("");
-      setHasMultipleLines(false);
-      const textarea = document.getElementById(inputId) as HTMLTextAreaElement;
-      const wrapper = document.getElementById(
-        `${inputId}-wrapper`,
-      ) as HTMLDivElement;
-      if (textarea) {
-        textarea.style.height = "auto";
-      }
-      if (wrapper) {
-        wrapper.style.height = "";
-        wrapper.style.maxHeight = "";
-      }
-    } finally {
-      setIsSending(false);
+  const handleSend = () => {
+    if (disabled || !value.trim()) return;
+    onSend(value.trim());
+    setValue("");
+    setHasMultipleLines(false);
+    const textarea = document.getElementById(inputId) as HTMLTextAreaElement;
+    const wrapper = document.getElementById(
+      `${inputId}-wrapper`,
+    ) as HTMLDivElement;
+    if (textarea) {
+      textarea.style.height = "auto";
     }
-  }
+    if (wrapper) {
+      wrapper.style.height = "";
+      wrapper.style.maxHeight = "";
+    }
+  };
 
   function handleKeyDown(event: KeyboardEvent<HTMLTextAreaElement>) {
     if (event.key === "Enter" && !event.shiftKey) {
       event.preventDefault();
-      void handleSend();
+      handleSend();
     }
   }
 
   function handleSubmit(e: FormEvent<HTMLFormElement>) {
     e.preventDefault();
-    void handleSend();
+    handleSend();
   }
 
   function handleChange(e: ChangeEvent<HTMLTextAreaElement>) {
@@ -149,6 +142,5 @@ export function useChatInput({
     handleSubmit,
     handleChange,
     hasMultipleLines,
-    isSending,
   };
 }

autogpt_platform/frontend/src/components/contextual/Chat/components/ChatInput/useVoiceRecording.ts

@@ -38,13 +38,9 @@ export function useVoiceRecording({
   const streamRef = useRef<MediaStream | null>(null);
   const isRecordingRef = useRef(false);
 
-  const [isSupported, setIsSupported] = useState(false);
-
-  useEffect(() => {
-    setIsSupported(
-      !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia),
-    );
-  }, []);
+  const isSupported =
+    typeof window !== "undefined" &&
+    !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia);
 
   const clearTimer = useCallback(() => {
     if (timerRef.current) {
@@ -218,33 +214,17 @@ export function useVoiceRecording({
 
   const handleKeyDown = useCallback(
     (event: KeyboardEvent<HTMLTextAreaElement>) => {
-      // Allow space to toggle recording (start when empty, stop when recording)
-      if (event.key === " " && !isTranscribing) {
-        if (isRecordingRef.current) {
-          // Stop recording on space
-          event.preventDefault();
-          stopRecording();
-          return;
-        } else if (!value.trim()) {
-          // Start recording on space when input is empty
-          event.preventDefault();
-          void startRecording();
-          return;
-        }
-      }
-      // Block all key events when recording (except space handled above)
-      if (isRecordingRef.current) {
+      if (event.key === " " && !value.trim() && !isTranscribing) {
         event.preventDefault();
+        toggleRecording();
         return;
       }
       baseHandleKeyDown(event);
     },
-    [value, isTranscribing, stopRecording, startRecording, baseHandleKeyDown],
+    [value, isTranscribing, toggleRecording, baseHandleKeyDown],
   );
 
   const showMicButton = isSupported;
-  // Don't include isRecording in disabled state - we need key events to work
-  // Text input is blocked via handleKeyDown instead
   const isInputDisabled = disabled || isStreaming || isTranscribing;
 
   // Cleanup on unmount

autogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsx

@@ -62,7 +62,7 @@ export function Navbar() {
           <PreviewBanner branchName={previewBranchName} />
         ) : null}
         <nav
-          className="inline-flex w-full items-center border border-none bg-[#FAFAFA] p-3 backdrop-blur-[26px]"
+          className="border-zinc-[#EFEFF0] inline-flex w-full items-center border border-[#EFEFF0] bg-[#F3F4F6]/20 p-3 backdrop-blur-[26px]"
           style={{ height: NAVBAR_HEIGHT_PX }}
         >
           {/* Left section */}

autogpt_platform/frontend/src/components/ui/button-group.tsx

@@ -1,83 +0,0 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-import { Separator } from "@/components/ui/separator";
-
-const buttonGroupVariants = cva(
-  "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
-  {
-    variants: {
-      orientation: {
-        horizontal:
-          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
-        vertical:
-          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
-      },
-    },
-    defaultVariants: {
-      orientation: "horizontal",
-    },
-  },
-);
-
-function ButtonGroup({
-  className,
-  orientation,
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
-  return (
-    <div
-      role="group"
-      data-slot="button-group"
-      data-orientation={orientation}
-      className={cn(buttonGroupVariants({ orientation }), className)}
-      {...props}
-    />
-  );
-}
-
-function ButtonGroupText({
-  className,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"div"> & {
-  asChild?: boolean;
-}) {
-  const Comp = asChild ? Slot : "div";
-
-  return (
-    <Comp
-      className={cn(
-        "shadow-xs flex items-center gap-2 rounded-md border border-neutral-200 bg-neutral-100 px-4 text-sm font-medium dark:border-neutral-800 dark:bg-neutral-800 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function ButtonGroupSeparator({
-  className,
-  orientation = "vertical",
-  ...props
-}: React.ComponentProps<typeof Separator>) {
-  return (
-    <Separator
-      data-slot="button-group-separator"
-      orientation={orientation}
-      className={cn(
-        "relative !m-0 self-stretch bg-neutral-200 data-[orientation=vertical]:h-auto dark:bg-neutral-800",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export {
-  ButtonGroup,
-  ButtonGroupSeparator,
-  ButtonGroupText,
-  buttonGroupVariants,
-};

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

@@ -1,59 +0,0 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:focus-visible:ring-neutral-300",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-neutral-900 text-neutral-50 shadow hover:bg-neutral-900/90 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50/90",
-        destructive:
-          "bg-red-500 text-neutral-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-neutral-50 dark:hover:bg-red-900/90",
-        outline:
-          "border border-neutral-200 bg-white shadow-sm hover:bg-neutral-100 hover:text-neutral-900 dark:border-neutral-800 dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
-        secondary:
-          "bg-neutral-100 text-neutral-900 shadow-sm hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80",
-        ghost:
-          "hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
-        link: "text-neutral-900 underline-offset-4 hover:underline dark:text-neutral-50",
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
-        "icon-sm": "h-8 w-8",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };

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

@@ -1,22 +0,0 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-9 w-full rounded-md border border-neutral-200 bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-neutral-950 placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-800 dark:file:text-neutral-50 dark:placeholder:text-neutral-400 dark:focus-visible:ring-neutral-300 md:text-sm",
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Input.displayName = "Input";
-
-export { Input };

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

@@ -1,31 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
-
-import { cn } from "@/lib/utils";
-
-const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, orientation = "horizontal", decorative = true, ...props },
-    ref,
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "shrink-0 bg-neutral-200 dark:bg-neutral-800",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-Separator.displayName = SeparatorPrimitive.Root.displayName;
-
-export { Separator };

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

@@ -1,143 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { cva, type VariantProps } from "class-variance-authority";
-import { X } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const Sheet = SheetPrimitive.Root;
-
-const SheetTrigger = SheetPrimitive.Trigger;
-
-const SheetClose = SheetPrimitive.Close;
-
-const SheetPortal = SheetPrimitive.Portal;
-
-const SheetOverlay = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className,
-    )}
-    {...props}
-    ref={ref}
-  />
-));
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
-
-const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-white p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out dark:bg-neutral-950",
-  {
-    variants: {
-      side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom:
-          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right:
-          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-      },
-    },
-    defaultVariants: {
-      side: "right",
-    },
-  },
-);
-
-interface SheetContentProps
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
-
-const SheetContent = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Content>,
-  SheetContentProps
->(({ side = "right", className, children, ...props }, ref) => (
-  <SheetPortal>
-    <SheetOverlay />
-    <SheetPrimitive.Content
-      ref={ref}
-      className={cn(sheetVariants({ side }), className)}
-      {...props}
-    >
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity data-[state=open]:bg-neutral-100 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none dark:ring-offset-neutral-950 dark:data-[state=open]:bg-neutral-800 dark:focus:ring-neutral-300">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </SheetPrimitive.Close>
-      {children}
-    </SheetPrimitive.Content>
-  </SheetPortal>
-));
-SheetContent.displayName = SheetPrimitive.Content.displayName;
-
-const SheetHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className,
-    )}
-    {...props}
-  />
-);
-SheetHeader.displayName = "SheetHeader";
-
-const SheetFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className,
-    )}
-    {...props}
-  />
-);
-SheetFooter.displayName = "SheetFooter";
-
-const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold text-neutral-950 dark:text-neutral-50",
-      className,
-    )}
-    {...props}
-  />
-));
-SheetTitle.displayName = SheetPrimitive.Title.displayName;
-
-const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-neutral-500 dark:text-neutral-400", className)}
-    {...props}
-  />
-));
-SheetDescription.displayName = SheetPrimitive.Description.displayName;
-
-export {
-  Sheet,
-  SheetPortal,
-  SheetOverlay,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-};

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

@@ -1,778 +0,0 @@
-"use client";
-
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Separator } from "@/components/ui/separator";
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from "@/components/ui/sheet";
-import { Skeleton } from "@/components/ui/skeleton";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { useIsMobile } from "@/hooks/use-mobile";
-import { cn } from "@/lib/utils";
-import { SidebarSimpleIcon } from "@phosphor-icons/react";
-
-const SIDEBAR_COOKIE_NAME = "sidebar_state";
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = "20rem";
-const SIDEBAR_WIDTH_MOBILE = "20rem";
-const SIDEBAR_WIDTH_ICON = "3rem";
-const SIDEBAR_KEYBOARD_SHORTCUT = "b";
-
-type SidebarContextProps = {
-  state: "expanded" | "collapsed";
-  open: boolean;
-  setOpen: (open: boolean) => void;
-  openMobile: boolean;
-  setOpenMobile: (open: boolean) => void;
-  isMobile: boolean;
-  toggleSidebar: () => void;
-};
-
-const SidebarContext = React.createContext<SidebarContextProps | null>(null);
-
-function useSidebar() {
-  const context = React.useContext(SidebarContext);
-  if (!context) {
-    throw new Error("useSidebar must be used within a SidebarProvider.");
-  }
-
-  return context;
-}
-
-const SidebarProvider = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    defaultOpen?: boolean;
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-  }
->(
-  (
-    {
-      defaultOpen = true,
-      open: openProp,
-      onOpenChange: setOpenProp,
-      className,
-      style,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const isMobile = useIsMobile();
-    const [openMobile, setOpenMobile] = React.useState(false);
-
-    // This is the internal state of the sidebar.
-    // We use openProp and setOpenProp for control from outside the component.
-    const [_open, _setOpen] = React.useState(defaultOpen);
-    const open = openProp ?? _open;
-    const setOpen = React.useCallback(
-      (value: boolean | ((value: boolean) => boolean)) => {
-        const openState = typeof value === "function" ? value(open) : value;
-        if (setOpenProp) {
-          setOpenProp(openState);
-        } else {
-          _setOpen(openState);
-        }
-
-        // This sets the cookie to keep the sidebar state.
-        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
-      },
-      [setOpenProp, open],
-    );
-
-    // Helper to toggle the sidebar.
-    const toggleSidebar = React.useCallback(() => {
-      return isMobile
-        ? setOpenMobile((open) => !open)
-        : setOpen((open) => !open);
-    }, [isMobile, setOpen, setOpenMobile]);
-
-    // Adds a keyboard shortcut to toggle the sidebar.
-    React.useEffect(() => {
-      const handleKeyDown = (event: KeyboardEvent) => {
-        if (
-          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-          (event.metaKey || event.ctrlKey)
-        ) {
-          event.preventDefault();
-          toggleSidebar();
-        }
-      };
-
-      window.addEventListener("keydown", handleKeyDown);
-      return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [toggleSidebar]);
-
-    // We add a state so that we can do data-state="expanded" or "collapsed".
-    // This makes it easier to style the sidebar with Tailwind classes.
-    const state = open ? "expanded" : "collapsed";
-
-    const contextValue = React.useMemo<SidebarContextProps>(
-      () => ({
-        state,
-        open,
-        setOpen,
-        isMobile,
-        openMobile,
-        setOpenMobile,
-        toggleSidebar,
-      }),
-      [
-        state,
-        open,
-        setOpen,
-        isMobile,
-        openMobile,
-        setOpenMobile,
-        toggleSidebar,
-      ],
-    );
-
-    return (
-      <SidebarContext.Provider value={contextValue}>
-        <TooltipProvider delayDuration={0}>
-          <div
-            style={
-              {
-                "--sidebar-width": SIDEBAR_WIDTH,
-                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-                ...style,
-              } as React.CSSProperties
-            }
-            className={cn(
-              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
-              className,
-            )}
-            ref={ref}
-            {...props}
-          >
-            {children}
-          </div>
-        </TooltipProvider>
-      </SidebarContext.Provider>
-    );
-  },
-);
-SidebarProvider.displayName = "SidebarProvider";
-
-const Sidebar = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    side?: "left" | "right";
-    variant?: "sidebar" | "floating" | "inset";
-    collapsible?: "offcanvas" | "icon" | "none";
-  }
->(
-  (
-    {
-      side = "left",
-      variant = "sidebar",
-      collapsible = "offcanvas",
-      className,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
-
-    if (collapsible === "none") {
-      return (
-        <div
-          className={cn(
-            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
-            className,
-          )}
-          ref={ref}
-          {...props}
-        >
-          {children}
-        </div>
-      );
-    }
-
-    if (isMobile) {
-      return (
-        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
-          <SheetContent
-            data-sidebar="sidebar"
-            data-mobile="true"
-            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
-            style={
-              {
-                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
-              } as React.CSSProperties
-            }
-            side={side}
-          >
-            <SheetHeader className="sr-only">
-              <SheetTitle>Sidebar</SheetTitle>
-              <SheetDescription>Displays the mobile sidebar.</SheetDescription>
-            </SheetHeader>
-            <div className="flex h-full w-full flex-col">{children}</div>
-          </SheetContent>
-        </Sheet>
-      );
-    }
-
-    return (
-      <div
-        ref={ref}
-        className="group peer hidden text-sidebar-foreground md:block"
-        data-state={state}
-        data-collapsible={state === "collapsed" ? collapsible : ""}
-        data-variant={variant}
-        data-side={side}
-      >
-        {/* This is what handles the sidebar gap on desktop */}
-        <div
-          className={cn(
-            "relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
-            "group-data-[collapsible=offcanvas]:w-0",
-            "group-data-[side=right]:rotate-180",
-            variant === "floating" || variant === "inset"
-              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
-              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
-          )}
-        />
-        <div
-          className={cn(
-            "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
-            side === "left"
-              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
-            // Adjust the padding for floating and inset variants.
-            variant === "floating" || variant === "inset"
-              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
-              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
-            className,
-          )}
-          {...props}
-        >
-          <div
-            data-sidebar="sidebar"
-            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
-          >
-            {children}
-          </div>
-        </div>
-      </div>
-    );
-  },
-);
-Sidebar.displayName = "Sidebar";
-
-const SidebarTrigger = React.forwardRef<
-  React.ElementRef<typeof Button>,
-  React.ComponentProps<typeof Button>
->(({ onClick }, ref) => {
-  const { toggleSidebar } = useSidebar();
-
-  return (
-    <Button
-      ref={ref}
-      data-sidebar="trigger"
-      variant="ghost"
-      onClick={(event) => {
-        onClick?.(event);
-        toggleSidebar();
-      }}
-    >
-      <SidebarSimpleIcon className="!size-5" />
-      <span className="sr-only">Toggle Sidebar</span>
-    </Button>
-  );
-});
-SidebarTrigger.displayName = "SidebarTrigger";
-
-const SidebarRail = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button">
->(({ className, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar();
-
-  return (
-    <button
-      ref={ref}
-      data-sidebar="rail"
-      aria-label="Toggle Sidebar"
-      tabIndex={-1}
-      onClick={toggleSidebar}
-      title="Toggle Sidebar"
-      className={cn(
-        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 hover:after:bg-sidebar-border sm:flex",
-        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
-        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
-        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-SidebarRail.displayName = "SidebarRail";
-
-const SidebarInset = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"main">
->(({ className, ...props }, ref) => {
-  return (
-    <main
-      ref={ref}
-      className={cn(
-        "relative flex w-full flex-1 flex-col bg-white dark:bg-neutral-950",
-        "md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-SidebarInset.displayName = "SidebarInset";
-
-const SidebarInput = React.forwardRef<
-  React.ElementRef<typeof Input>,
-  React.ComponentProps<typeof Input>
->(({ className, ...props }, ref) => {
-  return (
-    <Input
-      ref={ref}
-      data-sidebar="input"
-      className={cn(
-        "h-8 w-full bg-white shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring dark:bg-neutral-950",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-SidebarInput.displayName = "SidebarInput";
-
-const SidebarHeader = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="header"
-      className={cn("flex flex-col gap-2 p-2", className)}
-      {...props}
-    />
-  );
-});
-SidebarHeader.displayName = "SidebarHeader";
-
-const SidebarFooter = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="footer"
-      className={cn("flex flex-col gap-2 p-2", className)}
-      {...props}
-    />
-  );
-});
-SidebarFooter.displayName = "SidebarFooter";
-
-const SidebarSeparator = React.forwardRef<
-  React.ElementRef<typeof Separator>,
-  React.ComponentProps<typeof Separator>
->(({ className, ...props }, ref) => {
-  return (
-    <Separator
-      ref={ref}
-      data-sidebar="separator"
-      className={cn("mx-2 w-auto bg-sidebar-border", className)}
-      {...props}
-    />
-  );
-});
-SidebarSeparator.displayName = "SidebarSeparator";
-
-const SidebarContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="content"
-      className={cn(
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-SidebarContent.displayName = "SidebarContent";
-
-const SidebarGroup = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="group"
-      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
-      {...props}
-    />
-  );
-});
-SidebarGroup.displayName = "SidebarGroup";
-
-const SidebarGroupLabel = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & { asChild?: boolean }
->(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "div";
-
-  return (
-    <Comp
-      ref={ref}
-      data-sidebar="group-label"
-      className={cn(
-        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-SidebarGroupLabel.displayName = "SidebarGroupLabel";
-
-const SidebarGroupAction = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button"> & { asChild?: boolean }
->(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button";
-
-  return (
-    <Comp
-      ref={ref}
-      data-sidebar="group-action"
-      className={cn(
-        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
-        "group-data-[collapsible=icon]:hidden",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-SidebarGroupAction.displayName = "SidebarGroupAction";
-
-const SidebarGroupContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    data-sidebar="group-content"
-    className={cn("w-full text-sm", className)}
-    {...props}
-  />
-));
-SidebarGroupContent.displayName = "SidebarGroupContent";
-
-const SidebarMenu = React.forwardRef<
-  HTMLUListElement,
-  React.ComponentProps<"ul">
->(({ className, ...props }, ref) => (
-  <ul
-    ref={ref}
-    data-sidebar="menu"
-    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
-    {...props}
-  />
-));
-SidebarMenu.displayName = "SidebarMenu";
-
-const SidebarMenuItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentProps<"li">
->(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    data-sidebar="menu-item"
-    className={cn("group/menu-item relative", className)}
-    {...props}
-  />
-));
-SidebarMenuItem.displayName = "SidebarMenuItem";
-
-const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        outline:
-          "bg-white shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))] dark:bg-neutral-950",
-      },
-      size: {
-        default: "h-8 text-sm",
-        sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-const SidebarMenuButton = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button"> & {
-    asChild?: boolean;
-    isActive?: boolean;
-    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
-  } & VariantProps<typeof sidebarMenuButtonVariants>
->(
-  (
-    {
-      asChild = false,
-      isActive = false,
-      variant = "default",
-      size = "default",
-      tooltip,
-      className,
-      ...props
-    },
-    ref,
-  ) => {
-    const Comp = asChild ? Slot : "button";
-    const { isMobile, state } = useSidebar();
-
-    const button = (
-      <Comp
-        ref={ref}
-        data-sidebar="menu-button"
-        data-size={size}
-        data-active={isActive}
-        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
-        {...props}
-      />
-    );
-
-    if (!tooltip) {
-      return button;
-    }
-
-    if (typeof tooltip === "string") {
-      tooltip = {
-        children: tooltip,
-      };
-    }
-
-    return (
-      <Tooltip>
-        <TooltipTrigger asChild>{button}</TooltipTrigger>
-        <TooltipContent
-          side="right"
-          align="center"
-          hidden={state !== "collapsed" || isMobile}
-          {...tooltip}
-        />
-      </Tooltip>
-    );
-  },
-);
-SidebarMenuButton.displayName = "SidebarMenuButton";
-
-const SidebarMenuAction = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button"> & {
-    asChild?: boolean;
-    showOnHover?: boolean;
-  }
->(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button";
-
-  return (
-    <Comp
-      ref={ref}
-      data-sidebar="menu-action"
-      className={cn(
-        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "group-data-[collapsible=icon]:hidden",
-        showOnHover &&
-          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-SidebarMenuAction.displayName = "SidebarMenuAction";
-
-const SidebarMenuBadge = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    data-sidebar="menu-badge"
-    className={cn(
-      "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
-      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
-      "peer-data-[size=sm]/menu-button:top-1",
-      "peer-data-[size=default]/menu-button:top-1.5",
-      "peer-data-[size=lg]/menu-button:top-2.5",
-      "group-data-[collapsible=icon]:hidden",
-      className,
-    )}
-    {...props}
-  />
-));
-SidebarMenuBadge.displayName = "SidebarMenuBadge";
-
-const SidebarMenuSkeleton = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    showIcon?: boolean;
-  }
->(({ className, showIcon = false, ...props }, ref) => {
-  // Random width between 50 to 90%.
-  const width = React.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`;
-  }, []);
-
-  return (
-    <div
-      ref={ref}
-      data-sidebar="menu-skeleton"
-      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
-      {...props}
-    >
-      {showIcon && (
-        <Skeleton
-          className="size-4 rounded-md"
-          data-sidebar="menu-skeleton-icon"
-        />
-      )}
-      <Skeleton
-        className="h-4 max-w-[--skeleton-width] flex-1"
-        data-sidebar="menu-skeleton-text"
-        style={
-          {
-            "--skeleton-width": width,
-          } as React.CSSProperties
-        }
-      />
-    </div>
-  );
-});
-SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
-
-const SidebarMenuSub = React.forwardRef<
-  HTMLUListElement,
-  React.ComponentProps<"ul">
->(({ className, ...props }, ref) => (
-  <ul
-    ref={ref}
-    data-sidebar="menu-sub"
-    className={cn(
-      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
-      "group-data-[collapsible=icon]:hidden",
-      className,
-    )}
-    {...props}
-  />
-));
-SidebarMenuSub.displayName = "SidebarMenuSub";
-
-const SidebarMenuSubItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentProps<"li">
->(({ ...props }, ref) => <li ref={ref} {...props} />);
-SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
-
-const SidebarMenuSubButton = React.forwardRef<
-  HTMLAnchorElement,
-  React.ComponentProps<"a"> & {
-    asChild?: boolean;
-    size?: "sm" | "md";
-    isActive?: boolean;
-  }
->(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a";
-
-  return (
-    <Comp
-      ref={ref}
-      data-sidebar="menu-sub-button"
-      data-size={size}
-      data-active={isActive}
-      className={cn(
-        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
-        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
-        size === "sm" && "text-xs",
-        size === "md" && "text-sm",
-        "group-data-[collapsible=icon]:hidden",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
-
-export {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupAction,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuBadge,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSkeleton,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarSeparator,
-  SidebarTrigger,
-  useSidebar,
-};

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

@@ -1,18 +0,0 @@
-import { cn } from "@/lib/utils";
-
-function Skeleton({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn(
-        "animate-pulse rounded-md bg-neutral-900/10 dark:bg-neutral-50/10",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Skeleton };

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

@@ -1,32 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-
-import { cn } from "@/lib/utils";
-
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const Tooltip = TooltipPrimitive.Root;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Portal>
-    <TooltipPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 origin-[--radix-tooltip-content-transform-origin] overflow-hidden rounded-md bg-neutral-900 px-3 py-1.5 text-xs text-neutral-50 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:bg-neutral-50 dark:text-neutral-900",
-        className,
-      )}
-      {...props}
-    />
-  </TooltipPrimitive.Portal>
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

autogpt_platform/frontend/src/hooks/use-mobile.tsx

@@ -1,21 +0,0 @@
-import * as React from "react";
-
-const MOBILE_BREAKPOINT = 768;
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
-    undefined,
-  );
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    };
-    mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
-  }, []);
-
-  return !!isMobile;
-}

autogpt_platform/frontend/src/services/feature-flags/use-get-flag.ts

@@ -33,7 +33,7 @@ const defaultFlags = {
   [Flag.AGENT_FAVORITING]: false,
   [Flag.MARKETPLACE_SEARCH_TERMS]: DEFAULT_SEARCH_TERMS,
   [Flag.ENABLE_PLATFORM_PAYMENT]: false,
-  [Flag.CHAT]: true,
+  [Flag.CHAT]: false,
 };
 
 type FlagValues = typeof defaultFlags;

autogpt_platform/frontend/tailwind.config.ts

@@ -65,16 +65,6 @@ const config = {
           "600": "#282828",
           "700": "#272727",
         },
-        sidebar: {
-          DEFAULT: "hsl(var(--sidebar-background))",
-          foreground: "hsl(var(--sidebar-foreground))",
-          primary: "hsl(var(--sidebar-primary))",
-          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
-          accent: "hsl(var(--sidebar-accent))",
-          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
-          border: "hsl(var(--sidebar-border))",
-          ring: "hsl(var(--sidebar-ring))",
-        },
       },
       spacing: {
         "0": "0rem",