chore(deps): bump peter-evans/repository-dispatch from 3 to 4

Bumps [peter-evans/repository-dispatch](https://github.com/peter-evans/repository-dispatch) from 3 to 4.
- [Release notes](https://github.com/peter-evans/repository-dispatch/releases)
- [Commits](https://github.com/peter-evans/repository-dispatch/compare/v3...v4)

---
updated-dependencies:
- dependency-name: peter-evans/repository-dispatch
  dependency-version: '4'
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

.github/workflows/platform-autogpt-deploy-dev.yaml

@@ -52,7 +52,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Trigger deploy workflow
-        uses: peter-evans/repository-dispatch@v3
+        uses: peter-evans/repository-dispatch@v4
         with:
           token: ${{ secrets.DEPLOY_TOKEN }}
           repository: Significant-Gravitas/AutoGPT_cloud_infrastructure

.github/workflows/platform-autogpt-deploy-prod.yml

@@ -45,7 +45,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Trigger deploy workflow
-        uses: peter-evans/repository-dispatch@v3
+        uses: peter-evans/repository-dispatch@v4
         with:
           token: ${{ secrets.DEPLOY_TOKEN }}
           repository: Significant-Gravitas/AutoGPT_cloud_infrastructure

.github/workflows/platform-dev-deploy-event-dispatcher.yml

@@ -82,7 +82,7 @@ jobs:
           
       - name: Dispatch Deploy Event
         if: steps.check_status.outputs.should_deploy == 'true'
-        uses: peter-evans/repository-dispatch@v3
+        uses: peter-evans/repository-dispatch@v4
         with:
           token: ${{ secrets.DISPATCH_TOKEN }}
           repository: Significant-Gravitas/AutoGPT_cloud_infrastructure
@@ -110,7 +110,7 @@ jobs:
 
       - name: Dispatch Undeploy Event (from comment)
         if: steps.check_status.outputs.should_undeploy == 'true'
-        uses: peter-evans/repository-dispatch@v3
+        uses: peter-evans/repository-dispatch@v4
         with:
           token: ${{ secrets.DISPATCH_TOKEN }}
           repository: Significant-Gravitas/AutoGPT_cloud_infrastructure
@@ -168,7 +168,7 @@ jobs:
           github.event_name == 'pull_request' &&
           github.event.action == 'closed' &&
           steps.check_pr_close.outputs.should_undeploy == 'true'
-        uses: peter-evans/repository-dispatch@v3
+        uses: peter-evans/repository-dispatch@v4
         with:
           token: ${{ secrets.DISPATCH_TOKEN }}
           repository: Significant-Gravitas/AutoGPT_cloud_infrastructure

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()
 
@@ -288,12 +266,38 @@ async def stream_chat_post(
 
     """
     import asyncio
+    import time
+
+    stream_start_time = time.perf_counter()
+
+    # Base log metadata (task_id added after creation)
+    log_meta = {"component": "ChatStream", "session_id": session_id}
+    if user_id:
+        log_meta["user_id"] = user_id
+
+    logger.info(
+        f"[TIMING] stream_chat_post STARTED, session={session_id}, "
+        f"user={user_id}, message_len={len(request.message)}",
+        extra={"json_fields": log_meta},
+    )
 
     session = await _validate_and_get_session(session_id, user_id)
+    logger.info(
+        f"[TIMING] session validated in {(time.perf_counter() - stream_start_time)*1000:.1f}ms",
+        extra={
+            "json_fields": {
+                **log_meta,
+                "duration_ms": (time.perf_counter() - stream_start_time) * 1000,
+            }
+        },
+    )
 
     # Create a task in the stream registry for reconnection support
     task_id = str(uuid_module.uuid4())
     operation_id = str(uuid_module.uuid4())
+    log_meta["task_id"] = task_id
+
+    task_create_start = time.perf_counter()
     await stream_registry.create_task(
         task_id=task_id,
         session_id=session_id,
@@ -302,10 +306,46 @@ async def stream_chat_post(
         tool_name="chat",
         operation_id=operation_id,
     )
+    logger.info(
+        f"[TIMING] create_task completed in {(time.perf_counter() - task_create_start)*1000:.1f}ms",
+        extra={
+            "json_fields": {
+                **log_meta,
+                "duration_ms": (time.perf_counter() - task_create_start) * 1000,
+            }
+        },
+    )
 
     # Background task that runs the AI generation independently of SSE connection
     async def run_ai_generation():
+        import time as time_module
+
+        gen_start_time = time_module.perf_counter()
+        logger.info(
+            f"[TIMING] run_ai_generation STARTED, task={task_id}, session={session_id}, user={user_id}",
+            extra={"json_fields": log_meta},
+        )
+        first_chunk_time, ttfc = None, None
+        chunk_count = 0
         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)
+            logger.info(
+                f"[TIMING] StreamStart published at {(time_module.perf_counter() - gen_start_time)*1000:.1f}ms",
+                extra={
+                    "json_fields": {
+                        **log_meta,
+                        "elapsed_ms": (time_module.perf_counter() - gen_start_time)
+                        * 1000,
+                    }
+                },
+            )
+
+            logger.info(
+                "[TIMING] Calling stream_chat_completion",
+                extra={"json_fields": log_meta},
+            )
             async for chunk in chat_service.stream_chat_completion(
                 session_id,
                 request.message,
@@ -313,56 +353,203 @@ 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
             ):
+                chunk_count += 1
+                if first_chunk_time is None:
+                    first_chunk_time = time_module.perf_counter()
+                    ttfc = first_chunk_time - gen_start_time
+                    logger.info(
+                        f"[TIMING] FIRST AI CHUNK at {ttfc:.2f}s, type={type(chunk).__name__}",
+                        extra={
+                            "json_fields": {
+                                **log_meta,
+                                "chunk_type": type(chunk).__name__,
+                                "time_to_first_chunk_ms": ttfc * 1000,
+                            }
+                        },
+                    )
                 # Write to Redis (subscribers will receive via XREAD)
                 await stream_registry.publish_chunk(task_id, chunk)
 
-            # Mark task as completed
+            gen_end_time = time_module.perf_counter()
+            total_time = (gen_end_time - gen_start_time) * 1000
+            logger.info(
+                f"[TIMING] run_ai_generation FINISHED in {total_time/1000:.1f}s; "
+                f"task={task_id}, session={session_id}, "
+                f"ttfc={ttfc or -1:.2f}s, n_chunks={chunk_count}",
+                extra={
+                    "json_fields": {
+                        **log_meta,
+                        "total_time_ms": total_time,
+                        "time_to_first_chunk_ms": (
+                            ttfc * 1000 if ttfc is not None else None
+                        ),
+                        "n_chunks": chunk_count,
+                    }
+                },
+            )
+
             await stream_registry.mark_task_completed(task_id, "completed")
         except Exception as e:
+            elapsed = time_module.perf_counter() - gen_start_time
             logger.error(
-                f"Error in background AI generation for session {session_id}: {e}"
+                f"[TIMING] run_ai_generation ERROR after {elapsed:.2f}s: {e}",
+                extra={
+                    "json_fields": {
+                        **log_meta,
+                        "elapsed_ms": elapsed * 1000,
+                        "error": str(e),
+                    }
+                },
             )
             await stream_registry.mark_task_completed(task_id, "failed")
 
     # Start the AI generation in a background task
     bg_task = asyncio.create_task(run_ai_generation())
     await stream_registry.set_task_asyncio_task(task_id, bg_task)
+    setup_time = (time.perf_counter() - stream_start_time) * 1000
+    logger.info(
+        f"[TIMING] Background task started, setup={setup_time:.1f}ms",
+        extra={"json_fields": {**log_meta, "setup_time_ms": setup_time}},
+    )
 
     # SSE endpoint that subscribes to the task's stream
     async def event_generator() -> AsyncGenerator[str, None]:
+        import time as time_module
+
+        event_gen_start = time_module.perf_counter()
+        logger.info(
+            f"[TIMING] event_generator STARTED, task={task_id}, session={session_id}, "
+            f"user={user_id}",
+            extra={"json_fields": log_meta},
+        )
         subscriber_queue = None
+        first_chunk_yielded = False
+        chunks_yielded = 0
         try:
             # Subscribe to the task stream (this replays existing messages + live updates)
+            subscribe_start = time_module.perf_counter()
+            logger.info(
+                "[TIMING] Calling subscribe_to_task",
+                extra={"json_fields": log_meta},
+            )
             subscriber_queue = await stream_registry.subscribe_to_task(
                 task_id=task_id,
                 user_id=user_id,
                 last_message_id="0-0",  # Get all messages from the beginning
             )
+            subscribe_time = (time_module.perf_counter() - subscribe_start) * 1000
+            logger.info(
+                f"[TIMING] subscribe_to_task completed in {subscribe_time:.1f}ms, "
+                f"queue_ok={subscriber_queue is not None}",
+                extra={
+                    "json_fields": {
+                        **log_meta,
+                        "duration_ms": subscribe_time,
+                        "queue_obtained": subscriber_queue is not None,
+                    }
+                },
+            )
 
             if subscriber_queue is None:
+                logger.info(
+                    "[TIMING] subscriber_queue is None, yielding finish",
+                    extra={"json_fields": log_meta},
+                )
                 yield StreamFinish().to_sse()
                 yield "data: [DONE]\n\n"
                 return
 
             # Read from the subscriber queue and yield to SSE
+            logger.info(
+                "[TIMING] Starting to read from subscriber_queue",
+                extra={"json_fields": log_meta},
+            )
             while True:
                 try:
+                    queue_wait_start = time_module.perf_counter()
                     chunk = await asyncio.wait_for(subscriber_queue.get(), timeout=30.0)
+                    queue_wait_time = (
+                        time_module.perf_counter() - queue_wait_start
+                    ) * 1000
+                    chunks_yielded += 1
+
+                    if not first_chunk_yielded:
+                        first_chunk_yielded = True
+                        elapsed = time_module.perf_counter() - event_gen_start
+                        logger.info(
+                            f"[TIMING] FIRST CHUNK from queue at {elapsed:.2f}s, "
+                            f"type={type(chunk).__name__}, "
+                            f"wait={queue_wait_time:.1f}ms",
+                            extra={
+                                "json_fields": {
+                                    **log_meta,
+                                    "chunk_type": type(chunk).__name__,
+                                    "elapsed_ms": elapsed * 1000,
+                                    "queue_wait_ms": queue_wait_time,
+                                }
+                            },
+                        )
+                    elif chunks_yielded % 50 == 0:
+                        logger.info(
+                            f"[TIMING] Chunk #{chunks_yielded}, "
+                            f"type={type(chunk).__name__}",
+                            extra={
+                                "json_fields": {
+                                    **log_meta,
+                                    "chunk_number": chunks_yielded,
+                                    "chunk_type": type(chunk).__name__,
+                                }
+                            },
+                        )
+
                     yield chunk.to_sse()
 
                     # Check for finish signal
                     if isinstance(chunk, StreamFinish):
+                        total_time = time_module.perf_counter() - event_gen_start
+                        logger.info(
+                            f"[TIMING] StreamFinish received in {total_time:.2f}s; "
+                            f"n_chunks={chunks_yielded}",
+                            extra={
+                                "json_fields": {
+                                    **log_meta,
+                                    "chunks_yielded": chunks_yielded,
+                                    "total_time_ms": total_time * 1000,
+                                }
+                            },
+                        )
                         break
                 except asyncio.TimeoutError:
                     # Send heartbeat to keep connection alive
+                    logger.info(
+                        f"[TIMING] Heartbeat timeout, chunks_so_far={chunks_yielded}",
+                        extra={
+                            "json_fields": {**log_meta, "chunks_so_far": chunks_yielded}
+                        },
+                    )
                     yield StreamHeartbeat().to_sse()
 
         except GeneratorExit:
+            logger.info(
+                f"[TIMING] GeneratorExit (client disconnected), chunks={chunks_yielded}",
+                extra={
+                    "json_fields": {
+                        **log_meta,
+                        "chunks_yielded": chunks_yielded,
+                        "reason": "client_disconnect",
+                    }
+                },
+            )
             pass  # Client disconnected - background task continues
         except Exception as e:
-            logger.error(f"Error in SSE stream for task {task_id}: {e}")
+            elapsed = (time_module.perf_counter() - event_gen_start) * 1000
+            logger.error(
+                f"[TIMING] event_generator ERROR after {elapsed:.1f}ms: {e}",
+                extra={
+                    "json_fields": {**log_meta, "elapsed_ms": elapsed, "error": str(e)}
+                },
+            )
         finally:
             # Unsubscribe when client disconnects or stream ends to prevent resource leak
             if subscriber_queue is not None:
@@ -376,6 +563,18 @@ async def stream_chat_post(
                         exc_info=True,
                     )
             # AI SDK protocol termination - always yield even if unsubscribe fails
+            total_time = time_module.perf_counter() - event_gen_start
+            logger.info(
+                f"[TIMING] event_generator FINISHED in {total_time:.2f}s; "
+                f"task={task_id}, session={session_id}, n_chunks={chunks_yielded}",
+                extra={
+                    "json_fields": {
+                        **log_meta,
+                        "total_time_ms": total_time * 1000,
+                        "chunks_yielded": chunks_yielded,
+                    }
+                },
+            )
             yield "data: [DONE]\n\n"
 
     return StreamingResponse(
@@ -393,69 +592,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,
+                "n_chunks": chunk_count,
+                "first_chunk_type": first_chunk_type,
+            },
+        )
+        # AI SDK protocol termination
+        yield "data: [DONE]\n\n"
 
     return StreamingResponse(
         event_generator(),
@@ -463,8 +656,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
         },
     )
 
@@ -776,42 +969,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.
 
@@ -523,21 +517,16 @@ 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.
+    # Yield message start
     setup_time = (time.monotonic() - completion_start) * 1000
     logger.info(
         f"[TIMING] Setup complete, yielding StreamStart at {setup_time:.1f}ms",
         extra={"json_fields": {**log_meta, "setup_time_ms": setup_time}},
     )
-    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 StreamStart(messageId=message_id)
 
     try:
         logger.info(
@@ -643,10 +632,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:
@@ -678,8 +663,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
@@ -764,7 +747,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
 
@@ -779,8 +761,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
@@ -850,8 +830,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
 
@@ -1708,7 +1686,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(
@@ -1966,7 +1943,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
@@ -1990,7 +1966,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
@@ -2032,5 +2007,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

@@ -857,10 +857,8 @@ def _reconstruct_chunk(chunk_data: dict) -> StreamBaseResponse | None:
         ResponseType,
         StreamError,
         StreamFinish,
-        StreamFinishStep,
         StreamHeartbeat,
         StreamStart,
-        StreamStartStep,
         StreamTextDelta,
         StreamTextEnd,
         StreamTextStart,
@@ -874,8 +872,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/frontend/Dockerfile

@@ -25,10 +25,6 @@ RUN if [ -f .env.production ]; then \
       cp .env.default .env; \
     fi
 RUN pnpm run generate:api
-# Disable source-map generation in Docker builds to halve webpack memory usage.
-# Source maps are only useful when SENTRY_AUTH_TOKEN is set (Vercel deploys);
-# the Docker image never uploads them, so generating them just wastes RAM.
-ENV NEXT_PUBLIC_SOURCEMAPS="false"
 # In CI, we want NEXT_PUBLIC_PW_TEST=true during build so Next.js inlines it
 RUN if [ "$NEXT_PUBLIC_PW_TEST" = "true" ]; then NEXT_PUBLIC_PW_TEST=true NODE_OPTIONS="--max-old-space-size=4096" pnpm build; else NODE_OPTIONS="--max-old-space-size=4096" pnpm build; fi
 

autogpt_platform/frontend/next.config.mjs

@@ -1,12 +1,8 @@
 import { withSentryConfig } from "@sentry/nextjs";
 
-// Allow Docker builds to skip source-map generation (halves memory usage).
-// Defaults to true so Vercel/local builds are unaffected.
-const enableSourceMaps = process.env.NEXT_PUBLIC_SOURCEMAPS !== "false";
-
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  productionBrowserSourceMaps: enableSourceMaps,
+  productionBrowserSourceMaps: true,
   // Externalize OpenTelemetry packages to fix Turbopack HMR issues
   serverExternalPackages: [
     "@opentelemetry/instrumentation",
@@ -100,7 +96,7 @@ export default isDevelopmentBuild
 
       // This helps Sentry with sourcemaps... https://docs.sentry.io/platforms/javascript/guides/nextjs/sourcemaps/
       sourcemaps: {
-        disable: !enableSourceMaps,
+        disable: false,
         assets: [".next/**/*.js", ".next/**/*.js.map"],
         ignore: ["**/node_modules/**"],
         deleteSourcemapsAfterUpload: false, // Source is public anyway :)

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)/build/components/NewControlPanel/NewBlockMenu/HorizontalScroll.tsx

@@ -70,10 +70,10 @@ export const HorizontalScroll: React.FC<HorizontalScrollAreaProps> = ({
           {children}
         </div>
         {canScrollLeft && (
-          <div className="pointer-events-none absolute inset-y-0 left-0 w-8 bg-gradient-to-r from-background via-background/80 to-background/0" />
+          <div className="pointer-events-none absolute inset-y-0 left-0 w-8 bg-gradient-to-r from-white via-white/80 to-white/0" />
         )}
         {canScrollRight && (
-          <div className="pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-background via-background/80 to-background/0" />
+          <div className="pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-white via-white/80 to-white/0" />
         )}
         {canScrollLeft && (
           <button

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

@@ -1,74 +0,0 @@
-"use client";
-import { ChatInput } from "@/app/(platform)/copilot/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>;
-  onStop: () => void;
-}
-export const ChatContainer = ({
-  messages,
-  status,
-  error,
-  sessionId,
-  isLoadingSession,
-  isCreatingSession,
-  onCreateSession,
-  onSend,
-  onStop,
-}: 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
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                transition={{ duration: 0.3 }}
-                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={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/components/ChatMessagesContainer/ChatMessagesContainer.tsx

@@ -1,274 +0,0 @@
-import { getGetWorkspaceDownloadFileByIdUrl } from "@/app/api/__generated__/endpoints/workspace/workspace";
-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 { ToolUIPart, UIDataTypes, UIMessage, UITools } from "ai";
-import { useEffect, useState } from "react";
-import { CreateAgentTool } from "../../tools/CreateAgent/CreateAgent";
-import { EditAgentTool } from "../../tools/EditAgent/EditAgent";
-import { FindAgentsTool } from "../../tools/FindAgents/FindAgents";
-import { FindBlocksTool } from "../../tools/FindBlocks/FindBlocks";
-import { RunAgentTool } from "../../tools/RunAgent/RunAgent";
-import { RunBlockTool } from "../../tools/RunBlock/RunBlock";
-import { SearchDocsTool } from "../../tools/SearchDocs/SearchDocs";
-import { ViewAgentOutputTool } from "../../tools/ViewAgentOutput/ViewAgentOutput";
-
-// ---------------------------------------------------------------------------
-// Workspace media support
-// ---------------------------------------------------------------------------
-
-/**
- * Resolve workspace:// URLs in markdown text to proxy download URLs.
- * Detects MIME type from the hash fragment (e.g. workspace://id#video/mp4)
- * and prefixes the alt text with "video:" so the custom img component can
- * render a <video> element instead.
- */
-function resolveWorkspaceUrls(text: string): string {
-  return text.replace(
-    /!\[([^\]]*)\]\(workspace:\/\/([^)#\s]+)(?:#([^)\s]*))?\)/g,
-    (_match, alt: string, fileId: string, mimeHint?: string) => {
-      const apiPath = getGetWorkspaceDownloadFileByIdUrl(fileId);
-      const url = `/api/proxy${apiPath}`;
-      if (mimeHint?.startsWith("video/")) {
-        return `![video:${alt || "Video"}](${url})`;
-      }
-      return `![${alt || "Image"}](${url})`;
-    },
-  );
-}
-
-/**
- * Custom img component for Streamdown that renders <video> elements
- * for workspace video files (detected via "video:" alt-text prefix).
- * Falls back to <video> when an <img> fails to load for workspace files.
- */
-function WorkspaceMediaImage(props: React.JSX.IntrinsicElements["img"]) {
-  const { src, alt, ...rest } = props;
-  const [imgFailed, setImgFailed] = useState(false);
-  const isWorkspace = src?.includes("/workspace/files/") ?? false;
-
-  if (!src) return null;
-
-  if (alt?.startsWith("video:") || (imgFailed && isWorkspace)) {
-    return (
-      <span className="my-2 inline-block">
-        <video
-          controls
-          className="h-auto max-w-full rounded-md border border-zinc-200"
-          preload="metadata"
-        >
-          <source src={src} />
-          Your browser does not support the video tag.
-        </video>
-      </span>
-    );
-  }
-
-  return (
-    // eslint-disable-next-line @next/next/no-img-element
-    <img
-      src={src}
-      alt={alt || "Image"}
-      className="h-auto max-w-full rounded-md border border-zinc-200"
-      loading="lazy"
-      onError={() => {
-        if (isWorkspace) setImgFailed(true);
-      }}
-      {...rest}
-    />
-  );
-}
-
-/** Stable components override for Streamdown (avoids re-creating on every render). */
-const STREAMDOWN_COMPONENTS = { img: WorkspaceMediaImage };
-
-const THINKING_PHRASES = [
-  "Thinking...",
-  "Considering this...",
-  "Working through this...",
-  "Analyzing your request...",
-  "Reasoning...",
-  "Looking into it...",
-  "Processing your request...",
-  "Mulling this over...",
-  "Piecing it together...",
-  "On it...",
-];
-
-function getRandomPhrase() {
-  return THINKING_PHRASES[Math.floor(Math.random() * THINKING_PHRASES.length)];
-}
-
-interface ChatMessagesContainerProps {
-  messages: UIMessage<unknown, UIDataTypes, UITools>[];
-  status: string;
-  error: Error | undefined;
-  isLoading: boolean;
-}
-
-export const ChatMessagesContainer = ({
-  messages,
-  status,
-  error,
-  isLoading,
-}: ChatMessagesContainerProps) => {
-  const [thinkingPhrase, setThinkingPhrase] = useState(getRandomPhrase);
-
-  useEffect(() => {
-    if (status === "submitted") {
-      setThinkingPhrase(getRandomPhrase());
-    }
-  }, [status]);
-
-  const lastMessage = messages[messages.length - 1];
-  const lastAssistantHasVisibleContent =
-    lastMessage?.role === "assistant" &&
-    lastMessage.parts.some(
-      (p) =>
-        (p.type === "text" && p.text.trim().length > 0) ||
-        p.type.startsWith("tool-"),
-    );
-
-  const showThinking =
-    status === "submitted" ||
-    (status === "streaming" && !lastAssistantHasVisibleContent);
-
-  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, messageIndex) => {
-          const isLastAssistant =
-            messageIndex === messages.length - 1 &&
-            message.role === "assistant";
-          const messageHasVisibleContent = message.parts.some(
-            (p) =>
-              (p.type === "text" && p.text.trim().length > 0) ||
-              p.type.startsWith("tool-"),
-          );
-
-          return (
-            <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}`}
-                          components={STREAMDOWN_COMPONENTS}
-                        >
-                          {resolveWorkspaceUrls(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;
-                  }
-                })}
-                {isLastAssistant &&
-                  !messageHasVisibleContent &&
-                  showThinking && (
-                    <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">
-                      {thinkingPhrase}
-                    </span>
-                  )}
-              </MessageContent>
-            </Message>
-          );
-        })}
-        {showThinking && lastMessage?.role !== "assistant" && (
-          <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">
-                {thinkingPhrase}
-              </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/components/ChatSidebar/ChatSidebar.tsx

@@ -1,188 +0,0 @@
-"use client";
-import { useGetV2ListSessions } from "@/app/api/__generated__/endpoints/chat/chat";
-import { Button } from "@/components/atoms/Button/Button";
-import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
-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 } 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">
-                <LoadingSpinner size="small" className="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/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/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/components/CopilotShell/CopilotShell.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { ChatLoader } from "@/components/contextual/Chat/components/ChatLoader/ChatLoader";
+import { Text } from "@/components/atoms/Text/Text";
+import { NAVBAR_HEIGHT_PX } from "@/lib/constants";
+import type { ReactNode } from "react";
+import { DesktopSidebar } from "./components/DesktopSidebar/DesktopSidebar";
+import { MobileDrawer } from "./components/MobileDrawer/MobileDrawer";
+import { MobileHeader } from "./components/MobileHeader/MobileHeader";
+import { useCopilotShell } from "./useCopilotShell";
+
+interface Props {
+  children: ReactNode;
+}
+
+export function CopilotShell({ children }: Props) {
+  const {
+    isMobile,
+    isDrawerOpen,
+    isLoading,
+    isCreatingSession,
+    isLoggedIn,
+    hasActiveSession,
+    sessions,
+    currentSessionId,
+    handleOpenDrawer,
+    handleCloseDrawer,
+    handleDrawerOpenChange,
+    handleNewChatClick,
+    handleSessionClick,
+    hasNextPage,
+    isFetchingNextPage,
+    fetchNextPage,
+  } = useCopilotShell();
+
+  if (!isLoggedIn) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <ChatLoader />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="flex overflow-hidden bg-[#EFEFF0]"
+      style={{ height: `calc(100vh - ${NAVBAR_HEIGHT_PX}px)` }}
+    >
+      {!isMobile && (
+        <DesktopSidebar
+          sessions={sessions}
+          currentSessionId={currentSessionId}
+          isLoading={isLoading}
+          hasNextPage={hasNextPage}
+          isFetchingNextPage={isFetchingNextPage}
+          onSelectSession={handleSessionClick}
+          onFetchNextPage={fetchNextPage}
+          onNewChat={handleNewChatClick}
+          hasActiveSession={Boolean(hasActiveSession)}
+        />
+      )}
+
+      <div className="relative flex min-h-0 flex-1 flex-col">
+        {isMobile && <MobileHeader onOpenDrawer={handleOpenDrawer} />}
+        <div className="flex min-h-0 flex-1 flex-col">
+          {isCreatingSession ? (
+            <div className="flex h-full flex-1 flex-col items-center justify-center bg-[#f8f8f9]">
+              <div className="flex flex-col items-center gap-4">
+                <ChatLoader />
+                <Text variant="body" className="text-zinc-500">
+                  Creating your chat...
+                </Text>
+              </div>
+            </div>
+          ) : (
+            children
+          )}
+        </div>
+      </div>
+
+      {isMobile && (
+        <MobileDrawer
+          isOpen={isDrawerOpen}
+          sessions={sessions}
+          currentSessionId={currentSessionId}
+          isLoading={isLoading}
+          hasNextPage={hasNextPage}
+          isFetchingNextPage={isFetchingNextPage}
+          onSelectSession={handleSessionClick}
+          onFetchNextPage={fetchNextPage}
+          onNewChat={handleNewChatClick}
+          onClose={handleCloseDrawer}
+          onOpenChange={handleDrawerOpenChange}
+          hasActiveSession={Boolean(hasActiveSession)}
+        />
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,70 @@
+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 { Plus } from "@phosphor-icons/react";
+import { SessionsList } from "../SessionsList/SessionsList";
+
+interface Props {
+  sessions: SessionSummaryResponse[];
+  currentSessionId: string | null;
+  isLoading: boolean;
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+  onSelectSession: (sessionId: string) => void;
+  onFetchNextPage: () => void;
+  onNewChat: () => void;
+  hasActiveSession: boolean;
+}
+
+export function DesktopSidebar({
+  sessions,
+  currentSessionId,
+  isLoading,
+  hasNextPage,
+  isFetchingNextPage,
+  onSelectSession,
+  onFetchNextPage,
+  onNewChat,
+  hasActiveSession,
+}: Props) {
+  return (
+    <aside className="flex h-full w-80 flex-col border-r border-zinc-100 bg-zinc-50">
+      <div className="shrink-0 px-6 py-4">
+        <Text variant="h3" size="body-medium">
+          Your chats
+        </Text>
+      </div>
+      <div
+        className={cn(
+          "flex min-h-0 flex-1 flex-col overflow-y-auto px-3 py-3",
+          scrollbarStyles,
+        )}
+      >
+        <SessionsList
+          sessions={sessions}
+          currentSessionId={currentSessionId}
+          isLoading={isLoading}
+          hasNextPage={hasNextPage}
+          isFetchingNextPage={isFetchingNextPage}
+          onSelectSession={onSelectSession}
+          onFetchNextPage={onFetchNextPage}
+        />
+      </div>
+      {hasActiveSession && (
+        <div className="shrink-0 bg-zinc-50 p-3 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
+          <Button
+            variant="primary"
+            size="small"
+            onClick={onNewChat}
+            className="w-full"
+            leftIcon={<Plus width="1rem" height="1rem" />}
+          >
+            New Chat
+          </Button>
+        </div>
+      )}
+    </aside>
+  );
+}

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

@@ -0,0 +1,91 @@
+import type { SessionSummaryResponse } from "@/app/api/__generated__/models/sessionSummaryResponse";
+import { Button } from "@/components/atoms/Button/Button";
+import { scrollbarStyles } from "@/components/styles/scrollbars";
+import { cn } from "@/lib/utils";
+import { PlusIcon, X } from "@phosphor-icons/react";
+import { Drawer } from "vaul";
+import { SessionsList } from "../SessionsList/SessionsList";
+
+interface Props {
+  isOpen: boolean;
+  sessions: SessionSummaryResponse[];
+  currentSessionId: string | null;
+  isLoading: boolean;
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+  onSelectSession: (sessionId: string) => void;
+  onFetchNextPage: () => void;
+  onNewChat: () => void;
+  onClose: () => void;
+  onOpenChange: (open: boolean) => void;
+  hasActiveSession: boolean;
+}
+
+export function MobileDrawer({
+  isOpen,
+  sessions,
+  currentSessionId,
+  isLoading,
+  hasNextPage,
+  isFetchingNextPage,
+  onSelectSession,
+  onFetchNextPage,
+  onNewChat,
+  onClose,
+  onOpenChange,
+  hasActiveSession,
+}: 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 p-4">
+            <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="1.25rem" height="1.25rem" />
+              </Button>
+            </div>
+          </div>
+          <div
+            className={cn(
+              "flex min-h-0 flex-1 flex-col overflow-y-auto px-3 py-3",
+              scrollbarStyles,
+            )}
+          >
+            <SessionsList
+              sessions={sessions}
+              currentSessionId={currentSessionId}
+              isLoading={isLoading}
+              hasNextPage={hasNextPage}
+              isFetchingNextPage={isFetchingNextPage}
+              onSelectSession={onSelectSession}
+              onFetchNextPage={onFetchNextPage}
+            />
+          </div>
+          {hasActiveSession && (
+            <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/components/CopilotShell/components/MobileDrawer/useMobileDrawer.ts

@@ -0,0 +1,24 @@
+import { useState } from "react";
+
+export function useMobileDrawer() {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+
+  const handleOpenDrawer = () => {
+    setIsDrawerOpen(true);
+  };
+
+  const handleCloseDrawer = () => {
+    setIsDrawerOpen(false);
+  };
+
+  const handleDrawerOpenChange = (open: boolean) => {
+    setIsDrawerOpen(open);
+  };
+
+  return {
+    isDrawerOpen,
+    handleOpenDrawer,
+    handleCloseDrawer,
+    handleDrawerOpenChange,
+  };
+}

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

@@ -0,0 +1,80 @@
+import type { SessionSummaryResponse } from "@/app/api/__generated__/models/sessionSummaryResponse";
+import { Skeleton } from "@/components/__legacy__/ui/skeleton";
+import { Text } from "@/components/atoms/Text/Text";
+import { InfiniteList } from "@/components/molecules/InfiniteList/InfiniteList";
+import { cn } from "@/lib/utils";
+import { getSessionTitle } from "../../helpers";
+
+interface Props {
+  sessions: SessionSummaryResponse[];
+  currentSessionId: string | null;
+  isLoading: boolean;
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+  onSelectSession: (sessionId: string) => void;
+  onFetchNextPage: () => void;
+}
+
+export function SessionsList({
+  sessions,
+  currentSessionId,
+  isLoading,
+  hasNextPage,
+  isFetchingNextPage,
+  onSelectSession,
+  onFetchNextPage,
+}: Props) {
+  if (isLoading) {
+    return (
+      <div className="space-y-1">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <div key={i} className="rounded-lg px-3 py-2.5">
+            <Skeleton className="h-5 w-full" />
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (sessions.length === 0) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <Text variant="body" className="text-zinc-500">
+          You don&apos;t have previous chats
+        </Text>
+      </div>
+    );
+  }
+
+  return (
+    <InfiniteList
+      items={sessions}
+      hasMore={hasNextPage}
+      isFetchingMore={isFetchingNextPage}
+      onEndReached={onFetchNextPage}
+      className="space-y-1"
+      renderItem={(session) => {
+        const isActive = session.id === currentSessionId;
+        return (
+          <button
+            onClick={() => onSelectSession(session.id)}
+            className={cn(
+              "w-full rounded-lg px-3 py-2.5 text-left transition-colors",
+              isActive ? "bg-zinc-100" : "hover:bg-zinc-50",
+            )}
+          >
+            <Text
+              variant="body"
+              className={cn(
+                "font-normal",
+                isActive ? "text-zinc-600" : "text-zinc-800",
+              )}
+            >
+              {getSessionTitle(session)}
+            </Text>
+          </button>
+        );
+      }}
+    />
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/components/CopilotShell/components/SessionsList/useSessionsPagination.ts

@@ -0,0 +1,91 @@
+import { useGetV2ListSessions } from "@/app/api/__generated__/endpoints/chat/chat";
+import type { SessionSummaryResponse } from "@/app/api/__generated__/models/sessionSummaryResponse";
+import { okData } from "@/app/api/helpers";
+import { useEffect, useState } from "react";
+
+const PAGE_SIZE = 50;
+
+export interface UseSessionsPaginationArgs {
+  enabled: boolean;
+}
+
+export function useSessionsPagination({ enabled }: UseSessionsPaginationArgs) {
+  const [offset, setOffset] = useState(0);
+
+  const [accumulatedSessions, setAccumulatedSessions] = useState<
+    SessionSummaryResponse[]
+  >([]);
+
+  const [totalCount, setTotalCount] = useState<number | null>(null);
+
+  const { data, isLoading, isFetching, isError } = useGetV2ListSessions(
+    { limit: PAGE_SIZE, offset },
+    {
+      query: {
+        enabled: enabled && offset >= 0,
+      },
+    },
+  );
+
+  useEffect(() => {
+    const responseData = okData(data);
+    if (responseData) {
+      const newSessions = responseData.sessions;
+      const total = responseData.total;
+      setTotalCount(total);
+
+      if (offset === 0) {
+        setAccumulatedSessions(newSessions);
+      } else {
+        setAccumulatedSessions((prev) => [...prev, ...newSessions]);
+      }
+    } else if (!enabled) {
+      setAccumulatedSessions([]);
+      setTotalCount(null);
+    }
+  }, [data, offset, enabled]);
+
+  const hasNextPage =
+    totalCount !== null && accumulatedSessions.length < totalCount;
+
+  const areAllSessionsLoaded =
+    totalCount !== null &&
+    accumulatedSessions.length >= totalCount &&
+    !isFetching &&
+    !isLoading;
+
+  useEffect(() => {
+    if (
+      hasNextPage &&
+      !isFetching &&
+      !isLoading &&
+      !isError &&
+      totalCount !== null
+    ) {
+      setOffset((prev) => prev + PAGE_SIZE);
+    }
+  }, [hasNextPage, isFetching, isLoading, isError, totalCount]);
+
+  const fetchNextPage = () => {
+    if (hasNextPage && !isFetching) {
+      setOffset((prev) => prev + PAGE_SIZE);
+    }
+  };
+
+  const reset = () => {
+    // Only reset the offset - keep existing sessions visible during refetch
+    // The effect will replace sessions when new data arrives at offset 0
+    setOffset(0);
+  };
+
+  return {
+    sessions: accumulatedSessions,
+    isLoading,
+    isFetching,
+    hasNextPage,
+    areAllSessionsLoaded,
+    totalCount,
+    fetchNextPage,
+    reset,
+  };
+}

autogpt_platform/frontend/src/app/(platform)/copilot/components/CopilotShell/helpers.ts

@@ -0,0 +1,106 @@
+import type { SessionDetailResponse } from "@/app/api/__generated__/models/sessionDetailResponse";
+import type { SessionSummaryResponse } from "@/app/api/__generated__/models/sessionSummaryResponse";
+import { format, formatDistanceToNow, isToday } from "date-fns";
+
+export function convertSessionDetailToSummary(session: SessionDetailResponse) {
+  return {
+    id: session.id,
+    created_at: session.created_at,
+    updated_at: session.updated_at,
+    title: undefined,
+  };
+}
+
+export function filterVisibleSessions(sessions: SessionSummaryResponse[]) {
+  const fiveMinutesAgo = Date.now() - 5 * 60 * 1000;
+  return sessions.filter((session) => {
+    const hasBeenUpdated = session.updated_at !== session.created_at;
+
+    if (hasBeenUpdated) return true;
+
+    const isRecentlyCreated =
+      new Date(session.created_at).getTime() > fiveMinutesAgo;
+
+    return isRecentlyCreated;
+  });
+}
+
+export function getSessionTitle(session: SessionSummaryResponse) {
+  if (session.title) return session.title;
+
+  const isNewSession = session.updated_at === session.created_at;
+
+  if (isNewSession) {
+    const createdDate = new Date(session.created_at);
+    if (isToday(createdDate)) {
+      return "Today";
+    }
+    return format(createdDate, "MMM d, yyyy");
+  }
+
+  return "Untitled Chat";
+}
+
+export function getSessionUpdatedLabel(session: SessionSummaryResponse) {
+  if (!session.updated_at) return "";
+  return formatDistanceToNow(new Date(session.updated_at), { addSuffix: true });
+}
+
+export function mergeCurrentSessionIntoList(
+  accumulatedSessions: SessionSummaryResponse[],
+  currentSessionId: string | null,
+  currentSessionData: SessionDetailResponse | null | undefined,
+  recentlyCreatedSessions?: Map<string, SessionSummaryResponse>,
+) {
+  const filteredSessions: SessionSummaryResponse[] = [];
+  const addedIds = new Set<string>();
+
+  if (accumulatedSessions.length > 0) {
+    const visibleSessions = filterVisibleSessions(accumulatedSessions);
+
+    if (currentSessionId) {
+      const currentInAll = accumulatedSessions.find(
+        (s) => s.id === currentSessionId,
+      );
+      if (currentInAll) {
+        const isInVisible = visibleSessions.some(
+          (s) => s.id === currentSessionId,
+        );
+        if (!isInVisible) {
+          filteredSessions.push(currentInAll);
+          addedIds.add(currentInAll.id);
+        }
+      }
+    }
+
+    for (const session of visibleSessions) {
+      if (!addedIds.has(session.id)) {
+        filteredSessions.push(session);
+        addedIds.add(session.id);
+      }
+    }
+  }
+
+  if (currentSessionId && currentSessionData) {
+    if (!addedIds.has(currentSessionId)) {
+      const summarySession = convertSessionDetailToSummary(currentSessionData);
+      filteredSessions.unshift(summarySession);
+      addedIds.add(currentSessionId);
+    }
+  }
+
+  if (recentlyCreatedSessions) {
+    for (const [sessionId, sessionData] of recentlyCreatedSessions) {
+      if (!addedIds.has(sessionId)) {
+        filteredSessions.unshift(sessionData);
+        addedIds.add(sessionId);
+      }
+    }
+  }
+
+  return filteredSessions;
+}
+
+export function getCurrentSessionId(searchParams: URLSearchParams) {
+  return searchParams.get("sessionId");
+}

autogpt_platform/frontend/src/app/(platform)/copilot/components/CopilotShell/useCopilotShell.ts

@@ -0,0 +1,124 @@
+"use client";
+
+import {
+  getGetV2GetSessionQueryKey,
+  getGetV2ListSessionsQueryKey,
+  useGetV2GetSession,
+} from "@/app/api/__generated__/endpoints/chat/chat";
+import { okData } from "@/app/api/helpers";
+import { useChatStore } from "@/components/contextual/Chat/chat-store";
+import { useBreakpoint } from "@/lib/hooks/useBreakpoint";
+import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
+import { useQueryClient } from "@tanstack/react-query";
+import { usePathname, useSearchParams } from "next/navigation";
+import { useCopilotStore } from "../../copilot-page-store";
+import { useCopilotSessionId } from "../../useCopilotSessionId";
+import { useMobileDrawer } from "./components/MobileDrawer/useMobileDrawer";
+import { getCurrentSessionId } from "./helpers";
+import { useShellSessionList } from "./useShellSessionList";
+
+export function useCopilotShell() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const queryClient = useQueryClient();
+  const breakpoint = useBreakpoint();
+  const { isLoggedIn } = useSupabase();
+  const isMobile =
+    breakpoint === "base" || breakpoint === "sm" || breakpoint === "md";
+
+  const { urlSessionId, setUrlSessionId } = useCopilotSessionId();
+
+  const isOnHomepage = pathname === "/copilot";
+  const paramSessionId = searchParams.get("sessionId");
+
+  const {
+    isDrawerOpen,
+    handleOpenDrawer,
+    handleCloseDrawer,
+    handleDrawerOpenChange,
+  } = useMobileDrawer();
+
+  const paginationEnabled = !isMobile || isDrawerOpen || !!paramSessionId;
+
+  const currentSessionId = getCurrentSessionId(searchParams);
+
+  const { data: currentSessionData } = useGetV2GetSession(
+    currentSessionId || "",
+    {
+      query: {
+        enabled: !!currentSessionId,
+        select: okData,
+      },
+    },
+  );
+
+  const {
+    sessions,
+    isLoading,
+    isSessionsFetching,
+    hasNextPage,
+    fetchNextPage,
+    resetPagination,
+    recentlyCreatedSessionsRef,
+  } = useShellSessionList({
+    paginationEnabled,
+    currentSessionId,
+    currentSessionData,
+    isOnHomepage,
+    paramSessionId,
+  });
+
+  const stopStream = useChatStore((s) => s.stopStream);
+  const isCreatingSession = useCopilotStore((s) => s.isCreatingSession);
+
+  function handleSessionClick(sessionId: string) {
+    if (sessionId === currentSessionId) return;
+
+    // Stop current stream - SSE reconnection allows resuming later
+    if (currentSessionId) {
+      stopStream(currentSessionId);
+    }
+
+    if (recentlyCreatedSessionsRef.current.has(sessionId)) {
+      queryClient.invalidateQueries({
+        queryKey: getGetV2GetSessionQueryKey(sessionId),
+      });
+    }
+    setUrlSessionId(sessionId, { shallow: false });
+    if (isMobile) handleCloseDrawer();
+  }
+
+  function handleNewChatClick() {
+    // Stop current stream - SSE reconnection allows resuming later
+    if (currentSessionId) {
+      stopStream(currentSessionId);
+    }
+
+    resetPagination();
+    queryClient.invalidateQueries({
+      queryKey: getGetV2ListSessionsQueryKey(),
+    });
+    setUrlSessionId(null, { shallow: false });
+    if (isMobile) handleCloseDrawer();
+  }
+
+  return {
+    isMobile,
+    isDrawerOpen,
+    isLoggedIn,
+    hasActiveSession:
+      Boolean(currentSessionId) && (!isOnHomepage || Boolean(paramSessionId)),
+    isLoading: isLoading || isCreatingSession,
+    isCreatingSession,
+    sessions,
+    currentSessionId: urlSessionId,
+    handleOpenDrawer,
+    handleCloseDrawer,
+    handleDrawerOpenChange,
+    handleNewChatClick,
+    handleSessionClick,
+    hasNextPage,
+    isFetchingNextPage: isSessionsFetching,
+    fetchNextPage,
+  };
+}

autogpt_platform/frontend/src/app/(platform)/copilot/components/CopilotShell/useShellSessionList.ts

@@ -0,0 +1,113 @@
+import { getGetV2ListSessionsQueryKey } from "@/app/api/__generated__/endpoints/chat/chat";
+import type { SessionDetailResponse } from "@/app/api/__generated__/models/sessionDetailResponse";
+import type { SessionSummaryResponse } from "@/app/api/__generated__/models/sessionSummaryResponse";
+import { useChatStore } from "@/components/contextual/Chat/chat-store";
+import { useQueryClient } from "@tanstack/react-query";
+import { useEffect, useMemo, useRef } from "react";
+import { useSessionsPagination } from "./components/SessionsList/useSessionsPagination";
+import {
+  convertSessionDetailToSummary,
+  filterVisibleSessions,
+  mergeCurrentSessionIntoList,
+} from "./helpers";
+
+interface UseShellSessionListArgs {
+  paginationEnabled: boolean;
+  currentSessionId: string | null;
+  currentSessionData: SessionDetailResponse | null | undefined;
+  isOnHomepage: boolean;
+  paramSessionId: string | null;
+}
+
+export function useShellSessionList({
+  paginationEnabled,
+  currentSessionId,
+  currentSessionData,
+  isOnHomepage,
+  paramSessionId,
+}: UseShellSessionListArgs) {
+  const queryClient = useQueryClient();
+  const onStreamComplete = useChatStore((s) => s.onStreamComplete);
+
+  const {
+    sessions: accumulatedSessions,
+    isLoading: isSessionsLoading,
+    isFetching: isSessionsFetching,
+    hasNextPage,
+    fetchNextPage,
+    reset: resetPagination,
+  } = useSessionsPagination({
+    enabled: paginationEnabled,
+  });
+
+  const recentlyCreatedSessionsRef = useRef<
+    Map<string, SessionSummaryResponse>
+  >(new Map());
+
+  useEffect(() => {
+    if (isOnHomepage && !paramSessionId) {
+      queryClient.invalidateQueries({
+        queryKey: getGetV2ListSessionsQueryKey(),
+      });
+    }
+  }, [isOnHomepage, paramSessionId, queryClient]);
+
+  useEffect(() => {
+    if (currentSessionId && currentSessionData) {
+      const isNewSession =
+        currentSessionData.updated_at === currentSessionData.created_at;
+      const isNotInAccumulated = !accumulatedSessions.some(
+        (s) => s.id === currentSessionId,
+      );
+      if (isNewSession || isNotInAccumulated) {
+        const summary = convertSessionDetailToSummary(currentSessionData);
+        recentlyCreatedSessionsRef.current.set(currentSessionId, summary);
+      }
+    }
+  }, [currentSessionId, currentSessionData, accumulatedSessions]);
+
+  useEffect(() => {
+    for (const sessionId of recentlyCreatedSessionsRef.current.keys()) {
+      if (accumulatedSessions.some((s) => s.id === sessionId)) {
+        recentlyCreatedSessionsRef.current.delete(sessionId);
+      }
+    }
+  }, [accumulatedSessions]);
+
+  useEffect(() => {
+    const unsubscribe = onStreamComplete(() => {
+      queryClient.invalidateQueries({
+        queryKey: getGetV2ListSessionsQueryKey(),
+      });
+    });
+    return unsubscribe;
+  }, [onStreamComplete, queryClient]);
+
+  const sessions = useMemo(
+    () =>
+      mergeCurrentSessionIntoList(
+        accumulatedSessions,
+        currentSessionId,
+        currentSessionData,
+        recentlyCreatedSessionsRef.current,
+      ),
+    [accumulatedSessions, currentSessionId, currentSessionData],
+  );
+
+  const visibleSessions = useMemo(
+    () => filterVisibleSessions(sessions),
+    [sessions],
+  );
+
+  const isLoading = isSessionsLoading && accumulatedSessions.length === 0;
+
+  return {
+    sessions: visibleSessions,
+    isLoading,
+    isSessionsFetching,
+    hasNextPage,
+    fetchNextPage,
+    resetPagination,
+    recentlyCreatedSessionsRef,
+  };
+}

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

@@ -1,111 +0,0 @@
-"use client";
-
-import { ChatInput } from "@/app/(platform)/copilot/components/ChatInput/ChatInput";
-import { Button } from "@/components/atoms/Button/Button";
-import { Text } from "@/components/atoms/Text/Text";
-import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
-import { SpinnerGapIcon } from "@phosphor-icons/react";
-import { motion } from "framer-motion";
-import { useEffect, useState } from "react";
-import {
-  getGreetingName,
-  getInputPlaceholder,
-  getQuickActions,
-} from "./helpers";
-
-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 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 0.3 }}
-      >
-        <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/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/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/components/OrbitLoader/OrbitLoader.module.css

@@ -1,69 +0,0 @@
-.loader {
-  position: relative;
-  animation: rotate 1s infinite;
-}
-
-.loader::before,
-.loader::after {
-  border-radius: 50%;
-  content: "";
-  display: block;
-  /* 40% of container size */
-  height: 40%;
-  width: 40%;
-}
-
-.loader::before {
-  animation: ball1 1s infinite;
-  background-color: #a1a1aa; /* zinc-400 */
-  box-shadow: calc(var(--spacing)) 0 0 #18181b; /* zinc-900 */
-  margin-bottom: calc(var(--gap));
-}
-
-.loader::after {
-  animation: ball2 1s infinite;
-  background-color: #18181b; /* zinc-900 */
-  box-shadow: calc(var(--spacing)) 0 0 #a1a1aa; /* zinc-400 */
-}
-
-@keyframes rotate {
-  0% {
-    transform: rotate(0deg) scale(0.8);
-  }
-  50% {
-    transform: rotate(360deg) scale(1.2);
-  }
-  100% {
-    transform: rotate(720deg) scale(0.8);
-  }
-}
-
-@keyframes ball1 {
-  0% {
-    box-shadow: calc(var(--spacing)) 0 0 #18181b;
-  }
-  50% {
-    box-shadow: 0 0 0 #18181b;
-    margin-bottom: 0;
-    transform: translate(calc(var(--spacing) / 2), calc(var(--spacing) / 2));
-  }
-  100% {
-    box-shadow: calc(var(--spacing)) 0 0 #18181b;
-    margin-bottom: calc(var(--gap));
-  }
-}
-
-@keyframes ball2 {
-  0% {
-    box-shadow: calc(var(--spacing)) 0 0 #a1a1aa;
-  }
-  50% {
-    box-shadow: 0 0 0 #a1a1aa;
-    margin-top: calc(var(--ball-size) * -1);
-    transform: translate(calc(var(--spacing) / 2), calc(var(--spacing) / 2));
-  }
-  100% {
-    box-shadow: calc(var(--spacing)) 0 0 #a1a1aa;
-    margin-top: 0;
-  }
-}

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

@@ -1,28 +0,0 @@
-import { cn } from "@/lib/utils";
-import styles from "./OrbitLoader.module.css";
-
-interface Props {
-  size?: number;
-  className?: string;
-}
-
-export function OrbitLoader({ size = 24, className }: Props) {
-  const ballSize = Math.round(size * 0.4);
-  const spacing = Math.round(size * 0.6);
-  const gap = Math.round(size * 0.2);
-
-  return (
-    <div
-      className={cn(styles.loader, className)}
-      style={
-        {
-          width: size,
-          height: size,
-          "--ball-size": `${ballSize}px`,
-          "--spacing": `${spacing}px`,
-          "--gap": `${gap}px`,
-        } as React.CSSProperties
-      }
-    />
-  );
-}

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

@@ -1,26 +0,0 @@
-import { cn } from "@/lib/utils";
-
-interface Props {
-  value: number;
-  label?: string;
-  className?: string;
-}
-
-export function ProgressBar({ value, label, className }: Props) {
-  const clamped = Math.min(100, Math.max(0, value));
-
-  return (
-    <div className={cn("flex flex-col gap-1.5", className)}>
-      <div className="flex items-center justify-between text-xs text-neutral-500">
-        <span>{label ?? "Working on it..."}</span>
-        <span>{Math.round(clamped)}%</span>
-      </div>
-      <div className="h-2 w-full overflow-hidden rounded-full bg-neutral-200">
-        <div
-          className="h-full rounded-full bg-neutral-900 transition-[width] duration-300 ease-out"
-          style={{ width: `${clamped}%` }}
-        />
-      </div>
-    </div>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot/components/PulseLoader/PulseLoader.module.css

@@ -1,34 +0,0 @@
-.loader {
-  position: relative;
-  display: inline-block;
-  flex-shrink: 0;
-}
-
-.loader::before,
-.loader::after {
-  content: "";
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  background: currentColor;
-  position: absolute;
-  left: 0;
-  top: 0;
-  animation: ripple 2s linear infinite;
-}
-
-.loader::after {
-  animation-delay: 1s;
-}
-
-@keyframes ripple {
-  0% {
-    transform: scale(0);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 0;
-  }
-}

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

@@ -1,16 +0,0 @@
-import { cn } from "@/lib/utils";
-import styles from "./PulseLoader.module.css";
-
-interface Props {
-  size?: number;
-  className?: string;
-}
-
-export function PulseLoader({ size = 24, className }: Props) {
-  return (
-    <div
-      className={cn(styles.loader, className)}
-      style={{ width: size, height: size }}
-    />
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot/components/SpinnerLoader/SpinnerLoader.module.css

@@ -1,57 +0,0 @@
-.loader {
-  position: relative;
-  display: inline-block;
-  flex-shrink: 0;
-  transform: rotateZ(45deg);
-  perspective: 1000px;
-  border-radius: 50%;
-  color: currentColor;
-}
-
-.loader::before,
-.loader::after {
-  content: "";
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: inherit;
-  height: inherit;
-  border-radius: 50%;
-  transform: rotateX(70deg);
-  animation: spin 1s linear infinite;
-}
-
-.loader::after {
-  color: var(--spinner-accent, #a855f7);
-  transform: rotateY(70deg);
-  animation-delay: 0.4s;
-}
-
-@keyframes spin {
-  0%,
-  100% {
-    box-shadow: 0.2em 0 0 0 currentColor;
-  }
-  12% {
-    box-shadow: 0.2em 0.2em 0 0 currentColor;
-  }
-  25% {
-    box-shadow: 0 0.2em 0 0 currentColor;
-  }
-  37% {
-    box-shadow: -0.2em 0.2em 0 0 currentColor;
-  }
-  50% {
-    box-shadow: -0.2em 0 0 0 currentColor;
-  }
-  62% {
-    box-shadow: -0.2em -0.2em 0 0 currentColor;
-  }
-  75% {
-    box-shadow: 0 -0.2em 0 0 currentColor;
-  }
-  87% {
-    box-shadow: 0.2em -0.2em 0 0 currentColor;
-  }
-}

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

@@ -1,16 +0,0 @@
-import { cn } from "@/lib/utils";
-import styles from "./SpinnerLoader.module.css";
-
-interface Props {
-  size?: number;
-  className?: string;
-}
-
-export function SpinnerLoader({ size = 24, className }: Props) {
-  return (
-    <div
-      className={cn(styles.loader, className)}
-      style={{ width: size, height: size }}
-    />
-  );
-}

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

@@ -1,235 +0,0 @@
-import { Link } from "@/components/atoms/Link/Link";
-import { Text } from "@/components/atoms/Text/Text";
-import { cn } from "@/lib/utils";
-
-/* ------------------------------------------------------------------ */
-/*  Layout                                                            */
-/* ------------------------------------------------------------------ */
-
-export function ContentGrid({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return <div className={cn("grid gap-2", className)}>{children}</div>;
-}
-
-/* ------------------------------------------------------------------ */
-/*  Card                                                              */
-/* ------------------------------------------------------------------ */
-
-export function ContentCard({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return (
-    <div
-      className={cn(
-        "rounded-lg bg-gradient-to-r from-purple-500/30 to-blue-500/30 p-[1px]",
-        className,
-      )}
-    >
-      <div className="rounded-lg bg-neutral-100 p-3">{children}</div>
-    </div>
-  );
-}
-
-/** Flex row with a left content area (`children`) and an optional right‑side `action`. */
-export function ContentCardHeader({
-  children,
-  action,
-  className,
-}: {
-  children: React.ReactNode;
-  action?: React.ReactNode;
-  className?: string;
-}) {
-  return (
-    <div className={cn("flex items-start justify-between gap-2", className)}>
-      <div className="min-w-0">{children}</div>
-      {action}
-    </div>
-  );
-}
-
-export function ContentCardTitle({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return (
-    <Text
-      variant="body-medium"
-      className={cn("truncate text-zinc-800", className)}
-    >
-      {children}
-    </Text>
-  );
-}
-
-export function ContentCardSubtitle({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return (
-    <Text
-      variant="small"
-      className={cn("mt-0.5 truncate font-mono text-zinc-800", className)}
-    >
-      {children}
-    </Text>
-  );
-}
-
-export function ContentCardDescription({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return (
-    <Text variant="body" className={cn("mt-2 text-zinc-800", className)}>
-      {children}
-    </Text>
-  );
-}
-
-/* ------------------------------------------------------------------ */
-/*  Text                                                              */
-/* ------------------------------------------------------------------ */
-
-export function ContentMessage({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return (
-    <Text variant="body" className={cn("text-zinc-800", className)}>
-      {children}
-    </Text>
-  );
-}
-
-export function ContentHint({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return (
-    <Text variant="small" className={cn("text-neutral-500", className)}>
-      {children}
-    </Text>
-  );
-}
-
-/* ------------------------------------------------------------------ */
-/*  Code / data                                                       */
-/* ------------------------------------------------------------------ */
-
-export function ContentCodeBlock({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return (
-    <pre
-      className={cn(
-        "whitespace-pre-wrap rounded-lg border bg-black p-3 text-xs text-neutral-200",
-        className,
-      )}
-    >
-      {children}
-    </pre>
-  );
-}
-
-/* ------------------------------------------------------------------ */
-/*  Inline elements                                                   */
-/* ------------------------------------------------------------------ */
-
-export function ContentBadge({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return (
-    <Text
-      variant="small"
-      as="span"
-      className={cn(
-        "shrink-0 rounded-full border bg-muted px-2 py-0.5 text-[11px] text-zinc-800",
-        className,
-      )}
-    >
-      {children}
-    </Text>
-  );
-}
-
-export function ContentLink({
-  href,
-  children,
-  className,
-  ...rest
-}: Omit<React.ComponentProps<typeof Link>, "className"> & {
-  className?: string;
-}) {
-  return (
-    <Link
-      variant="primary"
-      isExternal
-      href={href}
-      className={cn("shrink-0 text-xs text-purple-500", className)}
-      {...rest}
-    >
-      {children}
-    </Link>
-  );
-}
-
-/* ------------------------------------------------------------------ */
-/*  Lists                                                             */
-/* ------------------------------------------------------------------ */
-
-export function ContentSuggestionsList({
-  items,
-  max = 5,
-  className,
-}: {
-  items: string[];
-  max?: number;
-  className?: string;
-}) {
-  if (items.length === 0) return null;
-  return (
-    <ul
-      className={cn(
-        "mt-2 list-disc space-y-1 pl-5 font-sans text-[0.75rem] leading-[1.125rem] text-zinc-800",
-        className,
-      )}
-    >
-      {items.slice(0, max).map((s) => (
-        <li key={s}>{s}</li>
-      ))}
-    </ul>
-  );
-}

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

@@ -1,102 +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 {
-  icon: React.ReactNode;
-  title: React.ReactNode;
-  titleClassName?: string;
-  description?: React.ReactNode;
-  children: React.ReactNode;
-  className?: string;
-  defaultExpanded?: boolean;
-  expanded?: boolean;
-  onExpandedChange?: (expanded: boolean) => void;
-}
-
-export function ToolAccordion({
-  icon,
-  title,
-  titleClassName,
-  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 border-slate-200 bg-slate-100 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-3">
-          <span className="flex shrink-0 items-center text-gray-800">
-            {icon}
-          </span>
-          <div className="min-w-0">
-            <p
-              className={cn(
-                "truncate text-sm font-medium text-gray-800",
-                titleClassName,
-              )}
-            >
-              {title}
-            </p>
-            {description && (
-              <p className="truncate text-xs text-slate-800">{description}</p>
-            )}
-          </div>
-        </div>
-        <CaretDownIcon
-          className={cn(
-            "h-4 w-4 shrink-0 text-slate-500 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/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/copilot-page-store.ts

@@ -0,0 +1,56 @@
+"use client";
+
+import { create } from "zustand";
+
+interface CopilotStoreState {
+  isStreaming: boolean;
+  isSwitchingSession: boolean;
+  isCreatingSession: boolean;
+  isInterruptModalOpen: boolean;
+  pendingAction: (() => void) | null;
+}
+
+interface CopilotStoreActions {
+  setIsStreaming: (isStreaming: boolean) => void;
+  setIsSwitchingSession: (isSwitchingSession: boolean) => void;
+  setIsCreatingSession: (isCreating: boolean) => void;
+  openInterruptModal: (onConfirm: () => void) => void;
+  confirmInterrupt: () => void;
+  cancelInterrupt: () => void;
+}
+
+type CopilotStore = CopilotStoreState & CopilotStoreActions;
+
+export const useCopilotStore = create<CopilotStore>((set, get) => ({
+  isStreaming: false,
+  isSwitchingSession: false,
+  isCreatingSession: false,
+  isInterruptModalOpen: false,
+  pendingAction: null,
+
+  setIsStreaming(isStreaming) {
+    set({ isStreaming });
+  },
+
+  setIsSwitchingSession(isSwitchingSession) {
+    set({ isSwitchingSession });
+  },
+
+  setIsCreatingSession(isCreatingSession) {
+    set({ isCreatingSession });
+  },
+
+  openInterruptModal(onConfirm) {
+    set({ isInterruptModalOpen: true, pendingAction: onConfirm });
+  },
+
+  confirmInterrupt() {
+    const { pendingAction } = get();
+    set({ isInterruptModalOpen: false, pendingAction: null });
+    if (pendingAction) pendingAction();
+  },
+
+  cancelInterrupt() {
+    set({ isInterruptModalOpen: false, pendingAction: null });
+  },
+}));

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

@@ -1,26 +1,6 @@
-import { User } from "@supabase/supabase-js";
+import type { User } from "@supabase/supabase-js";
 
-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...'";
-}
-
-export function getQuickActions() {
-  return [
-    "I don't know where to start, just ask me stuff",
-    "I do the same thing every week and it's killing me",
-    "Help me find where I'm wasting my time",
-  ];
-}
-
-export function getGreetingName(user?: User | null) {
+export function getGreetingName(user?: User | null): string {
   if (!user) return "there";
   const metadata = user.user_metadata as Record<string, unknown> | undefined;
   const fullName = metadata?.full_name;
@@ -36,3 +16,30 @@ export function getGreetingName(user?: User | null) {
   }
   return "there";
 }
+
+export function buildCopilotChatUrl(prompt: string): string {
+  const trimmed = prompt.trim();
+  if (!trimmed) return "/copilot/chat";
+  const encoded = encodeURIComponent(trimmed);
+  return `/copilot/chat?prompt=${encoded}`;
+}
+
+export function getQuickActions(): string[] {
+  return [
+    "I don't know where to start, just ask me stuff",
+    "I do the same thing every week and it's killing me",
+    "Help me find where I'm wasting my time",
+  ];
+}
+
+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/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/layout.tsx

@@ -0,0 +1,13 @@
+"use client";
+import { FeatureFlagPage } from "@/services/feature-flags/FeatureFlagPage";
+import { Flag } from "@/services/feature-flags/use-get-flag";
+import { type ReactNode } from "react";
+import { CopilotShell } from "./components/CopilotShell/CopilotShell";
+
+export default function CopilotLayout({ children }: { children: ReactNode }) {
+  return (
+    <FeatureFlagPage flag={Flag.CHAT} whenDisabled="/library">
+      <CopilotShell>{children}</CopilotShell>
+    </FeatureFlagPage>
+  );
+}

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

@@ -1,69 +1,149 @@
 "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 { Button } from "@/components/atoms/Button/Button";
+import { Skeleton } from "@/components/atoms/Skeleton/Skeleton";
+import { Text } from "@/components/atoms/Text/Text";
+import { Chat } from "@/components/contextual/Chat/Chat";
+import { ChatInput } from "@/components/contextual/Chat/components/ChatInput/ChatInput";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
+import { useEffect, useState } from "react";
+import { useCopilotStore } from "./copilot-page-store";
+import { getInputPlaceholder } from "./helpers";
 import { useCopilotPage } from "./useCopilotPage";
 
-export default function Page() {
+export default function CopilotPage() {
+  const { state, handlers } = useCopilotPage();
+  const isInterruptModalOpen = useCopilotStore((s) => s.isInterruptModalOpen);
+  const confirmInterrupt = useCopilotStore((s) => s.confirmInterrupt);
+  const cancelInterrupt = useCopilotStore((s) => s.cancelInterrupt);
+
+  const [inputPlaceholder, setInputPlaceholder] = useState(
+    getInputPlaceholder(),
+  );
+
+  useEffect(() => {
+    const handleResize = () => {
+      setInputPlaceholder(getInputPlaceholder(window.innerWidth));
+    };
+
+    handleResize();
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const { greetingName, quickActions, isLoading, hasSession, initialPrompt } =
+    state;
+
   const {
-    sessionId,
-    messages,
-    status,
-    error,
-    stop,
-    isLoadingSession,
-    isCreatingSession,
-    createSession,
-    onSend,
-    // Mobile drawer
-    isMobile,
-    isDrawerOpen,
-    sessions,
-    isLoadingSessions,
-    handleOpenDrawer,
-    handleCloseDrawer,
-    handleDrawerOpenChange,
-    handleSelectSession,
-    handleNewChat,
-  } = useCopilotPage();
+    handleQuickAction,
+    startChatWithPrompt,
+    handleSessionNotFound,
+    handleStreamingChange,
+  } = handlers;
+
+  if (hasSession) {
+    return (
+      <div className="flex h-full flex-col">
+        <Chat
+          className="flex-1"
+          initialPrompt={initialPrompt}
+          onSessionNotFound={handleSessionNotFound}
+          onStreamingChange={handleStreamingChange}
+        />
+        <Dialog
+          title="Interrupt current chat?"
+          styling={{ maxWidth: 300, width: "100%" }}
+          controlled={{
+            isOpen: isInterruptModalOpen,
+            set: (open) => {
+              if (!open) cancelInterrupt();
+            },
+          }}
+          onClose={cancelInterrupt}
+        >
+          <Dialog.Content>
+            <div className="flex flex-col gap-4">
+              <Text variant="body">
+                The current chat response will be interrupted. Are you sure you
+                want to continue?
+              </Text>
+              <Dialog.Footer>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={cancelInterrupt}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  type="button"
+                  variant="primary"
+                  onClick={confirmInterrupt}
+                >
+                  Continue
+                </Button>
+              </Dialog.Footer>
+            </div>
+          </Dialog.Content>
+        </Dialog>
+      </div>
+    );
+  }
 
   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}
-            onStop={stop}
-          />
-        </div>
+    <div className="flex h-full flex-1 items-center justify-center overflow-y-auto bg-[#f8f8f9] px-3 py-5 md:px-6 md:py-10">
+      <div className="w-full text-center">
+        {isLoading ? (
+          <div className="mx-auto max-w-2xl">
+            <Skeleton className="mx-auto mb-3 h-8 w-64" />
+            <Skeleton className="mx-auto mb-8 h-6 w-80" />
+            <div className="mb-8">
+              <Skeleton className="mx-auto h-14 w-full rounded-lg" />
+            </div>
+            <div className="flex flex-wrap items-center justify-center gap-3">
+              {Array.from({ length: 4 }).map((_, i) => (
+                <Skeleton key={i} className="h-9 w-48 rounded-md" />
+              ))}
+            </div>
+          </div>
+        ) : (
+          <>
+            <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">
+                <ChatInput
+                  onSend={startChatWithPrompt}
+                  placeholder={inputPlaceholder}
+                />
+              </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={() => handleQuickAction(action)}
+                  className="h-auto shrink-0 border-zinc-300 px-3 py-2 text-[.9rem] text-zinc-600"
+                >
+                  {action}
+                </Button>
+              ))}
+            </div>
+          </>
+        )}
       </div>
-      {isMobile && (
-        <MobileDrawer
-          isOpen={isDrawerOpen}
-          sessions={sessions}
-          currentSessionId={sessionId}
-          isLoading={isLoadingSessions}
-          onSelectSession={handleSelectSession}
-          onNewChat={handleNewChat}
-          onClose={handleCloseDrawer}
-          onOpenChange={handleDrawerOpenChange}
-        />
-      )}
-    </SidebarProvider>
+    </div>
   );
 }

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

@@ -1,237 +0,0 @@
-"use client";
-
-import { WarningDiamondIcon } from "@phosphor-icons/react";
-import type { ToolUIPart } from "ai";
-import { useCopilotChatActions } from "../../components/CopilotChatActionsProvider/useCopilotChatActions";
-import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
-import { OrbitLoader } from "../../components/OrbitLoader/OrbitLoader";
-import { ProgressBar } from "../../components/ProgressBar/ProgressBar";
-import {
-  ContentCardDescription,
-  ContentCodeBlock,
-  ContentGrid,
-  ContentHint,
-  ContentLink,
-  ContentMessage,
-} from "../../components/ToolAccordion/AccordionContent";
-import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
-import { useAsymptoticProgress } from "../../hooks/useAsymptoticProgress";
-import {
-  ClarificationQuestionsCard,
-  ClarifyingQuestion,
-} from "./components/ClarificationQuestionsCard";
-import {
-  AccordionIcon,
-  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): {
-  icon: React.ReactNode;
-  title: React.ReactNode;
-  titleClassName?: string;
-  description?: string;
-} {
-  const icon = <AccordionIcon />;
-
-  if (isAgentSavedOutput(output)) {
-    return { icon, title: output.agent_name };
-  }
-  if (isAgentPreviewOutput(output)) {
-    return {
-      icon,
-      title: output.agent_name,
-      description: `${output.node_count} block${output.node_count === 1 ? "" : "s"}`,
-    };
-  }
-  if (isClarificationNeededOutput(output)) {
-    const questions = output.questions ?? [];
-    return {
-      icon,
-      title: "Needs clarification",
-      description: `${questions.length} question${questions.length === 1 ? "" : "s"}`,
-    };
-  }
-  if (
-    isOperationStartedOutput(output) ||
-    isOperationPendingOutput(output) ||
-    isOperationInProgressOutput(output)
-  ) {
-    return {
-      icon: <OrbitLoader size={32} />,
-      title: "Creating agent, this may take a few minutes. Sit back and relax.",
-    };
-  }
-  return {
-    icon: (
-      <WarningDiamondIcon size={32} weight="light" className="text-red-500" />
-    ),
-    title: "Error",
-    titleClassName: "text-red-500",
-  };
-}
-
-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 isOperating =
-    !!output &&
-    (isOperationStartedOutput(output) ||
-      isOperationPendingOutput(output) ||
-      isOperationInProgressOutput(output));
-  const progress = useAsymptoticProgress(isOperating);
-  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 questions =
-      output && isClarificationNeededOutput(output)
-        ? (output.questions ?? [])
-        : [];
-
-    const contextMessage = questions
-      .map((q) => {
-        const answer = answers[q.keyword] || "";
-        return `> ${q.question}\n\n${answer}`;
-      })
-      .join("\n\n");
-
-    onSend(
-      `**Here are my answers:**\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={isOperating || isClarificationNeededOutput(output)}
-        >
-          {isOperating && (
-            <ContentGrid>
-              <ProgressBar value={progress} className="max-w-[280px]" />
-              <ContentHint>
-                This could take a few minutes, grab a coffee ☕
-              </ContentHint>
-            </ContentGrid>
-          )}
-
-          {isAgentSavedOutput(output) && (
-            <ContentGrid>
-              <ContentMessage>{output.message}</ContentMessage>
-              <div className="flex flex-wrap gap-2">
-                <ContentLink href={output.library_agent_link}>
-                  Open in library
-                </ContentLink>
-                <ContentLink href={output.agent_page_link}>
-                  Open in builder
-                </ContentLink>
-              </div>
-              <ContentCodeBlock>
-                {truncateText(
-                  formatMaybeJson({ agent_id: output.agent_id }),
-                  800,
-                )}
-              </ContentCodeBlock>
-            </ContentGrid>
-          )}
-
-          {isAgentPreviewOutput(output) && (
-            <ContentGrid>
-              <ContentMessage>{output.message}</ContentMessage>
-              {output.description?.trim() && (
-                <ContentCardDescription>
-                  {output.description}
-                </ContentCardDescription>
-              )}
-              <ContentCodeBlock>
-                {truncateText(formatMaybeJson(output.agent_json), 1600)}
-              </ContentCodeBlock>
-            </ContentGrid>
-          )}
-
-          {isClarificationNeededOutput(output) && (
-            <ClarificationQuestionsCard
-              questions={(output.questions ?? []).map((q) => {
-                const item: ClarifyingQuestion = {
-                  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) && (
-            <ContentGrid>
-              <ContentMessage>{output.message}</ContentMessage>
-              {output.error && (
-                <ContentCodeBlock>
-                  {formatMaybeJson(output.error)}
-                </ContentCodeBlock>
-              )}
-              {output.details && (
-                <ContentCodeBlock>
-                  {formatMaybeJson(output.details)}
-                </ContentCodeBlock>
-              )}
-            </ContentGrid>
-          )}
-        </ToolAccordion>
-      )}
-    </div>
-  );
-}

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

@@ -1,186 +0,0 @@
-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";
-import {
-  PlusCircleIcon,
-  PlusIcon,
-  WarningDiamondIcon,
-} from "@phosphor-icons/react";
-import type { ToolUIPart } from "ai";
-import { OrbitLoader } from "../../components/OrbitLoader/OrbitLoader";
-
-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;
-}) {
-  if (isError) {
-    return (
-      <WarningDiamondIcon size={14} weight="regular" className="text-red-500" />
-    );
-  }
-  if (isStreaming) {
-    return <OrbitLoader size={24} />;
-  }
-  return <PlusIcon size={14} weight="regular" className="text-neutral-400" />;
-}
-
-export function AccordionIcon() {
-  return <PlusCircleIcon size={32} weight="light" />;
-}
-
-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/tools/EditAgent/EditAgent.tsx

@@ -1,234 +0,0 @@
-"use client";
-
-import { WarningDiamondIcon } from "@phosphor-icons/react";
-import type { ToolUIPart } from "ai";
-import { useCopilotChatActions } from "../../components/CopilotChatActionsProvider/useCopilotChatActions";
-import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
-import { OrbitLoader } from "../../components/OrbitLoader/OrbitLoader";
-import { ProgressBar } from "../../components/ProgressBar/ProgressBar";
-import {
-  ContentCardDescription,
-  ContentCodeBlock,
-  ContentGrid,
-  ContentHint,
-  ContentLink,
-  ContentMessage,
-} from "../../components/ToolAccordion/AccordionContent";
-import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
-import { useAsymptoticProgress } from "../../hooks/useAsymptoticProgress";
-import {
-  ClarificationQuestionsCard,
-  ClarifyingQuestion,
-} from "../CreateAgent/components/ClarificationQuestionsCard";
-import {
-  AccordionIcon,
-  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): {
-  icon: React.ReactNode;
-  title: string;
-  titleClassName?: string;
-  description?: string;
-} {
-  const icon = <AccordionIcon />;
-
-  if (isAgentSavedOutput(output)) {
-    return { icon, title: output.agent_name };
-  }
-  if (isAgentPreviewOutput(output)) {
-    return {
-      icon,
-      title: output.agent_name,
-      description: `${output.node_count} block${output.node_count === 1 ? "" : "s"}`,
-    };
-  }
-  if (isClarificationNeededOutput(output)) {
-    const questions = output.questions ?? [];
-    return {
-      icon,
-      title: "Needs clarification",
-      description: `${questions.length} question${questions.length === 1 ? "" : "s"}`,
-    };
-  }
-  if (
-    isOperationStartedOutput(output) ||
-    isOperationPendingOutput(output) ||
-    isOperationInProgressOutput(output)
-  ) {
-    return { icon: <OrbitLoader size={32} />, title: "Editing agent" };
-  }
-  return {
-    icon: (
-      <WarningDiamondIcon size={32} weight="light" className="text-red-500" />
-    ),
-    title: "Error",
-    titleClassName: "text-red-500",
-  };
-}
-
-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 isOperating =
-    !!output &&
-    (isOperationStartedOutput(output) ||
-      isOperationPendingOutput(output) ||
-      isOperationInProgressOutput(output));
-  const progress = useAsymptoticProgress(isOperating);
-  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 questions =
-      output && isClarificationNeededOutput(output)
-        ? (output.questions ?? [])
-        : [];
-
-    const contextMessage = questions
-      .map((q) => {
-        const answer = answers[q.keyword] || "";
-        return `> ${q.question}\n\n${answer}`;
-      })
-      .join("\n\n");
-
-    onSend(
-      `**Here are my answers:**\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={isOperating || isClarificationNeededOutput(output)}
-        >
-          {isOperating && (
-            <ContentGrid>
-              <ProgressBar value={progress} className="max-w-[280px]" />
-              <ContentHint>
-                This could take a few minutes, grab a coffee ☕
-              </ContentHint>
-            </ContentGrid>
-          )}
-
-          {isAgentSavedOutput(output) && (
-            <ContentGrid>
-              <ContentMessage>{output.message}</ContentMessage>
-              <div className="flex flex-wrap gap-2">
-                <ContentLink href={output.library_agent_link}>
-                  Open in library
-                </ContentLink>
-                <ContentLink href={output.agent_page_link}>
-                  Open in builder
-                </ContentLink>
-              </div>
-              <ContentCodeBlock>
-                {truncateText(
-                  formatMaybeJson({ agent_id: output.agent_id }),
-                  800,
-                )}
-              </ContentCodeBlock>
-            </ContentGrid>
-          )}
-
-          {isAgentPreviewOutput(output) && (
-            <ContentGrid>
-              <ContentMessage>{output.message}</ContentMessage>
-              {output.description?.trim() && (
-                <ContentCardDescription>
-                  {output.description}
-                </ContentCardDescription>
-              )}
-              <ContentCodeBlock>
-                {truncateText(formatMaybeJson(output.agent_json), 1600)}
-              </ContentCodeBlock>
-            </ContentGrid>
-          )}
-
-          {isClarificationNeededOutput(output) && (
-            <ClarificationQuestionsCard
-              questions={(output.questions ?? []).map((q) => {
-                const item: ClarifyingQuestion = {
-                  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) && (
-            <ContentGrid>
-              <ContentMessage>{output.message}</ContentMessage>
-              {output.error && (
-                <ContentCodeBlock>
-                  {formatMaybeJson(output.error)}
-                </ContentCodeBlock>
-              )}
-              {output.details && (
-                <ContentCodeBlock>
-                  {formatMaybeJson(output.details)}
-                </ContentCodeBlock>
-              )}
-            </ContentGrid>
-          )}
-        </ToolAccordion>
-      )}
-    </div>
-  );
-}

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

@@ -1,188 +0,0 @@
-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";
-import {
-  NotePencilIcon,
-  PencilLineIcon,
-  WarningDiamondIcon,
-} from "@phosphor-icons/react";
-import type { ToolUIPart } from "ai";
-import { OrbitLoader } from "../../components/OrbitLoader/OrbitLoader";
-
-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;
-}) {
-  if (isError) {
-    return (
-      <WarningDiamondIcon size={14} weight="regular" className="text-red-500" />
-    );
-  }
-  if (isStreaming) {
-    return <OrbitLoader size={24} />;
-  }
-  return (
-    <PencilLineIcon size={14} weight="regular" className="text-neutral-400" />
-  );
-}
-
-export function AccordionIcon() {
-  return <NotePencilIcon size={32} weight="light" />;
-}
-
-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/tools/FindAgents/FindAgents.tsx

@@ -1,127 +0,0 @@
-"use client";
-
-import { ToolUIPart } from "ai";
-import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
-import {
-  ContentBadge,
-  ContentCard,
-  ContentCardDescription,
-  ContentCardHeader,
-  ContentCardTitle,
-  ContentGrid,
-  ContentLink,
-} from "../../components/ToolAccordion/AccordionContent";
-import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
-import {
-  AccordionIcon,
-  getAgentHref,
-  getAnimationText,
-  getFindAgentsOutput,
-  getSourceLabelFromToolType,
-  isAgentsFoundOutput,
-  isErrorOutput,
-  ToolIcon,
-} from "./helpers";
-
-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 { 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
-          icon={<AccordionIcon toolType={part.type} />}
-          title="Agent results"
-          description={accordionDescription}
-        >
-          <ContentGrid className="sm:grid-cols-2">
-            {agentsFoundOutput.agents.map((agent) => {
-              const href = getAgentHref(agent);
-              const agentSource =
-                agent.source === "library"
-                  ? "Library"
-                  : agent.source === "marketplace"
-                    ? "Marketplace"
-                    : null;
-              return (
-                <ContentCard key={agent.id}>
-                  <ContentCardHeader
-                    action={
-                      href ? <ContentLink href={href}>Open</ContentLink> : null
-                    }
-                  >
-                    <div className="flex items-center gap-2">
-                      <ContentCardTitle>{agent.name}</ContentCardTitle>
-                      {agentSource && (
-                        <ContentBadge>{agentSource}</ContentBadge>
-                      )}
-                    </div>
-                    <ContentCardDescription className="mt-1 line-clamp-2">
-                      {agent.description}
-                    </ContentCardDescription>
-                  </ContentCardHeader>
-                </ContentCard>
-              );
-            })}
-          </ContentGrid>
-        </ToolAccordion>
-      )}
-    </div>
-  );
-}

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

@@ -1,187 +0,0 @@
-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";
-import {
-  FolderOpenIcon,
-  MagnifyingGlassIcon,
-  SquaresFourIcon,
-  StorefrontIcon,
-} from "@phosphor-icons/react";
-import { ToolUIPart } from "ai";
-
-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"
-      }
-    />
-  );
-}
-
-export function AccordionIcon({ toolType }: { toolType?: FindAgentsToolType }) {
-  const { source } = getSourceLabelFromToolType(toolType);
-  const IconComponent = source === "library" ? FolderOpenIcon : StorefrontIcon;
-  return <IconComponent size={32} weight="light" />;
-}

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

@@ -1,92 +0,0 @@
-"use client";
-
-import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
-import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
-import {
-  ContentCard,
-  ContentCardDescription,
-  ContentCardTitle,
-} from "../../components/ToolAccordion/AccordionContent";
-import type { BlockListResponse } from "@/app/api/__generated__/models/blockListResponse";
-import type { BlockInfoSummary } from "@/app/api/__generated__/models/blockInfoSummary";
-import { ToolUIPart } from "ai";
-import { HorizontalScroll } from "@/app/(platform)/build/components/NewControlPanel/NewBlockMenu/HorizontalScroll";
-import {
-  AccordionIcon,
-  getAnimationText,
-  parseOutput,
-  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;
-}
-
-function BlockCard({ block }: { block: BlockInfoSummary }) {
-  return (
-    <ContentCard className="w-48 shrink-0">
-      <ContentCardTitle>{block.name}</ContentCardTitle>
-      <ContentCardDescription className="mt-1 line-clamp-2">
-        {block.description}
-      </ContentCardDescription>
-    </ContentCard>
-  );
-}
-
-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";
-
-  const parsed =
-    part.state === "output-available" ? parseOutput(part.output) : null;
-  const hasBlocks = !!parsed && parsed.blocks.length > 0;
-
-  const query = (part.input as FindBlockInput | undefined)?.query?.trim();
-  const accordionDescription = parsed
-    ? `Found ${parsed.count} block${parsed.count === 1 ? "" : "s"}${query ? ` for "${query}"` : ""}`
-    : undefined;
-
-  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>
-
-      {hasBlocks && parsed && (
-        <ToolAccordion
-          icon={<AccordionIcon />}
-          title="Block results"
-          description={accordionDescription}
-        >
-          <HorizontalScroll dependencyList={[parsed.blocks.length]}>
-            {parsed.blocks.map((block) => (
-              <BlockCard key={block.id} block={block} />
-            ))}
-          </HorizontalScroll>
-        </ToolAccordion>
-      )}
-    </div>
-  );
-}

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

@@ -1,75 +0,0 @@
-import type { BlockListResponse } from "@/app/api/__generated__/models/blockListResponse";
-import { ResponseType } from "@/app/api/__generated__/models/responseType";
-import { CubeIcon, PackageIcon } from "@phosphor-icons/react";
-import { FindBlockInput, FindBlockToolPart } from "./FindBlocks";
-
-export 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"
-      }
-    />
-  );
-}
-
-export function AccordionIcon() {
-  return <CubeIcon size={32} weight="light" />;
-}

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

@@ -1,93 +0,0 @@
-"use client";
-
-import type { ToolUIPart } from "ai";
-import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
-import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
-import { ContentMessage } from "../../components/ToolAccordion/AccordionContent";
-import {
-  getAccordionMeta,
-  getAnimationText,
-  getRunAgentToolOutput,
-  isRunAgentAgentDetailsOutput,
-  isRunAgentErrorOutput,
-  isRunAgentExecutionStartedOutput,
-  isRunAgentNeedLoginOutput,
-  isRunAgentSetupRequirementsOutput,
-  ToolIcon,
-} from "./helpers";
-import { ExecutionStartedCard } from "./components/ExecutionStartedCard/ExecutionStartedCard";
-import { AgentDetailsCard } from "./components/AgentDetailsCard/AgentDetailsCard";
-import { SetupRequirementsCard } from "./components/SetupRequirementsCard/SetupRequirementsCard";
-import { ErrorCard } from "./components/ErrorCard/ErrorCard";
-
-export interface RunAgentToolPart {
-  type: string;
-  toolCallId: string;
-  state: ToolUIPart["state"];
-  input?: unknown;
-  output?: unknown;
-}
-
-interface Props {
-  part: RunAgentToolPart;
-}
-
-export function RunAgentTool({ part }: Props) {
-  const text = getAnimationText(part);
-  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));
-
-  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={
-            isRunAgentExecutionStartedOutput(output) ||
-            isRunAgentSetupRequirementsOutput(output) ||
-            isRunAgentAgentDetailsOutput(output)
-          }
-        >
-          {isRunAgentExecutionStartedOutput(output) && (
-            <ExecutionStartedCard output={output} />
-          )}
-
-          {isRunAgentAgentDetailsOutput(output) && (
-            <AgentDetailsCard output={output} />
-          )}
-
-          {isRunAgentSetupRequirementsOutput(output) && (
-            <SetupRequirementsCard output={output} />
-          )}
-
-          {isRunAgentNeedLoginOutput(output) && (
-            <ContentMessage>{output.message}</ContentMessage>
-          )}
-
-          {isRunAgentErrorOutput(output) && <ErrorCard output={output} />}
-        </ToolAccordion>
-      )}
-    </div>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunAgent/components/AgentDetailsCard/AgentDetailsCard.tsx

@@ -1,116 +0,0 @@
-"use client";
-
-import type { AgentDetailsResponse } from "@/app/api/__generated__/models/agentDetailsResponse";
-import { Button } from "@/components/atoms/Button/Button";
-import { Text } from "@/components/atoms/Text/Text";
-import { FormRenderer } from "@/components/renderers/InputRenderer/FormRenderer";
-import { AnimatePresence, motion } from "framer-motion";
-import { useState } from "react";
-import { useCopilotChatActions } from "../../../../components/CopilotChatActionsProvider/useCopilotChatActions";
-import { ContentMessage } from "../../../../components/ToolAccordion/AccordionContent";
-import { buildInputSchema } from "./helpers";
-
-interface Props {
-  output: AgentDetailsResponse;
-}
-
-export function AgentDetailsCard({ output }: Props) {
-  const { onSend } = useCopilotChatActions();
-  const [showInputForm, setShowInputForm] = useState(false);
-  const [inputValues, setInputValues] = useState<Record<string, unknown>>({});
-
-  function handleRunWithExamples() {
-    onSend(
-      `Run the agent "${output.agent.name}" with placeholder/example values so I can test it.`,
-    );
-  }
-
-  function handleRunWithInputs() {
-    const nonEmpty = Object.fromEntries(
-      Object.entries(inputValues).filter(
-        ([, v]) => v !== undefined && v !== null && v !== "",
-      ),
-    );
-    onSend(
-      `Run the agent "${output.agent.name}" with these inputs: ${JSON.stringify(nonEmpty, null, 2)}`,
-    );
-    setShowInputForm(false);
-    setInputValues({});
-  }
-
-  return (
-    <div className="grid gap-2">
-      <ContentMessage>
-        Run this agent with example values or your own inputs.
-      </ContentMessage>
-
-      <div className="flex gap-2 pt-4">
-        <Button size="small" className="w-fit" onClick={handleRunWithExamples}>
-          Run with example values
-        </Button>
-        <Button
-          variant="outline"
-          size="small"
-          className="w-fit"
-          onClick={() => setShowInputForm((prev) => !prev)}
-        >
-          Run with my inputs
-        </Button>
-      </div>
-
-      <AnimatePresence initial={false}>
-        {showInputForm && buildInputSchema(output.agent.inputs) && (
-          <motion.div
-            initial={{ height: 0, opacity: 0, filter: "blur(6px)" }}
-            animate={{ height: "auto", opacity: 1, filter: "blur(0px)" }}
-            exit={{ height: 0, opacity: 0, filter: "blur(6px)" }}
-            transition={{
-              height: { type: "spring", bounce: 0.15, duration: 0.5 },
-              opacity: { duration: 0.25 },
-              filter: { duration: 0.2 },
-            }}
-            className="overflow-hidden"
-            style={{ willChange: "height, opacity, filter" }}
-          >
-            <div className="mt-4 rounded-2xl border bg-background p-3 pt-4">
-              <Text variant="body-medium">Enter your inputs</Text>
-              <FormRenderer
-                jsonSchema={buildInputSchema(output.agent.inputs)!}
-                handleChange={(v) => setInputValues(v.formData ?? {})}
-                uiSchema={{
-                  "ui:submitButtonOptions": { norender: true },
-                }}
-                initialValues={inputValues}
-                formContext={{
-                  showHandles: false,
-                  size: "small",
-                }}
-              />
-              <div className="-mt-8 flex gap-2">
-                <Button
-                  variant="primary"
-                  size="small"
-                  className="w-fit"
-                  onClick={handleRunWithInputs}
-                >
-                  Run
-                </Button>
-                <Button
-                  variant="secondary"
-                  size="small"
-                  className="w-fit"
-                  onClick={() => {
-                    setShowInputForm(false);
-                    setInputValues({});
-                  }}
-                >
-                  Cancel
-                </Button>
-              </div>
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunAgent/components/AgentDetailsCard/helpers.ts

@@ -1,8 +0,0 @@
-import type { RJSFSchema } from "@rjsf/utils";
-
-export function buildInputSchema(inputs: unknown): RJSFSchema | null {
-  if (!inputs || typeof inputs !== "object") return null;
-  const properties = inputs as RJSFSchema["properties"];
-  if (!properties || Object.keys(properties).length === 0) return null;
-  return inputs as RJSFSchema;
-}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunAgent/components/ErrorCard/ErrorCard.tsx

@@ -1,27 +0,0 @@
-"use client";
-
-import type { ErrorResponse } from "@/app/api/__generated__/models/errorResponse";
-import {
-  ContentCodeBlock,
-  ContentGrid,
-  ContentMessage,
-} from "../../../../components/ToolAccordion/AccordionContent";
-import { formatMaybeJson } from "../../helpers";
-
-interface Props {
-  output: ErrorResponse;
-}
-
-export function ErrorCard({ output }: Props) {
-  return (
-    <ContentGrid>
-      <ContentMessage>{output.message}</ContentMessage>
-      {output.error && (
-        <ContentCodeBlock>{formatMaybeJson(output.error)}</ContentCodeBlock>
-      )}
-      {output.details && (
-        <ContentCodeBlock>{formatMaybeJson(output.details)}</ContentCodeBlock>
-      )}
-    </ContentGrid>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunAgent/components/ExecutionStartedCard/ExecutionStartedCard.tsx

@@ -1,39 +0,0 @@
-"use client";
-
-import type { ExecutionStartedResponse } from "@/app/api/__generated__/models/executionStartedResponse";
-import { Button } from "@/components/atoms/Button/Button";
-import { useRouter } from "next/navigation";
-import {
-  ContentCard,
-  ContentCardDescription,
-  ContentCardSubtitle,
-  ContentCardTitle,
-  ContentGrid,
-} from "../../../../components/ToolAccordion/AccordionContent";
-
-interface Props {
-  output: ExecutionStartedResponse;
-}
-
-export function ExecutionStartedCard({ output }: Props) {
-  const router = useRouter();
-
-  return (
-    <ContentGrid>
-      <ContentCard>
-        <ContentCardTitle>Execution started</ContentCardTitle>
-        <ContentCardSubtitle>{output.execution_id}</ContentCardSubtitle>
-        <ContentCardDescription>{output.message}</ContentCardDescription>
-        {output.library_agent_link && (
-          <Button
-            size="small"
-            className="mt-3"
-            onClick={() => router.push(output.library_agent_link!)}
-          >
-            View Execution
-          </Button>
-        )}
-      </ContentCard>
-    </ContentGrid>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunAgent/components/SetupRequirementsCard/SetupRequirementsCard.tsx

@@ -1,105 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { CredentialsGroupedView } from "@/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView";
-import { Button } from "@/components/atoms/Button/Button";
-import type { CredentialsMetaInput } from "@/lib/autogpt-server-api/types";
-import type { SetupRequirementsResponse } from "@/app/api/__generated__/models/setupRequirementsResponse";
-import { useCopilotChatActions } from "../../../../components/CopilotChatActionsProvider/useCopilotChatActions";
-import {
-  ContentBadge,
-  ContentCardDescription,
-  ContentCardTitle,
-  ContentMessage,
-} from "../../../../components/ToolAccordion/AccordionContent";
-import { coerceCredentialFields, coerceExpectedInputs } from "./helpers";
-
-interface Props {
-  output: SetupRequirementsResponse;
-}
-
-export function SetupRequirementsCard({ output }: Props) {
-  const { onSend } = useCopilotChatActions();
-
-  const [inputCredentials, setInputCredentials] = useState<
-    Record<string, CredentialsMetaInput | undefined>
-  >({});
-  const [hasSent, setHasSent] = useState(false);
-
-  const { credentialFields, requiredCredentials } = coerceCredentialFields(
-    output.setup_info.user_readiness?.missing_credentials,
-  );
-
-  const expectedInputs = coerceExpectedInputs(
-    (output.setup_info.requirements as Record<string, unknown>)?.inputs,
-  );
-
-  function handleCredentialChange(key: string, value?: CredentialsMetaInput) {
-    setInputCredentials((prev) => ({ ...prev, [key]: value }));
-  }
-
-  const isAllComplete =
-    credentialFields.length > 0 &&
-    [...requiredCredentials].every((key) => !!inputCredentials[key]);
-
-  function handleProceed() {
-    setHasSent(true);
-    onSend(
-      "I've configured the required credentials. Please check if everything is ready and proceed with running the agent.",
-    );
-  }
-
-  return (
-    <div className="grid gap-2">
-      <ContentMessage>{output.message}</ContentMessage>
-
-      {credentialFields.length > 0 && (
-        <div className="rounded-2xl border bg-background p-3">
-          <CredentialsGroupedView
-            credentialFields={credentialFields}
-            requiredCredentials={requiredCredentials}
-            inputCredentials={inputCredentials}
-            inputValues={{}}
-            onCredentialChange={handleCredentialChange}
-          />
-          {isAllComplete && !hasSent && (
-            <Button
-              variant="primary"
-              size="small"
-              className="mt-3 w-full"
-              onClick={handleProceed}
-            >
-              Proceed
-            </Button>
-          )}
-        </div>
-      )}
-
-      {expectedInputs.length > 0 && (
-        <div className="rounded-2xl border bg-background p-3">
-          <ContentCardTitle className="text-xs">
-            Expected inputs
-          </ContentCardTitle>
-          <div className="mt-2 grid gap-2">
-            {expectedInputs.map((input) => (
-              <div key={input.name} className="rounded-xl border p-2">
-                <div className="flex items-center justify-between gap-2">
-                  <ContentCardTitle className="text-xs">
-                    {input.title}
-                  </ContentCardTitle>
-                  <ContentBadge>
-                    {input.required ? "Required" : "Optional"}
-                  </ContentBadge>
-                </div>
-                <ContentCardDescription className="mt-1">
-                  {input.name} &bull; {input.type}
-                  {input.description ? ` \u2022 ${input.description}` : ""}
-                </ContentCardDescription>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunAgent/components/SetupRequirementsCard/helpers.ts

@@ -1,116 +0,0 @@
-import type { CredentialField } from "@/components/contextual/CredentialsInput/components/CredentialsGroupedView/helpers";
-
-const VALID_CREDENTIAL_TYPES = new Set([
-  "api_key",
-  "oauth2",
-  "user_password",
-  "host_scoped",
-]);
-
-/**
- * Transforms raw missing_credentials from SetupRequirementsResponse
- * into CredentialField[] tuples compatible with CredentialsGroupedView.
- *
- * Each CredentialField is [key, schema] where schema matches
- * BlockIOCredentialsSubSchema shape.
- */
-export function coerceCredentialFields(rawMissingCredentials: unknown): {
-  credentialFields: CredentialField[];
-  requiredCredentials: Set<string>;
-} {
-  const missing =
-    rawMissingCredentials && typeof rawMissingCredentials === "object"
-      ? (rawMissingCredentials as Record<string, unknown>)
-      : {};
-
-  const credentialFields: CredentialField[] = [];
-  const requiredCredentials = new Set<string>();
-
-  Object.entries(missing).forEach(([key, 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 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) => VALID_CREDENTIAL_TYPES.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 schema = {
-      type: "object" as const,
-      properties: {},
-      credentials_provider: [provider],
-      credentials_types: credentialTypes,
-      credentials_scopes: scopes,
-    };
-
-    credentialFields.push([key, schema]);
-    requiredCredentials.add(key);
-  });
-
-  return { credentialFields, requiredCredentials };
-}
-
-export 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;
-}

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

@@ -1,248 +0,0 @@
-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";
-import {
-  PlayIcon,
-  RocketLaunchIcon,
-  WarningDiamondIcon,
-} from "@phosphor-icons/react";
-import type { ToolUIPart } from "ai";
-import { SpinnerLoader } from "../../components/SpinnerLoader/SpinnerLoader";
-
-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;
-}
-
-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;
-}) {
-  if (isError) {
-    return (
-      <WarningDiamondIcon size={14} weight="regular" className="text-red-500" />
-    );
-  }
-  if (isStreaming) {
-    return <SpinnerLoader size={40} className="text-neutral-700" />;
-  }
-  return <PlayIcon size={14} weight="regular" className="text-neutral-400" />;
-}
-
-export function AccordionIcon() {
-  return <RocketLaunchIcon size={28} weight="light" />;
-}
-
-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 getAccordionMeta(output: RunAgentToolOutput): {
-  icon: React.ReactNode;
-  title: string;
-  titleClassName?: string;
-  description?: string;
-} {
-  const icon = <AccordionIcon />;
-
-  if (isRunAgentExecutionStartedOutput(output)) {
-    const statusText =
-      typeof output.status === "string" && output.status.trim()
-        ? output.status.trim()
-        : "started";
-    return {
-      icon: <SpinnerLoader size={28} className="text-neutral-700" />,
-      title: output.graph_name,
-      description: `Status: ${statusText}`,
-    };
-  }
-
-  if (isRunAgentAgentDetailsOutput(output)) {
-    return {
-      icon,
-      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 {
-      icon,
-      title: output.setup_info.agent_name,
-      description:
-        missingCredsCount > 0
-          ? `Missing ${missingCredsCount} credential${missingCredsCount === 1 ? "" : "s"}`
-          : output.message,
-    };
-  }
-
-  if (isRunAgentNeedLoginOutput(output)) {
-    return { icon, title: "Sign in required" };
-  }
-
-  return {
-    icon: (
-      <WarningDiamondIcon size={28} weight="light" className="text-red-500" />
-    ),
-    title: "Error",
-    titleClassName: "text-red-500",
-  };
-}

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

@@ -1,76 +0,0 @@
-"use client";
-
-import type { ToolUIPart } from "ai";
-import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
-import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
-import { BlockOutputCard } from "./components/BlockOutputCard/BlockOutputCard";
-import { ErrorCard } from "./components/ErrorCard/ErrorCard";
-import { SetupRequirementsCard } from "./components/SetupRequirementsCard/SetupRequirementsCard";
-import {
-  getAccordionMeta,
-  getAnimationText,
-  getRunBlockToolOutput,
-  isRunBlockBlockOutput,
-  isRunBlockErrorOutput,
-  isRunBlockSetupRequirementsOutput,
-  ToolIcon,
-} from "./helpers";
-
-export interface RunBlockToolPart {
-  type: string;
-  toolCallId: string;
-  state: ToolUIPart["state"];
-  input?: unknown;
-  output?: unknown;
-}
-
-interface Props {
-  part: RunBlockToolPart;
-}
-
-export function RunBlockTool({ part }: Props) {
-  const text = getAnimationText(part);
-  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));
-
-  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={
-            isRunBlockBlockOutput(output) ||
-            isRunBlockSetupRequirementsOutput(output)
-          }
-        >
-          {isRunBlockBlockOutput(output) && <BlockOutputCard output={output} />}
-
-          {isRunBlockSetupRequirementsOutput(output) && (
-            <SetupRequirementsCard output={output} />
-          )}
-
-          {isRunBlockErrorOutput(output) && <ErrorCard output={output} />}
-        </ToolAccordion>
-      )}
-    </div>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/BlockOutputCard/BlockOutputCard.tsx

@@ -1,133 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import { getGetWorkspaceDownloadFileByIdUrl } from "@/app/api/__generated__/endpoints/workspace/workspace";
-import { Button } from "@/components/atoms/Button/Button";
-import type { BlockOutputResponse } from "@/app/api/__generated__/models/blockOutputResponse";
-import {
-  globalRegistry,
-  OutputItem,
-} from "@/components/contextual/OutputRenderers";
-import type { OutputMetadata } from "@/components/contextual/OutputRenderers";
-import {
-  ContentBadge,
-  ContentCard,
-  ContentCardTitle,
-  ContentGrid,
-  ContentMessage,
-} from "../../../../components/ToolAccordion/AccordionContent";
-
-interface Props {
-  output: BlockOutputResponse;
-}
-
-const COLLAPSED_LIMIT = 3;
-
-function isWorkspaceRef(value: unknown): value is string {
-  return typeof value === "string" && value.startsWith("workspace://");
-}
-
-function resolveForRenderer(value: unknown): {
-  value: unknown;
-  metadata?: OutputMetadata;
-} {
-  if (!isWorkspaceRef(value)) return { value };
-
-  const withoutPrefix = value.replace("workspace://", "");
-  const fileId = withoutPrefix.split("#")[0];
-  const apiPath = getGetWorkspaceDownloadFileByIdUrl(fileId);
-  const url = `/api/proxy${apiPath}`;
-
-  const hashIndex = value.indexOf("#");
-  const mimeHint =
-    hashIndex !== -1 ? value.slice(hashIndex + 1) || undefined : undefined;
-
-  const metadata: OutputMetadata = {};
-  if (mimeHint) {
-    metadata.mimeType = mimeHint;
-    if (mimeHint.startsWith("image/")) metadata.type = "image";
-    else if (mimeHint.startsWith("video/")) metadata.type = "video";
-  }
-
-  return { value: url, metadata };
-}
-
-function RenderOutputValue({ value }: { value: unknown }) {
-  const resolved = resolveForRenderer(value);
-  const renderer = globalRegistry.getRenderer(
-    resolved.value,
-    resolved.metadata,
-  );
-
-  if (renderer) {
-    return (
-      <OutputItem
-        value={resolved.value}
-        metadata={resolved.metadata}
-        renderer={renderer}
-      />
-    );
-  }
-
-  // Fallback for audio workspace refs
-  if (
-    isWorkspaceRef(value) &&
-    resolved.metadata?.mimeType?.startsWith("audio/")
-  ) {
-    return (
-      <audio controls src={String(resolved.value)} className="mt-2 w-full" />
-    );
-  }
-
-  return null;
-}
-
-function OutputKeySection({
-  outputKey,
-  items,
-}: {
-  outputKey: string;
-  items: unknown[];
-}) {
-  const [expanded, setExpanded] = useState(false);
-  const hasMoreItems = items.length > COLLAPSED_LIMIT;
-  const visibleItems = expanded ? items : items.slice(0, COLLAPSED_LIMIT);
-
-  return (
-    <ContentCard>
-      <div className="flex items-center justify-between gap-2">
-        <ContentCardTitle className="text-xs">{outputKey}</ContentCardTitle>
-        <ContentBadge>
-          {items.length} item{items.length === 1 ? "" : "s"}
-        </ContentBadge>
-      </div>
-      <div className="mt-2">
-        {visibleItems.map((item, i) => (
-          <RenderOutputValue key={i} value={item} />
-        ))}
-      </div>
-      {hasMoreItems && (
-        <Button
-          variant="ghost"
-          size="small"
-          className="mt-1 h-auto px-0 py-0.5 text-[11px] text-muted-foreground"
-          onClick={() => setExpanded((prev) => !prev)}
-        >
-          {expanded ? "Show less" : `Show all ${items.length} items`}
-        </Button>
-      )}
-    </ContentCard>
-  );
-}
-
-export function BlockOutputCard({ output }: Props) {
-  return (
-    <ContentGrid>
-      <ContentMessage>{output.message}</ContentMessage>
-
-      {Object.entries(output.outputs ?? {}).map(([key, items]) => (
-        <OutputKeySection key={key} outputKey={key} items={items} />
-      ))}
-    </ContentGrid>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/ErrorCard/ErrorCard.tsx

@@ -1,27 +0,0 @@
-"use client";
-
-import type { ErrorResponse } from "@/app/api/__generated__/models/errorResponse";
-import {
-  ContentCodeBlock,
-  ContentGrid,
-  ContentMessage,
-} from "../../../../components/ToolAccordion/AccordionContent";
-import { formatMaybeJson } from "../../helpers";
-
-interface Props {
-  output: ErrorResponse;
-}
-
-export function ErrorCard({ output }: Props) {
-  return (
-    <ContentGrid>
-      <ContentMessage>{output.message}</ContentMessage>
-      {output.error && (
-        <ContentCodeBlock>{formatMaybeJson(output.error)}</ContentCodeBlock>
-      )}
-      {output.details && (
-        <ContentCodeBlock>{formatMaybeJson(output.details)}</ContentCodeBlock>
-      )}
-    </ContentGrid>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/SetupRequirementsCard/SetupRequirementsCard.tsx

@@ -1,197 +0,0 @@
-"use client";
-
-import type { SetupRequirementsResponse } from "@/app/api/__generated__/models/setupRequirementsResponse";
-import { Button } from "@/components/atoms/Button/Button";
-import { Text } from "@/components/atoms/Text/Text";
-import { CredentialsGroupedView } from "@/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView";
-import { FormRenderer } from "@/components/renderers/InputRenderer/FormRenderer";
-import type { CredentialsMetaInput } from "@/lib/autogpt-server-api/types";
-import { AnimatePresence, motion } from "framer-motion";
-import { useState } from "react";
-import { useCopilotChatActions } from "../../../../components/CopilotChatActionsProvider/useCopilotChatActions";
-import {
-  ContentBadge,
-  ContentCardDescription,
-  ContentCardTitle,
-  ContentMessage,
-} from "../../../../components/ToolAccordion/AccordionContent";
-import {
-  buildExpectedInputsSchema,
-  coerceCredentialFields,
-  coerceExpectedInputs,
-} from "./helpers";
-
-interface Props {
-  output: SetupRequirementsResponse;
-}
-
-export function SetupRequirementsCard({ output }: Props) {
-  const { onSend } = useCopilotChatActions();
-
-  const [inputCredentials, setInputCredentials] = useState<
-    Record<string, CredentialsMetaInput | undefined>
-  >({});
-  const [hasSentCredentials, setHasSentCredentials] = useState(false);
-
-  const [showInputForm, setShowInputForm] = useState(false);
-  const [inputValues, setInputValues] = useState<Record<string, unknown>>({});
-
-  const { credentialFields, requiredCredentials } = coerceCredentialFields(
-    output.setup_info.user_readiness?.missing_credentials,
-  );
-
-  const expectedInputs = coerceExpectedInputs(
-    (output.setup_info.requirements as Record<string, unknown>)?.inputs,
-  );
-
-  const inputSchema = buildExpectedInputsSchema(expectedInputs);
-
-  function handleCredentialChange(key: string, value?: CredentialsMetaInput) {
-    setInputCredentials((prev) => ({ ...prev, [key]: value }));
-  }
-
-  const isAllCredentialsComplete =
-    credentialFields.length > 0 &&
-    [...requiredCredentials].every((key) => !!inputCredentials[key]);
-
-  function handleProceedCredentials() {
-    setHasSentCredentials(true);
-    onSend(
-      "I've configured the required credentials. Please re-run the block now.",
-    );
-  }
-
-  function handleRunWithInputs() {
-    const nonEmpty = Object.fromEntries(
-      Object.entries(inputValues).filter(
-        ([, v]) => v !== undefined && v !== null && v !== "",
-      ),
-    );
-    onSend(
-      `Run the block with these inputs: ${JSON.stringify(nonEmpty, null, 2)}`,
-    );
-    setShowInputForm(false);
-    setInputValues({});
-  }
-
-  return (
-    <div className="grid gap-2">
-      <ContentMessage>{output.message}</ContentMessage>
-
-      {credentialFields.length > 0 && (
-        <div className="rounded-2xl border bg-background p-3">
-          <CredentialsGroupedView
-            credentialFields={credentialFields}
-            requiredCredentials={requiredCredentials}
-            inputCredentials={inputCredentials}
-            inputValues={{}}
-            onCredentialChange={handleCredentialChange}
-          />
-          {isAllCredentialsComplete && !hasSentCredentials && (
-            <Button
-              variant="primary"
-              size="small"
-              className="mt-3 w-full"
-              onClick={handleProceedCredentials}
-            >
-              Proceed
-            </Button>
-          )}
-        </div>
-      )}
-
-      {inputSchema && (
-        <div className="flex gap-2 pt-2">
-          <Button
-            variant="outline"
-            size="small"
-            className="w-fit"
-            onClick={() => setShowInputForm((prev) => !prev)}
-          >
-            {showInputForm ? "Hide inputs" : "Fill in inputs"}
-          </Button>
-        </div>
-      )}
-
-      <AnimatePresence initial={false}>
-        {showInputForm && inputSchema && (
-          <motion.div
-            initial={{ height: 0, opacity: 0, filter: "blur(6px)" }}
-            animate={{ height: "auto", opacity: 1, filter: "blur(0px)" }}
-            exit={{ height: 0, opacity: 0, filter: "blur(6px)" }}
-            transition={{
-              height: { type: "spring", bounce: 0.15, duration: 0.5 },
-              opacity: { duration: 0.25 },
-              filter: { duration: 0.2 },
-            }}
-            className="overflow-hidden"
-            style={{ willChange: "height, opacity, filter" }}
-          >
-            <div className="rounded-2xl border bg-background p-3 pt-4">
-              <Text variant="body-medium">Block inputs</Text>
-              <FormRenderer
-                jsonSchema={inputSchema}
-                handleChange={(v) => setInputValues(v.formData ?? {})}
-                uiSchema={{
-                  "ui:submitButtonOptions": { norender: true },
-                }}
-                initialValues={inputValues}
-                formContext={{
-                  showHandles: false,
-                  size: "small",
-                }}
-              />
-              <div className="-mt-8 flex gap-2">
-                <Button
-                  variant="primary"
-                  size="small"
-                  className="w-fit"
-                  onClick={handleRunWithInputs}
-                >
-                  Run
-                </Button>
-                <Button
-                  variant="secondary"
-                  size="small"
-                  className="w-fit"
-                  onClick={() => {
-                    setShowInputForm(false);
-                    setInputValues({});
-                  }}
-                >
-                  Cancel
-                </Button>
-              </div>
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-
-      {expectedInputs.length > 0 && !inputSchema && (
-        <div className="rounded-2xl border bg-background p-3">
-          <ContentCardTitle className="text-xs">
-            Expected inputs
-          </ContentCardTitle>
-          <div className="mt-2 grid gap-2">
-            {expectedInputs.map((input) => (
-              <div key={input.name} className="rounded-xl border p-2">
-                <div className="flex items-center justify-between gap-2">
-                  <ContentCardTitle className="text-xs">
-                    {input.title}
-                  </ContentCardTitle>
-                  <ContentBadge>
-                    {input.required ? "Required" : "Optional"}
-                  </ContentBadge>
-                </div>
-                <ContentCardDescription className="mt-1">
-                  {input.name} &bull; {input.type}
-                  {input.description ? ` \u2022 ${input.description}` : ""}
-                </ContentCardDescription>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/SetupRequirementsCard/helpers.ts

@@ -1,156 +0,0 @@
-import type { CredentialField } from "@/components/contextual/CredentialsInput/components/CredentialsGroupedView/helpers";
-import type { RJSFSchema } from "@rjsf/utils";
-
-const VALID_CREDENTIAL_TYPES = new Set([
-  "api_key",
-  "oauth2",
-  "user_password",
-  "host_scoped",
-]);
-
-export function coerceCredentialFields(rawMissingCredentials: unknown): {
-  credentialFields: CredentialField[];
-  requiredCredentials: Set<string>;
-} {
-  const missing =
-    rawMissingCredentials && typeof rawMissingCredentials === "object"
-      ? (rawMissingCredentials as Record<string, unknown>)
-      : {};
-
-  const credentialFields: CredentialField[] = [];
-  const requiredCredentials = new Set<string>();
-
-  Object.entries(missing).forEach(([key, 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 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) => VALID_CREDENTIAL_TYPES.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 schema = {
-      type: "object" as const,
-      properties: {},
-      credentials_provider: [provider],
-      credentials_types: credentialTypes,
-      credentials_scopes: scopes,
-    };
-
-    credentialFields.push([key, schema]);
-    requiredCredentials.add(key);
-  });
-
-  return { credentialFields, requiredCredentials };
-}
-
-export 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;
-}
-
-/**
- * Build an RJSF schema from expected inputs so they can be rendered
- * as a dynamic form via FormRenderer.
- */
-export function buildExpectedInputsSchema(
-  expectedInputs: Array<{
-    name: string;
-    title: string;
-    type: string;
-    description?: string;
-    required: boolean;
-  }>,
-): RJSFSchema | null {
-  if (expectedInputs.length === 0) return null;
-
-  const TYPE_MAP: Record<string, string> = {
-    string: "string",
-    str: "string",
-    text: "string",
-    number: "number",
-    int: "integer",
-    integer: "integer",
-    float: "number",
-    boolean: "boolean",
-    bool: "boolean",
-  };
-
-  const properties: Record<string, Record<string, unknown>> = {};
-  const required: string[] = [];
-
-  for (const input of expectedInputs) {
-    properties[input.name] = {
-      type: TYPE_MAP[input.type.toLowerCase()] ?? "string",
-      title: input.title,
-      ...(input.description ? { description: input.description } : {}),
-    };
-    if (input.required) required.push(input.name);
-  }
-
-  return {
-    type: "object",
-    properties,
-    ...(required.length > 0 ? { required } : {}),
-  };
-}

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

@@ -1,185 +0,0 @@
-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";
-import {
-  PlayCircleIcon,
-  PlayIcon,
-  WarningDiamondIcon,
-} from "@phosphor-icons/react";
-import type { ToolUIPart } from "ai";
-import { SpinnerLoader } from "../../components/SpinnerLoader/SpinnerLoader";
-
-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);
-}
-
-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;
-}) {
-  if (isError) {
-    return (
-      <WarningDiamondIcon size={14} weight="regular" className="text-red-500" />
-    );
-  }
-  if (isStreaming) {
-    return <SpinnerLoader size={40} className="text-neutral-700" />;
-  }
-  return <PlayIcon size={14} weight="regular" className="text-neutral-400" />;
-}
-
-export function AccordionIcon() {
-  return <PlayCircleIcon size={32} weight="light" />;
-}
-
-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 getAccordionMeta(output: RunBlockToolOutput): {
-  icon: React.ReactNode;
-  title: string;
-  titleClassName?: string;
-  description?: string;
-} {
-  const icon = <AccordionIcon />;
-
-  if (isRunBlockBlockOutput(output)) {
-    const keys = Object.keys(output.outputs ?? {});
-    return {
-      icon: <SpinnerLoader size={32} className="text-neutral-700" />,
-      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 {
-      icon,
-      title: output.setup_info.agent_name,
-      description:
-        missingCredsCount > 0
-          ? `Missing ${missingCredsCount} credential${missingCredsCount === 1 ? "" : "s"}`
-          : output.message,
-    };
-  }
-
-  return {
-    icon: (
-      <WarningDiamondIcon size={32} weight="light" className="text-red-500" />
-    ),
-    title: "Error",
-    titleClassName: "text-red-500",
-  };
-}

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

@@ -1,186 +0,0 @@
-"use client";
-
-import type { ToolUIPart } from "ai";
-import { useMemo } from "react";
-
-import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
-import {
-  ContentCard,
-  ContentCardDescription,
-  ContentCardHeader,
-  ContentCardSubtitle,
-  ContentCardTitle,
-  ContentGrid,
-  ContentLink,
-  ContentMessage,
-  ContentSuggestionsList,
-} from "../../components/ToolAccordion/AccordionContent";
-import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
-import {
-  AccordionIcon,
-  getAnimationText,
-  getDocsToolOutput,
-  getDocsToolTitle,
-  getToolLabel,
-  isDocPageOutput,
-  isDocSearchResultsOutput,
-  isErrorOutput,
-  isNoResultsOutput,
-  toDocsUrl,
-  ToolIcon,
-  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
-          icon={<AccordionIcon toolType={part.type} />}
-          title={normalized.title}
-          description={accordionDescription}
-        >
-          {docSearchOutput && (
-            <ContentGrid>
-              {docSearchOutput.results.map((r) => {
-                const href = r.doc_url ?? toDocsUrl(r.path);
-                return (
-                  <ContentCard key={r.path}>
-                    <ContentCardHeader
-                      action={<ContentLink href={href}>Open</ContentLink>}
-                    >
-                      <ContentCardTitle>{r.title}</ContentCardTitle>
-                      <ContentCardSubtitle>
-                        {r.path}
-                        {r.section ? ` • ${r.section}` : ""}
-                      </ContentCardSubtitle>
-                      <ContentCardDescription>
-                        {truncate(r.snippet, 240)}
-                      </ContentCardDescription>
-                    </ContentCardHeader>
-                  </ContentCard>
-                );
-              })}
-            </ContentGrid>
-          )}
-
-          {docPageOutput && (
-            <div>
-              <ContentCardHeader
-                action={
-                  <ContentLink
-                    href={
-                      docPageOutput.doc_url ?? toDocsUrl(docPageOutput.path)
-                    }
-                  >
-                    Open
-                  </ContentLink>
-                }
-              >
-                <ContentCardTitle>{docPageOutput.title}</ContentCardTitle>
-                <ContentCardSubtitle>{docPageOutput.path}</ContentCardSubtitle>
-              </ContentCardHeader>
-              <ContentCardDescription className="whitespace-pre-wrap">
-                {truncate(docPageOutput.content, 800)}
-              </ContentCardDescription>
-            </div>
-          )}
-
-          {noResultsOutput && (
-            <div>
-              <ContentMessage>{noResultsOutput.message}</ContentMessage>
-              {noResultsOutput.suggestions &&
-                noResultsOutput.suggestions.length > 0 && (
-                  <ContentSuggestionsList items={noResultsOutput.suggestions} />
-                )}
-            </div>
-          )}
-
-          {errorOutput && (
-            <div>
-              <ContentMessage>{errorOutput.message}</ContentMessage>
-              {errorOutput.error && (
-                <ContentCardDescription>
-                  {errorOutput.error}
-                </ContentCardDescription>
-              )}
-            </div>
-          )}
-        </ToolAccordion>
-      )}
-    </div>
-  );
-}

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

@@ -1,215 +0,0 @@
-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";
-import {
-  ArticleIcon,
-  FileMagnifyingGlassIcon,
-  FileTextIcon,
-} from "@phosphor-icons/react";
-import { ToolUIPart } from "ai";
-
-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 AccordionIcon({ toolType }: { toolType: DocsToolType }) {
-  const IconComponent =
-    toolType === "tool-get_doc_page" ? ArticleIcon : FileTextIcon;
-  return <IconComponent size={32} weight="light" />;
-}
-
-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/tools/ViewAgentOutput/ViewAgentOutput.tsx

@@ -1,261 +0,0 @@
-"use client";
-
-import type { ToolUIPart } from "ai";
-import React from "react";
-import { getGetWorkspaceDownloadFileByIdUrl } from "@/app/api/__generated__/endpoints/workspace/workspace";
-import {
-  globalRegistry,
-  OutputItem,
-} from "@/components/contextual/OutputRenderers";
-import type { OutputMetadata } from "@/components/contextual/OutputRenderers";
-import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
-import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
-import {
-  ContentBadge,
-  ContentCard,
-  ContentCardHeader,
-  ContentCardSubtitle,
-  ContentCardTitle,
-  ContentCodeBlock,
-  ContentGrid,
-  ContentLink,
-  ContentMessage,
-  ContentSuggestionsList,
-} from "../../components/ToolAccordion/AccordionContent";
-import {
-  formatMaybeJson,
-  getAnimationText,
-  getViewAgentOutputToolOutput,
-  isAgentOutputResponse,
-  isErrorResponse,
-  isNoResultsResponse,
-  AccordionIcon,
-  ToolIcon,
-  type ViewAgentOutputToolOutput,
-} from "./helpers";
-
-export interface ViewAgentOutputToolPart {
-  type: string;
-  toolCallId: string;
-  state: ToolUIPart["state"];
-  input?: unknown;
-  output?: unknown;
-}
-
-interface Props {
-  part: ViewAgentOutputToolPart;
-}
-
-function isWorkspaceRef(value: unknown): value is string {
-  return typeof value === "string" && value.startsWith("workspace://");
-}
-
-function resolveForRenderer(value: unknown): {
-  value: unknown;
-  metadata?: OutputMetadata;
-} {
-  if (!isWorkspaceRef(value)) return { value };
-
-  const withoutPrefix = value.replace("workspace://", "");
-  const fileId = withoutPrefix.split("#")[0];
-  const apiPath = getGetWorkspaceDownloadFileByIdUrl(fileId);
-  const url = `/api/proxy${apiPath}`;
-
-  const hashIndex = value.indexOf("#");
-  const mimeHint =
-    hashIndex !== -1 ? value.slice(hashIndex + 1) || undefined : undefined;
-
-  const metadata: OutputMetadata = {};
-  if (mimeHint) {
-    metadata.mimeType = mimeHint;
-    if (mimeHint.startsWith("image/")) metadata.type = "image";
-    else if (mimeHint.startsWith("video/")) metadata.type = "video";
-  }
-
-  return { value: url, metadata };
-}
-
-function RenderOutputValue({ value }: { value: unknown }) {
-  const resolved = resolveForRenderer(value);
-  const renderer = globalRegistry.getRenderer(
-    resolved.value,
-    resolved.metadata,
-  );
-
-  if (renderer) {
-    return (
-      <OutputItem
-        value={resolved.value}
-        metadata={resolved.metadata}
-        renderer={renderer}
-      />
-    );
-  }
-
-  // Fallback for audio workspace refs
-  if (
-    isWorkspaceRef(value) &&
-    resolved.metadata?.mimeType?.startsWith("audio/")
-  ) {
-    return (
-      <audio controls src={String(resolved.value)} className="mt-2 w-full" />
-    );
-  }
-
-  return null;
-}
-
-function getAccordionMeta(output: ViewAgentOutputToolOutput): {
-  icon: React.ReactNode;
-  title: string;
-  description?: string;
-} {
-  const icon = <AccordionIcon />;
-
-  if (isAgentOutputResponse(output)) {
-    const status = output.execution?.status;
-    return {
-      icon,
-      title: output.agent_name,
-      description: status ? `Status: ${status}` : output.message,
-    };
-  }
-  if (isNoResultsResponse(output)) {
-    return { icon, title: "No results" };
-  }
-  return { icon, 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) && (
-            <ContentGrid>
-              <ContentCardHeader
-                className="gap-3"
-                action={
-                  output.library_agent_link ? (
-                    <ContentLink href={output.library_agent_link}>
-                      Open
-                    </ContentLink>
-                  ) : null
-                }
-              >
-                <ContentMessage>{output.message}</ContentMessage>
-              </ContentCardHeader>
-
-              {output.execution ? (
-                <ContentGrid>
-                  <ContentCard>
-                    <ContentCardTitle className="text-xs">
-                      Execution
-                    </ContentCardTitle>
-                    <ContentCardSubtitle className="mt-1">
-                      {output.execution.execution_id}
-                    </ContentCardSubtitle>
-                    <ContentCardSubtitle className="mt-1">
-                      Status: {output.execution.status}
-                    </ContentCardSubtitle>
-                  </ContentCard>
-
-                  {output.execution.inputs_summary && (
-                    <ContentCard>
-                      <ContentCardTitle className="text-xs">
-                        Inputs summary
-                      </ContentCardTitle>
-                      <div className="mt-2">
-                        <RenderOutputValue
-                          value={output.execution.inputs_summary}
-                        />
-                      </div>
-                    </ContentCard>
-                  )}
-
-                  {Object.entries(output.execution.outputs ?? {}).map(
-                    ([key, items]) => (
-                      <ContentCard key={key}>
-                        <div className="flex items-center justify-between gap-2">
-                          <ContentCardTitle className="text-xs">
-                            {key}
-                          </ContentCardTitle>
-                          <ContentBadge>
-                            {items.length} item
-                            {items.length === 1 ? "" : "s"}
-                          </ContentBadge>
-                        </div>
-                        <div className="mt-2">
-                          {items.slice(0, 3).map((item, i) => (
-                            <RenderOutputValue key={i} value={item} />
-                          ))}
-                        </div>
-                      </ContentCard>
-                    ),
-                  )}
-                </ContentGrid>
-              ) : (
-                <ContentCard>
-                  <ContentMessage>No execution selected.</ContentMessage>
-                  <ContentCardSubtitle className="mt-1">
-                    Try asking for a specific run or execution_id.
-                  </ContentCardSubtitle>
-                </ContentCard>
-              )}
-            </ContentGrid>
-          )}
-
-          {isNoResultsResponse(output) && (
-            <ContentGrid>
-              <ContentMessage>{output.message}</ContentMessage>
-              {output.suggestions && output.suggestions.length > 0 && (
-                <ContentSuggestionsList
-                  items={output.suggestions}
-                  className="mt-1"
-                />
-              )}
-            </ContentGrid>
-          )}
-
-          {isErrorResponse(output) && (
-            <ContentGrid>
-              <ContentMessage>{output.message}</ContentMessage>
-              {output.error && (
-                <ContentCodeBlock>
-                  {formatMaybeJson(output.error)}
-                </ContentCodeBlock>
-              )}
-              {output.details && (
-                <ContentCodeBlock>
-                  {formatMaybeJson(output.details)}
-                </ContentCodeBlock>
-              )}
-            </ContentGrid>
-          )}
-        </ToolAccordion>
-      )}
-    </div>
-  );
-}

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

@@ -1,158 +0,0 @@
-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";
-import { EyeIcon, MonitorIcon } from "@phosphor-icons/react";
-import type { ToolUIPart } from "ai";
-
-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 AccordionIcon() {
-  return <MonitorIcon size={32} weight="light" />;
-}
-
-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/useChatSession.ts

@@ -1,108 +0,0 @@
-import {
-  getGetV2GetSessionQueryKey,
-  getGetV2ListSessionsQueryKey,
-  useGetV2GetSession,
-  usePostV2CreateSession,
-} from "@/app/api/__generated__/endpoints/chat/chat";
-import { toast } from "@/components/molecules/Toast/use-toast";
-import { useQueryClient } from "@tanstack/react-query";
-import * as Sentry from "@sentry/nextjs";
-import { parseAsString, useQueryState } from "nuqs";
-import { useEffect, useMemo, useRef } from "react";
-import { convertChatSessionMessagesToUiMessages } from "./helpers/convertChatSessionToUiMessages";
-
-export function useChatSession() {
-  const [sessionId, setSessionId] = useQueryState("sessionId", parseAsString);
-  const queryClient = useQueryClient();
-
-  const sessionQuery = useGetV2GetSession(sessionId ?? "", {
-    query: {
-      enabled: !!sessionId,
-      staleTime: Infinity,
-      refetchOnWindowFocus: false,
-      refetchOnReconnect: false,
-    },
-  });
-
-  // When the user navigates away from a session, invalidate its query cache.
-  // useChat destroys its Chat instance on id change, so messages are lost.
-  // Invalidating ensures the next visit fetches fresh data from the API
-  // instead of hydrating from stale cache that's missing recent messages.
-  const prevSessionIdRef = useRef(sessionId);
-  useEffect(() => {
-    const prev = prevSessionIdRef.current;
-    prevSessionIdRef.current = sessionId;
-    if (prev && prev !== sessionId) {
-      queryClient.invalidateQueries({
-        queryKey: getGetV2GetSessionQueryKey(prev),
-      });
-    }
-  }, [sessionId, queryClient]);
-
-  // 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;
-    try {
-      const response = await createSessionMutation();
-      if (response.status !== 200 || !response.data?.id) {
-        const error = new Error("Failed to create session");
-        Sentry.captureException(error, {
-          extra: { status: response.status },
-        });
-        toast({
-          variant: "destructive",
-          title: "Could not start a new chat session",
-          description: "Please try again.",
-        });
-        throw error;
-      }
-      return response.data.id;
-    } catch (error) {
-      if (
-        error instanceof Error &&
-        error.message === "Failed to create session"
-      ) {
-        throw error; // already handled above
-      }
-      Sentry.captureException(error);
-      toast({
-        variant: "destructive",
-        title: "Could not start a new chat session",
-        description: "Please try again.",
-      });
-      throw error;
-    }
-  }
-
-  return {
-    sessionId,
-    setSessionId,
-    hydratedMessages,
-    isLoadingSession: sessionQuery.isLoading,
-    createSession,
-    isCreatingSession,
-  };
-}

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

@@ -1,134 +1,127 @@
-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 { useEffect, useMemo, useState } from "react";
-import { useChatSession } from "./useChatSession";
+import {
+  getGetV2ListSessionsQueryKey,
+  postV2CreateSession,
+} from "@/app/api/__generated__/endpoints/chat/chat";
+import { useToast } from "@/components/molecules/Toast/use-toast";
+import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
+import { useOnboarding } from "@/providers/onboarding/onboarding-provider";
+import { SessionKey, sessionStorage } from "@/services/storage/session-storage";
+import * as Sentry from "@sentry/nextjs";
+import { useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { useCopilotStore } from "./copilot-page-store";
+import { getGreetingName, getQuickActions } from "./helpers";
+import { useCopilotSessionId } from "./useCopilotSessionId";
 
 export function useCopilotPage() {
-  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-  const [pendingMessage, setPendingMessage] = useState<string | null>(null);
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const { user, isLoggedIn, isUserLoading } = useSupabase();
+  const { toast } = useToast();
+  const { completeStep } = useOnboarding();
 
-  const {
-    sessionId,
-    setSessionId,
-    hydratedMessages,
-    isLoadingSession,
-    createSession,
-    isCreatingSession,
-  } = useChatSession();
+  const { urlSessionId, setUrlSessionId } = useCopilotSessionId();
+  const setIsStreaming = useCopilotStore((s) => s.setIsStreaming);
+  const isCreating = useCopilotStore((s) => s.isCreatingSession);
+  const setIsCreating = useCopilotStore((s) => s.setIsCreatingSession);
 
-  const breakpoint = useBreakpoint();
-  const isMobile =
-    breakpoint === "base" || breakpoint === "sm" || breakpoint === "md";
+  const greetingName = getGreetingName(user);
+  const quickActions = getQuickActions();
 
-  const transport = useMemo(
-    () =>
-      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,
-                },
-              };
-            },
-          })
-        : null,
-    [sessionId],
-  );
-
-  const { messages, sendMessage, stop, status, error, setMessages } = useChat({
-    id: sessionId ?? undefined,
-    transport: transport ?? undefined,
-  });
+  const hasSession = Boolean(urlSessionId);
+  const initialPrompt = urlSessionId
+    ? getInitialPrompt(urlSessionId)
+    : undefined;
 
   useEffect(() => {
-    if (!hydratedMessages || hydratedMessages.length === 0) return;
-    setMessages((prev) => {
-      if (prev.length >= hydratedMessages.length) return prev;
-      return hydratedMessages;
-    });
-  }, [hydratedMessages, setMessages]);
+    if (isLoggedIn) completeStep("VISIT_COPILOT");
+  }, [completeStep, isLoggedIn]);
 
-  // Clear messages when session is null
-  useEffect(() => {
-    if (!sessionId) setMessages([]);
-  }, [sessionId, setMessages]);
+  async function startChatWithPrompt(prompt: string) {
+    if (!prompt?.trim()) return;
+    if (isCreating) return;
 
-  useEffect(() => {
-    if (!sessionId || !pendingMessage) return;
-    const msg = pendingMessage;
-    setPendingMessage(null);
-    sendMessage({ text: msg });
-  }, [sessionId, pendingMessage, sendMessage]);
+    const trimmedPrompt = prompt.trim();
+    setIsCreating(true);
 
-  async function onSend(message: string) {
-    const trimmed = message.trim();
-    if (!trimmed) return;
+    try {
+      const sessionResponse = await postV2CreateSession({
+        body: JSON.stringify({}),
+      });
 
-    if (sessionId) {
-      sendMessage({ text: trimmed });
-      return;
+      if (sessionResponse.status !== 200 || !sessionResponse.data?.id) {
+        throw new Error("Failed to create session");
+      }
+
+      const sessionId = sessionResponse.data.id;
+      setInitialPrompt(sessionId, trimmedPrompt);
+
+      await queryClient.invalidateQueries({
+        queryKey: getGetV2ListSessionsQueryKey(),
+      });
+
+      await setUrlSessionId(sessionId, { shallow: true });
+    } catch (error) {
+      console.error("[CopilotPage] Failed to start chat:", error);
+      toast({ title: "Failed to start chat", variant: "destructive" });
+      Sentry.captureException(error);
+    } finally {
+      setIsCreating(false);
     }
-
-    setPendingMessage(trimmed);
-    await createSession();
   }
 
-  const { data: sessionsResponse, isLoading: isLoadingSessions } =
-    useGetV2ListSessions({ limit: 50 });
-
-  const sessions =
-    sessionsResponse?.status === 200 ? sessionsResponse.data.sessions : [];
-
-  function handleOpenDrawer() {
-    setIsDrawerOpen(true);
+  function handleQuickAction(action: string) {
+    startChatWithPrompt(action);
   }
 
-  function handleCloseDrawer() {
-    setIsDrawerOpen(false);
+  function handleSessionNotFound() {
+    router.replace("/copilot");
   }
 
-  function handleDrawerOpenChange(open: boolean) {
-    setIsDrawerOpen(open);
-  }
-
-  function handleSelectSession(id: string) {
-    setSessionId(id);
-    if (isMobile) setIsDrawerOpen(false);
-  }
-
-  function handleNewChat() {
-    setSessionId(null);
-    if (isMobile) setIsDrawerOpen(false);
+  function handleStreamingChange(isStreamingValue: boolean) {
+    setIsStreaming(isStreamingValue);
   }
 
   return {
-    sessionId,
-    messages,
-    status,
-    error,
-    stop,
-    isLoadingSession,
-    isCreatingSession,
-    createSession,
-    onSend,
-    // Mobile drawer
-    isMobile,
-    isDrawerOpen,
-    sessions,
-    isLoadingSessions,
-    handleOpenDrawer,
-    handleCloseDrawer,
-    handleDrawerOpenChange,
-    handleSelectSession,
-    handleNewChat,
+    state: {
+      greetingName,
+      quickActions,
+      isLoading: isUserLoading,
+      hasSession,
+      initialPrompt,
+    },
+    handlers: {
+      handleQuickAction,
+      startChatWithPrompt,
+      handleSessionNotFound,
+      handleStreamingChange,
+    },
   };
 }
+
+function getInitialPrompt(sessionId: string): string | undefined {
+  try {
+    const prompts = JSON.parse(
+      sessionStorage.get(SessionKey.CHAT_INITIAL_PROMPTS) || "{}",
+    );
+    return prompts[sessionId];
+  } catch {
+    return undefined;
+  }
+}
+
+function setInitialPrompt(sessionId: string, prompt: string): void {
+  try {
+    const prompts = JSON.parse(
+      sessionStorage.get(SessionKey.CHAT_INITIAL_PROMPTS) || "{}",
+    );
+    prompts[sessionId] = prompt;
+    sessionStorage.set(
+      SessionKey.CHAT_INITIAL_PROMPTS,
+      JSON.stringify(prompts),
+    );
+  } catch {
+    // Ignore storage errors
+  }
+}

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

@@ -7,4 +7,4 @@ export function useCopilotSessionId() {
   );
 
   return { urlSessionId, setUrlSessionId };
-}
+}

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 [&_pre]:!bg-white",
-        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/atoms/Text/Text.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { cn } from "@/lib/utils";
 import { As, Variant, variantElementMap, variants } from "./helpers";
 
 type CustomProps = {
@@ -23,7 +22,7 @@ export function Text({
 }: TextProps) {
   const variantClasses = variants[size || variant] || variants.body;
   const Element = outerAs || variantElementMap[variant];
-  const combinedClassName = cn(variantClasses, className);
+  const combinedClassName = `${variantClasses} ${className}`.trim();
 
   return React.createElement(
     Element,

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

@@ -0,0 +1,114 @@
+"use client";
+
+import { useCopilotSessionId } from "@/app/(platform)/copilot/useCopilotSessionId";
+import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
+import { Text } from "@/components/atoms/Text/Text";
+import { cn } from "@/lib/utils";
+import { useEffect, useRef } from "react";
+import { ChatContainer } from "./components/ChatContainer/ChatContainer";
+import { ChatErrorState } from "./components/ChatErrorState/ChatErrorState";
+import { useChat } from "./useChat";
+
+export interface ChatProps {
+  className?: string;
+  initialPrompt?: string;
+  onSessionNotFound?: () => void;
+  onStreamingChange?: (isStreaming: boolean) => void;
+}
+
+export function Chat({
+  className,
+  initialPrompt,
+  onSessionNotFound,
+  onStreamingChange,
+}: ChatProps) {
+  const { urlSessionId } = useCopilotSessionId();
+  const hasHandledNotFoundRef = useRef(false);
+  const {
+    session,
+    messages,
+    isLoading,
+    isCreating,
+    error,
+    isSessionNotFound,
+    sessionId,
+    createSession,
+    showLoader,
+    startPollingForOperation,
+  } = useChat({ urlSessionId });
+
+  // Extract active stream info for reconnection
+  const activeStream = (
+    session as {
+      active_stream?: {
+        task_id: string;
+        last_message_id: string;
+        operation_id: string;
+        tool_name: string;
+      };
+    }
+  )?.active_stream;
+
+  useEffect(() => {
+    if (!onSessionNotFound) return;
+    if (!urlSessionId) return;
+    if (!isSessionNotFound || isLoading || isCreating) return;
+    if (hasHandledNotFoundRef.current) return;
+    hasHandledNotFoundRef.current = true;
+    onSessionNotFound();
+  }, [
+    onSessionNotFound,
+    urlSessionId,
+    isSessionNotFound,
+    isLoading,
+    isCreating,
+  ]);
+
+  const shouldShowLoader = showLoader && (isLoading || isCreating);
+
+  return (
+    <div className={cn("flex h-full flex-col", className)}>
+      {/* Main Content */}
+      <main className="flex min-h-0 w-full flex-1 flex-col overflow-hidden bg-[#f8f8f9]">
+        {/* Loading State */}
+        {shouldShowLoader && (
+          <div className="flex flex-1 items-center justify-center">
+            <div className="flex flex-col items-center gap-3">
+              <LoadingSpinner size="large" className="text-neutral-400" />
+              <Text variant="body" className="text-zinc-500">
+                Loading your chat...
+              </Text>
+            </div>
+          </div>
+        )}
+
+        {/* Error State */}
+        {error && !isLoading && (
+          <ChatErrorState error={error} onRetry={createSession} />
+        )}
+
+        {/* Session Content */}
+        {sessionId && !isLoading && !error && (
+          <ChatContainer
+            sessionId={sessionId}
+            initialMessages={messages}
+            initialPrompt={initialPrompt}
+            className="flex-1"
+            onStreamingChange={onStreamingChange}
+            onOperationStarted={startPollingForOperation}
+            activeStream={
+              activeStream
+                ? {
+                    taskId: activeStream.task_id,
+                    lastMessageId: activeStream.last_message_id,
+                    operationId: activeStream.operation_id,
+                    toolName: activeStream.tool_name,
+                  }
+                : undefined
+            }
+          />
+        )}
+      </main>
+    </div>
+  );
+}

autogpt_platform/frontend/src/components/contextual/Chat/SSE_RECONNECTION.md

@@ -0,0 +1,159 @@
+# SSE Reconnection Contract for Long-Running Operations
+
+This document describes the client-side contract for handling SSE (Server-Sent Events) disconnections and reconnecting to long-running background tasks.
+
+## Overview
+
+When a user triggers a long-running operation (like agent generation), the backend:
+
+1. Spawns a background task that survives SSE disconnections
+2. Returns an `operation_started` response with a `task_id`
+3. Stores stream messages in Redis Streams for replay
+
+Clients can reconnect to the task stream at any time to receive missed messages.
+
+## Client-Side Flow
+
+### 1. Receiving Operation Started
+
+When you receive an `operation_started` tool response:
+
+```typescript
+// The response includes a task_id for reconnection
+{
+  type: "operation_started",
+  tool_name: "generate_agent",
+  operation_id: "uuid-...",
+  task_id: "task-uuid-...",  // <-- Store this for reconnection
+  message: "Operation started. You can close this tab."
+}
+```
+
+### 2. Storing Task Info
+
+Use the chat store to track the active task:
+
+```typescript
+import { useChatStore } from "./chat-store";
+
+// When operation_started is received:
+useChatStore.getState().setActiveTask(sessionId, {
+  taskId: response.task_id,
+  operationId: response.operation_id,
+  toolName: response.tool_name,
+  lastMessageId: "0",
+});
+```
+
+### 3. Reconnecting to a Task
+
+To reconnect (e.g., after page refresh or tab reopen):
+
+```typescript
+const { reconnectToTask, getActiveTask } = useChatStore.getState();
+
+// Check if there's an active task for this session
+const activeTask = getActiveTask(sessionId);
+
+if (activeTask) {
+  // Reconnect to the task stream
+  await reconnectToTask(
+    sessionId,
+    activeTask.taskId,
+    activeTask.lastMessageId, // Resume from last position
+    (chunk) => {
+      // Handle incoming chunks
+      console.log("Received chunk:", chunk);
+    },
+  );
+}
+```
+
+### 4. Tracking Message Position
+
+To enable precise replay, update the last message ID as chunks arrive:
+
+```typescript
+const { updateTaskLastMessageId } = useChatStore.getState();
+
+function handleChunk(chunk: StreamChunk) {
+  // If chunk has an index/id, track it
+  if (chunk.idx !== undefined) {
+    updateTaskLastMessageId(sessionId, String(chunk.idx));
+  }
+}
+```
+
+## API Endpoints
+
+### Task Stream Reconnection
+
+```
+GET /api/chat/tasks/{taskId}/stream?last_message_id={idx}
+```
+
+- `taskId`: The task ID from `operation_started`
+- `last_message_id`: Last received message index (default: "0" for full replay)
+
+Returns: SSE stream of missed messages + live updates
+
+## Chunk Types
+
+The reconnected stream follows the same Vercel AI SDK protocol:
+
+| Type                    | Description             |
+| ----------------------- | ----------------------- |
+| `start`                 | Message lifecycle start |
+| `text-delta`            | Streaming text content  |
+| `text-end`              | Text block completed    |
+| `tool-output-available` | Tool result available   |
+| `finish`                | Stream completed        |
+| `error`                 | Error occurred          |
+
+## Error Handling
+
+If reconnection fails:
+
+1. Check if task still exists (may have expired - default TTL: 1 hour)
+2. Fall back to polling the session for final state
+3. Show appropriate UI message to user
+
+## Persistence Considerations
+
+For robust reconnection across browser restarts:
+
+```typescript
+// Store in localStorage/sessionStorage
+const ACTIVE_TASKS_KEY = "chat_active_tasks";
+
+function persistActiveTask(sessionId: string, task: ActiveTaskInfo) {
+  const tasks = JSON.parse(localStorage.getItem(ACTIVE_TASKS_KEY) || "{}");
+  tasks[sessionId] = task;
+  localStorage.setItem(ACTIVE_TASKS_KEY, JSON.stringify(tasks));
+}
+
+function loadPersistedTasks(): Record<string, ActiveTaskInfo> {
+  return JSON.parse(localStorage.getItem(ACTIVE_TASKS_KEY) || "{}");
+}
+```
+
+## Backend Configuration
+
+The following backend settings affect reconnection behavior:
+
+| Setting             | Default | Description                        |
+| ------------------- | ------- | ---------------------------------- |
+| `stream_ttl`        | 3600s   | How long streams are kept in Redis |
+| `stream_max_length` | 1000    | Max messages per stream            |
+
+## Testing
+
+To test reconnection locally:
+
+1. Start a long-running operation (e.g., agent generation)
+2. Note the `task_id` from the `operation_started` response
+3. Close the browser tab
+4. Reopen and call `reconnectToTask` with the saved `task_id`
+5. Verify that missed messages are replayed
+
+See the main README for full local development setup.

autogpt_platform/frontend/src/components/contextual/Chat/chat-constants.ts

@@ -0,0 +1,16 @@
+/**
+ * Constants for the chat system.
+ *
+ * Centralizes magic strings and values used across chat components.
+ */
+
+// LocalStorage keys
+export const STORAGE_KEY_ACTIVE_TASKS = "chat_active_tasks";
+
+// Redis Stream IDs
+export const INITIAL_MESSAGE_ID = "0";
+export const INITIAL_STREAM_ID = "0-0";
+
+// TTL values (in milliseconds)
+export const COMPLETED_STREAM_TTL_MS = 5 * 60 * 1000; // 5 minutes
+export const ACTIVE_TASK_TTL_MS = 60 * 60 * 1000; // 1 hour

autogpt_platform/frontend/src/components/contextual/Chat/chat-store.ts

@@ -0,0 +1,501 @@
+"use client";
+
+import { create } from "zustand";
+import {
+  ACTIVE_TASK_TTL_MS,
+  COMPLETED_STREAM_TTL_MS,
+  INITIAL_STREAM_ID,
+  STORAGE_KEY_ACTIVE_TASKS,
+} from "./chat-constants";
+import type {
+  ActiveStream,
+  StreamChunk,
+  StreamCompleteCallback,
+  StreamResult,
+  StreamStatus,
+} from "./chat-types";
+import { executeStream, executeTaskReconnect } from "./stream-executor";
+
+export interface ActiveTaskInfo {
+  taskId: string;
+  sessionId: string;
+  operationId: string;
+  toolName: string;
+  lastMessageId: string;
+  startedAt: number;
+}
+
+/** Load active tasks from localStorage */
+function loadPersistedTasks(): Map<string, ActiveTaskInfo> {
+  if (typeof window === "undefined") return new Map();
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY_ACTIVE_TASKS);
+    if (!stored) return new Map();
+    const parsed = JSON.parse(stored) as Record<string, ActiveTaskInfo>;
+    const now = Date.now();
+    const tasks = new Map<string, ActiveTaskInfo>();
+    // Filter out expired tasks
+    for (const [sessionId, task] of Object.entries(parsed)) {
+      if (now - task.startedAt < ACTIVE_TASK_TTL_MS) {
+        tasks.set(sessionId, task);
+      }
+    }
+    return tasks;
+  } catch {
+    return new Map();
+  }
+}
+
+/** Save active tasks to localStorage */
+function persistTasks(tasks: Map<string, ActiveTaskInfo>): void {
+  if (typeof window === "undefined") return;
+  try {
+    const obj: Record<string, ActiveTaskInfo> = {};
+    for (const [sessionId, task] of tasks) {
+      obj[sessionId] = task;
+    }
+    localStorage.setItem(STORAGE_KEY_ACTIVE_TASKS, JSON.stringify(obj));
+  } catch {
+    // Ignore storage errors
+  }
+}
+
+interface ChatStoreState {
+  activeStreams: Map<string, ActiveStream>;
+  completedStreams: Map<string, StreamResult>;
+  activeSessions: Set<string>;
+  streamCompleteCallbacks: Set<StreamCompleteCallback>;
+  /** Active tasks for SSE reconnection - keyed by sessionId */
+  activeTasks: Map<string, ActiveTaskInfo>;
+}
+
+interface ChatStoreActions {
+  startStream: (
+    sessionId: string,
+    message: string,
+    isUserMessage: boolean,
+    context?: { url: string; content: string },
+    onChunk?: (chunk: StreamChunk) => void,
+  ) => Promise<void>;
+  stopStream: (sessionId: string) => void;
+  subscribeToStream: (
+    sessionId: string,
+    onChunk: (chunk: StreamChunk) => void,
+    skipReplay?: boolean,
+  ) => () => void;
+  getStreamStatus: (sessionId: string) => StreamStatus;
+  getCompletedStream: (sessionId: string) => StreamResult | undefined;
+  clearCompletedStream: (sessionId: string) => void;
+  isStreaming: (sessionId: string) => boolean;
+  registerActiveSession: (sessionId: string) => void;
+  unregisterActiveSession: (sessionId: string) => void;
+  isSessionActive: (sessionId: string) => boolean;
+  onStreamComplete: (callback: StreamCompleteCallback) => () => void;
+  /** Track active task for SSE reconnection */
+  setActiveTask: (
+    sessionId: string,
+    taskInfo: Omit<ActiveTaskInfo, "sessionId" | "startedAt">,
+  ) => void;
+  /** Get active task for a session */
+  getActiveTask: (sessionId: string) => ActiveTaskInfo | undefined;
+  /** Clear active task when operation completes */
+  clearActiveTask: (sessionId: string) => void;
+  /** Reconnect to an existing task stream */
+  reconnectToTask: (
+    sessionId: string,
+    taskId: string,
+    lastMessageId?: string,
+    onChunk?: (chunk: StreamChunk) => void,
+  ) => Promise<void>;
+  /** Update last message ID for a task (for tracking replay position) */
+  updateTaskLastMessageId: (sessionId: string, lastMessageId: string) => void;
+}
+
+type ChatStore = ChatStoreState & ChatStoreActions;
+
+function notifyStreamComplete(
+  callbacks: Set<StreamCompleteCallback>,
+  sessionId: string,
+) {
+  for (const callback of callbacks) {
+    try {
+      callback(sessionId);
+    } catch (err) {
+      console.warn("[ChatStore] Stream complete callback error:", err);
+    }
+  }
+}
+
+function cleanupExpiredStreams(
+  completedStreams: Map<string, StreamResult>,
+): Map<string, StreamResult> {
+  const now = Date.now();
+  const cleaned = new Map(completedStreams);
+  for (const [sessionId, result] of cleaned) {
+    if (now - result.completedAt > COMPLETED_STREAM_TTL_MS) {
+      cleaned.delete(sessionId);
+    }
+  }
+  return cleaned;
+}
+
+/**
+ * Finalize a stream by moving it from activeStreams to completedStreams.
+ * Also handles cleanup and notifications.
+ */
+function finalizeStream(
+  sessionId: string,
+  stream: ActiveStream,
+  onChunk: ((chunk: StreamChunk) => void) | undefined,
+  get: () => ChatStoreState & ChatStoreActions,
+  set: (state: Partial<ChatStoreState>) => void,
+): void {
+  if (onChunk) stream.onChunkCallbacks.delete(onChunk);
+
+  if (stream.status !== "streaming") {
+    const currentState = get();
+    const finalActiveStreams = new Map(currentState.activeStreams);
+    let finalCompletedStreams = new Map(currentState.completedStreams);
+
+    const storedStream = finalActiveStreams.get(sessionId);
+    if (storedStream === stream) {
+      const result: StreamResult = {
+        sessionId,
+        status: stream.status,
+        chunks: stream.chunks,
+        completedAt: Date.now(),
+        error: stream.error,
+      };
+      finalCompletedStreams.set(sessionId, result);
+      finalActiveStreams.delete(sessionId);
+      finalCompletedStreams = cleanupExpiredStreams(finalCompletedStreams);
+      set({
+        activeStreams: finalActiveStreams,
+        completedStreams: finalCompletedStreams,
+      });
+
+      if (stream.status === "completed" || stream.status === "error") {
+        notifyStreamComplete(currentState.streamCompleteCallbacks, sessionId);
+      }
+    }
+  }
+}
+
+/**
+ * Clean up an existing stream for a session and move it to completed streams.
+ * Returns updated maps for both active and completed streams.
+ */
+function cleanupExistingStream(
+  sessionId: string,
+  activeStreams: Map<string, ActiveStream>,
+  completedStreams: Map<string, StreamResult>,
+  callbacks: Set<StreamCompleteCallback>,
+): {
+  activeStreams: Map<string, ActiveStream>;
+  completedStreams: Map<string, StreamResult>;
+} {
+  const newActiveStreams = new Map(activeStreams);
+  let newCompletedStreams = new Map(completedStreams);
+
+  const existingStream = newActiveStreams.get(sessionId);
+  if (existingStream) {
+    existingStream.abortController.abort();
+    const normalizedStatus =
+      existingStream.status === "streaming"
+        ? "completed"
+        : existingStream.status;
+    const result: StreamResult = {
+      sessionId,
+      status: normalizedStatus,
+      chunks: existingStream.chunks,
+      completedAt: Date.now(),
+      error: existingStream.error,
+    };
+    newCompletedStreams.set(sessionId, result);
+    newActiveStreams.delete(sessionId);
+    newCompletedStreams = cleanupExpiredStreams(newCompletedStreams);
+    if (normalizedStatus === "completed" || normalizedStatus === "error") {
+      notifyStreamComplete(callbacks, sessionId);
+    }
+  }
+
+  return {
+    activeStreams: newActiveStreams,
+    completedStreams: newCompletedStreams,
+  };
+}
+
+/**
+ * Create a new active stream with initial state.
+ */
+function createActiveStream(
+  sessionId: string,
+  onChunk?: (chunk: StreamChunk) => void,
+): ActiveStream {
+  const abortController = new AbortController();
+  const initialCallbacks = new Set<(chunk: StreamChunk) => void>();
+  if (onChunk) initialCallbacks.add(onChunk);
+
+  return {
+    sessionId,
+    abortController,
+    status: "streaming",
+    startedAt: Date.now(),
+    chunks: [],
+    onChunkCallbacks: initialCallbacks,
+  };
+}
+
+export const useChatStore = create<ChatStore>((set, get) => ({
+  activeStreams: new Map(),
+  completedStreams: new Map(),
+  activeSessions: new Set(),
+  streamCompleteCallbacks: new Set(),
+  activeTasks: loadPersistedTasks(),
+
+  startStream: async function startStream(
+    sessionId,
+    message,
+    isUserMessage,
+    context,
+    onChunk,
+  ) {
+    const state = get();
+    const callbacks = state.streamCompleteCallbacks;
+
+    // Clean up any existing stream for this session
+    const {
+      activeStreams: newActiveStreams,
+      completedStreams: newCompletedStreams,
+    } = cleanupExistingStream(
+      sessionId,
+      state.activeStreams,
+      state.completedStreams,
+      callbacks,
+    );
+
+    // Create new stream
+    const stream = createActiveStream(sessionId, onChunk);
+    newActiveStreams.set(sessionId, stream);
+    set({
+      activeStreams: newActiveStreams,
+      completedStreams: newCompletedStreams,
+    });
+
+    try {
+      await executeStream(stream, message, isUserMessage, context);
+    } finally {
+      finalizeStream(sessionId, stream, onChunk, get, set);
+    }
+  },
+
+  stopStream: function stopStream(sessionId) {
+    const state = get();
+    const stream = state.activeStreams.get(sessionId);
+    if (!stream) return;
+
+    stream.abortController.abort();
+    stream.status = "completed";
+
+    const newActiveStreams = new Map(state.activeStreams);
+    let newCompletedStreams = new Map(state.completedStreams);
+
+    const result: StreamResult = {
+      sessionId,
+      status: stream.status,
+      chunks: stream.chunks,
+      completedAt: Date.now(),
+      error: stream.error,
+    };
+    newCompletedStreams.set(sessionId, result);
+    newActiveStreams.delete(sessionId);
+    newCompletedStreams = cleanupExpiredStreams(newCompletedStreams);
+
+    set({
+      activeStreams: newActiveStreams,
+      completedStreams: newCompletedStreams,
+    });
+
+    notifyStreamComplete(state.streamCompleteCallbacks, sessionId);
+  },
+
+  subscribeToStream: function subscribeToStream(
+    sessionId,
+    onChunk,
+    skipReplay = false,
+  ) {
+    const state = get();
+    const stream = state.activeStreams.get(sessionId);
+
+    if (stream) {
+      if (!skipReplay) {
+        for (const chunk of stream.chunks) {
+          onChunk(chunk);
+        }
+      }
+
+      stream.onChunkCallbacks.add(onChunk);
+
+      return function unsubscribe() {
+        stream.onChunkCallbacks.delete(onChunk);
+      };
+    }
+
+    return function noop() {};
+  },
+
+  getStreamStatus: function getStreamStatus(sessionId) {
+    const { activeStreams, completedStreams } = get();
+
+    const active = activeStreams.get(sessionId);
+    if (active) return active.status;
+
+    const completed = completedStreams.get(sessionId);
+    if (completed) return completed.status;
+
+    return "idle";
+  },
+
+  getCompletedStream: function getCompletedStream(sessionId) {
+    return get().completedStreams.get(sessionId);
+  },
+
+  clearCompletedStream: function clearCompletedStream(sessionId) {
+    const state = get();
+    if (!state.completedStreams.has(sessionId)) return;
+
+    const newCompletedStreams = new Map(state.completedStreams);
+    newCompletedStreams.delete(sessionId);
+    set({ completedStreams: newCompletedStreams });
+  },
+
+  isStreaming: function isStreaming(sessionId) {
+    const stream = get().activeStreams.get(sessionId);
+    return stream?.status === "streaming";
+  },
+
+  registerActiveSession: function registerActiveSession(sessionId) {
+    const state = get();
+    if (state.activeSessions.has(sessionId)) return;
+
+    const newActiveSessions = new Set(state.activeSessions);
+    newActiveSessions.add(sessionId);
+    set({ activeSessions: newActiveSessions });
+  },
+
+  unregisterActiveSession: function unregisterActiveSession(sessionId) {
+    const state = get();
+    if (!state.activeSessions.has(sessionId)) return;
+
+    const newActiveSessions = new Set(state.activeSessions);
+    newActiveSessions.delete(sessionId);
+    set({ activeSessions: newActiveSessions });
+  },
+
+  isSessionActive: function isSessionActive(sessionId) {
+    return get().activeSessions.has(sessionId);
+  },
+
+  onStreamComplete: function onStreamComplete(callback) {
+    const state = get();
+    const newCallbacks = new Set(state.streamCompleteCallbacks);
+    newCallbacks.add(callback);
+    set({ streamCompleteCallbacks: newCallbacks });
+
+    return function unsubscribe() {
+      const currentState = get();
+      const cleanedCallbacks = new Set(currentState.streamCompleteCallbacks);
+      cleanedCallbacks.delete(callback);
+      set({ streamCompleteCallbacks: cleanedCallbacks });
+    };
+  },
+
+  setActiveTask: function setActiveTask(sessionId, taskInfo) {
+    const state = get();
+    const newActiveTasks = new Map(state.activeTasks);
+    newActiveTasks.set(sessionId, {
+      ...taskInfo,
+      sessionId,
+      startedAt: Date.now(),
+    });
+    set({ activeTasks: newActiveTasks });
+    persistTasks(newActiveTasks);
+  },
+
+  getActiveTask: function getActiveTask(sessionId) {
+    return get().activeTasks.get(sessionId);
+  },
+
+  clearActiveTask: function clearActiveTask(sessionId) {
+    const state = get();
+    if (!state.activeTasks.has(sessionId)) return;
+
+    const newActiveTasks = new Map(state.activeTasks);
+    newActiveTasks.delete(sessionId);
+    set({ activeTasks: newActiveTasks });
+    persistTasks(newActiveTasks);
+  },
+
+  reconnectToTask: async function reconnectToTask(
+    sessionId,
+    taskId,
+    lastMessageId = INITIAL_STREAM_ID,
+    onChunk,
+  ) {
+    const state = get();
+    const callbacks = state.streamCompleteCallbacks;
+
+    // Clean up any existing stream for this session
+    const {
+      activeStreams: newActiveStreams,
+      completedStreams: newCompletedStreams,
+    } = cleanupExistingStream(
+      sessionId,
+      state.activeStreams,
+      state.completedStreams,
+      callbacks,
+    );
+
+    // Create new stream for reconnection
+    const stream = createActiveStream(sessionId, onChunk);
+    newActiveStreams.set(sessionId, stream);
+    set({
+      activeStreams: newActiveStreams,
+      completedStreams: newCompletedStreams,
+    });
+
+    try {
+      await executeTaskReconnect(stream, taskId, lastMessageId);
+    } finally {
+      finalizeStream(sessionId, stream, onChunk, get, set);
+
+      // Clear active task on completion
+      if (stream.status === "completed" || stream.status === "error") {
+        const taskState = get();
+        if (taskState.activeTasks.has(sessionId)) {
+          const newActiveTasks = new Map(taskState.activeTasks);
+          newActiveTasks.delete(sessionId);
+          set({ activeTasks: newActiveTasks });
+          persistTasks(newActiveTasks);
+        }
+      }
+    }
+  },
+
+  updateTaskLastMessageId: function updateTaskLastMessageId(
+    sessionId,
+    lastMessageId,
+  ) {
+    const state = get();
+    const task = state.activeTasks.get(sessionId);
+    if (!task) return;
+
+    const newActiveTasks = new Map(state.activeTasks);
+    newActiveTasks.set(sessionId, {
+      ...task,
+      lastMessageId,
+    });
+    set({ activeTasks: newActiveTasks });
+    persistTasks(newActiveTasks);
+  },
+}));

autogpt_platform/frontend/src/components/contextual/Chat/chat-types.ts

@@ -0,0 +1,163 @@
+import type { ToolArguments, ToolResult } from "@/types/chat";
+
+export type StreamStatus = "idle" | "streaming" | "completed" | "error";
+
+export interface StreamChunk {
+  type:
+    | "stream_start"
+    | "text_chunk"
+    | "text_ended"
+    | "tool_call"
+    | "tool_call_start"
+    | "tool_response"
+    | "login_needed"
+    | "need_login"
+    | "credentials_needed"
+    | "error"
+    | "usage"
+    | "stream_end";
+  taskId?: string;
+  timestamp?: string;
+  content?: string;
+  message?: string;
+  code?: string;
+  details?: Record<string, unknown>;
+  tool_id?: string;
+  tool_name?: string;
+  arguments?: ToolArguments;
+  result?: ToolResult;
+  success?: boolean;
+  idx?: number;
+  session_id?: string;
+  agent_info?: {
+    graph_id: string;
+    name: string;
+    trigger_type: string;
+  };
+  provider?: string;
+  provider_name?: string;
+  credential_type?: string;
+  scopes?: string[];
+  title?: string;
+  [key: string]: unknown;
+}
+
+export type VercelStreamChunk =
+  | { type: "start"; messageId: string; taskId?: string }
+  | { type: "finish" }
+  | { type: "text-start"; id: string }
+  | { type: "text-delta"; id: string; delta: string }
+  | { type: "text-end"; id: string }
+  | { type: "tool-input-start"; toolCallId: string; toolName: string }
+  | {
+      type: "tool-input-available";
+      toolCallId: string;
+      toolName: string;
+      input: Record<string, unknown>;
+    }
+  | {
+      type: "tool-output-available";
+      toolCallId: string;
+      toolName?: string;
+      output: unknown;
+      success?: boolean;
+    }
+  | {
+      type: "usage";
+      promptTokens: number;
+      completionTokens: number;
+      totalTokens: number;
+    }
+  | {
+      type: "error";
+      errorText: string;
+      code?: string;
+      details?: Record<string, unknown>;
+    };
+
+export interface ActiveStream {
+  sessionId: string;
+  abortController: AbortController;
+  status: StreamStatus;
+  startedAt: number;
+  chunks: StreamChunk[];
+  error?: Error;
+  onChunkCallbacks: Set<(chunk: StreamChunk) => void>;
+}
+
+export interface StreamResult {
+  sessionId: string;
+  status: StreamStatus;
+  chunks: StreamChunk[];
+  completedAt: number;
+  error?: Error;
+}
+
+export type StreamCompleteCallback = (sessionId: string) => void;
+
+// Type guards for message types
+
+/**
+ * Check if a message has a toolId property.
+ */
+export function hasToolId<T extends { type: string }>(
+  msg: T,
+): msg is T & { toolId: string } {
+  return (
+    "toolId" in msg &&
+    typeof (msg as Record<string, unknown>).toolId === "string"
+  );
+}
+
+/**
+ * Check if a message has an operationId property.
+ */
+export function hasOperationId<T extends { type: string }>(
+  msg: T,
+): msg is T & { operationId: string } {
+  return (
+    "operationId" in msg &&
+    typeof (msg as Record<string, unknown>).operationId === "string"
+  );
+}
+
+/**
+ * Check if a message has a toolCallId property.
+ */
+export function hasToolCallId<T extends { type: string }>(
+  msg: T,
+): msg is T & { toolCallId: string } {
+  return (
+    "toolCallId" in msg &&
+    typeof (msg as Record<string, unknown>).toolCallId === "string"
+  );
+}
+
+/**
+ * Check if a message is an operation message type.
+ */
+export function isOperationMessage<T extends { type: string }>(
+  msg: T,
+): msg is T & {
+  type: "operation_started" | "operation_pending" | "operation_in_progress";
+} {
+  return (
+    msg.type === "operation_started" ||
+    msg.type === "operation_pending" ||
+    msg.type === "operation_in_progress"
+  );
+}
+
+/**
+ * Get the tool ID from a message if available.
+ * Checks toolId, operationId, and toolCallId properties.
+ */
+export function getToolIdFromMessage<T extends { type: string }>(
+  msg: T,
+): string | undefined {
+  const record = msg as Record<string, unknown>;
+  if (typeof record.toolId === "string") return record.toolId;
+  if (typeof record.operationId === "string") return record.operationId;
+  if (typeof record.toolCallId === "string") return record.toolCallId;
+  return undefined;
+}

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

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils";
+import { ReactNode } from "react";
+
+export interface AIChatBubbleProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function AIChatBubble({ children, className }: AIChatBubbleProps) {
+  return (
+    <div className={cn("text-left text-[1rem] leading-relaxed", className)}>
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,119 @@
+import { Button } from "@/components/atoms/Button/Button";
+import { Card } from "@/components/atoms/Card/Card";
+import { Text } from "@/components/atoms/Text/Text";
+import { cn } from "@/lib/utils";
+import { ArrowRight, List, Robot } from "@phosphor-icons/react";
+import Image from "next/image";
+
+export interface Agent {
+  id: string;
+  name: string;
+  description: string;
+  version?: number;
+  image_url?: string;
+}
+
+export interface AgentCarouselMessageProps {
+  agents: Agent[];
+  totalCount?: number;
+  onSelectAgent?: (agentId: string) => void;
+  className?: string;
+}
+
+export function AgentCarouselMessage({
+  agents,
+  totalCount,
+  onSelectAgent,
+  className,
+}: AgentCarouselMessageProps) {
+  const displayCount = totalCount ?? agents.length;
+
+  return (
+    <div
+      className={cn(
+        "mx-4 my-2 flex flex-col gap-4 rounded-lg border border-purple-200 bg-purple-50 p-6",
+        className,
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-purple-500">
+          <List size={24} weight="bold" className="text-white" />
+        </div>
+        <div>
+          <Text variant="h3" className="text-purple-900">
+            Found {displayCount} {displayCount === 1 ? "Agent" : "Agents"}
+          </Text>
+          <Text variant="small" className="text-purple-700">
+            Select an agent to view details or run it
+          </Text>
+        </div>
+      </div>
+
+      {/* Agent Cards */}
+      <div className="grid gap-3 sm:grid-cols-2">
+        {agents.map((agent) => (
+          <Card
+            key={agent.id}
+            className="border border-purple-200 bg-white p-4"
+          >
+            <div className="flex gap-3">
+              <div className="relative h-10 w-10 flex-shrink-0 overflow-hidden rounded-lg bg-purple-100">
+                {agent.image_url ? (
+                  <Image
+                    src={agent.image_url}
+                    alt={`${agent.name} preview image`}
+                    fill
+                    className="object-cover"
+                  />
+                ) : (
+                  <div className="flex h-full w-full items-center justify-center">
+                    <Robot
+                      size={20}
+                      weight="bold"
+                      className="text-purple-600"
+                    />
+                  </div>
+                )}
+              </div>
+              <div className="flex-1 space-y-2">
+                <div>
+                  <Text
+                    variant="body"
+                    className="font-semibold text-purple-900"
+                  >
+                    {agent.name}
+                  </Text>
+                  {agent.version && (
+                    <Text variant="small" className="text-purple-600">
+                      v{agent.version}
+                    </Text>
+                  )}
+                </div>
+                <Text variant="small" className="line-clamp-2 text-purple-700">
+                  {agent.description}
+                </Text>
+                {onSelectAgent && (
+                  <Button
+                    onClick={() => onSelectAgent(agent.id)}
+                    variant="ghost"
+                    className="mt-2 flex items-center gap-1 p-0 text-sm text-purple-600 hover:text-purple-800"
+                  >
+                    View details
+                    <ArrowRight size={16} weight="bold" />
+                  </Button>
+                )}
+              </div>
+            </div>
+          </Card>
+        ))}
+      </div>
+
+      {totalCount && totalCount > agents.length && (
+        <Text variant="small" className="text-center text-purple-600">
+          Showing {agents.length} of {totalCount} results
+        </Text>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,246 @@
+"use client";
+
+import { Button } from "@/components/atoms/Button/Button";
+import { Card } from "@/components/atoms/Card/Card";
+import { Text } from "@/components/atoms/Text/Text";
+import { CredentialsInput } from "@/components/contextual/CredentialsInput/CredentialsInput";
+import { RunAgentInputs } from "@/components/contextual/RunAgentInputs/RunAgentInputs";
+
+import type { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
+import {
+  BlockIOCredentialsSubSchema,
+  BlockIOSubSchema,
+} from "@/lib/autogpt-server-api/types";
+import { cn, isEmpty } from "@/lib/utils";
+import { PlayIcon, WarningIcon } from "@phosphor-icons/react";
+import { useMemo } from "react";
+import { useAgentInputsSetup } from "./useAgentInputsSetup";
+
+type LibraryAgentInputSchemaProperties = LibraryAgent["input_schema"] extends {
+  properties: infer P;
+}
+  ? P extends Record<string, BlockIOSubSchema>
+    ? P
+    : Record<string, BlockIOSubSchema>
+  : Record<string, BlockIOSubSchema>;
+
+type LibraryAgentCredentialsInputSchemaProperties =
+  LibraryAgent["credentials_input_schema"] extends {
+    properties: infer P;
+  }
+    ? P extends Record<string, BlockIOCredentialsSubSchema>
+      ? P
+      : Record<string, BlockIOCredentialsSubSchema>
+    : Record<string, BlockIOCredentialsSubSchema>;
+
+interface Props {
+  agentName?: string;
+  inputSchema: LibraryAgentInputSchemaProperties | Record<string, any>;
+  credentialsSchema?:
+    | LibraryAgentCredentialsInputSchemaProperties
+    | Record<string, any>;
+  message: string;
+  requiredFields?: string[];
+  onRun: (
+    inputs: Record<string, any>,
+    credentials: Record<string, any>,
+  ) => void;
+  onCancel?: () => void;
+  className?: string;
+}
+
+export function AgentInputsSetup({
+  agentName,
+  inputSchema,
+  credentialsSchema,
+  message,
+  requiredFields,
+  onRun,
+  onCancel,
+  className,
+}: Props) {
+  const { inputValues, setInputValue, credentialsValues, setCredentialsValue } =
+    useAgentInputsSetup();
+
+  const inputSchemaObj = useMemo(() => {
+    if (!inputSchema) return { properties: {}, required: [] };
+    if ("properties" in inputSchema && "type" in inputSchema) {
+      return inputSchema as {
+        properties: Record<string, any>;
+        required?: string[];
+      };
+    }
+    return { properties: inputSchema as Record<string, any>, required: [] };
+  }, [inputSchema]);
+
+  const credentialsSchemaObj = useMemo(() => {
+    if (!credentialsSchema) return { properties: {}, required: [] };
+    if ("properties" in credentialsSchema && "type" in credentialsSchema) {
+      return credentialsSchema as {
+        properties: Record<string, any>;
+        required?: string[];
+      };
+    }
+    return {
+      properties: credentialsSchema as Record<string, any>,
+      required: [],
+    };
+  }, [credentialsSchema]);
+
+  const agentInputFields = useMemo(() => {
+    const properties = inputSchemaObj.properties || {};
+    return Object.fromEntries(
+      Object.entries(properties).filter(
+        ([_, subSchema]: [string, any]) => !subSchema.hidden,
+      ),
+    );
+  }, [inputSchemaObj]);
+
+  const agentCredentialsInputFields = useMemo(() => {
+    return credentialsSchemaObj.properties || {};
+  }, [credentialsSchemaObj]);
+
+  const inputFields = Object.entries(agentInputFields);
+  const credentialFields = Object.entries(agentCredentialsInputFields);
+
+  const defaultsFromSchema = useMemo(() => {
+    const defaults: Record<string, any> = {};
+    Object.entries(agentInputFields).forEach(([key, schema]) => {
+      if ("default" in schema && schema.default !== undefined) {
+        defaults[key] = schema.default;
+      }
+    });
+    return defaults;
+  }, [agentInputFields]);
+
+  const defaultsFromCredentialsSchema = useMemo(() => {
+    const defaults: Record<string, any> = {};
+    Object.entries(agentCredentialsInputFields).forEach(([key, schema]) => {
+      if ("default" in schema && schema.default !== undefined) {
+        defaults[key] = schema.default;
+      }
+    });
+    return defaults;
+  }, [agentCredentialsInputFields]);
+
+  const mergedInputValues = useMemo(() => {
+    return { ...defaultsFromSchema, ...inputValues };
+  }, [defaultsFromSchema, inputValues]);
+
+  const mergedCredentialsValues = useMemo(() => {
+    return { ...defaultsFromCredentialsSchema, ...credentialsValues };
+  }, [defaultsFromCredentialsSchema, credentialsValues]);
+
+  const allRequiredInputsAreSet = useMemo(() => {
+    const requiredInputs = new Set(
+      requiredFields || (inputSchemaObj.required as string[]) || [],
+    );
+    const nonEmptyInputs = new Set(
+      Object.keys(mergedInputValues).filter(
+        (k) => !isEmpty(mergedInputValues[k]),
+      ),
+    );
+    const missing = [...requiredInputs].filter(
+      (input) => !nonEmptyInputs.has(input),
+    );
+    return missing.length === 0;
+  }, [inputSchemaObj.required, mergedInputValues, requiredFields]);
+
+  const allCredentialsAreSet = useMemo(() => {
+    const requiredCredentials = new Set(
+      (credentialsSchemaObj.required as string[]) || [],
+    );
+    if (requiredCredentials.size === 0) {
+      return true;
+    }
+    const missing = [...requiredCredentials].filter((key) => {
+      const cred = mergedCredentialsValues[key];
+      return !cred || !cred.id;
+    });
+    return missing.length === 0;
+  }, [credentialsSchemaObj.required, mergedCredentialsValues]);
+
+  const canRun = allRequiredInputsAreSet && allCredentialsAreSet;
+
+  function handleRun() {
+    if (canRun) {
+      onRun(mergedInputValues, mergedCredentialsValues);
+    }
+  }
+
+  return (
+    <Card
+      className={cn(
+        "mx-4 my-2 overflow-hidden border-blue-200 bg-blue-50",
+        className,
+      )}
+    >
+      <div className="flex items-start gap-4 p-6">
+        <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-500">
+          <WarningIcon size={24} weight="bold" className="text-white" />
+        </div>
+        <div className="flex-1">
+          <Text variant="h3" className="mb-2 text-blue-900">
+            {agentName ? `Configure ${agentName}` : "Agent Configuration"}
+          </Text>
+          <Text variant="body" className="mb-4 text-blue-700">
+            {message}
+          </Text>
+
+          {inputFields.length > 0 && (
+            <div className="mb-4 space-y-4">
+              {inputFields.map(([key, inputSubSchema]) => (
+                <RunAgentInputs
+                  key={key}
+                  schema={inputSubSchema}
+                  value={inputValues[key] ?? inputSubSchema.default}
+                  placeholder={inputSubSchema.description}
+                  onChange={(value) => setInputValue(key, value)}
+                />
+              ))}
+            </div>
+          )}
+
+          {credentialFields.length > 0 && (
+            <div className="mb-4 space-y-4">
+              {credentialFields.map(([key, schema]) => {
+                const requiredCredentials = new Set(
+                  (credentialsSchemaObj.required as string[]) || [],
+                );
+                return (
+                  <CredentialsInput
+                    key={key}
+                    schema={schema}
+                    selectedCredentials={credentialsValues[key]}
+                    onSelectCredentials={(value) =>
+                      setCredentialsValue(key, value)
+                    }
+                    siblingInputs={mergedInputValues}
+                    isOptional={!requiredCredentials.has(key)}
+                  />
+                );
+              })}
+            </div>
+          )}
+
+          <div className="flex gap-2">
+            <Button
+              variant="primary"
+              size="small"
+              onClick={handleRun}
+              disabled={!canRun}
+            >
+              <PlayIcon className="mr-2 h-4 w-4" weight="bold" />
+              Run Agent
+            </Button>
+            {onCancel && (
+              <Button variant="outline" size="small" onClick={onCancel}>
+                Cancel
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}

autogpt_platform/frontend/src/components/contextual/Chat/components/AgentInputsSetup/useAgentInputsSetup.ts

@@ -0,0 +1,38 @@
+import type { CredentialsMetaInput } from "@/lib/autogpt-server-api/types";
+import { useState } from "react";
+
+export function useAgentInputsSetup() {
+  const [inputValues, setInputValues] = useState<Record<string, any>>({});
+  const [credentialsValues, setCredentialsValues] = useState<
+    Record<string, CredentialsMetaInput>
+  >({});
+
+  function setInputValue(key: string, value: any) {
+    setInputValues((prev) => ({
+      ...prev,
+      [key]: value,
+    }));
+  }
+
+  function setCredentialsValue(key: string, value?: CredentialsMetaInput) {
+    if (value) {
+      setCredentialsValues((prev) => ({
+        ...prev,
+        [key]: value,
+      }));
+    } else {
+      setCredentialsValues((prev) => {
+        const next = { ...prev };
+        delete next[key];
+        return next;
+      });
+    }
+  }
+
+  return {
+    inputValues,
+    setInputValue,
+    credentialsValues,
+    setCredentialsValue,
+  };
+}

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

@@ -0,0 +1,120 @@
+"use client";
+
+import { Button } from "@/components/atoms/Button/Button";
+import { cn } from "@/lib/utils";
+import { ShieldIcon, SignInIcon, UserPlusIcon } from "@phosphor-icons/react";
+import { useRouter } from "next/navigation";
+
+export interface AuthPromptWidgetProps {
+  message: string;
+  sessionId: string;
+  agentInfo?: {
+    graph_id: string;
+    name: string;
+    trigger_type: string;
+  };
+  returnUrl?: string;
+  className?: string;
+}
+
+export function AuthPromptWidget({
+  message,
+  sessionId,
+  agentInfo,
+  returnUrl = "/copilot/chat",
+  className,
+}: AuthPromptWidgetProps) {
+  const router = useRouter();
+
+  function handleSignIn() {
+    if (typeof window !== "undefined") {
+      localStorage.setItem("pending_chat_session", sessionId);
+      if (agentInfo) {
+        localStorage.setItem("pending_agent_setup", JSON.stringify(agentInfo));
+      }
+    }
+    const returnUrlWithSession = `${returnUrl}?session_id=${sessionId}`;
+    const encodedReturnUrl = encodeURIComponent(returnUrlWithSession);
+    router.push(`/login?returnUrl=${encodedReturnUrl}`);
+  }
+
+  function handleSignUp() {
+    if (typeof window !== "undefined") {
+      localStorage.setItem("pending_chat_session", sessionId);
+      if (agentInfo) {
+        localStorage.setItem("pending_agent_setup", JSON.stringify(agentInfo));
+      }
+    }
+    const returnUrlWithSession = `${returnUrl}?session_id=${sessionId}`;
+    const encodedReturnUrl = encodeURIComponent(returnUrlWithSession);
+    router.push(`/signup?returnUrl=${encodedReturnUrl}`);
+  }
+
+  return (
+    <div
+      className={cn(
+        "my-4 overflow-hidden rounded-lg border border-violet-200",
+        "bg-gradient-to-br from-violet-50 to-purple-50",
+        "duration-500 animate-in fade-in-50 slide-in-from-bottom-2",
+        className,
+      )}
+    >
+      <div className="px-6 py-5">
+        <div className="mb-4 flex items-center gap-3">
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-violet-600">
+            <ShieldIcon size={20} weight="fill" className="text-white" />
+          </div>
+          <div>
+            <h3 className="text-lg font-semibold text-neutral-900">
+              Authentication Required
+            </h3>
+            <p className="text-sm text-neutral-600">
+              Sign in to set up and manage agents
+            </p>
+          </div>
+        </div>
+
+        <div className="mb-5 rounded-md bg-white/50 p-4">
+          <p className="text-sm text-neutral-700">{message}</p>
+          {agentInfo && (
+            <div className="mt-3 text-xs text-neutral-600">
+              <p>
+                Ready to set up:{" "}
+                <span className="font-medium">{agentInfo.name}</span>
+              </p>
+              <p>
+                Type:{" "}
+                <span className="font-medium">{agentInfo.trigger_type}</span>
+              </p>
+            </div>
+          )}
+        </div>
+
+        <div className="flex gap-3">
+          <Button
+            onClick={handleSignIn}
+            variant="primary"
+            size="small"
+            className="flex-1"
+          >
+            <SignInIcon size={16} weight="bold" className="mr-2" />
+            Sign In
+          </Button>
+          <Button
+            onClick={handleSignUp}
+            variant="secondary"
+            size="small"
+            className="flex-1"
+          >
+            <UserPlusIcon size={16} weight="bold" className="mr-2" />
+            Create Account
+          </Button>
+        </div>
+
+        <div className="mt-4 text-center text-xs text-neutral-500">
+          Your chat session will be preserved after signing in
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,130 @@
+import type { SessionDetailResponse } from "@/app/api/__generated__/models/sessionDetailResponse";
+import { Button } from "@/components/atoms/Button/Button";
+import { Text } from "@/components/atoms/Text/Text";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
+import { cn } from "@/lib/utils";
+import { GlobeHemisphereEastIcon } from "@phosphor-icons/react";
+import { useEffect } from "react";
+import { ChatInput } from "../ChatInput/ChatInput";
+import { MessageList } from "../MessageList/MessageList";
+import { useChatContainer } from "./useChatContainer";
+
+export interface ChatContainerProps {
+  sessionId: string | null;
+  initialMessages: SessionDetailResponse["messages"];
+  initialPrompt?: string;
+  className?: string;
+  onStreamingChange?: (isStreaming: boolean) => void;
+  onOperationStarted?: () => void;
+  /** Active stream info from the server for reconnection */
+  activeStream?: {
+    taskId: string;
+    lastMessageId: string;
+    operationId: string;
+    toolName: string;
+  };
+}
+
+export function ChatContainer({
+  sessionId,
+  initialMessages,
+  initialPrompt,
+  className,
+  onStreamingChange,
+  onOperationStarted,
+  activeStream,
+}: ChatContainerProps) {
+  const {
+    messages,
+    streamingChunks,
+    isStreaming,
+    stopStreaming,
+    isRegionBlockedModalOpen,
+    sendMessageWithContext,
+    handleRegionModalOpenChange,
+    handleRegionModalClose,
+  } = useChatContainer({
+    sessionId,
+    initialMessages,
+    initialPrompt,
+    onOperationStarted,
+    activeStream,
+  });
+
+  useEffect(() => {
+    onStreamingChange?.(isStreaming);
+  }, [isStreaming, onStreamingChange]);
+
+  return (
+    <div
+      className={cn(
+        "mx-auto flex h-full min-h-0 w-full max-w-3xl flex-col bg-[#f8f8f9]",
+        className,
+      )}
+    >
+      <Dialog
+        title={
+          <div className="flex items-center gap-2">
+            <GlobeHemisphereEastIcon className="size-6" />
+            <Text
+              variant="body"
+              className="text-md font-poppins leading-none md:text-lg"
+            >
+              Service unavailable
+            </Text>
+          </div>
+        }
+        controlled={{
+          isOpen: isRegionBlockedModalOpen,
+          set: handleRegionModalOpenChange,
+        }}
+        onClose={handleRegionModalClose}
+        styling={{ maxWidth: 550, width: "100%", minWidth: "auto" }}
+      >
+        <Dialog.Content>
+          <div className="flex flex-col gap-8">
+            <Text variant="body">
+              The Autogpt AI model is not available in your region or your
+              connection is blocking it. Please try again with a different
+              connection.
+            </Text>
+            <div className="flex justify-center">
+              <Button
+                type="button"
+                variant="primary"
+                onClick={handleRegionModalClose}
+                className="w-full"
+              >
+                Got it
+              </Button>
+            </div>
+          </div>
+        </Dialog.Content>
+      </Dialog>
+      {/* Messages - Scrollable */}
+      <div className="relative flex min-h-0 flex-1 flex-col">
+        <div className="flex min-h-full flex-col justify-end">
+          <MessageList
+            messages={messages}
+            streamingChunks={streamingChunks}
+            isStreaming={isStreaming}
+            onSendMessage={sendMessageWithContext}
+            className="flex-1"
+          />
+        </div>
+      </div>
+
+      {/* Input - Fixed at bottom */}
+      <div className="relative px-3 pb-6 pt-2">
+        <div className="pointer-events-none absolute top-[-18px] z-10 h-6 w-full bg-gradient-to-b from-transparent to-[#f8f8f9]" />
+        <ChatInput
+          onSend={sendMessageWithContext}
+          disabled={isStreaming || !sessionId}
+          isStreaming={isStreaming}
+          onStop={stopStreaming}
+          placeholder="What else can I help with?"
+        />
+      </div>
+    </div>
+  );
+}

autogpt_platform/frontend/src/components/contextual/Chat/components/ChatContainer/createStreamEventDispatcher.ts

@@ -0,0 +1,89 @@
+import { toast } from "sonner";
+import type { StreamChunk } from "../../chat-types";
+import type { HandlerDependencies } from "./handlers";
+import {
+  getErrorDisplayMessage,
+  handleError,
+  handleLoginNeeded,
+  handleStreamEnd,
+  handleTextChunk,
+  handleTextEnded,
+  handleToolCallStart,
+  handleToolResponse,
+  isRegionBlockedError,
+} from "./handlers";
+
+export function createStreamEventDispatcher(
+  deps: HandlerDependencies,
+): (chunk: StreamChunk) => void {
+  return function dispatchStreamEvent(chunk: StreamChunk): void {
+    if (
+      chunk.type === "text_chunk" ||
+      chunk.type === "tool_call_start" ||
+      chunk.type === "tool_response" ||
+      chunk.type === "login_needed" ||
+      chunk.type === "need_login" ||
+      chunk.type === "error"
+    ) {
+      deps.hasResponseRef.current = true;
+    }
+
+    switch (chunk.type) {
+      case "stream_start":
+        // Store task ID for SSE reconnection
+        if (chunk.taskId && deps.onActiveTaskStarted) {
+          deps.onActiveTaskStarted({
+            taskId: chunk.taskId,
+            operationId: chunk.taskId,
+            toolName: "chat",
+            toolCallId: "chat_stream",
+          });
+        }
+        break;
+
+      case "text_chunk":
+        handleTextChunk(chunk, deps);
+        break;
+
+      case "text_ended":
+        handleTextEnded(chunk, deps);
+        break;
+
+      case "tool_call_start":
+        handleToolCallStart(chunk, deps);
+        break;
+
+      case "tool_response":
+        handleToolResponse(chunk, deps);
+        break;
+
+      case "login_needed":
+      case "need_login":
+        handleLoginNeeded(chunk, deps);
+        break;
+
+      case "stream_end":
+        // Note: "finish" type from backend gets normalized to "stream_end" by normalizeStreamChunk
+        handleStreamEnd(chunk, deps);
+        break;
+
+      case "error":
+        const isRegionBlocked = isRegionBlockedError(chunk);
+        handleError(chunk, deps);
+        // Show toast at dispatcher level to avoid circular dependencies
+        if (!isRegionBlocked) {
+          toast.error("Chat Error", {
+            description: getErrorDisplayMessage(chunk),
+          });
+        }
+        break;
+
+      case "usage":
+        // TODO: Handle usage for display
+        break;
+
+      default:
+        console.warn("Unknown stream chunk type:", chunk);
+    }
+  };
+}

autogpt_platform/frontend/src/components/contextual/Chat/components/ChatContainer/handlers.ts

@@ -0,0 +1,362 @@
+import type { Dispatch, MutableRefObject, SetStateAction } from "react";
+import { StreamChunk } from "../../useChatStream";
+import type { ChatMessageData } from "../ChatMessage/useChatMessage";
+import {
+  extractCredentialsNeeded,
+  extractInputsNeeded,
+  parseToolResponse,
+} from "./helpers";
+
+function isToolCallMessage(
+  message: ChatMessageData,
+): message is Extract<ChatMessageData, { type: "tool_call" }> {
+  return message.type === "tool_call";
+}
+
+export interface HandlerDependencies {
+  setHasTextChunks: Dispatch<SetStateAction<boolean>>;
+  setStreamingChunks: Dispatch<SetStateAction<string[]>>;
+  streamingChunksRef: MutableRefObject<string[]>;
+  hasResponseRef: MutableRefObject<boolean>;
+  textFinalizedRef: MutableRefObject<boolean>;
+  streamEndedRef: MutableRefObject<boolean>;
+  setMessages: Dispatch<SetStateAction<ChatMessageData[]>>;
+  setIsStreamingInitiated: Dispatch<SetStateAction<boolean>>;
+  setIsRegionBlockedModalOpen: Dispatch<SetStateAction<boolean>>;
+  sessionId: string;
+  onOperationStarted?: () => void;
+  onActiveTaskStarted?: (taskInfo: {
+    taskId: string;
+    operationId: string;
+    toolName: string;
+    toolCallId: string;
+  }) => void;
+}
+
+export function isRegionBlockedError(chunk: StreamChunk): boolean {
+  if (chunk.code === "MODEL_NOT_AVAILABLE_REGION") return true;
+  const message = chunk.message || chunk.content;
+  if (typeof message !== "string") return false;
+  return message.toLowerCase().includes("not available in your region");
+}
+
+export function getUserFriendlyErrorMessage(
+  code: string | undefined,
+): string | undefined {
+  switch (code) {
+    case "TASK_EXPIRED":
+      return "This operation has expired. Please try again.";
+    case "TASK_NOT_FOUND":
+      return "Could not find the requested operation.";
+    case "ACCESS_DENIED":
+      return "You do not have access to this operation.";
+    case "QUEUE_OVERFLOW":
+      return "Connection was interrupted. Please refresh to continue.";
+    case "MODEL_NOT_AVAILABLE_REGION":
+      return "This model is not available in your region.";
+    default:
+      return undefined;
+  }
+}
+
+export function handleTextChunk(chunk: StreamChunk, deps: HandlerDependencies) {
+  if (!chunk.content) return;
+  deps.setHasTextChunks(true);
+  deps.setStreamingChunks((prev) => {
+    const updated = [...prev, chunk.content!];
+    deps.streamingChunksRef.current = updated;
+    return updated;
+  });
+}
+
+export function handleTextEnded(
+  _chunk: StreamChunk,
+  deps: HandlerDependencies,
+) {
+  if (deps.textFinalizedRef.current) {
+    return;
+  }
+
+  const completedText = deps.streamingChunksRef.current.join("");
+  if (completedText.trim()) {
+    deps.textFinalizedRef.current = true;
+
+    deps.setMessages((prev) => {
+      const exists = prev.some(
+        (msg) =>
+          msg.type === "message" &&
+          msg.role === "assistant" &&
+          msg.content === completedText,
+      );
+      if (exists) return prev;
+
+      const assistantMessage: ChatMessageData = {
+        type: "message",
+        role: "assistant",
+        content: completedText,
+        timestamp: new Date(),
+      };
+      return [...prev, assistantMessage];
+    });
+  }
+  deps.setStreamingChunks([]);
+  deps.streamingChunksRef.current = [];
+  deps.setHasTextChunks(false);
+}
+
+export function handleToolCallStart(
+  chunk: StreamChunk,
+  deps: HandlerDependencies,
+) {
+  // Use deterministic fallback instead of Date.now() to ensure same ID on replay
+  const toolId =
+    chunk.tool_id ||
+    `tool-${deps.sessionId}-${chunk.idx ?? "unknown"}-${chunk.tool_name || "unknown"}`;
+
+  const toolCallMessage: Extract<ChatMessageData, { type: "tool_call" }> = {
+    type: "tool_call",
+    toolId,
+    toolName: chunk.tool_name || "Executing",
+    arguments: chunk.arguments || {},
+    timestamp: new Date(),
+  };
+
+  function updateToolCallMessages(prev: ChatMessageData[]) {
+    const existingIndex = prev.findIndex(function findToolCallIndex(msg) {
+      return isToolCallMessage(msg) && msg.toolId === toolCallMessage.toolId;
+    });
+    if (existingIndex === -1) {
+      return [...prev, toolCallMessage];
+    }
+    const nextMessages = [...prev];
+    const existing = nextMessages[existingIndex];
+    if (!isToolCallMessage(existing)) return prev;
+    const nextArguments =
+      toolCallMessage.arguments &&
+      Object.keys(toolCallMessage.arguments).length > 0
+        ? toolCallMessage.arguments
+        : existing.arguments;
+    nextMessages[existingIndex] = {
+      ...existing,
+      toolName: toolCallMessage.toolName || existing.toolName,
+      arguments: nextArguments,
+      timestamp: toolCallMessage.timestamp,
+    };
+    return nextMessages;
+  }
+
+  deps.setMessages(updateToolCallMessages);
+}
+
+const TOOL_RESPONSE_TYPES = new Set([
+  "tool_response",
+  "operation_started",
+  "operation_pending",
+  "operation_in_progress",
+  "execution_started",
+  "agent_carousel",
+  "clarification_needed",
+]);
+
+function hasResponseForTool(
+  messages: ChatMessageData[],
+  toolId: string,
+): boolean {
+  return messages.some((msg) => {
+    if (!TOOL_RESPONSE_TYPES.has(msg.type)) return false;
+    const msgToolId =
+      (msg as { toolId?: string }).toolId ||
+      (msg as { toolCallId?: string }).toolCallId;
+    return msgToolId === toolId;
+  });
+}
+
+export function handleToolResponse(
+  chunk: StreamChunk,
+  deps: HandlerDependencies,
+) {
+  let toolName = chunk.tool_name || "unknown";
+  if (!chunk.tool_name || chunk.tool_name === "unknown") {
+    deps.setMessages((prev) => {
+      const matchingToolCall = [...prev]
+        .reverse()
+        .find(
+          (msg) => msg.type === "tool_call" && msg.toolId === chunk.tool_id,
+        );
+      if (matchingToolCall && matchingToolCall.type === "tool_call") {
+        toolName = matchingToolCall.toolName;
+      }
+      return prev;
+    });
+  }
+  const responseMessage = parseToolResponse(
+    chunk.result!,
+    chunk.tool_id!,
+    toolName,
+    new Date(),
+  );
+  if (!responseMessage) {
+    let parsedResult: Record<string, unknown> | null = null;
+    try {
+      parsedResult =
+        typeof chunk.result === "string"
+          ? JSON.parse(chunk.result)
+          : (chunk.result as Record<string, unknown>);
+    } catch {
+      parsedResult = null;
+    }
+    if (
+      (chunk.tool_name === "run_agent" || chunk.tool_name === "run_block") &&
+      chunk.success &&
+      parsedResult?.type === "setup_requirements"
+    ) {
+      const inputsMessage = extractInputsNeeded(parsedResult, chunk.tool_name);
+      if (inputsMessage) {
+        deps.setMessages((prev) => {
+          // Check for duplicate inputs_needed message
+          const exists = prev.some((msg) => msg.type === "inputs_needed");
+          if (exists) return prev;
+          return [...prev, inputsMessage];
+        });
+      }
+      const credentialsMessage = extractCredentialsNeeded(
+        parsedResult,
+        chunk.tool_name,
+      );
+      if (credentialsMessage) {
+        deps.setMessages((prev) => {
+          // Check for duplicate credentials_needed message
+          const exists = prev.some((msg) => msg.type === "credentials_needed");
+          if (exists) return prev;
+          return [...prev, credentialsMessage];
+        });
+      }
+    }
+    return;
+  }
+  if (responseMessage.type === "operation_started") {
+    deps.onOperationStarted?.();
+    const taskId = (responseMessage as { taskId?: string }).taskId;
+    if (taskId && deps.onActiveTaskStarted) {
+      deps.onActiveTaskStarted({
+        taskId,
+        operationId:
+          (responseMessage as { operationId?: string }).operationId || "",
+        toolName: (responseMessage as { toolName?: string }).toolName || "",
+        toolCallId: (responseMessage as { toolId?: string }).toolId || "",
+      });
+    }
+  }
+
+  deps.setMessages((prev) => {
+    const toolCallIndex = prev.findIndex(
+      (msg) => msg.type === "tool_call" && msg.toolId === chunk.tool_id,
+    );
+    if (hasResponseForTool(prev, chunk.tool_id!)) {
+      return prev;
+    }
+    if (toolCallIndex !== -1) {
+      const newMessages = [...prev];
+      newMessages.splice(toolCallIndex + 1, 0, responseMessage);
+      return newMessages;
+    }
+    return [...prev, responseMessage];
+  });
+}
+
+export function handleLoginNeeded(
+  chunk: StreamChunk,
+  deps: HandlerDependencies,
+) {
+  const loginNeededMessage: ChatMessageData = {
+    type: "login_needed",
+    toolName: "login_needed",
+    message: chunk.message || "Please sign in to use chat and agent features",
+    sessionId: chunk.session_id || deps.sessionId,
+    agentInfo: chunk.agent_info,
+    timestamp: new Date(),
+  };
+  deps.setMessages((prev) => {
+    // Check for duplicate login_needed message
+    const exists = prev.some((msg) => msg.type === "login_needed");
+    if (exists) return prev;
+    return [...prev, loginNeededMessage];
+  });
+}
+
+export function handleStreamEnd(
+  _chunk: StreamChunk,
+  deps: HandlerDependencies,
+) {
+  if (deps.streamEndedRef.current) {
+    return;
+  }
+  deps.streamEndedRef.current = true;
+
+  const completedContent = deps.streamingChunksRef.current.join("");
+  if (!completedContent.trim() && !deps.hasResponseRef.current) {
+    deps.setMessages((prev) => {
+      const exists = prev.some(
+        (msg) =>
+          msg.type === "message" &&
+          msg.role === "assistant" &&
+          msg.content === "No response received. Please try again.",
+      );
+      if (exists) return prev;
+      return [
+        ...prev,
+        {
+          type: "message",
+          role: "assistant",
+          content: "No response received. Please try again.",
+          timestamp: new Date(),
+        },
+      ];
+    });
+  }
+  if (completedContent.trim() && !deps.textFinalizedRef.current) {
+    deps.textFinalizedRef.current = true;
+
+    deps.setMessages((prev) => {
+      const exists = prev.some(
+        (msg) =>
+          msg.type === "message" &&
+          msg.role === "assistant" &&
+          msg.content === completedContent,
+      );
+      if (exists) return prev;
+
+      const assistantMessage: ChatMessageData = {
+        type: "message",
+        role: "assistant",
+        content: completedContent,
+        timestamp: new Date(),
+      };
+      return [...prev, assistantMessage];
+    });
+  }
+  deps.setStreamingChunks([]);
+  deps.streamingChunksRef.current = [];
+  deps.setHasTextChunks(false);
+  deps.setIsStreamingInitiated(false);
+}
+
+export function handleError(chunk: StreamChunk, deps: HandlerDependencies) {
+  if (isRegionBlockedError(chunk)) {
+    deps.setIsRegionBlockedModalOpen(true);
+  }
+  deps.setIsStreamingInitiated(false);
+  deps.setHasTextChunks(false);
+  deps.setStreamingChunks([]);
+  deps.streamingChunksRef.current = [];
+  deps.textFinalizedRef.current = false;
+  deps.streamEndedRef.current = true;
+}
+
+export function getErrorDisplayMessage(chunk: StreamChunk): string {
+  const friendlyMessage = getUserFriendlyErrorMessage(chunk.code);
+  if (friendlyMessage) {
+    return friendlyMessage;
+  }
+  return chunk.message || chunk.content || "An error occurred";
+}

autogpt_platform/frontend/src/components/contextual/Chat/components/ChatContainer/helpers.ts

@@ -0,0 +1,607 @@
+import type { SessionDetailResponse } from "@/app/api/__generated__/models/sessionDetailResponse";
+import { SessionKey, sessionStorage } from "@/services/storage/session-storage";
+import type { ToolResult } from "@/types/chat";
+import type { ChatMessageData } from "../ChatMessage/useChatMessage";
+
+export function processInitialMessages(
+  initialMessages: SessionDetailResponse["messages"],
+): ChatMessageData[] {
+  const processedMessages: ChatMessageData[] = [];
+  const toolCallMap = new Map<string, string>();
+
+  for (const msg of initialMessages) {
+    if (!isValidMessage(msg)) {
+      console.warn("Invalid message structure from backend:", msg);
+      continue;
+    }
+
+    let content = String(msg.content || "");
+    const role = String(msg.role || "assistant").toLowerCase();
+    const toolCalls = msg.tool_calls;
+    const timestamp = msg.timestamp
+      ? new Date(msg.timestamp as string)
+      : undefined;
+
+    if (role === "user") {
+      content = removePageContext(content);
+      if (!content.trim()) continue;
+      processedMessages.push({
+        type: "message",
+        role: "user",
+        content,
+        timestamp,
+      });
+      continue;
+    }
+
+    if (role === "assistant") {
+      content = content
+        .replace(/<thinking>[\s\S]*?<\/thinking>/gi, "")
+        .replace(/<internal_reasoning>[\s\S]*?<\/internal_reasoning>/gi, "")
+        .trim();
+
+      if (toolCalls && isToolCallArray(toolCalls) && toolCalls.length > 0) {
+        for (const toolCall of toolCalls) {
+          const toolName = toolCall.function.name;
+          const toolId = toolCall.id;
+          toolCallMap.set(toolId, toolName);
+
+          try {
+            const args = JSON.parse(toolCall.function.arguments || "{}");
+            processedMessages.push({
+              type: "tool_call",
+              toolId,
+              toolName,
+              arguments: args,
+              timestamp,
+            });
+          } catch (err) {
+            console.warn("Failed to parse tool call arguments:", err);
+            processedMessages.push({
+              type: "tool_call",
+              toolId,
+              toolName,
+              arguments: {},
+              timestamp,
+            });
+          }
+        }
+        if (content.trim()) {
+          processedMessages.push({
+            type: "message",
+            role: "assistant",
+            content,
+            timestamp,
+          });
+        }
+      } else if (content.trim()) {
+        processedMessages.push({
+          type: "message",
+          role: "assistant",
+          content,
+          timestamp,
+        });
+      }
+      continue;
+    }
+
+    if (role === "tool") {
+      const toolCallId = (msg.tool_call_id as string) || "";
+      const toolName = toolCallMap.get(toolCallId) || "unknown";
+      const toolResponse = parseToolResponse(
+        content,
+        toolCallId,
+        toolName,
+        timestamp,
+      );
+      if (toolResponse) {
+        processedMessages.push(toolResponse);
+      }
+      continue;
+    }
+
+    if (content.trim()) {
+      processedMessages.push({
+        type: "message",
+        role: role as "user" | "assistant" | "system",
+        content,
+        timestamp,
+      });
+    }
+  }
+
+  return processedMessages;
+}
+
+export function hasSentInitialPrompt(sessionId: string): boolean {
+  try {
+    const sent = JSON.parse(
+      sessionStorage.get(SessionKey.CHAT_SENT_INITIAL_PROMPTS) || "{}",
+    );
+    return sent[sessionId] === true;
+  } catch {
+    return false;
+  }
+}
+
+export function markInitialPromptSent(sessionId: string): void {
+  try {
+    const sent = JSON.parse(
+      sessionStorage.get(SessionKey.CHAT_SENT_INITIAL_PROMPTS) || "{}",
+    );
+    sent[sessionId] = true;
+    sessionStorage.set(
+      SessionKey.CHAT_SENT_INITIAL_PROMPTS,
+      JSON.stringify(sent),
+    );
+  } catch {
+    // Ignore storage errors
+  }
+}
+
+export function removePageContext(content: string): string {
+  // Remove "Page URL: ..." pattern at start of line (case insensitive, handles various formats)
+  let cleaned = content.replace(/^\s*Page URL:\s*[^\n\r]*/gim, "");
+
+  // Find "User Message:" marker at start of line to preserve the actual user message
+  const userMessageMatch = cleaned.match(/^\s*User Message:\s*([\s\S]*)$/im);
+  if (userMessageMatch) {
+    // If we found "User Message:", extract everything after it
+    cleaned = userMessageMatch[1];
+  } else {
+    // If no "User Message:" marker, remove "Page Content:" and everything after it at start of line
+    cleaned = cleaned.replace(/^\s*Page Content:[\s\S]*$/gim, "");
+  }
+
+  // Clean up extra whitespace and newlines
+  cleaned = cleaned.replace(/\n\s*\n\s*\n+/g, "\n\n").trim();
+  return cleaned;
+}
+
+export function createUserMessage(content: string): ChatMessageData {
+  return {
+    type: "message",
+    role: "user",
+    content,
+    timestamp: new Date(),
+  };
+}
+
+export function filterAuthMessages(
+  messages: ChatMessageData[],
+): ChatMessageData[] {
+  return messages.filter(
+    (msg) => msg.type !== "credentials_needed" && msg.type !== "login_needed",
+  );
+}
+
+export function isValidMessage(msg: unknown): msg is Record<string, unknown> {
+  if (typeof msg !== "object" || msg === null) {
+    return false;
+  }
+  const m = msg as Record<string, unknown>;
+  if (typeof m.role !== "string") {
+    return false;
+  }
+  if (m.content !== undefined && typeof m.content !== "string") {
+    return false;
+  }
+  return true;
+}
+
+export function isToolCallArray(value: unknown): value is Array<{
+  id: string;
+  type: string;
+  function: { name: string; arguments: string };
+}> {
+  if (!Array.isArray(value)) {
+    return false;
+  }
+  return value.every(
+    (item) =>
+      typeof item === "object" &&
+      item !== null &&
+      "id" in item &&
+      typeof item.id === "string" &&
+      "type" in item &&
+      typeof item.type === "string" &&
+      "function" in item &&
+      typeof item.function === "object" &&
+      item.function !== null &&
+      "name" in item.function &&
+      typeof item.function.name === "string" &&
+      "arguments" in item.function &&
+      typeof item.function.arguments === "string",
+  );
+}
+
+export function isAgentArray(value: unknown): value is Array<{
+  id: string;
+  name: string;
+  description: string;
+  version?: number;
+  image_url?: string;
+}> {
+  if (!Array.isArray(value)) {
+    return false;
+  }
+  return value.every(
+    (item) =>
+      typeof item === "object" &&
+      item !== null &&
+      "id" in item &&
+      typeof item.id === "string" &&
+      "name" in item &&
+      typeof item.name === "string" &&
+      "description" in item &&
+      typeof item.description === "string" &&
+      (!("version" in item) || typeof item.version === "number") &&
+      (!("image_url" in item) || typeof item.image_url === "string"),
+  );
+}
+
+export function extractJsonFromErrorMessage(
+  message: string,
+): Record<string, unknown> | null {
+  try {
+    const start = message.indexOf("{");
+    if (start === -1) {
+      return null;
+    }
+    let depth = 0;
+    let end = -1;
+    for (let i = start; i < message.length; i++) {
+      const ch = message[i];
+      if (ch === "{") {
+        depth++;
+      } else if (ch === "}") {
+        depth--;
+        if (depth === 0) {
+          end = i;
+          break;
+        }
+      }
+    }
+    if (end === -1) {
+      return null;
+    }
+    const jsonStr = message.slice(start, end + 1);
+    return JSON.parse(jsonStr) as Record<string, unknown>;
+  } catch {
+    return null;
+  }
+}
+
+export function parseToolResponse(
+  result: ToolResult,
+  toolId: string,
+  toolName: string,
+  timestamp?: Date,
+): ChatMessageData | null {
+  let parsedResult: Record<string, unknown> | null = null;
+  try {
+    parsedResult =
+      typeof result === "string"
+        ? JSON.parse(result)
+        : (result as Record<string, unknown>);
+  } catch {
+    parsedResult = null;
+  }
+  if (parsedResult && typeof parsedResult === "object") {
+    const responseType = parsedResult.type as string | undefined;
+    if (responseType === "no_results") {
+      return {
+        type: "tool_response",
+        toolId,
+        toolName,
+        result: (parsedResult.message as string) || "No results found",
+        success: true,
+        timestamp: timestamp || new Date(),
+      };
+    }
+    if (responseType === "agent_carousel") {
+      const agentsData = parsedResult.agents;
+      if (isAgentArray(agentsData)) {
+        return {
+          type: "agent_carousel",
+          toolId,
+          toolName: "agent_carousel",
+          agents: agentsData,
+          totalCount: parsedResult.total_count as number | undefined,
+          timestamp: timestamp || new Date(),
+        };
+      } else {
+        console.warn("Invalid agents array in agent_carousel response");
+      }
+    }
+    if (responseType === "execution_started") {
+      return {
+        type: "execution_started",
+        toolId,
+        toolName: "execution_started",
+        executionId: (parsedResult.execution_id as string) || "",
+        agentName: (parsedResult.graph_name as string) || undefined,
+        message: parsedResult.message as string | undefined,
+        libraryAgentLink: parsedResult.library_agent_link as string | undefined,
+        timestamp: timestamp || new Date(),
+      };
+    }
+    if (responseType === "clarification_needed") {
+      return {
+        type: "clarification_needed",
+        toolName,
+        questions:
+          (parsedResult.questions as Array<{
+            question: string;
+            keyword: string;
+            example?: string;
+          }>) || [],
+        message:
+          (parsedResult.message as string) ||
+          "I need more information to proceed.",
+        sessionId: (parsedResult.session_id as string) || "",
+        timestamp: timestamp || new Date(),
+      };
+    }
+    if (responseType === "operation_started") {
+      return {
+        type: "operation_started",
+        toolName: (parsedResult.tool_name as string) || toolName,
+        toolId,
+        operationId: (parsedResult.operation_id as string) || "",
+        taskId: (parsedResult.task_id as string) || undefined, // For SSE reconnection
+        message:
+          (parsedResult.message as string) ||
+          "Operation started. You can close this tab.",
+        timestamp: timestamp || new Date(),
+      };
+    }
+    if (responseType === "operation_pending") {
+      return {
+        type: "operation_pending",
+        toolName: (parsedResult.tool_name as string) || toolName,
+        toolId,
+        operationId: (parsedResult.operation_id as string) || "",
+        message:
+          (parsedResult.message as string) ||
+          "Operation in progress. Please wait...",
+        timestamp: timestamp || new Date(),
+      };
+    }
+    if (responseType === "operation_in_progress") {
+      return {
+        type: "operation_in_progress",
+        toolName: (parsedResult.tool_name as string) || toolName,
+        toolCallId: (parsedResult.tool_call_id as string) || toolId,
+        message:
+          (parsedResult.message as string) ||
+          "Operation already in progress. Please wait...",
+        timestamp: timestamp || new Date(),
+      };
+    }
+    if (responseType === "need_login") {
+      return {
+        type: "login_needed",
+        toolName: "login_needed",
+        message:
+          (parsedResult.message as string) ||
+          "Please sign in to use chat and agent features",
+        sessionId: (parsedResult.session_id as string) || "",
+        agentInfo: parsedResult.agent_info as
+          | {
+              graph_id: string;
+              name: string;
+              trigger_type: string;
+            }
+          | undefined,
+        timestamp: timestamp || new Date(),
+      };
+    }
+    if (responseType === "setup_requirements") {
+      return null;
+    }
+    if (responseType === "understanding_updated") {
+      return {
+        type: "tool_response",
+        toolId,
+        toolName,
+        result: (parsedResult || result) as ToolResult,
+        success: true,
+        timestamp: timestamp || new Date(),
+      };
+    }
+  }
+  return {
+    type: "tool_response",
+    toolId,
+    toolName,
+    result: parsedResult ? (parsedResult as ToolResult) : result,
+    success: true,
+    timestamp: timestamp || new Date(),
+  };
+}
+
+export function isUserReadiness(
+  value: unknown,
+): value is { missing_credentials?: Record<string, unknown> } {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    (!("missing_credentials" in value) ||
+      typeof (value as any).missing_credentials === "object")
+  );
+}
+
+export function isMissingCredentials(
+  value: unknown,
+): value is Record<string, Record<string, unknown>> {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  return Object.values(value).every((v) => typeof v === "object" && v !== null);
+}
+
+export function isSetupInfo(value: unknown): value is {
+  user_readiness?: Record<string, unknown>;
+  agent_name?: string;
+} {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    (!("user_readiness" in value) ||
+      typeof (value as any).user_readiness === "object") &&
+    (!("agent_name" in value) || typeof (value as any).agent_name === "string")
+  );
+}
+
+export function extractCredentialsNeeded(
+  parsedResult: Record<string, unknown>,
+  toolName: string = "run_agent",
+): ChatMessageData | null {
+  try {
+    const setupInfo = parsedResult?.setup_info as
+      | Record<string, unknown>
+      | undefined;
+    const userReadiness = setupInfo?.user_readiness as
+      | Record<string, unknown>
+      | undefined;
+    const missingCreds = userReadiness?.missing_credentials as
+      | Record<string, Record<string, unknown>>
+      | undefined;
+    if (missingCreds && Object.keys(missingCreds).length > 0) {
+      const agentName = (setupInfo?.agent_name as string) || "this block";
+      const credentials = Object.values(missingCreds).map((credInfo) => {
+        // Normalize to array at boundary - prefer 'types' array, fall back to single 'type'
+        const typesArray = credInfo.types as
+          | Array<"api_key" | "oauth2" | "user_password" | "host_scoped">
+          | undefined;
+        const singleType =
+          (credInfo.type as
+            | "api_key"
+            | "oauth2"
+            | "user_password"
+            | "host_scoped"
+            | undefined) || "api_key";
+        const credentialTypes =
+          typesArray && typesArray.length > 0 ? typesArray : [singleType];
+
+        return {
+          provider: (credInfo.provider as string) || "unknown",
+          providerName:
+            (credInfo.provider_name as string) ||
+            (credInfo.provider as string) ||
+            "Unknown Provider",
+          credentialTypes,
+          title:
+            (credInfo.title as string) ||
+            `${(credInfo.provider_name as string) || (credInfo.provider as string)} credentials`,
+          scopes: credInfo.scopes as string[] | undefined,
+        };
+      });
+      return {
+        type: "credentials_needed",
+        toolName,
+        credentials,
+        message: `To run ${agentName}, you need to add ${credentials.length === 1 ? "credentials" : `${credentials.length} credentials`}.`,
+        agentName,
+        timestamp: new Date(),
+      };
+    }
+    return null;
+  } catch (err) {
+    console.error("Failed to extract credentials from setup info:", err);
+    return null;
+  }
+}
+
+export function extractInputsNeeded(
+  parsedResult: Record<string, unknown>,
+  toolName: string = "run_agent",
+): ChatMessageData | null {
+  try {
+    const setupInfo = parsedResult?.setup_info as
+      | Record<string, unknown>
+      | undefined;
+    const requirements = setupInfo?.requirements as
+      | Record<string, unknown>
+      | undefined;
+    const inputs = requirements?.inputs as
+      | Array<Record<string, unknown>>
+      | undefined;
+    const credentials = requirements?.credentials as
+      | Array<Record<string, unknown>>
+      | undefined;
+
+    if (!inputs || inputs.length === 0) {
+      return null;
+    }
+
+    const agentName = (setupInfo?.agent_name as string) || "this agent";
+    const agentId = parsedResult?.graph_id as string | undefined;
+    const graphVersion = parsedResult?.graph_version as number | undefined;
+
+    const properties: Record<string, any> = {};
+    const requiredProps: string[] = [];
+    inputs.forEach((input) => {
+      const name = input.name as string;
+      if (name) {
+        properties[name] = {
+          title: input.name as string,
+          description: (input.description as string) || "",
+          type: (input.type as string) || "string",
+          default: input.default,
+          enum: input.options,
+          format: input.format,
+        };
+        if ((input.required as boolean) === true) {
+          requiredProps.push(name);
+        }
+      }
+    });
+
+    const inputSchema: Record<string, any> = {
+      type: "object",
+      properties,
+    };
+    if (requiredProps.length > 0) {
+      inputSchema.required = requiredProps;
+    }
+
+    const credentialsSchema: Record<string, any> = {};
+    if (credentials && credentials.length > 0) {
+      credentials.forEach((cred) => {
+        const id = cred.id as string;
+        if (id) {
+          const credentialTypes = Array.isArray(cred.types)
+            ? cred.types
+            : [(cred.type as string) || "api_key"];
+          credentialsSchema[id] = {
+            type: "object",
+            properties: {},
+            credentials_provider: [cred.provider as string],
+            credentials_types: credentialTypes,
+            credentials_scopes: cred.scopes as string[] | undefined,
+          };
+        }
+      });
+    }
+
+    return {
+      type: "inputs_needed",
+      toolName,
+      agentName,
+      agentId,
+      graphVersion,
+      inputSchema,
+      credentialsSchema:
+        Object.keys(credentialsSchema).length > 0
+          ? credentialsSchema
+          : undefined,
+      message: `Please provide the required inputs to run ${agentName}.`,
+      timestamp: new Date(),
+    };
+  } catch (err) {
+    console.error("Failed to extract inputs from setup info:", err);
+    return null;
+  }
+}

autogpt_platform/frontend/src/components/contextual/Chat/components/ChatContainer/useChatContainer.ts

@@ -0,0 +1,517 @@
+import type { SessionDetailResponse } from "@/app/api/__generated__/models/sessionDetailResponse";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { INITIAL_STREAM_ID } from "../../chat-constants";
+import { useChatStore } from "../../chat-store";
+import { toast } from "sonner";
+import { useChatStream } from "../../useChatStream";
+import { usePageContext } from "../../usePageContext";
+import type { ChatMessageData } from "../ChatMessage/useChatMessage";
+import {
+  getToolIdFromMessage,
+  hasToolId,
+  isOperationMessage,
+  type StreamChunk,
+} from "../../chat-types";
+import { createStreamEventDispatcher } from "./createStreamEventDispatcher";
+import {
+  createUserMessage,
+  filterAuthMessages,
+  hasSentInitialPrompt,
+  markInitialPromptSent,
+  processInitialMessages,
+} from "./helpers";
+
+const TOOL_RESULT_TYPES = new Set([
+  "tool_response",
+  "agent_carousel",
+  "execution_started",
+  "clarification_needed",
+]);
+
+// Helper to generate deduplication key for a message
+function getMessageKey(msg: ChatMessageData): string {
+  if (msg.type === "message") {
+    // Don't include timestamp - dedupe by role + content only
+    // This handles the case where local and server timestamps differ
+    // Server messages are authoritative, so duplicates from local state are filtered
+    return `msg:${msg.role}:${msg.content}`;
+  } else if (msg.type === "tool_call") {
+    return `toolcall:${msg.toolId}`;
+  } else if (TOOL_RESULT_TYPES.has(msg.type)) {
+    // Unified key for all tool result types - same toolId with different types
+    // (tool_response vs agent_carousel) should deduplicate to the same key
+    const toolId = getToolIdFromMessage(msg);
+    // If no toolId, fall back to content-based key to avoid empty key collisions
+    if (!toolId) {
+      return `toolresult:content:${JSON.stringify(msg).slice(0, 200)}`;
+    }
+    return `toolresult:${toolId}`;
+  } else if (isOperationMessage(msg)) {
+    const toolId = getToolIdFromMessage(msg) || "";
+    return `op:${toolId}:${msg.toolName}`;
+  } else {
+    return `${msg.type}:${JSON.stringify(msg).slice(0, 100)}`;
+  }
+}
+
+interface Args {
+  sessionId: string | null;
+  initialMessages: SessionDetailResponse["messages"];
+  initialPrompt?: string;
+  onOperationStarted?: () => void;
+  /** Active stream info from the server for reconnection */
+  activeStream?: {
+    taskId: string;
+    lastMessageId: string;
+    operationId: string;
+    toolName: string;
+  };
+}
+
+export function useChatContainer({
+  sessionId,
+  initialMessages,
+  initialPrompt,
+  onOperationStarted,
+  activeStream,
+}: Args) {
+  const [messages, setMessages] = useState<ChatMessageData[]>([]);
+  const [streamingChunks, setStreamingChunks] = useState<string[]>([]);
+  const [hasTextChunks, setHasTextChunks] = useState(false);
+  const [isStreamingInitiated, setIsStreamingInitiated] = useState(false);
+  const [isRegionBlockedModalOpen, setIsRegionBlockedModalOpen] =
+    useState(false);
+  const hasResponseRef = useRef(false);
+  const streamingChunksRef = useRef<string[]>([]);
+  const textFinalizedRef = useRef(false);
+  const streamEndedRef = useRef(false);
+  const previousSessionIdRef = useRef<string | null>(null);
+  const {
+    error,
+    sendMessage: sendStreamMessage,
+    stopStreaming,
+  } = useChatStream();
+  const activeStreams = useChatStore((s) => s.activeStreams);
+  const subscribeToStream = useChatStore((s) => s.subscribeToStream);
+  const setActiveTask = useChatStore((s) => s.setActiveTask);
+  const getActiveTask = useChatStore((s) => s.getActiveTask);
+  const reconnectToTask = useChatStore((s) => s.reconnectToTask);
+  const isStreaming = isStreamingInitiated || hasTextChunks;
+  // Track whether we've already connected to this activeStream to avoid duplicate connections
+  const connectedActiveStreamRef = useRef<string | null>(null);
+  // Track if component is mounted to prevent state updates after unmount
+  const isMountedRef = useRef(true);
+  // Track current dispatcher to prevent multiple dispatchers from adding messages
+  const currentDispatcherIdRef = useRef(0);
+
+  // Set mounted flag - reset on every mount, cleanup on unmount
+  useEffect(function trackMountedState() {
+    isMountedRef.current = true;
+    return function cleanup() {
+      isMountedRef.current = false;
+    };
+  }, []);
+
+  // Callback to store active task info for SSE reconnection
+  function handleActiveTaskStarted(taskInfo: {
+    taskId: string;
+    operationId: string;
+    toolName: string;
+    toolCallId: string;
+  }) {
+    if (!sessionId) return;
+    setActiveTask(sessionId, {
+      taskId: taskInfo.taskId,
+      operationId: taskInfo.operationId,
+      toolName: taskInfo.toolName,
+      lastMessageId: INITIAL_STREAM_ID,
+    });
+  }
+
+  // Create dispatcher for stream events - stable reference for current sessionId
+  // Each dispatcher gets a unique ID to prevent stale dispatchers from updating state
+  function createDispatcher() {
+    if (!sessionId) return () => {};
+    // Increment dispatcher ID - only the most recent dispatcher should update state
+    const dispatcherId = ++currentDispatcherIdRef.current;
+
+    const baseDispatcher = createStreamEventDispatcher({
+      setHasTextChunks,
+      setStreamingChunks,
+      streamingChunksRef,
+      hasResponseRef,
+      textFinalizedRef,
+      streamEndedRef,
+      setMessages,
+      setIsRegionBlockedModalOpen,
+      sessionId,
+      setIsStreamingInitiated,
+      onOperationStarted,
+      onActiveTaskStarted: handleActiveTaskStarted,
+    });
+
+    // Wrap dispatcher to check if it's still the current one
+    return function guardedDispatcher(chunk: StreamChunk) {
+      // Skip if component unmounted or this is a stale dispatcher
+      if (!isMountedRef.current) {
+        return;
+      }
+      if (dispatcherId !== currentDispatcherIdRef.current) {
+        return;
+      }
+      baseDispatcher(chunk);
+    };
+  }
+
+  useEffect(
+    function handleSessionChange() {
+      const isSessionChange = sessionId !== previousSessionIdRef.current;
+
+      // Handle session change - reset state
+      if (isSessionChange) {
+        const prevSession = previousSessionIdRef.current;
+        if (prevSession) {
+          stopStreaming(prevSession);
+        }
+        previousSessionIdRef.current = sessionId;
+        connectedActiveStreamRef.current = null;
+        setMessages([]);
+        setStreamingChunks([]);
+        streamingChunksRef.current = [];
+        setHasTextChunks(false);
+        setIsStreamingInitiated(false);
+        hasResponseRef.current = false;
+        textFinalizedRef.current = false;
+        streamEndedRef.current = false;
+      }
+
+      if (!sessionId) return;
+
+      // Priority 1: Check if server told us there's an active stream (most authoritative)
+      if (activeStream) {
+        const streamKey = `${sessionId}:${activeStream.taskId}`;
+
+        if (connectedActiveStreamRef.current === streamKey) {
+          return;
+        }
+
+        // Skip if there's already an active stream for this session in the store
+        const existingStream = activeStreams.get(sessionId);
+        if (existingStream && existingStream.status === "streaming") {
+          connectedActiveStreamRef.current = streamKey;
+          return;
+        }
+
+        connectedActiveStreamRef.current = streamKey;
+
+        // Clear all state before reconnection to prevent duplicates
+        // Server's initialMessages is authoritative; local state will be rebuilt from SSE replay
+        setMessages([]);
+        setStreamingChunks([]);
+        streamingChunksRef.current = [];
+        setHasTextChunks(false);
+        textFinalizedRef.current = false;
+        streamEndedRef.current = false;
+        hasResponseRef.current = false;
+
+        setIsStreamingInitiated(true);
+        setActiveTask(sessionId, {
+          taskId: activeStream.taskId,
+          operationId: activeStream.operationId,
+          toolName: activeStream.toolName,
+          lastMessageId: activeStream.lastMessageId,
+        });
+        reconnectToTask(
+          sessionId,
+          activeStream.taskId,
+          activeStream.lastMessageId,
+          createDispatcher(),
+        );
+        // Don't return cleanup here - the guarded dispatcher handles stale events
+        // and the stream will complete naturally. Cleanup would prematurely stop
+        // the stream when effect re-runs due to activeStreams changing.
+        return;
+      }
+
+      // Only check localStorage/in-memory on session change
+      if (!isSessionChange) return;
+
+      // Priority 2: Check localStorage for active task
+      const activeTask = getActiveTask(sessionId);
+      if (activeTask) {
+        // Clear all state before reconnection to prevent duplicates
+        // Server's initialMessages is authoritative; local state will be rebuilt from SSE replay
+        setMessages([]);
+        setStreamingChunks([]);
+        streamingChunksRef.current = [];
+        setHasTextChunks(false);
+        textFinalizedRef.current = false;
+        streamEndedRef.current = false;
+        hasResponseRef.current = false;
+
+        setIsStreamingInitiated(true);
+        reconnectToTask(
+          sessionId,
+          activeTask.taskId,
+          activeTask.lastMessageId,
+          createDispatcher(),
+        );
+        // Don't return cleanup here - the guarded dispatcher handles stale events
+        return;
+      }
+
+      // Priority 3: Check for an in-memory active stream (same-tab scenario)
+      const inMemoryStream = activeStreams.get(sessionId);
+      if (!inMemoryStream || inMemoryStream.status !== "streaming") {
+        return;
+      }
+
+      setIsStreamingInitiated(true);
+      const skipReplay = initialMessages.length > 0;
+      return subscribeToStream(sessionId, createDispatcher(), skipReplay);
+    },
+    [
+      sessionId,
+      stopStreaming,
+      activeStreams,
+      subscribeToStream,
+      onOperationStarted,
+      getActiveTask,
+      reconnectToTask,
+      activeStream,
+      setActiveTask,
+    ],
+  );
+
+  // Collect toolIds from completed tool results in initialMessages
+  // Used to filter out operation messages when their results arrive
+  const completedToolIds = useMemo(() => {
+    const processedInitial = processInitialMessages(initialMessages);
+    const ids = new Set<string>();
+    for (const msg of processedInitial) {
+      if (
+        msg.type === "tool_response" ||
+        msg.type === "agent_carousel" ||
+        msg.type === "execution_started"
+      ) {
+        const toolId = hasToolId(msg) ? msg.toolId : undefined;
+        if (toolId) {
+          ids.add(toolId);
+        }
+      }
+    }
+    return ids;
+  }, [initialMessages]);
+
+  // Clean up local operation messages when their completed results arrive from polling
+  // This effect runs when completedToolIds changes (i.e., when polling brings new results)
+  useEffect(
+    function cleanupCompletedOperations() {
+      if (completedToolIds.size === 0) return;
+
+      setMessages((prev) => {
+        const filtered = prev.filter((msg) => {
+          if (isOperationMessage(msg)) {
+            const toolId = getToolIdFromMessage(msg);
+            if (toolId && completedToolIds.has(toolId)) {
+              return false; // Remove - operation completed
+            }
+          }
+          return true;
+        });
+        // Only update state if something was actually filtered
+        return filtered.length === prev.length ? prev : filtered;
+      });
+    },
+    [completedToolIds],
+  );
+
+  // Combine initial messages from backend with local streaming messages,
+  // Server messages maintain correct order; only append truly new local messages
+  const allMessages = useMemo(() => {
+    const processedInitial = processInitialMessages(initialMessages);
+
+    // Build a set of keys from server messages for deduplication
+    const serverKeys = new Set<string>();
+    for (const msg of processedInitial) {
+      serverKeys.add(getMessageKey(msg));
+    }
+
+    // Filter local messages: remove duplicates and completed operation messages
+    const newLocalMessages = messages.filter((msg) => {
+      // Remove operation messages for completed tools
+      if (isOperationMessage(msg)) {
+        const toolId = getToolIdFromMessage(msg);
+        if (toolId && completedToolIds.has(toolId)) {
+          return false;
+        }
+      }
+      // Remove messages that already exist in server data
+      const key = getMessageKey(msg);
+      return !serverKeys.has(key);
+    });
+
+    // Server messages first (correct order), then new local messages
+    const combined = [...processedInitial, ...newLocalMessages];
+
+    // Post-processing: Remove duplicate assistant messages that can occur during
+    // race conditions (e.g., rapid screen switching during SSE reconnection).
+    // Two assistant messages are considered duplicates if:
+    // - They are both text messages with role "assistant"
+    // - One message's content starts with the other's content (partial vs complete)
+    // - Or they have very similar content (>80% overlap at the start)
+    const deduplicated: ChatMessageData[] = [];
+    for (let i = 0; i < combined.length; i++) {
+      const current = combined[i];
+
+      // Check if this is an assistant text message
+      if (current.type !== "message" || current.role !== "assistant") {
+        deduplicated.push(current);
+        continue;
+      }
+
+      // Look for duplicate assistant messages in the rest of the array
+      let dominated = false;
+      for (let j = 0; j < combined.length; j++) {
+        if (i === j) continue;
+        const other = combined[j];
+        if (other.type !== "message" || other.role !== "assistant") continue;
+
+        const currentContent = current.content || "";
+        const otherContent = other.content || "";
+
+        // Skip empty messages
+        if (!currentContent.trim() || !otherContent.trim()) continue;
+
+        // Check if current is a prefix of other (current is incomplete version)
+        if (
+          otherContent.length > currentContent.length &&
+          otherContent.startsWith(currentContent.slice(0, 100))
+        ) {
+          // Current is a shorter/incomplete version of other - skip it
+          dominated = true;
+          break;
+        }
+
+        // Check if messages are nearly identical (within a small difference)
+        // This catches cases where content differs only slightly
+        const minLen = Math.min(currentContent.length, otherContent.length);
+        const compareLen = Math.min(minLen, 200); // Compare first 200 chars
+        if (
+          compareLen > 50 &&
+          currentContent.slice(0, compareLen) ===
+            otherContent.slice(0, compareLen)
+        ) {
+          // Same prefix - keep the longer one
+          if (otherContent.length > currentContent.length) {
+            dominated = true;
+            break;
+          }
+        }
+      }
+
+      if (!dominated) {
+        deduplicated.push(current);
+      }
+    }
+
+    return deduplicated;
+  }, [initialMessages, messages, completedToolIds]);
+
+  async function sendMessage(
+    content: string,
+    isUserMessage: boolean = true,
+    context?: { url: string; content: string },
+  ) {
+    if (!sessionId) return;
+
+    setIsRegionBlockedModalOpen(false);
+    if (isUserMessage) {
+      const userMessage = createUserMessage(content);
+      setMessages((prev) => [...filterAuthMessages(prev), userMessage]);
+    } else {
+      setMessages((prev) => filterAuthMessages(prev));
+    }
+    setStreamingChunks([]);
+    streamingChunksRef.current = [];
+    setHasTextChunks(false);
+    setIsStreamingInitiated(true);
+    hasResponseRef.current = false;
+    textFinalizedRef.current = false;
+    streamEndedRef.current = false;
+
+    try {
+      await sendStreamMessage(
+        sessionId,
+        content,
+        createDispatcher(),
+        isUserMessage,
+        context,
+      );
+    } catch (err) {
+      setIsStreamingInitiated(false);
+      if (err instanceof Error && err.name === "AbortError") return;
+
+      const errorMessage =
+        err instanceof Error ? err.message : "Failed to send message";
+      toast.error("Failed to send message", {
+        description: errorMessage,
+      });
+    }
+  }
+
+  function handleStopStreaming() {
+    stopStreaming();
+    setStreamingChunks([]);
+    streamingChunksRef.current = [];
+    setHasTextChunks(false);
+    setIsStreamingInitiated(false);
+  }
+
+  const { capturePageContext } = usePageContext();
+  const sendMessageRef = useRef(sendMessage);
+  sendMessageRef.current = sendMessage;
+
+  useEffect(
+    function handleInitialPrompt() {
+      if (!initialPrompt || !sessionId) return;
+      if (initialMessages.length > 0) return;
+      if (hasSentInitialPrompt(sessionId)) return;
+
+      markInitialPromptSent(sessionId);
+      const context = capturePageContext();
+      sendMessageRef.current(initialPrompt, true, context);
+    },
+    [initialPrompt, sessionId, initialMessages.length, capturePageContext],
+  );
+
+  async function sendMessageWithContext(
+    content: string,
+    isUserMessage: boolean = true,
+  ) {
+    const context = capturePageContext();
+    await sendMessage(content, isUserMessage, context);
+  }
+
+  function handleRegionModalOpenChange(open: boolean) {
+    setIsRegionBlockedModalOpen(open);
+  }
+
+  function handleRegionModalClose() {
+    setIsRegionBlockedModalOpen(false);
+  }
+
+  return {
+    messages: allMessages,
+    streamingChunks,
+    isStreaming,
+    error,
+    isRegionBlockedModalOpen,
+    setIsRegionBlockedModalOpen,
+    sendMessageWithContext,
+    handleRegionModalOpenChange,
+    handleRegionModalClose,
+    sendMessage,
+    stopStreaming: handleStopStreaming,
+  };
+}

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

@@ -0,0 +1,151 @@
+import { Text } from "@/components/atoms/Text/Text";
+import { CredentialsInput } from "@/components/contextual/CredentialsInput/CredentialsInput";
+import type { BlockIOCredentialsSubSchema } from "@/lib/autogpt-server-api";
+import { cn } from "@/lib/utils";
+import { CheckIcon, RobotIcon, WarningIcon } from "@phosphor-icons/react";
+import { useEffect, useRef } from "react";
+import { useChatCredentialsSetup } from "./useChatCredentialsSetup";
+
+export interface CredentialInfo {
+  provider: string;
+  providerName: string;
+  credentialTypes: Array<
+    "api_key" | "oauth2" | "user_password" | "host_scoped"
+  >;
+  title: string;
+  scopes?: string[];
+}
+
+interface Props {
+  credentials: CredentialInfo[];
+  agentName?: string;
+  message: string;
+  onAllCredentialsComplete: () => void;
+  onCancel: () => void;
+  className?: string;
+}
+
+function createSchemaFromCredentialInfo(
+  credential: CredentialInfo,
+): BlockIOCredentialsSubSchema {
+  return {
+    type: "object",
+    properties: {},
+    credentials_provider: [credential.provider],
+    credentials_types: credential.credentialTypes,
+    credentials_scopes: credential.scopes,
+    discriminator: undefined,
+    discriminator_mapping: undefined,
+    discriminator_values: undefined,
+  };
+}
+
+export function ChatCredentialsSetup({
+  credentials,
+  agentName: _agentName,
+  message,
+  onAllCredentialsComplete,
+  onCancel: _onCancel,
+}: Props) {
+  const { selectedCredentials, isAllComplete, handleCredentialSelect } =
+    useChatCredentialsSetup(credentials);
+
+  // Track if we've already called completion to prevent double calls
+  const hasCalledCompleteRef = useRef(false);
+
+  // Reset the completion flag when credentials change (new credential setup flow)
+  useEffect(
+    function resetCompletionFlag() {
+      hasCalledCompleteRef.current = false;
+    },
+    [credentials],
+  );
+
+  // Auto-call completion when all credentials are configured
+  useEffect(
+    function autoCompleteWhenReady() {
+      if (isAllComplete && !hasCalledCompleteRef.current) {
+        hasCalledCompleteRef.current = true;
+        onAllCredentialsComplete();
+      }
+    },
+    [isAllComplete, onAllCredentialsComplete],
+  );
+
+  return (
+    <div className="group relative flex w-full justify-start gap-3 px-4 py-3">
+      <div className="flex w-full max-w-3xl gap-3">
+        <div className="flex-shrink-0">
+          <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-indigo-500">
+            <RobotIcon className="h-4 w-4 text-indigo-50" />
+          </div>
+        </div>
+
+        <div className="flex min-w-0 flex-1 flex-col">
+          <div className="group relative min-w-20 overflow-hidden rounded-xl border border-slate-100 bg-slate-50/20 px-6 py-2.5 text-sm leading-relaxed backdrop-blur-xl">
+            <div className="absolute inset-0 bg-gradient-to-br from-slate-200/20 via-slate-300/10 to-transparent" />
+            <div className="relative z-10 space-y-3 text-slate-900">
+              <div>
+                <Text variant="h4" className="mb-1 text-slate-900">
+                  Credentials Required
+                </Text>
+                <Text variant="small" className="text-slate-600">
+                  {message}
+                </Text>
+              </div>
+
+              <div className="space-y-3">
+                {credentials.map((cred, index) => {
+                  const schema = createSchemaFromCredentialInfo(cred);
+                  const isSelected = !!selectedCredentials[cred.provider];
+
+                  return (
+                    <div
+                      key={`${cred.provider}-${index}`}
+                      className={cn(
+                        "relative rounded-lg border p-3",
+                        isSelected
+                          ? "border-green-500 bg-green-50/50"
+                          : "border-slate-200 bg-white/50",
+                      )}
+                    >
+                      <div className="mb-2 flex items-center gap-2">
+                        {isSelected ? (
+                          <CheckIcon
+                            size={16}
+                            className="text-green-500"
+                            weight="bold"
+                          />
+                        ) : (
+                          <WarningIcon
+                            size={16}
+                            className="text-slate-500"
+                            weight="bold"
+                          />
+                        )}
+                        <Text
+                          variant="small"
+                          className="font-semibold text-slate-900"
+                        >
+                          {cred.providerName}
+                        </Text>
+                      </div>
+
+                      <CredentialsInput
+                        schema={schema}
+                        selectedCredentials={selectedCredentials[cred.provider]}
+                        onSelectCredentials={(credMeta) =>
+                          handleCredentialSelect(cred.provider, credMeta)
+                        }
+                      />
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

autogpt_platform/frontend/src/components/contextual/Chat/components/ChatCredentialsSetup/useChatCredentialsSetup.ts

@@ -0,0 +1,36 @@
+import { useState, useMemo } from "react";
+import type { CredentialInfo } from "./ChatCredentialsSetup";
+import type { CredentialsMetaInput } from "@/lib/autogpt-server-api";
+
+export function useChatCredentialsSetup(credentials: CredentialInfo[]) {
+  const [selectedCredentials, setSelectedCredentials] = useState<
+    Record<string, CredentialsMetaInput>
+  >({});
+
+  // Check if all credentials are configured
+  const isAllComplete = useMemo(
+    function checkAllComplete() {
+      if (credentials.length === 0) return false;
+      return credentials.every((cred) => selectedCredentials[cred.provider]);
+    },
+    [credentials, selectedCredentials],
+  );
+
+  function handleCredentialSelect(
+    provider: string,
+    credential?: CredentialsMetaInput,
+  ) {
+    if (credential) {
+      setSelectedCredentials((prev) => ({
+        ...prev,
+        [provider]: credential,
+      }));
+    }
+  }
+
+  return {
+    selectedCredentials,
+    isAllComplete,
+    handleCredentialSelect,
+  };
+}

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

@@ -0,0 +1,30 @@
+import React from "react";
+import { ErrorCard } from "@/components/molecules/ErrorCard/ErrorCard";
+import { cn } from "@/lib/utils";
+
+export interface ChatErrorStateProps {
+  error: Error;
+  onRetry?: () => void;
+  className?: string;
+}
+
+export function ChatErrorState({
+  error,
+  onRetry,
+  className,
+}: ChatErrorStateProps) {
+  return (
+    <div
+      className={cn("flex flex-1 items-center justify-center p-6", className)}
+    >
+      <ErrorCard
+        responseError={{
+          message: error.message,
+        }}
+        context="chat session"
+        onRetry={onRetry}
+        className="max-w-md"
+      />
+    </div>
+  );
+}