chore(deps): bump peter-evans/create-pull-request from 7 to 8

Bumps [peter-evans/create-pull-request](https://github.com/peter-evans/create-pull-request) from 7 to 8.
- [Release notes](https://github.com/peter-evans/create-pull-request/releases)
- [Commits](https://github.com/peter-evans/create-pull-request/compare/v7...v8)

---
updated-dependencies:
- dependency-name: peter-evans/create-pull-request
  dependency-version: '8'
  dependency-type: direct:production
  update-type: version-update:semver-major
...

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

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

@@ -49,7 +49,7 @@ jobs:
 
       - name: Create PR ${{ env.BUILD_BRANCH }} -> ${{ github.ref_name }}
         if: github.event_name == 'push'
-        uses: peter-evans/create-pull-request@v7
+        uses: peter-evans/create-pull-request@v8
         with:
           add-paths: classic/frontend/build/web
           base: ${{ github.ref_name }}

AGENTS.md

@@ -16,20 +16,6 @@ See `docs/content/platform/getting-started.md` for setup instructions.
 - Format Python code with `poetry run format`.
 - Format frontend code using `pnpm format`.
 
-## Frontend-specific guidelines
-
-**When working on files in `autogpt_platform/frontend/`, always read and follow the conventions in `autogpt_platform/frontend/CONTRIBUTING.md`.**
-
-Key frontend conventions:
-- Component props should be `interface Props { ... }` (not exported) unless the interface needs to be used outside the component
-- Separate render logic from business logic (component.tsx + useComponent.ts + helpers.ts)
-- Colocate state when possible and avoid create large components, use sub-components ( local `/components` folder next to the parent component ) when sensible
-- Avoid large hooks, abstract logic into `helpers.ts` files when sensible
-- Use function declarations for components and handlers, arrow functions only for small inline callbacks
-- No barrel files or `index.ts` re-exports
-
-See `autogpt_platform/frontend/CONTRIBUTING.md` for complete frontend architecture, patterns, and conventions.
-
 ## Testing
 
 - Backend: `poetry run test` (runs pytest with a docker based postgres + prisma).

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

@@ -161,7 +161,7 @@ async def create_session(
 async def get_session(
     session_id: str,
     user_id: Annotated[str | None, Depends(auth.get_user_id)],
-) -> SessionDetailResponse | None:
+) -> SessionDetailResponse:
     """
     Retrieve the details of a specific chat session.
 
@@ -172,12 +172,12 @@ async def get_session(
         user_id: The optional authenticated user ID, or None for anonymous access.
 
     Returns:
-        SessionDetailResponse: Details for the requested session, or None if not found.
+        SessionDetailResponse: Details for the requested session; raises NotFoundError if not found.
 
     """
     session = await get_chat_session(session_id, user_id)
     if not session:
-        return None
+        raise NotFoundError(f"Session {session_id} not found")
 
     messages = [message.model_dump() for message in session.messages]
     logger.info(

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

@@ -4,9 +4,14 @@ from collections.abc import AsyncGenerator
 from typing import Any
 
 import orjson
-from langfuse import get_client, propagate_attributes
-from langfuse.openai import openai  # type: ignore
-from openai import APIConnectionError, APIError, APIStatusError, RateLimitError
+from langfuse import Langfuse
+from openai import (
+    APIConnectionError,
+    APIError,
+    APIStatusError,
+    AsyncOpenAI,
+    RateLimitError,
+)
 from openai.types.chat import ChatCompletionChunk, ChatCompletionToolParam
 
 from backend.data.understanding import (
@@ -16,6 +21,7 @@ from backend.data.understanding import (
 from backend.util.exceptions import NotFoundError
 from backend.util.settings import Settings
 
+from . import db as chat_db
 from .config import ChatConfig
 from .model import (
     ChatMessage,
@@ -44,10 +50,10 @@ logger = logging.getLogger(__name__)
 
 config = ChatConfig()
 settings = Settings()
-client = openai.AsyncOpenAI(api_key=config.api_key, base_url=config.base_url)
+client = AsyncOpenAI(api_key=config.api_key, base_url=config.base_url)
 
-
-langfuse = get_client()
+# Langfuse client (lazy initialization)
+_langfuse_client: Langfuse | None = None
 
 
 class LangfuseNotConfiguredError(Exception):
@@ -63,6 +69,65 @@ def _is_langfuse_configured() -> bool:
     )
 
 
+def _get_langfuse_client() -> Langfuse:
+    """Get or create the Langfuse client for prompt management and tracing."""
+    global _langfuse_client
+    if _langfuse_client is None:
+        if not _is_langfuse_configured():
+            raise LangfuseNotConfiguredError(
+                "Langfuse is not configured. The chat feature requires Langfuse for prompt management. "
+                "Please set the LANGFUSE_PUBLIC_KEY and LANGFUSE_SECRET_KEY environment variables."
+            )
+        _langfuse_client = Langfuse(
+            public_key=settings.secrets.langfuse_public_key,
+            secret_key=settings.secrets.langfuse_secret_key,
+            host=settings.secrets.langfuse_host or "https://cloud.langfuse.com",
+        )
+    return _langfuse_client
+
+
+def _get_environment() -> str:
+    """Get the current environment name for Langfuse tagging."""
+    return settings.config.app_env.value
+
+
+def _get_langfuse_prompt() -> str:
+    """Fetch the latest production prompt from Langfuse.
+
+    Returns:
+        The compiled prompt text from Langfuse.
+
+    Raises:
+        Exception: If Langfuse is unavailable or prompt fetch fails.
+    """
+    try:
+        langfuse = _get_langfuse_client()
+        # cache_ttl_seconds=0 disables SDK caching to always get the latest prompt
+        prompt = langfuse.get_prompt(config.langfuse_prompt_name, cache_ttl_seconds=0)
+        compiled = prompt.compile()
+        logger.info(
+            f"Fetched prompt '{config.langfuse_prompt_name}' from Langfuse "
+            f"(version: {prompt.version})"
+        )
+        return compiled
+    except Exception as e:
+        logger.error(f"Failed to fetch prompt from Langfuse: {e}")
+        raise
+
+
+async def _is_first_session(user_id: str) -> bool:
+    """Check if this is the user's first chat session.
+
+    Returns True if the user has 1 or fewer sessions (meaning this is their first).
+    """
+    try:
+        session_count = await chat_db.get_user_session_count(user_id)
+        return session_count <= 1
+    except Exception as e:
+        logger.warning(f"Failed to check session count for user {user_id}: {e}")
+        return False  # Default to non-onboarding if we can't check
+
+
 async def _build_system_prompt(user_id: str | None) -> tuple[str, Any]:
     """Build the full system prompt including business understanding if available.
 
@@ -74,6 +139,8 @@ async def _build_system_prompt(user_id: str | None) -> tuple[str, Any]:
         Tuple of (compiled prompt string, Langfuse prompt object for tracing)
     """
 
+    langfuse = _get_langfuse_client()
+
     # cache_ttl_seconds=0 disables SDK caching to always get the latest prompt
     prompt = langfuse.get_prompt(config.langfuse_prompt_name, cache_ttl_seconds=0)
 
@@ -91,7 +158,7 @@ async def _build_system_prompt(user_id: str | None) -> tuple[str, Any]:
         context = "This is the first time you are meeting the user. Greet them and introduce them to the platform"
 
     compiled = prompt.compile(users_information=context)
-    return compiled, understanding
+    return compiled, prompt
 
 
 async def _generate_session_title(message: str) -> str | None:
@@ -150,7 +217,6 @@ async def assign_user_to_session(
 async def stream_chat_completion(
     session_id: str,
     message: str | None = None,
-    tool_call_response: str | None = None,
     is_user_message: bool = True,
     user_id: str | None = None,
     retry_count: int = 0,
@@ -190,6 +256,11 @@ async def stream_chat_completion(
         yield StreamFinish()
         return
 
+    # Langfuse observations will be created after session is loaded (need messages for input)
+    # Initialize to None so finally block can safely check and end them
+    trace = None
+    generation = None
+
     # Only fetch from Redis if session not provided (initial call)
     if session is None:
         session = await get_chat_session(session_id, user_id)
@@ -265,295 +336,297 @@ async def stream_chat_completion(
             asyncio.create_task(_update_title())
 
     # Build system prompt with business understanding
-    system_prompt, understanding = await _build_system_prompt(user_id)
+    system_prompt, langfuse_prompt = await _build_system_prompt(user_id)
+
+    # Build input messages including system prompt for complete Langfuse logging
+    trace_input_messages = [{"role": "system", "content": system_prompt}] + [
+        m.model_dump() for m in session.messages
+    ]
 
     # Create Langfuse trace for this LLM call (each call gets its own trace, grouped by session_id)
     # Using v3 SDK: start_observation creates a root span, update_trace sets trace-level attributes
-    input = message
-    if not message and tool_call_response:
-        input = tool_call_response
-
-    langfuse = get_client()
-    with langfuse.start_as_current_observation(
-        as_type="span",
-        name="user-copilot-request",
-        input=input,
-    ) as span:
-        with propagate_attributes(
+    try:
+        langfuse = _get_langfuse_client()
+        env = _get_environment()
+        trace = langfuse.start_observation(
+            name="chat_completion",
+            input={"messages": trace_input_messages},
+            metadata={
+                "environment": env,
+                "model": config.model,
+                "message_count": len(session.messages),
+                "prompt_name": langfuse_prompt.name if langfuse_prompt else None,
+                "prompt_version": langfuse_prompt.version if langfuse_prompt else None,
+            },
+        )
+        # Set trace-level attributes (session_id, user_id, tags)
+        trace.update_trace(
             session_id=session_id,
             user_id=user_id,
-            tags=["copilot"],
-            metadata={
-                "users_information": format_understanding_for_prompt(understanding)[
-                    :200
-                ]  # langfuse only accepts upto to 200 chars
-            },
-        ):
+            tags=[env, "copilot"],
+        )
+    except Exception as e:
+        logger.warning(f"Failed to create Langfuse trace: {e}")
 
-            # Initialize variables that will be used in finally block (must be defined before try)
-            assistant_response = ChatMessage(
-                role="assistant",
-                content="",
+    # Initialize variables that will be used in finally block (must be defined before try)
+    assistant_response = ChatMessage(
+        role="assistant",
+        content="",
+    )
+    accumulated_tool_calls: list[dict[str, Any]] = []
+
+    # Wrap main logic in try/finally to ensure Langfuse observations are always ended
+    try:
+        has_yielded_end = False
+        has_yielded_error = False
+        has_done_tool_call = False
+        has_received_text = False
+        text_streaming_ended = False
+        tool_response_messages: list[ChatMessage] = []
+        should_retry = False
+
+        # Generate unique IDs for AI SDK protocol
+        import uuid as uuid_module
+
+        message_id = str(uuid_module.uuid4())
+        text_block_id = str(uuid_module.uuid4())
+
+        # Yield message start
+        yield StreamStart(messageId=message_id)
+
+        # Create Langfuse generation for each LLM call, linked to the prompt
+        # Using v3 SDK: start_observation with as_type="generation"
+        generation = (
+            trace.start_observation(
+                as_type="generation",
+                name="llm_call",
+                model=config.model,
+                input={"messages": trace_input_messages},
+                prompt=langfuse_prompt,
             )
-            accumulated_tool_calls: list[dict[str, Any]] = []
-            has_saved_assistant_message = False
+            if trace
+            else None
+        )
 
-            # Wrap main logic in try/finally to ensure Langfuse observations are always ended
-            has_yielded_end = False
-            has_yielded_error = False
-            has_done_tool_call = False
-            has_received_text = False
-            text_streaming_ended = False
-            tool_response_messages: list[ChatMessage] = []
-            should_retry = False
+        try:
+            async for chunk in _stream_chat_chunks(
+                session=session,
+                tools=tools,
+                system_prompt=system_prompt,
+                text_block_id=text_block_id,
+            ):
 
-            # Generate unique IDs for AI SDK protocol
-            import uuid as uuid_module
-
-            message_id = str(uuid_module.uuid4())
-            text_block_id = str(uuid_module.uuid4())
-
-            # Yield message start
-            yield StreamStart(messageId=message_id)
-
-            try:
-                async for chunk in _stream_chat_chunks(
-                    session=session,
-                    tools=tools,
-                    system_prompt=system_prompt,
-                    text_block_id=text_block_id,
-                ):
-
-                    if isinstance(chunk, StreamTextStart):
-                        # Emit text-start before first text delta
-                        if not has_received_text:
-                            yield chunk
-                    elif isinstance(chunk, StreamTextDelta):
-                        delta = chunk.delta or ""
-                        assert assistant_response.content is not None
-                        assistant_response.content += delta
-                        has_received_text = True
+                if isinstance(chunk, StreamTextStart):
+                    # Emit text-start before first text delta
+                    if not has_received_text:
                         yield chunk
-                    elif isinstance(chunk, StreamTextEnd):
-                        # Emit text-end after text completes
-                        if has_received_text and not text_streaming_ended:
-                            text_streaming_ended = True
-                            if assistant_response.content:
-                                logger.warn(
-                                    f"StreamTextEnd: Attempting to set output {assistant_response.content}"
-                                )
-                                span.update_trace(output=assistant_response.content)
-                                span.update(output=assistant_response.content)
-                            yield chunk
-                    elif isinstance(chunk, StreamToolInputStart):
-                        # Emit text-end before first tool call, but only if we've received text
+                elif isinstance(chunk, StreamTextDelta):
+                    delta = chunk.delta or ""
+                    assert assistant_response.content is not None
+                    assistant_response.content += delta
+                    has_received_text = True
+                    yield chunk
+                elif isinstance(chunk, StreamTextEnd):
+                    # Emit text-end after text completes
+                    if has_received_text and not text_streaming_ended:
+                        text_streaming_ended = True
+                        yield chunk
+                elif isinstance(chunk, StreamToolInputStart):
+                    # Emit text-end before first tool call, but only if we've received text
+                    if has_received_text and not text_streaming_ended:
+                        yield StreamTextEnd(id=text_block_id)
+                        text_streaming_ended = True
+                    yield chunk
+                elif isinstance(chunk, StreamToolInputAvailable):
+                    # Accumulate tool calls in OpenAI format
+                    accumulated_tool_calls.append(
+                        {
+                            "id": chunk.toolCallId,
+                            "type": "function",
+                            "function": {
+                                "name": chunk.toolName,
+                                "arguments": orjson.dumps(chunk.input).decode("utf-8"),
+                            },
+                        }
+                    )
+                elif isinstance(chunk, StreamToolOutputAvailable):
+                    result_content = (
+                        chunk.output
+                        if isinstance(chunk.output, str)
+                        else orjson.dumps(chunk.output).decode("utf-8")
+                    )
+                    tool_response_messages.append(
+                        ChatMessage(
+                            role="tool",
+                            content=result_content,
+                            tool_call_id=chunk.toolCallId,
+                        )
+                    )
+                    has_done_tool_call = True
+                    # Track if any tool execution failed
+                    if not chunk.success:
+                        logger.warning(
+                            f"Tool {chunk.toolName} (ID: {chunk.toolCallId}) execution failed"
+                        )
+                    yield chunk
+                elif isinstance(chunk, StreamFinish):
+                    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:
                             yield StreamTextEnd(id=text_block_id)
                             text_streaming_ended = True
+                        has_yielded_end = True
                         yield chunk
-                    elif isinstance(chunk, StreamToolInputAvailable):
-                        # Accumulate tool calls in OpenAI format
-                        accumulated_tool_calls.append(
-                            {
-                                "id": chunk.toolCallId,
-                                "type": "function",
-                                "function": {
-                                    "name": chunk.toolName,
-                                    "arguments": orjson.dumps(chunk.input).decode(
-                                        "utf-8"
-                                    ),
-                                },
-                            }
+                elif isinstance(chunk, StreamError):
+                    has_yielded_error = True
+                elif isinstance(chunk, StreamUsage):
+                    session.usage.append(
+                        Usage(
+                            prompt_tokens=chunk.promptTokens,
+                            completion_tokens=chunk.completionTokens,
+                            total_tokens=chunk.totalTokens,
                         )
-                    elif isinstance(chunk, StreamToolOutputAvailable):
-                        result_content = (
-                            chunk.output
-                            if isinstance(chunk.output, str)
-                            else orjson.dumps(chunk.output).decode("utf-8")
-                        )
-                        tool_response_messages.append(
-                            ChatMessage(
-                                role="tool",
-                                content=result_content,
-                                tool_call_id=chunk.toolCallId,
-                            )
-                        )
-                        has_done_tool_call = True
-                        # Track if any tool execution failed
-                        if not chunk.success:
-                            logger.warning(
-                                f"Tool {chunk.toolName} (ID: {chunk.toolCallId}) execution failed"
-                            )
-                        yield chunk
-                    elif isinstance(chunk, StreamFinish):
-                        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:
-                                yield StreamTextEnd(id=text_block_id)
-                                text_streaming_ended = True
-
-                            # Save assistant message before yielding finish to ensure it's persisted
-                            # even if client disconnects immediately after receiving StreamFinish
-                            if not has_saved_assistant_message:
-                                messages_to_save_early: list[ChatMessage] = []
-                                if accumulated_tool_calls:
-                                    assistant_response.tool_calls = (
-                                        accumulated_tool_calls
-                                    )
-                                if (
-                                    assistant_response.content
-                                    or assistant_response.tool_calls
-                                ):
-                                    messages_to_save_early.append(assistant_response)
-                                messages_to_save_early.extend(tool_response_messages)
-
-                                if messages_to_save_early:
-                                    session.messages.extend(messages_to_save_early)
-                                    logger.info(
-                                        f"Saving assistant message before StreamFinish: "
-                                        f"content_len={len(assistant_response.content or '')}, "
-                                        f"tool_calls={len(assistant_response.tool_calls or [])}, "
-                                        f"tool_responses={len(tool_response_messages)}"
-                                    )
-                                    await upsert_chat_session(session)
-                                    has_saved_assistant_message = True
-
-                            has_yielded_end = True
-                            yield chunk
-                    elif isinstance(chunk, StreamError):
-                        has_yielded_error = True
-                    elif isinstance(chunk, StreamUsage):
-                        session.usage.append(
-                            Usage(
-                                prompt_tokens=chunk.promptTokens,
-                                completion_tokens=chunk.completionTokens,
-                                total_tokens=chunk.totalTokens,
-                            )
-                        )
-                    else:
-                        logger.error(
-                            f"Unknown chunk type: {type(chunk)}", exc_info=True
-                        )
-                if assistant_response.content:
-                    langfuse.update_current_trace(output=assistant_response.content)
-                    langfuse.update_current_span(output=assistant_response.content)
-                elif tool_response_messages:
-                    langfuse.update_current_trace(output=str(tool_response_messages))
-                    langfuse.update_current_span(output=str(tool_response_messages))
-
-            except Exception as e:
-                logger.error(f"Error during stream: {e!s}", exc_info=True)
-
-                # Check if this is a retryable error (JSON parsing, incomplete tool calls, etc.)
-                is_retryable = isinstance(
-                    e, (orjson.JSONDecodeError, KeyError, TypeError)
-                )
-
-                if is_retryable and retry_count < config.max_retries:
-                    logger.info(
-                        f"Retryable error encountered. Attempt {retry_count + 1}/{config.max_retries}"
                     )
-                    should_retry = True
                 else:
-                    # Non-retryable error or max retries exceeded
-                    # Save any partial progress before reporting error
-                    messages_to_save: list[ChatMessage] = []
+                    logger.error(f"Unknown chunk type: {type(chunk)}", exc_info=True)
+        except Exception as e:
+            logger.error(f"Error during stream: {e!s}", exc_info=True)
 
-                    # Add assistant message if it has content or tool calls
-                    if accumulated_tool_calls:
-                        assistant_response.tool_calls = accumulated_tool_calls
-                    if assistant_response.content or assistant_response.tool_calls:
-                        messages_to_save.append(assistant_response)
+            # Check if this is a retryable error (JSON parsing, incomplete tool calls, etc.)
+            is_retryable = isinstance(e, (orjson.JSONDecodeError, KeyError, TypeError))
 
-                    # Add tool response messages after assistant message
-                    messages_to_save.extend(tool_response_messages)
-
-                    session.messages.extend(messages_to_save)
-                    await upsert_chat_session(session)
-
-                    if not has_yielded_error:
-                        error_message = str(e)
-                        if not is_retryable:
-                            error_message = f"Non-retryable error: {error_message}"
-                        elif retry_count >= config.max_retries:
-                            error_message = f"Max retries ({config.max_retries}) exceeded: {error_message}"
-
-                        error_response = StreamError(errorText=error_message)
-                        yield error_response
-                    if not has_yielded_end:
-                        yield StreamFinish()
-                    return
-
-            # Handle retry outside of exception handler to avoid nesting
-            if should_retry and retry_count < config.max_retries:
+            if is_retryable and retry_count < config.max_retries:
                 logger.info(
-                    f"Retrying stream_chat_completion for session {session_id}, attempt {retry_count + 1}"
+                    f"Retryable error encountered. Attempt {retry_count + 1}/{config.max_retries}"
                 )
-                async for chunk in stream_chat_completion(
-                    session_id=session.session_id,
-                    user_id=user_id,
-                    retry_count=retry_count + 1,
-                    session=session,
-                    context=context,
-                ):
-                    yield chunk
-                return  # Exit after retry to avoid double-saving in finally block
-
-            # Normal completion path - save session and handle tool call continuation
-            # Only save if we haven't already saved when StreamFinish was received
-            if not has_saved_assistant_message:
-                logger.info(
-                    f"Normal completion path: session={session.session_id}, "
-                    f"current message_count={len(session.messages)}"
-                )
-
-                # Build the messages list in the correct order
+                should_retry = True
+            else:
+                # Non-retryable error or max retries exceeded
+                # Save any partial progress before reporting error
                 messages_to_save: list[ChatMessage] = []
 
-                # Add assistant message with tool_calls if any
+                # Add assistant message if it has content or tool calls
                 if accumulated_tool_calls:
                     assistant_response.tool_calls = accumulated_tool_calls
-                    logger.info(
-                        f"Added {len(accumulated_tool_calls)} tool calls to assistant message"
-                    )
                 if assistant_response.content or assistant_response.tool_calls:
                     messages_to_save.append(assistant_response)
-                    logger.info(
-                        f"Saving assistant message with content_len={len(assistant_response.content or '')}, tool_calls={len(assistant_response.tool_calls or [])}"
-                    )
 
                 # Add tool response messages after assistant message
                 messages_to_save.extend(tool_response_messages)
-                logger.info(
-                    f"Saving {len(tool_response_messages)} tool response messages, "
-                    f"total_to_save={len(messages_to_save)}"
-                )
 
-                if messages_to_save:
-                    session.messages.extend(messages_to_save)
-                    logger.info(
-                        f"Extended session messages, new message_count={len(session.messages)}"
-                    )
-                    await upsert_chat_session(session)
-            else:
-                logger.info(
-                    "Assistant message already saved when StreamFinish was received, "
-                    "skipping duplicate save"
-                )
+                session.messages.extend(messages_to_save)
+                await upsert_chat_session(session)
 
-            # If we did a tool call, stream the chat completion again to get the next response
-            if has_done_tool_call:
-                logger.info(
-                    "Tool call executed, streaming chat completion again to get assistant response"
+                if not has_yielded_error:
+                    error_message = str(e)
+                    if not is_retryable:
+                        error_message = f"Non-retryable error: {error_message}"
+                    elif retry_count >= config.max_retries:
+                        error_message = f"Max retries ({config.max_retries}) exceeded: {error_message}"
+
+                    error_response = StreamError(errorText=error_message)
+                    yield error_response
+                if not has_yielded_end:
+                    yield StreamFinish()
+                return
+
+        # Handle retry outside of exception handler to avoid nesting
+        if should_retry and retry_count < config.max_retries:
+            logger.info(
+                f"Retrying stream_chat_completion for session {session_id}, attempt {retry_count + 1}"
+            )
+            async for chunk in stream_chat_completion(
+                session_id=session.session_id,
+                user_id=user_id,
+                retry_count=retry_count + 1,
+                session=session,
+                context=context,
+            ):
+                yield chunk
+            return  # Exit after retry to avoid double-saving in finally block
+
+        # Normal completion path - save session and handle tool call continuation
+        logger.info(
+            f"Normal completion path: session={session.session_id}, "
+            f"current message_count={len(session.messages)}"
+        )
+
+        # Build the messages list in the correct order
+        messages_to_save: list[ChatMessage] = []
+
+        # Add assistant message with tool_calls if any
+        if accumulated_tool_calls:
+            assistant_response.tool_calls = accumulated_tool_calls
+            logger.info(
+                f"Added {len(accumulated_tool_calls)} tool calls to assistant message"
+            )
+        if assistant_response.content or assistant_response.tool_calls:
+            messages_to_save.append(assistant_response)
+            logger.info(
+                f"Saving assistant message with content_len={len(assistant_response.content or '')}, tool_calls={len(assistant_response.tool_calls or [])}"
+            )
+
+        # Add tool response messages after assistant message
+        messages_to_save.extend(tool_response_messages)
+        logger.info(
+            f"Saving {len(tool_response_messages)} tool response messages, "
+            f"total_to_save={len(messages_to_save)}"
+        )
+
+        session.messages.extend(messages_to_save)
+        logger.info(
+            f"Extended session messages, new message_count={len(session.messages)}"
+        )
+        await upsert_chat_session(session)
+
+        # If we did a tool call, stream the chat completion again to get the next response
+        if has_done_tool_call:
+            logger.info(
+                "Tool call executed, streaming chat completion again to get assistant response"
+            )
+            async for chunk in stream_chat_completion(
+                session_id=session.session_id,
+                user_id=user_id,
+                session=session,  # Pass session object to avoid Redis refetch
+                context=context,
+            ):
+                yield chunk
+
+    finally:
+        # Always end Langfuse observations to prevent resource leaks
+        # Guard against None and catch errors to avoid masking original exceptions
+        if generation is not None:
+            try:
+                latest_usage = session.usage[-1] if session.usage else None
+                generation.update(
+                    model=config.model,
+                    output={
+                        "content": assistant_response.content,
+                        "tool_calls": accumulated_tool_calls or None,
+                    },
+                    usage_details=(
+                        {
+                            "input": latest_usage.prompt_tokens,
+                            "output": latest_usage.completion_tokens,
+                            "total": latest_usage.total_tokens,
+                        }
+                        if latest_usage
+                        else None
+                    ),
                 )
-                async for chunk in stream_chat_completion(
-                    session_id=session.session_id,
-                    user_id=user_id,
-                    session=session,  # Pass session object to avoid Redis refetch
-                    context=context,
-                    tool_call_response=str(tool_response_messages),
-                ):
-                    yield chunk
+                generation.end()
+            except Exception as e:
+                logger.warning(f"Failed to end Langfuse generation: {e}")
+
+        if trace is not None:
+            try:
+                if accumulated_tool_calls:
+                    trace.update_trace(output={"tool_calls": accumulated_tool_calls})
+                else:
+                    trace.update_trace(output={"response": assistant_response.content})
+                trace.end()
+            except Exception as e:
+                logger.warning(f"Failed to end Langfuse trace: {e}")
 
 
 # Retry configuration for OpenAI API calls
@@ -827,4 +900,5 @@ async def _yield_tool_call(
         session=session,
     )
 
+    logger.info(f"Yielding Tool execution response: {tool_execution_response}")
     yield tool_execution_response

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

@@ -30,7 +30,7 @@ TOOL_REGISTRY: dict[str, BaseTool] = {
     "find_library_agent": FindLibraryAgentTool(),
     "run_agent": RunAgentTool(),
     "run_block": RunBlockTool(),
-    "view_agent_output": AgentOutputTool(),
+    "agent_output": AgentOutputTool(),
     "search_docs": SearchDocsTool(),
     "get_doc_page": GetDocPageTool(),
 }

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

@@ -3,8 +3,6 @@
 import logging
 from typing import Any
 
-from langfuse import observe
-
 from backend.api.features.chat.model import ChatSession
 from backend.data.understanding import (
     BusinessUnderstandingInput,
@@ -61,7 +59,6 @@ and automations for the user's specific needs."""
         """Requires authentication to store user-specific data."""
         return True
 
-    @observe(as_type="tool", name="add_understanding")
     async def _execute(
         self,
         user_id: str | None,

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

@@ -5,7 +5,6 @@ import re
 from datetime import datetime, timedelta, timezone
 from typing import Any
 
-from langfuse import observe
 from pydantic import BaseModel, field_validator
 
 from backend.api.features.chat.model import ChatSession
@@ -104,7 +103,7 @@ class AgentOutputTool(BaseTool):
 
     @property
     def name(self) -> str:
-        return "view_agent_output"
+        return "agent_output"
 
     @property
     def description(self) -> str:
@@ -329,7 +328,6 @@ class AgentOutputTool(BaseTool):
             total_executions=len(available_executions) if available_executions else 1,
         )
 
-    @observe(as_type="tool", name="view_agent_output")
     async def _execute(
         self,
         user_id: str | None,

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

@@ -3,8 +3,6 @@
 import logging
 from typing import Any
 
-from langfuse import observe
-
 from backend.api.features.chat.model import ChatSession
 
 from .agent_generator import (
@@ -80,7 +78,6 @@ class CreateAgentTool(BaseTool):
             "required": ["description"],
         }
 
-    @observe(as_type="tool", name="create_agent")
     async def _execute(
         self,
         user_id: str | None,

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

@@ -3,8 +3,6 @@
 import logging
 from typing import Any
 
-from langfuse import observe
-
 from backend.api.features.chat.model import ChatSession
 
 from .agent_generator import (
@@ -87,7 +85,6 @@ class EditAgentTool(BaseTool):
             "required": ["agent_id", "changes"],
         }
 
-    @observe(as_type="tool", name="edit_agent")
     async def _execute(
         self,
         user_id: str | None,

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

@@ -2,8 +2,6 @@
 
 from typing import Any
 
-from langfuse import observe
-
 from backend.api.features.chat.model import ChatSession
 
 from .agent_search import search_agents
@@ -37,7 +35,6 @@ class FindAgentTool(BaseTool):
             "required": ["query"],
         }
 
-    @observe(as_type="tool", name="find_agent")
     async def _execute(
         self, user_id: str | None, session: ChatSession, **kwargs
     ) -> ToolResponseBase:

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

@@ -1,7 +1,6 @@
 import logging
 from typing import Any
 
-from langfuse import observe
 from prisma.enums import ContentType
 
 from backend.api.features.chat.model import ChatSession
@@ -56,7 +55,6 @@ class FindBlockTool(BaseTool):
     def requires_auth(self) -> bool:
         return True
 
-    @observe(as_type="tool", name="find_block")
     async def _execute(
         self,
         user_id: str | None,

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

@@ -2,8 +2,6 @@
 
 from typing import Any
 
-from langfuse import observe
-
 from backend.api.features.chat.model import ChatSession
 
 from .agent_search import search_agents
@@ -43,7 +41,6 @@ class FindLibraryAgentTool(BaseTool):
     def requires_auth(self) -> bool:
         return True
 
-    @observe(as_type="tool", name="find_library_agent")
     async def _execute(
         self, user_id: str | None, session: ChatSession, **kwargs
     ) -> ToolResponseBase:

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

@@ -4,8 +4,6 @@ import logging
 from pathlib import Path
 from typing import Any
 
-from langfuse import observe
-
 from backend.api.features.chat.model import ChatSession
 from backend.api.features.chat.tools.base import BaseTool
 from backend.api.features.chat.tools.models import (
@@ -73,7 +71,6 @@ class GetDocPageTool(BaseTool):
         url_path = path.rsplit(".", 1)[0] if "." in path else path
         return f"{DOCS_BASE_URL}/{url_path}"
 
-    @observe(as_type="tool", name="get_doc_page")
     async def _execute(
         self,
         user_id: str | None,

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

@@ -3,7 +3,6 @@
 import logging
 from typing import Any
 
-from langfuse import observe
 from pydantic import BaseModel, Field, field_validator
 
 from backend.api.features.chat.config import ChatConfig
@@ -33,7 +32,7 @@ from .models import (
     UserReadiness,
 )
 from .utils import (
-    build_missing_credentials_from_graph,
+    check_user_has_required_credentials,
     extract_credentials_from_schema,
     fetch_graph_from_store_slug,
     get_or_create_library_agent,
@@ -155,7 +154,6 @@ class RunAgentTool(BaseTool):
         """All operations require authentication."""
         return True
 
-    @observe(as_type="tool", name="run_agent")
     async def _execute(
         self,
         user_id: str | None,
@@ -237,13 +235,15 @@ class RunAgentTool(BaseTool):
                 # Return credentials needed response with input data info
                 # The UI handles credential setup automatically, so the message
                 # focuses on asking about input data
-                requirements_creds_dict = build_missing_credentials_from_graph(
-                    graph, None
+                credentials = extract_credentials_from_schema(
+                    graph.credentials_input_schema
                 )
-                missing_credentials_dict = build_missing_credentials_from_graph(
-                    graph, graph_credentials
+                missing_creds_check = await check_user_has_required_credentials(
+                    user_id, credentials
                 )
-                requirements_creds_list = list(requirements_creds_dict.values())
+                missing_credentials_dict = {
+                    c.id: c.model_dump() for c in missing_creds_check
+                }
 
                 return SetupRequirementsResponse(
                     message=self._build_inputs_message(graph, MSG_WHAT_VALUES_TO_USE),
@@ -257,7 +257,7 @@ class RunAgentTool(BaseTool):
                             ready_to_run=False,
                         ),
                         requirements={
-                            "credentials": requirements_creds_list,
+                            "credentials": [c.model_dump() for c in credentials],
                             "inputs": self._get_inputs_list(graph.input_schema),
                             "execution_modes": self._get_execution_modes(graph),
                         },

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

@@ -4,8 +4,6 @@ import logging
 from collections import defaultdict
 from typing import Any
 
-from langfuse import observe
-
 from backend.api.features.chat.model import ChatSession
 from backend.data.block import get_block
 from backend.data.execution import ExecutionContext
@@ -22,7 +20,6 @@ from .models import (
     ToolResponseBase,
     UserReadiness,
 )
-from .utils import build_missing_credentials_from_field_info
 
 logger = logging.getLogger(__name__)
 
@@ -130,7 +127,6 @@ class RunBlockTool(BaseTool):
 
         return matched_credentials, missing_credentials
 
-    @observe(as_type="tool", name="run_block")
     async def _execute(
         self,
         user_id: str | None,
@@ -190,11 +186,7 @@ class RunBlockTool(BaseTool):
 
         if missing_credentials:
             # Return setup requirements response with missing credentials
-            credentials_fields_info = block.input_schema.get_credentials_fields_info()
-            missing_creds_dict = build_missing_credentials_from_field_info(
-                credentials_fields_info, set(matched_credentials.keys())
-            )
-            missing_creds_list = list(missing_creds_dict.values())
+            missing_creds_dict = {c.id: c.model_dump() for c in missing_credentials}
 
             return SetupRequirementsResponse(
                 message=(
@@ -211,7 +203,7 @@ class RunBlockTool(BaseTool):
                         ready_to_run=False,
                     ),
                     requirements={
-                        "credentials": missing_creds_list,
+                        "credentials": [c.model_dump() for c in missing_credentials],
                         "inputs": self._get_inputs_list(block),
                         "execution_modes": ["immediate"],
                     },

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

@@ -3,7 +3,6 @@
 import logging
 from typing import Any
 
-from langfuse import observe
 from prisma.enums import ContentType
 
 from backend.api.features.chat.model import ChatSession
@@ -88,7 +87,6 @@ class SearchDocsTool(BaseTool):
         url_path = path.rsplit(".", 1)[0] if "." in path else path
         return f"{DOCS_BASE_URL}/{url_path}"
 
-    @observe(as_type="tool", name="search_docs")
     async def _execute(
         self,
         user_id: str | None,

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

@@ -8,7 +8,7 @@ from backend.api.features.library import model as library_model
 from backend.api.features.store import db as store_db
 from backend.data import graph as graph_db
 from backend.data.graph import GraphModel
-from backend.data.model import CredentialsFieldInfo, CredentialsMetaInput
+from backend.data.model import CredentialsMetaInput
 from backend.integrations.creds_manager import IntegrationCredentialsManager
 from backend.util.exceptions import NotFoundError
 
@@ -89,59 +89,6 @@ def extract_credentials_from_schema(
     return credentials
 
 
-def _serialize_missing_credential(
-    field_key: str, field_info: CredentialsFieldInfo
-) -> dict[str, Any]:
-    """
-    Convert credential field info into a serializable dict that preserves all supported
-    credential types (e.g., api_key + oauth2) so the UI can offer multiple options.
-    """
-    supported_types = sorted(field_info.supported_types)
-    provider = next(iter(field_info.provider), "unknown")
-    scopes = sorted(field_info.required_scopes or [])
-
-    return {
-        "id": field_key,
-        "title": field_key.replace("_", " ").title(),
-        "provider": provider,
-        "provider_name": provider.replace("_", " ").title(),
-        "type": supported_types[0] if supported_types else "api_key",
-        "types": supported_types,
-        "scopes": scopes,
-    }
-
-
-def build_missing_credentials_from_graph(
-    graph: GraphModel, matched_credentials: dict[str, CredentialsMetaInput] | None
-) -> dict[str, Any]:
-    """
-    Build a missing_credentials mapping from a graph's aggregated credentials inputs,
-    preserving all supported credential types for each field.
-    """
-    matched_keys = set(matched_credentials.keys()) if matched_credentials else set()
-    aggregated_fields = graph.aggregate_credentials_inputs()
-
-    return {
-        field_key: _serialize_missing_credential(field_key, field_info)
-        for field_key, (field_info, _node_fields) in aggregated_fields.items()
-        if field_key not in matched_keys
-    }
-
-
-def build_missing_credentials_from_field_info(
-    credential_fields: dict[str, CredentialsFieldInfo],
-    matched_keys: set[str],
-) -> dict[str, Any]:
-    """
-    Build missing_credentials mapping from a simple credentials field info dictionary.
-    """
-    return {
-        field_key: _serialize_missing_credential(field_key, field_info)
-        for field_key, field_info in credential_fields.items()
-        if field_key not in matched_keys
-    }
-
-
 def extract_credentials_as_dict(
     credentials_input_schema: dict[str, Any] | None,
 ) -> dict[str, CredentialsMetaInput]:

autogpt_platform/backend/backend/data/understanding.py

@@ -328,8 +328,6 @@ async def clear_business_understanding(user_id: str) -> bool:
 
 def format_understanding_for_prompt(understanding: BusinessUnderstanding) -> str:
     """Format business understanding as text for system prompt injection."""
-    if not understanding:
-        return ""
     sections = []
 
     # User info section

autogpt_platform/backend/scripts/generate_block_docs.py

@@ -366,12 +366,12 @@ def generate_block_markdown(
     lines.append("")
 
     # What it is (full description)
-    lines.append("### What it is")
+    lines.append(f"### What it is")
     lines.append(block.description or "No description available.")
     lines.append("")
 
     # How it works (manual section)
-    lines.append("### How it works")
+    lines.append(f"### How it works")
     how_it_works = manual_content.get(
         "how_it_works", "_Add technical explanation here._"
     )
@@ -383,7 +383,7 @@ def generate_block_markdown(
     # Inputs table (auto-generated)
     visible_inputs = [f for f in block.inputs if not f.hidden]
     if visible_inputs:
-        lines.append("### Inputs")
+        lines.append(f"### Inputs")
         lines.append("")
         lines.append("| Input | Description | Type | Required |")
         lines.append("|-------|-------------|------|----------|")
@@ -400,7 +400,7 @@ def generate_block_markdown(
     # Outputs table (auto-generated)
     visible_outputs = [f for f in block.outputs if not f.hidden]
     if visible_outputs:
-        lines.append("### Outputs")
+        lines.append(f"### Outputs")
         lines.append("")
         lines.append("| Output | Description | Type |")
         lines.append("|--------|-------------|------|")
@@ -414,7 +414,7 @@ def generate_block_markdown(
         lines.append("")
 
     # Possible use case (manual section)
-    lines.append("### Possible use case")
+    lines.append(f"### Possible use case")
     use_case = manual_content.get("use_case", "_Add practical use case examples here._")
     lines.append("<!-- MANUAL: use_case -->")
     lines.append(use_case)

autogpt_platform/frontend/CONTRIBUTING.md

@@ -175,8 +175,6 @@ While server components and actions are cool and cutting-edge, they introduce a
 
 - Prefer [React Query](https://tanstack.com/query/latest/docs/framework/react/overview) for server state, colocated near consumers (see [state colocation](https://kentcdodds.com/blog/state-colocation-will-make-your-react-app-faster))
 - Co-locate UI state inside components/hooks; keep global state minimal
-- Avoid `useMemo` and `useCallback` unless you have a measured performance issue
-- Do not abuse `useEffect`; prefer state colocation and derive values directly when possible
 
 ### Styling and components
 
@@ -551,48 +549,9 @@ Files:
 Types:
 
 - Prefer `interface` for object shapes
-- Component props should be `interface Props { ... }` (not exported)
-- Only use specific exported names (e.g., `export interface MyComponentProps`) when the interface needs to be used outside the component
-- Keep type definitions inline with the component - do not create separate `types.ts` files unless types are shared across multiple files
+- Component props should be `interface Props { ... }`
 - Use precise types; avoid `any` and unsafe casts
 
-**Props naming examples:**
-
-```tsx
-// ✅ Good - internal props, not exported
-interface Props {
-  title: string;
-  onClose: () => void;
-}
-
-export function Modal({ title, onClose }: Props) {
-  // ...
-}
-
-// ✅ Good - exported when needed externally
-export interface ModalProps {
-  title: string;
-  onClose: () => void;
-}
-
-export function Modal({ title, onClose }: ModalProps) {
-  // ...
-}
-
-// ❌ Bad - unnecessarily specific name for internal use
-interface ModalComponentProps {
-  title: string;
-  onClose: () => void;
-}
-
-// ❌ Bad - separate types.ts file for single component
-// types.ts
-export interface ModalProps { ... }
-
-// Modal.tsx
-import type { ModalProps } from './types';
-```
-
 Parameters:
 
 - If more than one parameter is needed, pass a single `Args` object for clarity

autogpt_platform/frontend/src/app/(no-navbar)/logout/page.tsx

@@ -1,45 +0,0 @@
-"use client";
-
-import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
-import { Text } from "@/components/atoms/Text/Text";
-import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
-import { useRouter } from "next/navigation";
-import { useEffect, useRef } from "react";
-
-const LOGOUT_REDIRECT_DELAY_MS = 400;
-
-function wait(ms: number): Promise<void> {
-  return new Promise(function resolveAfterDelay(resolve) {
-    setTimeout(resolve, ms);
-  });
-}
-
-export default function LogoutPage() {
-  const { logOut } = useSupabase();
-  const router = useRouter();
-  const hasStartedRef = useRef(false);
-
-  useEffect(function handleLogoutEffect() {
-    if (hasStartedRef.current) return;
-    hasStartedRef.current = true;
-
-    async function runLogout() {
-      await logOut();
-      await wait(LOGOUT_REDIRECT_DELAY_MS);
-      router.replace("/login");
-    }
-
-    void runLogout();
-  }, []);
-
-  return (
-    <div className="flex min-h-screen items-center justify-center px-4">
-      <div className="flex flex-col items-center justify-center gap-4 py-8">
-        <LoadingSpinner size="large" />
-        <Text variant="body" className="text-center">
-          Logging you out...
-        </Text>
-      </div>
-    </div>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/auth/callback/route.ts

@@ -9,7 +9,7 @@ export async function GET(request: Request) {
   const { searchParams, origin } = new URL(request.url);
   const code = searchParams.get("code");
 
-  let next = "/";
+  let next = "/marketplace";
 
   if (code) {
     const supabase = await getServerSupabase();

autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunGraph/RunGraph.tsx

@@ -5,11 +5,10 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/atoms/Tooltip/BaseTooltip";
-import { CircleNotchIcon, PlayIcon, StopIcon } from "@phosphor-icons/react";
+import { PlayIcon, StopIcon } from "@phosphor-icons/react";
 import { useShallow } from "zustand/react/shallow";
 import { RunInputDialog } from "../RunInputDialog/RunInputDialog";
 import { useRunGraph } from "./useRunGraph";
-import { cn } from "@/lib/utils";
 
 export const RunGraph = ({ flowID }: { flowID: string | null }) => {
   const {
@@ -25,31 +24,6 @@ export const RunGraph = ({ flowID }: { flowID: string | null }) => {
     useShallow((state) => state.isGraphRunning),
   );
 
-  const isLoading = isExecutingGraph || isTerminatingGraph || isSaving;
-
-  // Determine which icon to show with proper animation
-  const renderIcon = () => {
-    const iconClass = cn(
-      "size-4 transition-transform duration-200 ease-out",
-      !isLoading && "group-hover:scale-110",
-    );
-
-    if (isLoading) {
-      return (
-        <CircleNotchIcon
-          className={cn(iconClass, "animate-spin")}
-          weight="bold"
-        />
-      );
-    }
-
-    if (isGraphRunning) {
-      return <StopIcon className={iconClass} weight="fill" />;
-    }
-
-    return <PlayIcon className={iconClass} weight="fill" />;
-  };
-
   return (
     <>
       <Tooltip>
@@ -59,18 +33,18 @@ export const RunGraph = ({ flowID }: { flowID: string | null }) => {
             variant={isGraphRunning ? "destructive" : "primary"}
             data-id={isGraphRunning ? "stop-graph-button" : "run-graph-button"}
             onClick={isGraphRunning ? handleStopGraph : handleRunGraph}
-            disabled={!flowID || isLoading}
-            className="group"
+            disabled={!flowID || isExecutingGraph || isTerminatingGraph}
+            loading={isExecutingGraph || isTerminatingGraph || isSaving}
           >
-            {renderIcon()}
+            {!isGraphRunning ? (
+              <PlayIcon className="size-4" />
+            ) : (
+              <StopIcon className="size-4" />
+            )}
           </Button>
         </TooltipTrigger>
         <TooltipContent>
-          {isLoading
-            ? "Processing..."
-            : isGraphRunning
-              ? "Stop agent"
-              : "Run agent"}
+          {isGraphRunning ? "Stop agent" : "Run agent"}
         </TooltipContent>
       </Tooltip>
       <RunInputDialog

autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/RunInputDialog.tsx

@@ -10,7 +10,6 @@ import { useRunInputDialog } from "./useRunInputDialog";
 import { CronSchedulerDialog } from "../CronSchedulerDialog/CronSchedulerDialog";
 import { useTutorialStore } from "@/app/(platform)/build/stores/tutorialStore";
 import { useEffect } from "react";
-import { CredentialsGroupedView } from "@/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView";
 
 export const RunInputDialog = ({
   isOpen,
@@ -24,17 +23,19 @@ export const RunInputDialog = ({
   const hasInputs = useGraphStore((state) => state.hasInputs);
   const hasCredentials = useGraphStore((state) => state.hasCredentials);
   const inputSchema = useGraphStore((state) => state.inputSchema);
+  const credentialsSchema = useGraphStore(
+    (state) => state.credentialsInputSchema,
+  );
 
   const {
-    credentialFields,
-    requiredCredentials,
+    credentialsUiSchema,
     handleManualRun,
     handleInputChange,
     openCronSchedulerDialog,
     setOpenCronSchedulerDialog,
     inputValues,
     credentialValues,
-    handleCredentialFieldChange,
+    handleCredentialChange,
     isExecutingGraph,
   } = useRunInputDialog({ setIsOpen });
 
@@ -61,67 +62,67 @@ export const RunInputDialog = ({
           isOpen,
           set: setIsOpen,
         }}
-        styling={{ maxWidth: "700px", minWidth: "700px" }}
+        styling={{ maxWidth: "600px", minWidth: "600px" }}
       >
         <Dialog.Content>
-          <div
-            className="grid grid-cols-[1fr_auto] gap-10 p-1"
-            data-id="run-input-dialog-content"
-          >
-            <div className="space-y-6">
-              {/* Credentials Section */}
-              {hasCredentials() && credentialFields.length > 0 && (
-                <div data-id="run-input-credentials-section">
-                  <div className="mb-4">
-                    <Text variant="h4" className="text-gray-900">
-                      Credentials
-                    </Text>
-                  </div>
-                  <div className="px-2" data-id="run-input-credentials-form">
-                    <CredentialsGroupedView
-                      credentialFields={credentialFields}
-                      requiredCredentials={requiredCredentials}
-                      inputCredentials={credentialValues}
-                      inputValues={inputValues}
-                      onCredentialChange={handleCredentialFieldChange}
-                    />
-                  </div>
+          <div className="space-y-6 p-1" data-id="run-input-dialog-content">
+            {/* Credentials Section */}
+            {hasCredentials() && (
+              <div data-id="run-input-credentials-section">
+                <div className="mb-4">
+                  <Text variant="h4" className="text-gray-900">
+                    Credentials
+                  </Text>
                 </div>
-              )}
-
-              {/* Inputs Section */}
-              {hasInputs() && (
-                <div data-id="run-input-inputs-section">
-                  <div className="mb-4">
-                    <Text variant="h4" className="text-gray-900">
-                      Inputs
-                    </Text>
-                  </div>
-                  <div data-id="run-input-inputs-form">
-                    <FormRenderer
-                      jsonSchema={inputSchema as RJSFSchema}
-                      handleChange={(v) => handleInputChange(v.formData)}
-                      uiSchema={uiSchema}
-                      initialValues={{}}
-                      formContext={{
-                        showHandles: false,
-                        size: "large",
-                      }}
-                    />
-                  </div>
+                <div className="px-2" data-id="run-input-credentials-form">
+                  <FormRenderer
+                    jsonSchema={credentialsSchema as RJSFSchema}
+                    handleChange={(v) => handleCredentialChange(v.formData)}
+                    uiSchema={credentialsUiSchema}
+                    initialValues={{}}
+                    formContext={{
+                      showHandles: false,
+                      size: "large",
+                      showOptionalToggle: false,
+                    }}
+                  />
                 </div>
-              )}
-            </div>
+              </div>
+            )}
 
+            {/* Inputs Section */}
+            {hasInputs() && (
+              <div data-id="run-input-inputs-section">
+                <div className="mb-4">
+                  <Text variant="h4" className="text-gray-900">
+                    Inputs
+                  </Text>
+                </div>
+                <div data-id="run-input-inputs-form">
+                  <FormRenderer
+                    jsonSchema={inputSchema as RJSFSchema}
+                    handleChange={(v) => handleInputChange(v.formData)}
+                    uiSchema={uiSchema}
+                    initialValues={{}}
+                    formContext={{
+                      showHandles: false,
+                      size: "large",
+                    }}
+                  />
+                </div>
+              </div>
+            )}
+
+            {/* Action Button */}
             <div
-              className="flex flex-col items-end justify-start"
+              className="flex justify-end pt-2"
               data-id="run-input-actions-section"
             >
               {purpose === "run" && (
                 <Button
                   variant="primary"
                   size="large"
-                  className="group h-fit min-w-0 gap-2 px-10"
+                  className="group h-fit min-w-0 gap-2"
                   onClick={handleManualRun}
                   loading={isExecutingGraph}
                   data-id="run-input-manual-run-button"
@@ -136,7 +137,7 @@ export const RunInputDialog = ({
                 <Button
                   variant="primary"
                   size="large"
-                  className="group h-fit min-w-0 gap-2 px-10"
+                  className="group h-fit min-w-0 gap-2"
                   onClick={() => setOpenCronSchedulerDialog(true)}
                   data-id="run-input-schedule-button"
                 >

autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.ts

@@ -7,11 +7,12 @@ import {
   GraphExecutionMeta,
 } from "@/lib/autogpt-server-api";
 import { parseAsInteger, parseAsString, useQueryStates } from "nuqs";
-import { useCallback, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
+import { uiSchema } from "../../../FlowEditor/nodes/uiSchema";
+import { isCredentialFieldSchema } from "@/components/renderers/InputRenderer/custom/CredentialField/helpers";
 import { useNodeStore } from "@/app/(platform)/build/stores/nodeStore";
 import { useToast } from "@/components/molecules/Toast/use-toast";
 import { useReactFlow } from "@xyflow/react";
-import type { CredentialField } from "@/components/contextual/CredentialsInput/components/CredentialsGroupedView/helpers";
 
 export const useRunInputDialog = ({
   setIsOpen,
@@ -119,32 +120,27 @@ export const useRunInputDialog = ({
       },
     });
 
-  // Convert credentials schema to credential fields array for CredentialsGroupedView
-  const credentialFields: CredentialField[] = useMemo(() => {
-    if (!credentialsSchema?.properties) return [];
-    return Object.entries(credentialsSchema.properties);
-  }, [credentialsSchema]);
+  // We are rendering the credentials field differently compared to other fields.
+  // In the node, we have the field name as "credential" - so our library catches it and renders it differently.
+  // But here we have a different name, something like `Firecrawl credentials`, so here we are telling the library that this field is a credential field type.
 
-  // Get required credentials as a Set
-  const requiredCredentials = useMemo(() => {
-    return new Set<string>(credentialsSchema?.required || []);
-  }, [credentialsSchema]);
+  const credentialsUiSchema = useMemo(() => {
+    const dynamicUiSchema: any = { ...uiSchema };
 
-  // Handler for individual credential changes
-  const handleCredentialFieldChange = useCallback(
-    (key: string, value?: CredentialsMetaInput) => {
-      setCredentialValues((prev) => {
-        if (value) {
-          return { ...prev, [key]: value };
-        } else {
-          const next = { ...prev };
-          delete next[key];
-          return next;
+    if (credentialsSchema?.properties) {
+      Object.keys(credentialsSchema.properties).forEach((fieldName) => {
+        const fieldSchema = credentialsSchema.properties[fieldName];
+        if (isCredentialFieldSchema(fieldSchema)) {
+          dynamicUiSchema[fieldName] = {
+            ...dynamicUiSchema[fieldName],
+            "ui:field": "custom/credential_field",
+          };
         }
       });
-    },
-    [],
-  );
+    }
+
+    return dynamicUiSchema;
+  }, [credentialsSchema]);
 
   const handleManualRun = async () => {
     // Filter out incomplete credentials (those without a valid id)
@@ -177,14 +173,12 @@ export const useRunInputDialog = ({
   };
 
   return {
-    credentialFields,
-    requiredCredentials,
+    credentialsUiSchema,
     inputValues,
     credentialValues,
     isExecutingGraph,
     handleInputChange,
     handleCredentialChange,
-    handleCredentialFieldChange,
     handleManualRun,
     openCronSchedulerDialog,
     setOpenCronSchedulerDialog,

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/components/CustomControl.tsx

@@ -53,14 +53,14 @@ export const CustomControls = memo(
     const controls = [
       {
         id: "zoom-in-button",
-        icon: <PlusIcon className="size-3.5 text-zinc-600" />,
+        icon: <PlusIcon className="size-4" />,
         label: "Zoom In",
         onClick: () => zoomIn(),
         className: "h-10 w-10 border-none",
       },
       {
         id: "zoom-out-button",
-        icon: <MinusIcon className="size-3.5 text-zinc-600" />,
+        icon: <MinusIcon className="size-4" />,
         label: "Zoom Out",
         onClick: () => zoomOut(),
         className: "h-10 w-10 border-none",
@@ -68,9 +68,9 @@ export const CustomControls = memo(
       {
         id: "tutorial-button",
         icon: isTutorialLoading ? (
-          <CircleNotchIcon className="size-3.5 animate-spin text-zinc-600" />
+          <CircleNotchIcon className="size-4 animate-spin" />
         ) : (
-          <ChalkboardIcon className="size-3.5 text-zinc-600" />
+          <ChalkboardIcon className="size-4" />
         ),
         label: isTutorialLoading ? "Loading Tutorial..." : "Start Tutorial",
         onClick: handleTutorialClick,
@@ -79,7 +79,7 @@ export const CustomControls = memo(
       },
       {
         id: "fit-view-button",
-        icon: <FrameCornersIcon className="size-3.5 text-zinc-600" />,
+        icon: <FrameCornersIcon className="size-4" />,
         label: "Fit View",
         onClick: () => fitView({ padding: 0.2, duration: 800, maxZoom: 1 }),
         className: "h-10 w-10 border-none",
@@ -87,9 +87,9 @@ export const CustomControls = memo(
       {
         id: "lock-button",
         icon: !isLocked ? (
-          <LockOpenIcon className="size-3.5 text-zinc-600" />
+          <LockOpenIcon className="size-4" />
         ) : (
-          <LockIcon className="size-3.5 text-zinc-600" />
+          <LockIcon className="size-4" />
         ),
         label: "Toggle Lock",
         onClick: () => setIsLocked(!isLocked),

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlow.ts

@@ -139,6 +139,14 @@ export const useFlow = () => {
       useNodeStore.getState().setNodes([]);
       useNodeStore.getState().clearResolutionState();
       addNodes(customNodes);
+
+      // Sync hardcoded values with handle IDs.
+      // If a key–value field has a key without a value, the backend omits it from hardcoded values.
+      // But if a handleId exists for that key, it causes inconsistency.
+      // This ensures hardcoded values stay in sync with handle IDs.
+      customNodes.forEach((node) => {
+        useNodeStore.getState().syncHardcodedValuesWithHandleIds(node.id);
+      });
     }
   }, [customNodes, addNodes]);
 
@@ -150,14 +158,6 @@ export const useFlow = () => {
     }
   }, [graph?.links, addLinks]);
 
-  useEffect(() => {
-    if (customNodes.length > 0 && graph?.links) {
-      customNodes.forEach((node) => {
-        useNodeStore.getState().syncHardcodedValuesWithHandleIds(node.id);
-      });
-    }
-  }, [customNodes, graph?.links]);
-
   // update node execution status in nodes
   useEffect(() => {
     if (

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/edges/CustomEdge.tsx

@@ -19,8 +19,6 @@ export type CustomEdgeData = {
   beadUp?: number;
   beadDown?: number;
   beadData?: Map<string, NodeExecutionResult["status"]>;
-  edgeColorClass?: string;
-  edgeHexColor?: string;
 };
 
 export type CustomEdge = XYEdge<CustomEdgeData, "custom">;
@@ -38,6 +36,7 @@ const CustomEdge = ({
   selected,
 }: EdgeProps<CustomEdge>) => {
   const removeConnection = useEdgeStore((state) => state.removeEdge);
+  // Subscribe to the brokenEdgeIDs map and check if this edge is broken across any node
   const isBroken = useNodeStore((state) => state.isEdgeBroken(id));
   const [isHovered, setIsHovered] = useState(false);
 
@@ -53,7 +52,6 @@ const CustomEdge = ({
   const isStatic = data?.isStatic ?? false;
   const beadUp = data?.beadUp ?? 0;
   const beadDown = data?.beadDown ?? 0;
-  const edgeColorClass = data?.edgeColorClass;
 
   const handleRemoveEdge = () => {
     removeConnection(id);
@@ -72,9 +70,7 @@ const CustomEdge = ({
             ? "!stroke-red-500 !stroke-[2px] [stroke-dasharray:4]"
             : selected
               ? "stroke-zinc-800"
-              : edgeColorClass
-                ? cn(edgeColorClass, "opacity-70 hover:opacity-100")
-                : "stroke-zinc-500/50 hover:stroke-zinc-500",
+              : "stroke-zinc-500/50 hover:stroke-zinc-500",
         )}
       />
       <JSBeads

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/edges/useCustomEdge.ts

@@ -8,7 +8,6 @@ import { useCallback } from "react";
 import { useNodeStore } from "../../../stores/nodeStore";
 import { useHistoryStore } from "../../../stores/historyStore";
 import { CustomEdge } from "./CustomEdge";
-import { getEdgeColorFromOutputType } from "../nodes/helpers";
 
 export const useCustomEdge = () => {
   const edges = useEdgeStore((s) => s.edges);
@@ -35,13 +34,8 @@ export const useCustomEdge = () => {
       if (exists) return;
 
       const nodes = useNodeStore.getState().nodes;
-      const sourceNode = nodes.find((n) => n.id === conn.source);
-      const isStatic = sourceNode?.data?.staticOutput;
-
-      const { colorClass, hexColor } = getEdgeColorFromOutputType(
-        sourceNode?.data?.outputSchema,
-        conn.sourceHandle,
-      );
+      const isStatic = nodes.find((n) => n.id === conn.source)?.data
+        ?.staticOutput;
 
       addEdge({
         source: conn.source,
@@ -50,8 +44,6 @@ export const useCustomEdge = () => {
         targetHandle: conn.targetHandle,
         data: {
           isStatic,
-          edgeColorClass: colorClass,
-          edgeHexColor: hexColor,
         },
       });
     },

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsx

@@ -1,21 +1,22 @@
 import { Button } from "@/components/atoms/Button/Button";
 import { Text } from "@/components/atoms/Text/Text";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/molecules/Accordion/Accordion";
 import { beautifyString, cn } from "@/lib/utils";
-import { CopyIcon, CheckIcon } from "@phosphor-icons/react";
+import { CaretDownIcon, CopyIcon, CheckIcon } from "@phosphor-icons/react";
 import { NodeDataViewer } from "./components/NodeDataViewer/NodeDataViewer";
 import { ContentRenderer } from "./components/ContentRenderer";
 import { useNodeOutput } from "./useNodeOutput";
 import { ViewMoreData } from "./components/ViewMoreData";
 
 export const NodeDataRenderer = ({ nodeId }: { nodeId: string }) => {
-  const { outputData, copiedKey, handleCopy, executionResultId, inputData } =
-    useNodeOutput(nodeId);
+  const {
+    outputData,
+    isExpanded,
+    setIsExpanded,
+    copiedKey,
+    handleCopy,
+    executionResultId,
+    inputData,
+  } = useNodeOutput(nodeId);
 
   if (Object.keys(outputData).length === 0) {
     return null;
@@ -24,117 +25,122 @@ export const NodeDataRenderer = ({ nodeId }: { nodeId: string }) => {
   return (
     <div
       data-tutorial-id={`node-output`}
-      className="rounded-b-xl border-t border-zinc-200 px-4 py-2"
+      className="flex flex-col gap-3 rounded-b-xl border-t border-zinc-200 px-4 py-4"
     >
-      <Accordion type="single" collapsible defaultValue="node-output">
-        <AccordionItem value="node-output" className="border-none">
-          <AccordionTrigger className="py-2 hover:no-underline">
-            <Text
-              variant="body-medium"
-              className="!font-semibold text-slate-700"
-            >
-              Node Output
-            </Text>
-          </AccordionTrigger>
-          <AccordionContent className="pt-2">
-            <div className="flex max-w-[350px] flex-col gap-4">
-              <div className="space-y-2">
-                <Text variant="small-medium">Input</Text>
+      <div className="flex items-center justify-between">
+        <Text variant="body-medium" className="!font-semibold text-slate-700">
+          Node Output
+        </Text>
+        <Button
+          variant="ghost"
+          size="small"
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="h-fit min-w-0 p-1 text-slate-600 hover:text-slate-900"
+        >
+          <CaretDownIcon
+            size={16}
+            weight="bold"
+            className={`transition-transform ${isExpanded ? "rotate-180" : ""}`}
+          />
+        </Button>
+      </div>
 
-                <ContentRenderer value={inputData} shortContent={false} />
+      {isExpanded && (
+        <>
+          <div className="flex max-w-[350px] flex-col gap-4">
+            <div className="space-y-2">
+              <Text variant="small-medium">Input</Text>
 
-                <div className="mt-1 flex justify-end gap-1">
-                  <NodeDataViewer
-                    data={inputData}
-                    pinName="Input"
-                    execId={executionResultId}
-                  />
-                  <Button
-                    variant="secondary"
-                    size="small"
-                    onClick={() => handleCopy("input", inputData)}
-                    className={cn(
-                      "h-fit min-w-0 gap-1.5 border border-zinc-200 p-2 text-black hover:text-slate-900",
-                      copiedKey === "input" &&
-                        "border-green-400 bg-green-100 hover:border-green-400 hover:bg-green-200",
-                    )}
-                  >
-                    {copiedKey === "input" ? (
-                      <CheckIcon size={12} className="text-green-600" />
-                    ) : (
-                      <CopyIcon size={12} />
-                    )}
-                  </Button>
-                </div>
+              <ContentRenderer value={inputData} shortContent={false} />
+
+              <div className="mt-1 flex justify-end gap-1">
+                <NodeDataViewer
+                  data={inputData}
+                  pinName="Input"
+                  execId={executionResultId}
+                />
+                <Button
+                  variant="secondary"
+                  size="small"
+                  onClick={() => handleCopy("input", inputData)}
+                  className={cn(
+                    "h-fit min-w-0 gap-1.5 border border-zinc-200 p-2 text-black hover:text-slate-900",
+                    copiedKey === "input" &&
+                      "border-green-400 bg-green-100 hover:border-green-400 hover:bg-green-200",
+                  )}
+                >
+                  {copiedKey === "input" ? (
+                    <CheckIcon size={12} className="text-green-600" />
+                  ) : (
+                    <CopyIcon size={12} />
+                  )}
+                </Button>
               </div>
+            </div>
 
-              {Object.entries(outputData)
-                .slice(0, 2)
-                .map(([key, value]) => (
-                  <div key={key} className="flex flex-col gap-2">
-                    <div className="flex items-center gap-2">
-                      <Text
-                        variant="small-medium"
-                        className="!font-semibold text-slate-600"
-                      >
-                        Pin:
-                      </Text>
-                      <Text variant="small" className="text-slate-700">
-                        {beautifyString(key)}
-                      </Text>
-                    </div>
-                    <div className="w-full space-y-2">
-                      <Text
-                        variant="small"
-                        className="!font-semibold text-slate-600"
-                      >
-                        Data:
-                      </Text>
-                      <div className="relative space-y-2">
-                        {value.map((item, index) => (
-                          <div key={index}>
-                            <ContentRenderer value={item} shortContent={true} />
-                          </div>
-                        ))}
-
-                        <div className="mt-1 flex justify-end gap-1">
-                          <NodeDataViewer
-                            data={value}
-                            pinName={key}
-                            execId={executionResultId}
-                          />
-                          <Button
-                            variant="secondary"
-                            size="small"
-                            onClick={() => handleCopy(key, value)}
-                            className={cn(
-                              "h-fit min-w-0 gap-1.5 border border-zinc-200 p-2 text-black hover:text-slate-900",
-                              copiedKey === key &&
-                                "border-green-400 bg-green-100 hover:border-green-400 hover:bg-green-200",
-                            )}
-                          >
-                            {copiedKey === key ? (
-                              <CheckIcon size={12} className="text-green-600" />
-                            ) : (
-                              <CopyIcon size={12} />
-                            )}
-                          </Button>
+            {Object.entries(outputData)
+              .slice(0, 2)
+              .map(([key, value]) => (
+                <div key={key} className="flex flex-col gap-2">
+                  <div className="flex items-center gap-2">
+                    <Text
+                      variant="small-medium"
+                      className="!font-semibold text-slate-600"
+                    >
+                      Pin:
+                    </Text>
+                    <Text variant="small" className="text-slate-700">
+                      {beautifyString(key)}
+                    </Text>
+                  </div>
+                  <div className="w-full space-y-2">
+                    <Text
+                      variant="small"
+                      className="!font-semibold text-slate-600"
+                    >
+                      Data:
+                    </Text>
+                    <div className="relative space-y-2">
+                      {value.map((item, index) => (
+                        <div key={index}>
+                          <ContentRenderer value={item} shortContent={true} />
                         </div>
+                      ))}
+
+                      <div className="mt-1 flex justify-end gap-1">
+                        <NodeDataViewer
+                          data={value}
+                          pinName={key}
+                          execId={executionResultId}
+                        />
+                        <Button
+                          variant="secondary"
+                          size="small"
+                          onClick={() => handleCopy(key, value)}
+                          className={cn(
+                            "h-fit min-w-0 gap-1.5 border border-zinc-200 p-2 text-black hover:text-slate-900",
+                            copiedKey === key &&
+                              "border-green-400 bg-green-100 hover:border-green-400 hover:bg-green-200",
+                          )}
+                        >
+                          {copiedKey === key ? (
+                            <CheckIcon size={12} className="text-green-600" />
+                          ) : (
+                            <CopyIcon size={12} />
+                          )}
+                        </Button>
                       </div>
                     </div>
                   </div>
-                ))}
-            </div>
+                </div>
+              ))}
+          </div>
 
-            {Object.keys(outputData).length > 2 && (
-              <ViewMoreData
-                outputData={outputData}
-                execId={executionResultId}
-              />
-            )}
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
+          {Object.keys(outputData).length > 2 && (
+            <ViewMoreData outputData={outputData} execId={executionResultId} />
+          )}
+        </>
+      )}
     </div>
   );
 };

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/useNodeOutput.tsx

@@ -4,6 +4,7 @@ import { useShallow } from "zustand/react/shallow";
 import { useState } from "react";
 
 export const useNodeOutput = (nodeId: string) => {
+  const [isExpanded, setIsExpanded] = useState(true);
   const [copiedKey, setCopiedKey] = useState<string | null>(null);
   const { toast } = useToast();
 
@@ -36,10 +37,13 @@ export const useNodeOutput = (nodeId: string) => {
     }
   };
   return {
-    outputData,
-    inputData,
-    copiedKey,
-    handleCopy,
+    outputData: outputData,
+    inputData: inputData,
+    isExpanded: isExpanded,
+    setIsExpanded: setIsExpanded,
+    copiedKey: copiedKey,
+    setCopiedKey: setCopiedKey,
+    handleCopy: handleCopy,
     executionResultId: nodeExecutionResult?.node_exec_id,
   };
 };

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/helpers.ts

@@ -187,38 +187,3 @@ export const getTypeDisplayInfo = (schema: any) => {
     hexColor,
   };
 };
-
-export function getEdgeColorFromOutputType(
-  outputSchema: RJSFSchema | undefined,
-  sourceHandle: string,
-): { colorClass: string; hexColor: string } {
-  const defaultColor = {
-    colorClass: "stroke-zinc-500/50",
-    hexColor: "#6b7280",
-  };
-
-  if (!outputSchema?.properties) return defaultColor;
-
-  const properties = outputSchema.properties as Record<string, unknown>;
-  const handleParts = sourceHandle.split("_#_");
-  let currentSchema: Record<string, unknown> = properties;
-
-  for (let i = 0; i < handleParts.length; i++) {
-    const part = handleParts[i];
-    const fieldSchema = currentSchema[part] as Record<string, unknown>;
-    if (!fieldSchema) return defaultColor;
-
-    if (i === handleParts.length - 1) {
-      const { hexColor, colorClass } = getTypeDisplayInfo(fieldSchema);
-      return { colorClass: colorClass.replace("!text-", "stroke-"), hexColor };
-    }
-
-    if (fieldSchema.properties) {
-      currentSchema = fieldSchema.properties as Record<string, unknown>;
-    } else {
-      return defaultColor;
-    }
-  }
-
-  return defaultColor;
-}

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/icons.ts

@@ -1,32 +1,7 @@
-type IconOptions = {
-  size?: number;
-  color?: string;
-};
-
-const DEFAULT_SIZE = 16;
-const DEFAULT_COLOR = "#52525b"; // zinc-600
-
-const iconPaths = {
-  ClickIcon: `M88,24V16a8,8,0,0,1,16,0v8a8,8,0,0,1-16,0ZM16,104h8a8,8,0,0,0,0-16H16a8,8,0,0,0,0,16ZM124.42,39.16a8,8,0,0,0,10.74-3.58l8-16a8,8,0,0,0-14.31-7.16l-8,16A8,8,0,0,0,124.42,39.16Zm-96,81.69-16,8a8,8,0,0,0,7.16,14.31l16-8a8,8,0,1,0-7.16-14.31ZM219.31,184a16,16,0,0,1,0,22.63l-12.68,12.68a16,16,0,0,1-22.63,0L132.7,168,115,214.09c0,.1-.08.21-.13.32a15.83,15.83,0,0,1-14.6,9.59l-.79,0a15.83,15.83,0,0,1-14.41-11L32.8,52.92A16,16,0,0,1,52.92,32.8L213,85.07a16,16,0,0,1,1.41,29.8l-.32.13L168,132.69ZM208,195.31,156.69,144h0a16,16,0,0,1,4.93-26l.32-.14,45.95-17.64L48,48l52.2,159.86,17.65-46c0-.11.08-.22.13-.33a16,16,0,0,1,11.69-9.34,16.72,16.72,0,0,1,3-.28,16,16,0,0,1,11.3,4.69L195.31,208Z`,
-  Keyboard: `M224,48H32A16,16,0,0,0,16,64V192a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48Zm0,144H32V64H224V192Zm-16-64a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16H200A8,8,0,0,1,208,128Zm0-32a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16H200A8,8,0,0,1,208,96ZM72,160a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16h8A8,8,0,0,1,72,160Zm96,0a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,160Zm40,0a8,8,0,0,1-8,8h-8a8,8,0,0,1,0-16h8A8,8,0,0,1,208,160Z`,
-  Drag: `M188,80a27.79,27.79,0,0,0-13.36,3.4,28,28,0,0,0-46.64-11A28,28,0,0,0,80,92v20H68a28,28,0,0,0-28,28v12a88,88,0,0,0,176,0V108A28,28,0,0,0,188,80Zm12,72a72,72,0,0,1-144,0V140a12,12,0,0,1,12-12H80v24a8,8,0,0,0,16,0V92a12,12,0,0,1,24,0v28a8,8,0,0,0,16,0V92a12,12,0,0,1,24,0v28a8,8,0,0,0,16,0V108a12,12,0,0,1,24,0Z`,
-};
-
-function createIcon(path: string, options: IconOptions = {}): string {
-  const size = options.size ?? DEFAULT_SIZE;
-  const color = options.color ?? DEFAULT_COLOR;
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${color}" viewBox="0 0 256 256"><path d="${path}"></path></svg>`;
-}
+// These are SVG Phosphor icons
 
 export const ICONS = {
-  ClickIcon: createIcon(iconPaths.ClickIcon),
-  Keyboard: createIcon(iconPaths.Keyboard),
-  Drag: createIcon(iconPaths.Drag),
+  ClickIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#000000" viewBox="0 0 256 256"><path d="M88,24V16a8,8,0,0,1,16,0v8a8,8,0,0,1-16,0ZM16,104h8a8,8,0,0,0,0-16H16a8,8,0,0,0,0,16ZM124.42,39.16a8,8,0,0,0,10.74-3.58l8-16a8,8,0,0,0-14.31-7.16l-8,16A8,8,0,0,0,124.42,39.16Zm-96,81.69-16,8a8,8,0,0,0,7.16,14.31l16-8a8,8,0,1,0-7.16-14.31ZM219.31,184a16,16,0,0,1,0,22.63l-12.68,12.68a16,16,0,0,1-22.63,0L132.7,168,115,214.09c0,.1-.08.21-.13.32a15.83,15.83,0,0,1-14.6,9.59l-.79,0a15.83,15.83,0,0,1-14.41-11L32.8,52.92A16,16,0,0,1,52.92,32.8L213,85.07a16,16,0,0,1,1.41,29.8l-.32.13L168,132.69ZM208,195.31,156.69,144h0a16,16,0,0,1,4.93-26l.32-.14,45.95-17.64L48,48l52.2,159.86,17.65-46c0-.11.08-.22.13-.33a16,16,0,0,1,11.69-9.34,16.72,16.72,0,0,1,3-.28,16,16,0,0,1,11.3,4.69L195.31,208Z"></path></svg>`,
+  Keyboard: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#000000" viewBox="0 0 256 256"><path d="M224,48H32A16,16,0,0,0,16,64V192a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48Zm0,144H32V64H224V192Zm-16-64a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16H200A8,8,0,0,1,208,128Zm0-32a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16H200A8,8,0,0,1,208,96ZM72,160a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16h8A8,8,0,0,1,72,160Zm96,0a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,160Zm40,0a8,8,0,0,1-8,8h-8a8,8,0,0,1,0-16h8A8,8,0,0,1,208,160Z"></path></svg>`,
+  Drag: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#000000" viewBox="0 0 256 256"><path d="M188,80a27.79,27.79,0,0,0-13.36,3.4,28,28,0,0,0-46.64-11A28,28,0,0,0,80,92v20H68a28,28,0,0,0-28,28v12a88,88,0,0,0,176,0V108A28,28,0,0,0,188,80Zm12,72a72,72,0,0,1-144,0V140a12,12,0,0,1,12-12H80v24a8,8,0,0,0,16,0V92a12,12,0,0,1,24,0v28a8,8,0,0,0,16,0V92a12,12,0,0,1,24,0v28a8,8,0,0,0,16,0V108a12,12,0,0,1,24,0Z"></path></svg>`,
 };
-
-export function getIcon(
-  name: keyof typeof iconPaths,
-  options?: IconOptions,
-): string {
-  return createIcon(iconPaths[name], options);
-}

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/index.ts

@@ -11,7 +11,6 @@ import {
 } from "./helpers";
 import { useNodeStore } from "../../../stores/nodeStore";
 import { useEdgeStore } from "../../../stores/edgeStore";
-import { useTutorialStore } from "../../../stores/tutorialStore";
 
 let isTutorialLoading = false;
 let tutorialLoadingCallback: ((loading: boolean) => void) | null = null;
@@ -61,14 +60,12 @@ export const startTutorial = async () => {
     handleTutorialComplete();
     removeTutorialStyles();
     clearPrefetchedBlocks();
-    useTutorialStore.getState().setIsTutorialRunning(false);
   });
 
   tour.on("cancel", () => {
     handleTutorialCancel(tour);
     removeTutorialStyles();
     clearPrefetchedBlocks();
-    useTutorialStore.getState().setIsTutorialRunning(false);
   });
 
   for (const step of tour.steps) {

autogpt_platform/frontend/src/app/(platform)/build/components/helper.ts

@@ -61,18 +61,12 @@ export const convertNodesPlusBlockInfoIntoCustomNodes = (
   return customNode;
 };
 
-const isToolSourceName = (sourceName: string): boolean =>
-  sourceName.startsWith("tools_^_");
-
-const cleanupSourceName = (sourceName: string): string =>
-  isToolSourceName(sourceName) ? "tools" : sourceName;
-
 export const linkToCustomEdge = (link: Link): CustomEdge => ({
   id: link.id ?? "",
   type: "custom" as const,
   source: link.source_id,
   target: link.sink_id,
-  sourceHandle: cleanupSourceName(link.source_name),
+  sourceHandle: link.source_name,
   targetHandle: link.sink_name,
   data: {
     isStatic: link.is_static,

autogpt_platform/frontend/src/app/(platform)/chat/components/Chat/Chat.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { Button } from "@/components/atoms/Button/Button";
+import { Text } from "@/components/atoms/Text/Text";
+import { cn } from "@/lib/utils";
+import { List } from "@phosphor-icons/react";
+import React, { useState } from "react";
+import { ChatContainer } from "./components/ChatContainer/ChatContainer";
+import { ChatErrorState } from "./components/ChatErrorState/ChatErrorState";
+import { ChatLoadingState } from "./components/ChatLoadingState/ChatLoadingState";
+import { SessionsDrawer } from "./components/SessionsDrawer/SessionsDrawer";
+import { useChat } from "./useChat";
+
+export interface ChatProps {
+  className?: string;
+  headerTitle?: React.ReactNode;
+  showHeader?: boolean;
+  showSessionInfo?: boolean;
+  showNewChatButton?: boolean;
+  onNewChat?: () => void;
+  headerActions?: React.ReactNode;
+}
+
+export function Chat({
+  className,
+  headerTitle = "AutoGPT Copilot",
+  showHeader = true,
+  showSessionInfo = true,
+  showNewChatButton = true,
+  onNewChat,
+  headerActions,
+}: ChatProps) {
+  const {
+    messages,
+    isLoading,
+    isCreating,
+    error,
+    sessionId,
+    createSession,
+    clearSession,
+    loadSession,
+  } = useChat();
+
+  const [isSessionsDrawerOpen, setIsSessionsDrawerOpen] = useState(false);
+
+  const handleNewChat = () => {
+    clearSession();
+    onNewChat?.();
+  };
+
+  const handleSelectSession = async (sessionId: string) => {
+    try {
+      await loadSession(sessionId);
+    } catch (err) {
+      console.error("Failed to load session:", err);
+    }
+  };
+
+  return (
+    <div className={cn("flex h-full flex-col", className)}>
+      {/* Header */}
+      {showHeader && (
+        <header className="shrink-0 border-t border-zinc-200 bg-white p-3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <button
+                aria-label="View sessions"
+                onClick={() => setIsSessionsDrawerOpen(true)}
+                className="flex size-8 items-center justify-center rounded hover:bg-zinc-100"
+              >
+                <List width="1.25rem" height="1.25rem" />
+              </button>
+              {typeof headerTitle === "string" ? (
+                <Text variant="h2" className="text-lg font-semibold">
+                  {headerTitle}
+                </Text>
+              ) : (
+                headerTitle
+              )}
+            </div>
+            <div className="flex items-center gap-3">
+              {showSessionInfo && sessionId && (
+                <>
+                  {showNewChatButton && (
+                    <Button
+                      variant="outline"
+                      size="small"
+                      onClick={handleNewChat}
+                    >
+                      New Chat
+                    </Button>
+                  )}
+                </>
+              )}
+              {headerActions}
+            </div>
+          </div>
+        </header>
+      )}
+
+      {/* Main Content */}
+      <main className="flex min-h-0 flex-1 flex-col overflow-hidden">
+        {/* Loading State - show when explicitly loading/creating OR when we don't have a session yet and no error */}
+        {(isLoading || isCreating || (!sessionId && !error)) && (
+          <ChatLoadingState
+            message={isCreating ? "Creating session..." : "Loading..."}
+          />
+        )}
+
+        {/* Error State */}
+        {error && !isLoading && (
+          <ChatErrorState error={error} onRetry={createSession} />
+        )}
+
+        {/* Session Content */}
+        {sessionId && !isLoading && !error && (
+          <ChatContainer
+            sessionId={sessionId}
+            initialMessages={messages}
+            className="flex-1"
+          />
+        )}
+      </main>
+
+      {/* Sessions Drawer */}
+      <SessionsDrawer
+        isOpen={isSessionsDrawerOpen}
+        onClose={() => setIsSessionsDrawerOpen(false)}
+        onSelectSession={handleSelectSession}
+        currentSessionId={sessionId}
+      />
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/chat/components/Chat/components/AuthPromptWidget/AuthPromptWidget.tsx

@@ -21,7 +21,7 @@ export function AuthPromptWidget({
   message,
   sessionId,
   agentInfo,
-  returnUrl = "/copilot/chat",
+  returnUrl = "/chat",
   className,
 }: AuthPromptWidgetProps) {
   const router = useRouter();

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

@@ -1,37 +1,31 @@
 import type { SessionDetailResponse } from "@/app/api/__generated__/models/sessionDetailResponse";
-import { useBreakpoint } from "@/lib/hooks/useBreakpoint";
 import { cn } from "@/lib/utils";
 import { useCallback } from "react";
 import { usePageContext } from "../../usePageContext";
 import { ChatInput } from "../ChatInput/ChatInput";
 import { MessageList } from "../MessageList/MessageList";
+import { QuickActionsWelcome } from "../QuickActionsWelcome/QuickActionsWelcome";
 import { useChatContainer } from "./useChatContainer";
 
 export interface ChatContainerProps {
   sessionId: string | null;
   initialMessages: SessionDetailResponse["messages"];
-  initialPrompt?: string;
   className?: string;
 }
 
 export function ChatContainer({
   sessionId,
   initialMessages,
-  initialPrompt,
   className,
 }: ChatContainerProps) {
-  const { messages, streamingChunks, isStreaming, sendMessage, stopStreaming } =
+  const { messages, streamingChunks, isStreaming, sendMessage } =
     useChatContainer({
       sessionId,
       initialMessages,
-      initialPrompt,
     });
-
   const { capturePageContext } = usePageContext();
-  const breakpoint = useBreakpoint();
-  const isMobile =
-    breakpoint === "base" || breakpoint === "sm" || breakpoint === "md";
 
+  // Wrap sendMessage to automatically capture page context
   const sendMessageWithContext = useCallback(
     async (content: string, isUserMessage: boolean = true) => {
       const context = capturePageContext();
@@ -40,16 +34,35 @@ export function ChatContainer({
     [sendMessage, capturePageContext],
   );
 
+  const quickActions = [
+    "Find agents for social media management",
+    "Show me agents for content creation",
+    "Help me automate my business",
+    "What can you help me with?",
+  ];
+
   return (
     <div
-      className={cn(
-        "mx-auto flex h-full min-h-0 w-full max-w-3xl flex-col bg-[#f8f8f9]",
-        className,
-      )}
+      className={cn("flex h-full min-h-0 flex-col", className)}
+      style={{
+        backgroundColor: "#ffffff",
+        backgroundImage:
+          "radial-gradient(#e5e5e5 0.5px, transparent 0.5px), radial-gradient(#e5e5e5 0.5px, #ffffff 0.5px)",
+        backgroundSize: "20px 20px",
+        backgroundPosition: "0 0, 10px 10px",
+      }}
     >
-      {/* Messages - Scrollable */}
-      <div className="relative flex min-h-0 flex-1 flex-col">
-        <div className="flex min-h-full flex-col justify-end">
+      {/* Messages or Welcome Screen */}
+      <div className="flex min-h-0 flex-1 flex-col overflow-hidden pb-24">
+        {messages.length === 0 ? (
+          <QuickActionsWelcome
+            title="Welcome to AutoGPT Copilot"
+            description="Start a conversation to discover and run AI agents."
+            actions={quickActions}
+            onActionClick={sendMessageWithContext}
+            disabled={isStreaming || !sessionId}
+          />
+        ) : (
           <MessageList
             messages={messages}
             streamingChunks={streamingChunks}
@@ -57,21 +70,16 @@ export function ChatContainer({
             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]" />
+      {/* Input - Always visible */}
+      <div className="fixed bottom-0 left-0 right-0 z-50 border-t border-zinc-200 bg-white p-4">
         <ChatInput
           onSend={sendMessageWithContext}
           disabled={isStreaming || !sessionId}
-          isStreaming={isStreaming}
-          onStop={stopStreaming}
           placeholder={
-            isMobile
-              ? "You can search or just ask"
-              : 'You can search or just ask — e.g. "create a blog post outline"'
+            sessionId ? "Type your message..." : "Creating session..."
           }
         />
       </div>

autogpt_platform/frontend/src/app/(platform)/chat/components/Chat/components/ChatContainer/helpers.ts

@@ -1,33 +1,6 @@
-import { SessionKey, sessionStorage } from "@/services/storage/session-storage";
 import type { ToolResult } from "@/types/chat";
 import type { ChatMessageData } from "../ChatMessage/useChatMessage";
 
-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, "");
@@ -234,22 +207,12 @@ export function parseToolResponse(
     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,
+    result,
     success: true,
     timestamp: timestamp || new Date(),
   };
@@ -304,34 +267,23 @@ export function extractCredentialsNeeded(
       | 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 =
+      const credentials = Object.values(missingCreds).map((credInfo) => ({
+        provider: (credInfo.provider as string) || "unknown",
+        providerName:
+          (credInfo.provider_name as string) ||
+          (credInfo.provider as string) ||
+          "Unknown Provider",
+        credentialType:
           (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,
-        };
-      });
+            | "host_scoped") || "api_key",
+        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,
@@ -406,14 +358,11 @@ export function extractInputsNeeded(
       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_types: [(cred.type as string) || "api_key"],
             credentials_scopes: cred.scopes as string[] | undefined,
           };
         }

autogpt_platform/frontend/src/app/(platform)/chat/components/Chat/components/ChatContainer/useChatContainer.handlers.ts

@@ -30,17 +30,16 @@ export function handleTextEnded(
   _chunk: StreamChunk,
   deps: HandlerDependencies,
 ) {
+  console.log("[Text Ended] Saving streamed text as assistant message");
   const completedText = deps.streamingChunksRef.current.join("");
   if (completedText.trim()) {
-    deps.setMessages((prev) => {
-      const assistantMessage: ChatMessageData = {
-        type: "message",
-        role: "assistant",
-        content: completedText,
-        timestamp: new Date(),
-      };
-      return [...prev, assistantMessage];
-    });
+    const assistantMessage: ChatMessageData = {
+      type: "message",
+      role: "assistant",
+      content: completedText,
+      timestamp: new Date(),
+    };
+    deps.setMessages((prev) => [...prev, assistantMessage]);
   }
   deps.setStreamingChunks([]);
   deps.streamingChunksRef.current = [];
@@ -59,12 +58,22 @@ export function handleToolCallStart(
     timestamp: new Date(),
   };
   deps.setMessages((prev) => [...prev, toolCallMessage]);
+  console.log("[Tool Call Start]", {
+    toolId: toolCallMessage.toolId,
+    toolName: toolCallMessage.toolName,
+    timestamp: new Date().toISOString(),
+  });
 }
 
 export function handleToolResponse(
   chunk: StreamChunk,
   deps: HandlerDependencies,
 ) {
+  console.log("[Tool Response] Received:", {
+    toolId: chunk.tool_id,
+    toolName: chunk.tool_name,
+    timestamp: new Date().toISOString(),
+  });
   let toolName = chunk.tool_name || "unknown";
   if (!chunk.tool_name || chunk.tool_name === "unknown") {
     deps.setMessages((prev) => {
@@ -121,8 +130,19 @@ export function handleToolResponse(
     if (toolCallIndex !== -1) {
       const newMessages = [...prev];
       newMessages[toolCallIndex] = responseMessage;
+      console.log(
+        "[Tool Response] Replaced tool_call with matching tool_id:",
+        chunk.tool_id,
+        "at index:",
+        toolCallIndex,
+      );
       return newMessages;
     }
+    console.warn(
+      "[Tool Response] No tool_call found with tool_id:",
+      chunk.tool_id,
+      "appending instead",
+    );
     return [...prev, responseMessage];
   });
 }
@@ -147,19 +167,50 @@ export function handleStreamEnd(
   deps: HandlerDependencies,
 ) {
   const completedContent = deps.streamingChunksRef.current.join("");
+  // Only save message if there are uncommitted chunks
+  // (text_ended already saved if there were tool calls)
   if (completedContent.trim()) {
+    console.log(
+      "[Stream End] Saving remaining streamed text as assistant message",
+    );
     const assistantMessage: ChatMessageData = {
       type: "message",
       role: "assistant",
       content: completedContent,
       timestamp: new Date(),
     };
-    deps.setMessages((prev) => [...prev, assistantMessage]);
+    deps.setMessages((prev) => {
+      const updated = [...prev, assistantMessage];
+      console.log("[Stream End] Final state:", {
+        localMessages: updated.map((m) => ({
+          type: m.type,
+          ...(m.type === "message" && {
+            role: m.role,
+            contentLength: m.content.length,
+          }),
+          ...(m.type === "tool_call" && {
+            toolId: m.toolId,
+            toolName: m.toolName,
+          }),
+          ...(m.type === "tool_response" && {
+            toolId: m.toolId,
+            toolName: m.toolName,
+            success: m.success,
+          }),
+        })),
+        streamingChunks: deps.streamingChunksRef.current,
+        timestamp: new Date().toISOString(),
+      });
+      return updated;
+    });
+  } else {
+    console.log("[Stream End] No uncommitted chunks, message already saved");
   }
   deps.setStreamingChunks([]);
   deps.streamingChunksRef.current = [];
   deps.setHasTextChunks(false);
   deps.setIsStreamingInitiated(false);
+  console.log("[Stream End] Stream complete, messages in local state");
 }
 
 export function handleError(chunk: StreamChunk, deps: HandlerDependencies) {

autogpt_platform/frontend/src/app/(platform)/chat/components/Chat/components/ChatContainer/useChatContainer.ts

@@ -1,17 +1,14 @@
 import type { SessionDetailResponse } from "@/app/api/__generated__/models/sessionDetailResponse";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 import { useChatStream } from "../../useChatStream";
-import { usePageContext } from "../../usePageContext";
 import type { ChatMessageData } from "../ChatMessage/useChatMessage";
 import { createStreamEventDispatcher } from "./createStreamEventDispatcher";
 import {
   createUserMessage,
   filterAuthMessages,
-  hasSentInitialPrompt,
   isToolCallArray,
   isValidMessage,
-  markInitialPromptSent,
   parseToolResponse,
   removePageContext,
 } from "./helpers";
@@ -19,40 +16,20 @@ import {
 interface Args {
   sessionId: string | null;
   initialMessages: SessionDetailResponse["messages"];
-  initialPrompt?: string;
 }
 
-export function useChatContainer({
-  sessionId,
-  initialMessages,
-  initialPrompt,
-}: Args) {
+export function useChatContainer({ sessionId, initialMessages }: Args) {
   const [messages, setMessages] = useState<ChatMessageData[]>([]);
   const [streamingChunks, setStreamingChunks] = useState<string[]>([]);
   const [hasTextChunks, setHasTextChunks] = useState(false);
   const [isStreamingInitiated, setIsStreamingInitiated] = useState(false);
   const streamingChunksRef = useRef<string[]>([]);
-  const previousSessionIdRef = useRef<string | null>(null);
-  const {
-    error,
-    sendMessage: sendStreamMessage,
-    stopStreaming,
-  } = useChatStream();
+  const { error, sendMessage: sendStreamMessage } = useChatStream();
   const isStreaming = isStreamingInitiated || hasTextChunks;
 
-  useEffect(() => {
-    if (sessionId !== previousSessionIdRef.current) {
-      previousSessionIdRef.current = sessionId;
-      setMessages([]);
-      setStreamingChunks([]);
-      streamingChunksRef.current = [];
-      setHasTextChunks(false);
-      setIsStreamingInitiated(false);
-    }
-  }, [sessionId]);
-
   const allMessages = useMemo(() => {
     const processedInitialMessages: ChatMessageData[] = [];
+    // Map to track tool calls by their ID so we can look up tool names for tool responses
     const toolCallMap = new Map<string, string>();
 
     for (const msg of initialMessages) {
@@ -68,9 +45,13 @@ export function useChatContainer({
         ? new Date(msg.timestamp as string)
         : undefined;
 
+      // Remove page context from user messages when loading existing sessions
       if (role === "user") {
         content = removePageContext(content);
-        if (!content.trim()) continue;
+        // Skip user messages that become empty after removing page context
+        if (!content.trim()) {
+          continue;
+        }
         processedInitialMessages.push({
           type: "message",
           role: "user",
@@ -80,15 +61,19 @@ export function useChatContainer({
         continue;
       }
 
+      // Handle assistant messages first (before tool messages) to build tool call map
       if (role === "assistant") {
+        // Strip <thinking> tags from content
         content = content
           .replace(/<thinking>[\s\S]*?<\/thinking>/gi, "")
           .trim();
 
+        // If assistant has tool calls, create tool_call messages for each
         if (toolCalls && isToolCallArray(toolCalls) && toolCalls.length > 0) {
           for (const toolCall of toolCalls) {
             const toolName = toolCall.function.name;
             const toolId = toolCall.id;
+            // Store tool name for later lookup
             toolCallMap.set(toolId, toolName);
 
             try {
@@ -111,6 +96,7 @@ export function useChatContainer({
               });
             }
           }
+          // Only add assistant message if there's content after stripping thinking tags
           if (content.trim()) {
             processedInitialMessages.push({
               type: "message",
@@ -120,6 +106,7 @@ export function useChatContainer({
             });
           }
         } else if (content.trim()) {
+          // Assistant message without tool calls, but with content
           processedInitialMessages.push({
             type: "message",
             role: "assistant",
@@ -130,6 +117,7 @@ export function useChatContainer({
         continue;
       }
 
+      // Handle tool messages - look up tool name from tool call map
       if (role === "tool") {
         const toolCallId = (msg.tool_call_id as string) || "";
         const toolName = toolCallMap.get(toolCallId) || "unknown";
@@ -145,6 +133,7 @@ export function useChatContainer({
         continue;
       }
 
+      // Handle other message types (system, etc.)
       if (content.trim()) {
         processedInitialMessages.push({
           type: "message",
@@ -165,7 +154,7 @@ export function useChatContainer({
       context?: { url: string; content: string },
     ) {
       if (!sessionId) {
-        console.error("[useChatContainer] Cannot send message: no session ID");
+        console.error("Cannot send message: no session ID");
         return;
       }
       if (isUserMessage) {
@@ -178,7 +167,6 @@ export function useChatContainer({
       streamingChunksRef.current = [];
       setHasTextChunks(false);
       setIsStreamingInitiated(true);
-
       const dispatcher = createStreamEventDispatcher({
         setHasTextChunks,
         setStreamingChunks,
@@ -187,7 +175,6 @@ export function useChatContainer({
         sessionId,
         setIsStreamingInitiated,
       });
-
       try {
         await sendStreamMessage(
           sessionId,
@@ -197,12 +184,8 @@ export function useChatContainer({
           context,
         );
       } catch (err) {
-        console.error("[useChatContainer] Failed to send message:", err);
+        console.error("Failed to send message:", err);
         setIsStreamingInitiated(false);
-
-        // Don't show error toast for AbortError (expected during cleanup)
-        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", {
@@ -213,42 +196,11 @@ export function useChatContainer({
     [sessionId, sendStreamMessage],
   );
 
-  const handleStopStreaming = useCallback(() => {
-    stopStreaming();
-    setStreamingChunks([]);
-    streamingChunksRef.current = [];
-    setHasTextChunks(false);
-    setIsStreamingInitiated(false);
-  }, [stopStreaming]);
-
-  const { capturePageContext } = usePageContext();
-
-  // Send initial prompt if provided (for new sessions from homepage)
-  useEffect(
-    function handleInitialPrompt() {
-      if (!initialPrompt || !sessionId) return;
-      if (initialMessages.length > 0) return;
-      if (hasSentInitialPrompt(sessionId)) return;
-
-      markInitialPromptSent(sessionId);
-      const context = capturePageContext();
-      sendMessage(initialPrompt, true, context);
-    },
-    [
-      initialPrompt,
-      sessionId,
-      initialMessages.length,
-      sendMessage,
-      capturePageContext,
-    ],
-  );
-
   return {
     messages: allMessages,
     streamingChunks,
     isStreaming,
     error,
     sendMessage,
-    stopStreaming: handleStopStreaming,
   };
 }

autogpt_platform/frontend/src/app/(platform)/chat/components/Chat/components/ChatCredentialsSetup/ChatCredentialsSetup.tsx

@@ -9,9 +9,7 @@ import { useChatCredentialsSetup } from "./useChatCredentialsSetup";
 export interface CredentialInfo {
   provider: string;
   providerName: string;
-  credentialTypes: Array<
-    "api_key" | "oauth2" | "user_password" | "host_scoped"
-  >;
+  credentialType: "api_key" | "oauth2" | "user_password" | "host_scoped";
   title: string;
   scopes?: string[];
 }
@@ -32,7 +30,7 @@ function createSchemaFromCredentialInfo(
     type: "object",
     properties: {},
     credentials_provider: [credential.provider],
-    credentials_types: credential.credentialTypes,
+    credentials_types: [credential.credentialType],
     credentials_scopes: credential.scopes,
     discriminator: undefined,
     discriminator_mapping: undefined,

autogpt_platform/frontend/src/app/(platform)/chat/components/Chat/components/ChatInput/ChatInput.tsx

@@ -0,0 +1,64 @@
+import { Input } from "@/components/atoms/Input/Input";
+import { cn } from "@/lib/utils";
+import { ArrowUpIcon } from "@phosphor-icons/react";
+import { useChatInput } from "./useChatInput";
+
+export interface ChatInputProps {
+  onSend: (message: string) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  className?: string;
+}
+
+export function ChatInput({
+  onSend,
+  disabled = false,
+  placeholder = "Type your message...",
+  className,
+}: ChatInputProps) {
+  const inputId = "chat-input";
+  const { value, setValue, handleKeyDown, handleSend } = useChatInput({
+    onSend,
+    disabled,
+    maxRows: 5,
+    inputId,
+  });
+
+  return (
+    <div className={cn("relative flex-1", className)}>
+      <Input
+        id={inputId}
+        label="Chat message input"
+        hideLabel
+        type="textarea"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        disabled={disabled}
+        rows={1}
+        wrapperClassName="mb-0 relative"
+        className="pr-12"
+      />
+      <span id="chat-input-hint" className="sr-only">
+        Press Enter to send, Shift+Enter for new line
+      </span>
+
+      <button
+        onClick={handleSend}
+        disabled={disabled || !value.trim()}
+        className={cn(
+          "absolute right-3 top-1/2 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full",
+          "border border-zinc-800 bg-zinc-800 text-white",
+          "hover:border-zinc-900 hover:bg-zinc-900",
+          "disabled:border-zinc-200 disabled:bg-zinc-200 disabled:text-white disabled:opacity-50",
+          "transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950",
+          "disabled:pointer-events-none",
+        )}
+        aria-label="Send message"
+      >
+        <ArrowUpIcon className="h-3 w-3" weight="bold" />
+      </button>
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/chat/components/Chat/components/ChatInput/useChatInput.ts

@@ -0,0 +1,60 @@
+import { KeyboardEvent, useCallback, useEffect, useState } from "react";
+
+interface UseChatInputArgs {
+  onSend: (message: string) => void;
+  disabled?: boolean;
+  maxRows?: number;
+  inputId?: string;
+}
+
+export function useChatInput({
+  onSend,
+  disabled = false,
+  maxRows = 5,
+  inputId = "chat-input",
+}: UseChatInputArgs) {
+  const [value, setValue] = useState("");
+
+  useEffect(() => {
+    const textarea = document.getElementById(inputId) as HTMLTextAreaElement;
+    if (!textarea) return;
+    textarea.style.height = "auto";
+    const lineHeight = parseInt(
+      window.getComputedStyle(textarea).lineHeight,
+      10,
+    );
+    const maxHeight = lineHeight * maxRows;
+    const newHeight = Math.min(textarea.scrollHeight, maxHeight);
+    textarea.style.height = `${newHeight}px`;
+    textarea.style.overflowY =
+      textarea.scrollHeight > maxHeight ? "auto" : "hidden";
+  }, [value, maxRows, inputId]);
+
+  const handleSend = useCallback(() => {
+    if (disabled || !value.trim()) return;
+    onSend(value.trim());
+    setValue("");
+    const textarea = document.getElementById(inputId) as HTMLTextAreaElement;
+    if (textarea) {
+      textarea.style.height = "auto";
+    }
+  }, [value, onSend, disabled, inputId]);
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        handleSend();
+      }
+      // Shift+Enter allows default behavior (new line) - no need to handle explicitly
+    },
+    [handleSend],
+  );
+
+  return {
+    value,
+    setValue,
+    handleKeyDown,
+    handleSend,
+  };
+}

autogpt_platform/frontend/src/app/(platform)/chat/components/Chat/components/ChatMessage/ChatMessage.tsx

@@ -1,50 +1,48 @@
 "use client";
 
+import { useGetV2GetUserProfile } from "@/app/api/__generated__/endpoints/store/store";
+import Avatar, {
+  AvatarFallback,
+  AvatarImage,
+} from "@/components/atoms/Avatar/Avatar";
 import { Button } from "@/components/atoms/Button/Button";
 import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
 import { cn } from "@/lib/utils";
 import {
-  ArrowsClockwiseIcon,
+  ArrowClockwise,
   CheckCircleIcon,
   CheckIcon,
   CopyIcon,
+  RobotIcon,
 } from "@phosphor-icons/react";
 import { useRouter } from "next/navigation";
 import { useCallback, useState } from "react";
+import { getToolActionPhrase } from "../../helpers";
 import { AgentCarouselMessage } from "../AgentCarouselMessage/AgentCarouselMessage";
-import { AIChatBubble } from "../AIChatBubble/AIChatBubble";
 import { AuthPromptWidget } from "../AuthPromptWidget/AuthPromptWidget";
 import { ChatCredentialsSetup } from "../ChatCredentialsSetup/ChatCredentialsSetup";
 import { ExecutionStartedMessage } from "../ExecutionStartedMessage/ExecutionStartedMessage";
 import { MarkdownContent } from "../MarkdownContent/MarkdownContent";
+import { MessageBubble } from "../MessageBubble/MessageBubble";
 import { NoResultsMessage } from "../NoResultsMessage/NoResultsMessage";
 import { ToolCallMessage } from "../ToolCallMessage/ToolCallMessage";
 import { ToolResponseMessage } from "../ToolResponseMessage/ToolResponseMessage";
-import { UserChatBubble } from "../UserChatBubble/UserChatBubble";
 import { useChatMessage, type ChatMessageData } from "./useChatMessage";
 export interface ChatMessageProps {
   message: ChatMessageData;
-  messages?: ChatMessageData[];
-  index?: number;
-  isStreaming?: boolean;
   className?: string;
   onDismissLogin?: () => void;
   onDismissCredentials?: () => void;
   onSendMessage?: (content: string, isUserMessage?: boolean) => void;
   agentOutput?: ChatMessageData;
-  isFinalMessage?: boolean;
 }
 
 export function ChatMessage({
   message,
-  messages = [],
-  index = -1,
-  isStreaming = false,
   className,
   onDismissCredentials,
   onSendMessage,
   agentOutput,
-  isFinalMessage = true,
 }: ChatMessageProps) {
   const { user } = useSupabase();
   const router = useRouter();
@@ -57,6 +55,14 @@ export function ChatMessage({
     isCredentialsNeeded,
   } = useChatMessage(message);
 
+  const { data: profile } = useGetV2GetUserProfile({
+    query: {
+      select: (res) => (res.status === 200 ? res.data : null),
+      enabled: isUser && !!user,
+      queryKey: ["/api/store/profile", user?.id],
+    },
+  });
+
   const handleAllCredentialsComplete = useCallback(
     function handleAllCredentialsComplete() {
       // Send a user message that explicitly asks to retry the setup
@@ -163,45 +169,9 @@ export function ChatMessage({
 
   // Render tool call messages
   if (isToolCall && message.type === "tool_call") {
-    // Check if this tool call is currently streaming
-    // A tool call is streaming if:
-    // 1. isStreaming is true
-    // 2. This is the last tool_call message
-    // 3. There's no tool_response for this tool call yet
-    const isToolCallStreaming =
-      isStreaming &&
-      index >= 0 &&
-      (() => {
-        // Find the last tool_call index
-        let lastToolCallIndex = -1;
-        for (let i = messages.length - 1; i >= 0; i--) {
-          if (messages[i].type === "tool_call") {
-            lastToolCallIndex = i;
-            break;
-          }
-        }
-        // Check if this is the last tool_call and there's no response yet
-        if (index === lastToolCallIndex) {
-          // Check if there's a tool_response for this tool call
-          const hasResponse = messages
-            .slice(index + 1)
-            .some(
-              (msg) =>
-                msg.type === "tool_response" && msg.toolId === message.toolId,
-            );
-          return !hasResponse;
-        }
-        return false;
-      })();
-
     return (
       <div className={cn("px-4 py-2", className)}>
-        <ToolCallMessage
-          toolId={message.toolId}
-          toolName={message.toolName}
-          arguments={message.arguments}
-          isStreaming={isToolCallStreaming}
-        />
+        <ToolCallMessage toolName={message.toolName} />
       </div>
     );
   }
@@ -248,11 +218,27 @@ export function ChatMessage({
 
   // Render tool response messages (but skip agent_output if it's being rendered inside assistant message)
   if (isToolResponse && message.type === "tool_response") {
+    // Check if this is an agent_output that should be rendered inside assistant message
+    if (message.result) {
+      let parsedResult: Record<string, unknown> | null = null;
+      try {
+        parsedResult =
+          typeof message.result === "string"
+            ? JSON.parse(message.result)
+            : (message.result as Record<string, unknown>);
+      } catch {
+        parsedResult = null;
+      }
+      if (parsedResult?.type === "agent_output") {
+        // Skip rendering - this will be rendered inside the assistant message
+        return null;
+      }
+    }
+
     return (
       <div className={cn("px-4 py-2", className)}>
         <ToolResponseMessage
-          toolId={message.toolId}
-          toolName={message.toolName}
+          toolName={getToolActionPhrase(message.toolName)}
           result={message.result}
         />
       </div>
@@ -270,33 +256,40 @@ export function ChatMessage({
         )}
       >
         <div className="flex w-full max-w-3xl gap-3">
+          {!isUser && (
+            <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={cn(
               "flex min-w-0 flex-1 flex-col",
               isUser && "items-end",
             )}
           >
-            {isUser ? (
-              <UserChatBubble>
-                <MarkdownContent content={message.content} />
-              </UserChatBubble>
-            ) : (
-              <AIChatBubble>
-                <MarkdownContent content={message.content} />
-                {agentOutput && agentOutput.type === "tool_response" && (
+            <MessageBubble variant={isUser ? "user" : "assistant"}>
+              <MarkdownContent content={message.content} />
+              {agentOutput &&
+                agentOutput.type === "tool_response" &&
+                !isUser && (
                   <div className="mt-4">
                     <ToolResponseMessage
-                      toolId={agentOutput.toolId}
-                      toolName={agentOutput.toolName || "Agent Output"}
+                      toolName={
+                        agentOutput.toolName
+                          ? getToolActionPhrase(agentOutput.toolName)
+                          : "Agent Output"
+                      }
                       result={agentOutput.result}
                     />
                   </div>
                 )}
-              </AIChatBubble>
-            )}
+            </MessageBubble>
             <div
               className={cn(
-                "flex gap-0",
+                "mt-1 flex gap-1",
                 isUser ? "justify-end" : "justify-start",
               )}
             >
@@ -307,25 +300,37 @@ export function ChatMessage({
                   onClick={handleTryAgain}
                   aria-label="Try again"
                 >
-                  <ArrowsClockwiseIcon className="size-4 text-zinc-600" />
-                </Button>
-              )}
-              {(isUser || isFinalMessage) && (
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={handleCopy}
-                  aria-label="Copy message"
-                >
-                  {copied ? (
-                    <CheckIcon className="size-4 text-green-600" />
-                  ) : (
-                    <CopyIcon className="size-4 text-zinc-600" />
-                  )}
+                  <ArrowClockwise className="size-3 text-neutral-500" />
                 </Button>
               )}
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={handleCopy}
+                aria-label="Copy message"
+              >
+                {copied ? (
+                  <CheckIcon className="size-3 text-green-600" />
+                ) : (
+                  <CopyIcon className="size-3 text-neutral-500" />
+                )}
+              </Button>
             </div>
           </div>
+
+          {isUser && (
+            <div className="flex-shrink-0">
+              <Avatar className="h-7 w-7">
+                <AvatarImage
+                  src={profile?.avatar_url ?? ""}
+                  alt={profile?.username ?? "User"}
+                />
+                <AvatarFallback className="rounded-lg bg-neutral-200 text-neutral-600">
+                  {profile?.username?.charAt(0)?.toUpperCase() || "U"}
+                </AvatarFallback>
+              </Avatar>
+            </div>
+          )}
         </div>
       </div>
     );

autogpt_platform/frontend/src/app/(platform)/chat/components/Chat/components/ChatMessage/useChatMessage.ts

@@ -41,9 +41,7 @@ export type ChatMessageData =
       credentials: Array<{
         provider: string;
         providerName: string;
-        credentialTypes: Array<
-          "api_key" | "oauth2" | "user_password" | "host_scoped"
-        >;
+        credentialType: "api_key" | "oauth2" | "user_password" | "host_scoped";
         title: string;
         scopes?: string[];
       }>;

autogpt_platform/frontend/src/app/(platform)/chat/components/Chat/components/MessageBubble/MessageBubble.tsx

@@ -13,9 +13,10 @@ export function MessageBubble({
   className,
 }: MessageBubbleProps) {
   const userTheme = {
-    bg: "bg-purple-100",
-    border: "border-purple-100",
-    text: "text-slate-900",
+    bg: "bg-slate-900",
+    border: "border-slate-800",
+    gradient: "from-slate-900/30 via-slate-800/20 to-transparent",
+    text: "text-slate-50",
   };
 
   const assistantTheme = {
@@ -39,7 +40,9 @@ export function MessageBubble({
       )}
     >
       {/* Gradient flare background */}
-      <div className={cn("absolute inset-0 bg-gradient-to-br")} />
+      <div
+        className={cn("absolute inset-0 bg-gradient-to-br", theme.gradient)}
+      />
       <div
         className={cn(
           "relative z-10 transition-all duration-500 ease-in-out",

autogpt_platform/frontend/src/app/(platform)/chat/components/Chat/components/MessageList/MessageList.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { ChatMessage } from "../ChatMessage/ChatMessage";
+import type { ChatMessageData } from "../ChatMessage/useChatMessage";
+import { StreamingMessage } from "../StreamingMessage/StreamingMessage";
+import { ThinkingMessage } from "../ThinkingMessage/ThinkingMessage";
+import { useMessageList } from "./useMessageList";
+
+export interface MessageListProps {
+  messages: ChatMessageData[];
+  streamingChunks?: string[];
+  isStreaming?: boolean;
+  className?: string;
+  onStreamComplete?: () => void;
+  onSendMessage?: (content: string) => void;
+}
+
+export function MessageList({
+  messages,
+  streamingChunks = [],
+  isStreaming = false,
+  className,
+  onStreamComplete,
+  onSendMessage,
+}: MessageListProps) {
+  const { messagesEndRef, messagesContainerRef } = useMessageList({
+    messageCount: messages.length,
+    isStreaming,
+  });
+
+  return (
+    <div
+      ref={messagesContainerRef}
+      className={cn(
+        "flex-1 overflow-y-auto",
+        "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-zinc-300",
+        className,
+      )}
+    >
+      <div className="mx-auto flex max-w-3xl flex-col py-4">
+        {/* Render all persisted messages */}
+        {messages.map((message, index) => {
+          // Check if current message is an agent_output tool_response
+          // and if previous message is an assistant message
+          let agentOutput: ChatMessageData | undefined;
+
+          if (message.type === "tool_response" && message.result) {
+            let parsedResult: Record<string, unknown> | null = null;
+            try {
+              parsedResult =
+                typeof message.result === "string"
+                  ? JSON.parse(message.result)
+                  : (message.result as Record<string, unknown>);
+            } catch {
+              parsedResult = null;
+            }
+            if (parsedResult?.type === "agent_output") {
+              const prevMessage = messages[index - 1];
+              if (
+                prevMessage &&
+                prevMessage.type === "message" &&
+                prevMessage.role === "assistant"
+              ) {
+                // This agent output will be rendered inside the previous assistant message
+                // Skip rendering this message separately
+                return null;
+              }
+            }
+          }
+
+          // Check if next message is an agent_output tool_response to include in current assistant message
+          if (message.type === "message" && message.role === "assistant") {
+            const nextMessage = messages[index + 1];
+            if (
+              nextMessage &&
+              nextMessage.type === "tool_response" &&
+              nextMessage.result
+            ) {
+              let parsedResult: Record<string, unknown> | null = null;
+              try {
+                parsedResult =
+                  typeof nextMessage.result === "string"
+                    ? JSON.parse(nextMessage.result)
+                    : (nextMessage.result as Record<string, unknown>);
+              } catch {
+                parsedResult = null;
+              }
+              if (parsedResult?.type === "agent_output") {
+                agentOutput = nextMessage;
+              }
+            }
+          }
+
+          return (
+            <ChatMessage
+              key={index}
+              message={message}
+              onSendMessage={onSendMessage}
+              agentOutput={agentOutput}
+            />
+          );
+        })}
+
+        {/* Render thinking message when streaming but no chunks yet */}
+        {isStreaming && streamingChunks.length === 0 && <ThinkingMessage />}
+
+        {/* Render streaming message if active */}
+        {isStreaming && streamingChunks.length > 0 && (
+          <StreamingMessage
+            chunks={streamingChunks}
+            onComplete={onStreamComplete}
+          />
+        )}
+
+        {/* Invisible div to scroll to */}
+        <div ref={messagesEndRef} />
+      </div>
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/chat/components/Chat/components/SessionsDrawer/SessionsDrawer.tsx

@@ -81,9 +81,9 @@ export function SessionsDrawer({
                 </Text>
               </div>
             ) : sessions.length === 0 ? (
-              <div className="flex h-full items-center justify-center">
+              <div className="flex items-center justify-center py-8">
                 <Text variant="body" className="text-zinc-500">
-                  You don&apos;t have previously started chats
+                  No sessions found
                 </Text>
               </div>
             ) : (

autogpt_platform/frontend/src/app/(platform)/chat/components/Chat/components/StreamingMessage/StreamingMessage.tsx

@@ -1,6 +1,7 @@
 import { cn } from "@/lib/utils";
-import { AIChatBubble } from "../AIChatBubble/AIChatBubble";
+import { RobotIcon } from "@phosphor-icons/react";
 import { MarkdownContent } from "../MarkdownContent/MarkdownContent";
+import { MessageBubble } from "../MessageBubble/MessageBubble";
 import { useStreamingMessage } from "./useStreamingMessage";
 
 export interface StreamingMessageProps {
@@ -24,10 +25,16 @@ export function StreamingMessage({
       )}
     >
       <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-600">
+            <RobotIcon className="h-4 w-4 text-indigo-50" />
+          </div>
+        </div>
+
         <div className="flex min-w-0 flex-1 flex-col">
-          <AIChatBubble>
+          <MessageBubble variant="assistant">
             <MarkdownContent content={displayText} />
-          </AIChatBubble>
+          </MessageBubble>
         </div>
       </div>
     </div>

autogpt_platform/frontend/src/app/(platform)/chat/components/Chat/components/ThinkingMessage/ThinkingMessage.tsx

@@ -1,6 +1,7 @@
 import { cn } from "@/lib/utils";
+import { RobotIcon } from "@phosphor-icons/react";
 import { useEffect, useRef, useState } from "react";
-import { AIChatBubble } from "../AIChatBubble/AIChatBubble";
+import { MessageBubble } from "../MessageBubble/MessageBubble";
 
 export interface ThinkingMessageProps {
   className?: string;
@@ -33,8 +34,14 @@ export function ThinkingMessage({ className }: ThinkingMessageProps) {
       )}
     >
       <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">
-          <AIChatBubble>
+          <MessageBubble variant="assistant">
             <div className="transition-all duration-500 ease-in-out">
               {showSlowLoader ? (
                 <div className="flex flex-col items-center gap-3 py-2">
@@ -55,7 +62,7 @@ export function ThinkingMessage({ className }: ThinkingMessageProps) {
                 </span>
               )}
             </div>
-          </AIChatBubble>
+          </MessageBubble>
         </div>
       </div>
     </div>

autogpt_platform/frontend/src/app/(platform)/chat/components/Chat/components/ToolCallMessage/ToolCallMessage.tsx

@@ -0,0 +1,24 @@
+import { Text } from "@/components/atoms/Text/Text";
+import { cn } from "@/lib/utils";
+import { WrenchIcon } from "@phosphor-icons/react";
+import { getToolActionPhrase } from "../../helpers";
+
+export interface ToolCallMessageProps {
+  toolName: string;
+  className?: string;
+}
+
+export function ToolCallMessage({ toolName, className }: ToolCallMessageProps) {
+  return (
+    <div className={cn("flex items-center justify-center gap-2", className)}>
+      <WrenchIcon
+        size={14}
+        weight="bold"
+        className="flex-shrink-0 text-neutral-500"
+      />
+      <Text variant="small" className="text-neutral-500">
+        {getToolActionPhrase(toolName)}...
+      </Text>
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/chat/components/Chat/components/ToolResponseMessage/ToolResponseMessage.tsx

@@ -0,0 +1,260 @@
+import { Text } from "@/components/atoms/Text/Text";
+import "@/components/contextual/OutputRenderers";
+import {
+  globalRegistry,
+  OutputItem,
+} from "@/components/contextual/OutputRenderers";
+import { cn } from "@/lib/utils";
+import type { ToolResult } from "@/types/chat";
+import { WrenchIcon } from "@phosphor-icons/react";
+import { getToolActionPhrase } from "../../helpers";
+
+export interface ToolResponseMessageProps {
+  toolName: string;
+  result?: ToolResult;
+  success?: boolean;
+  className?: string;
+}
+
+export function ToolResponseMessage({
+  toolName,
+  result,
+  success: _success = true,
+  className,
+}: ToolResponseMessageProps) {
+  if (!result) {
+    return (
+      <div className={cn("flex items-center justify-center gap-2", className)}>
+        <WrenchIcon
+          size={14}
+          weight="bold"
+          className="flex-shrink-0 text-neutral-500"
+        />
+        <Text variant="small" className="text-neutral-500">
+          {getToolActionPhrase(toolName)}...
+        </Text>
+      </div>
+    );
+  }
+
+  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 === "agent_output") {
+      const execution = parsedResult.execution as
+        | {
+            outputs?: Record<string, unknown[]>;
+          }
+        | null
+        | undefined;
+      const outputs = execution?.outputs || {};
+      const message = parsedResult.message as string | undefined;
+
+      return (
+        <div className={cn("space-y-4 px-4 py-2", className)}>
+          <div className="flex items-center gap-2">
+            <WrenchIcon
+              size={14}
+              weight="bold"
+              className="flex-shrink-0 text-neutral-500"
+            />
+            <Text variant="small" className="text-neutral-500">
+              {getToolActionPhrase(toolName)}
+            </Text>
+          </div>
+          {message && (
+            <div className="rounded border p-4">
+              <Text variant="small" className="text-neutral-600">
+                {message}
+              </Text>
+            </div>
+          )}
+          {Object.keys(outputs).length > 0 && (
+            <div className="space-y-4">
+              {Object.entries(outputs).map(([outputName, values]) =>
+                values.map((value, index) => {
+                  const renderer = globalRegistry.getRenderer(value);
+                  if (renderer) {
+                    return (
+                      <OutputItem
+                        key={`${outputName}-${index}`}
+                        value={value}
+                        renderer={renderer}
+                        label={outputName}
+                      />
+                    );
+                  }
+                  return (
+                    <div
+                      key={`${outputName}-${index}`}
+                      className="rounded border p-4"
+                    >
+                      <Text variant="large-medium" className="mb-2 capitalize">
+                        {outputName}
+                      </Text>
+                      <pre className="overflow-auto text-sm">
+                        {JSON.stringify(value, null, 2)}
+                      </pre>
+                    </div>
+                  );
+                }),
+              )}
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    if (responseType === "block_output" && parsedResult.outputs) {
+      const outputs = parsedResult.outputs as Record<string, unknown[]>;
+
+      return (
+        <div className={cn("space-y-4 px-4 py-2", className)}>
+          <div className="flex items-center gap-2">
+            <WrenchIcon
+              size={14}
+              weight="bold"
+              className="flex-shrink-0 text-neutral-500"
+            />
+            <Text variant="small" className="text-neutral-500">
+              {getToolActionPhrase(toolName)}
+            </Text>
+          </div>
+          <div className="space-y-4">
+            {Object.entries(outputs).map(([outputName, values]) =>
+              values.map((value, index) => {
+                const renderer = globalRegistry.getRenderer(value);
+                if (renderer) {
+                  return (
+                    <OutputItem
+                      key={`${outputName}-${index}`}
+                      value={value}
+                      renderer={renderer}
+                      label={outputName}
+                    />
+                  );
+                }
+                return (
+                  <div
+                    key={`${outputName}-${index}`}
+                    className="rounded border p-4"
+                  >
+                    <Text variant="large-medium" className="mb-2 capitalize">
+                      {outputName}
+                    </Text>
+                    <pre className="overflow-auto text-sm">
+                      {JSON.stringify(value, null, 2)}
+                    </pre>
+                  </div>
+                );
+              }),
+            )}
+          </div>
+        </div>
+      );
+    }
+
+    // Handle other response types with a message field (e.g., understanding_updated)
+    if (parsedResult.message && typeof parsedResult.message === "string") {
+      // Format tool name from snake_case to Title Case
+      const formattedToolName = toolName
+        .split("_")
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(" ");
+
+      // Clean up message - remove incomplete user_name references
+      let cleanedMessage = parsedResult.message;
+      // Remove "Updated understanding with: user_name" pattern if user_name is just a placeholder
+      cleanedMessage = cleanedMessage.replace(
+        /Updated understanding with:\s*user_name\.?\s*/gi,
+        "",
+      );
+      // Remove standalone user_name references
+      cleanedMessage = cleanedMessage.replace(/\buser_name\b\.?\s*/gi, "");
+      cleanedMessage = cleanedMessage.trim();
+
+      // Only show message if it has content after cleaning
+      if (!cleanedMessage) {
+        return (
+          <div
+            className={cn(
+              "flex items-center justify-center gap-2 px-4 py-2",
+              className,
+            )}
+          >
+            <WrenchIcon
+              size={14}
+              weight="bold"
+              className="flex-shrink-0 text-neutral-500"
+            />
+            <Text variant="small" className="text-neutral-500">
+              {formattedToolName}
+            </Text>
+          </div>
+        );
+      }
+
+      return (
+        <div className={cn("space-y-2 px-4 py-2", className)}>
+          <div className="flex items-center justify-center gap-2">
+            <WrenchIcon
+              size={14}
+              weight="bold"
+              className="flex-shrink-0 text-neutral-500"
+            />
+            <Text variant="small" className="text-neutral-500">
+              {formattedToolName}
+            </Text>
+          </div>
+          <div className="rounded border p-4">
+            <Text variant="small" className="text-neutral-600">
+              {cleanedMessage}
+            </Text>
+          </div>
+        </div>
+      );
+    }
+  }
+
+  const renderer = globalRegistry.getRenderer(result);
+  if (renderer) {
+    return (
+      <div className={cn("px-4 py-2", className)}>
+        <div className="mb-2 flex items-center gap-2">
+          <WrenchIcon
+            size={14}
+            weight="bold"
+            className="flex-shrink-0 text-neutral-500"
+          />
+          <Text variant="small" className="text-neutral-500">
+            {getToolActionPhrase(toolName)}
+          </Text>
+        </div>
+        <OutputItem value={result} renderer={renderer} />
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("flex items-center justify-center gap-2", className)}>
+      <WrenchIcon
+        size={14}
+        weight="bold"
+        className="flex-shrink-0 text-neutral-500"
+      />
+      <Text variant="small" className="text-neutral-500">
+        {getToolActionPhrase(toolName)}...
+      </Text>
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/chat/components/Chat/helpers.ts

@@ -0,0 +1,66 @@
+/**
+ * Maps internal tool names to user-friendly display names with emojis.
+ * @deprecated Use getToolActionPhrase or getToolCompletionPhrase for status messages
+ *
+ * @param toolName - The internal tool name from the backend
+ * @returns A user-friendly display name with an emoji prefix
+ */
+export function getToolDisplayName(toolName: string): string {
+  const toolDisplayNames: Record<string, string> = {
+    find_agent: "🔍 Search Marketplace",
+    get_agent_details: "📋 Get Agent Details",
+    check_credentials: "🔑 Check Credentials",
+    setup_agent: "⚙️ Setup Agent",
+    run_agent: "▶️ Run Agent",
+    get_required_setup_info: "📝 Get Setup Requirements",
+  };
+  return toolDisplayNames[toolName] || toolName;
+}
+
+/**
+ * Maps internal tool names to human-friendly action phrases (present continuous).
+ * Used for tool call messages to indicate what action is currently happening.
+ *
+ * @param toolName - The internal tool name from the backend
+ * @returns A human-friendly action phrase in present continuous tense
+ */
+export function getToolActionPhrase(toolName: string): string {
+  const toolActionPhrases: Record<string, string> = {
+    find_agent: "Looking for agents in the marketplace",
+    agent_carousel: "Looking for agents in the marketplace",
+    get_agent_details: "Learning about the agent",
+    check_credentials: "Checking your credentials",
+    setup_agent: "Setting up the agent",
+    execution_started: "Running the agent",
+    run_agent: "Running the agent",
+    get_required_setup_info: "Getting setup requirements",
+    schedule_agent: "Scheduling the agent to run",
+  };
+
+  // Return mapped phrase or generate human-friendly fallback
+  return toolActionPhrases[toolName] || toolName;
+}
+
+/**
+ * Maps internal tool names to human-friendly completion phrases (past tense).
+ * Used for tool response messages to indicate what action was completed.
+ *
+ * @param toolName - The internal tool name from the backend
+ * @returns A human-friendly completion phrase in past tense
+ */
+export function getToolCompletionPhrase(toolName: string): string {
+  const toolCompletionPhrases: Record<string, string> = {
+    find_agent: "Finished searching the marketplace",
+    get_agent_details: "Got agent details",
+    check_credentials: "Checked credentials",
+    setup_agent: "Agent setup complete",
+    run_agent: "Agent execution started",
+    get_required_setup_info: "Got setup requirements",
+  };
+
+  // Return mapped phrase or generate human-friendly fallback
+  return (
+    toolCompletionPhrases[toolName] ||
+    `Finished ${toolName.replace(/_/g, " ").replace("...", "")}`
+  );
+}

autogpt_platform/frontend/src/app/(platform)/chat/components/Chat/useChat.ts

@@ -1,20 +1,17 @@
 "use client";
 
 import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { toast } from "sonner";
 import { useChatSession } from "./useChatSession";
 import { useChatStream } from "./useChatStream";
 
-interface UseChatArgs {
-  urlSessionId?: string | null;
-}
-
-export function useChat({ urlSessionId }: UseChatArgs = {}) {
+export function useChat() {
+  const hasCreatedSessionRef = useRef(false);
   const hasClaimedSessionRef = useRef(false);
   const { user } = useSupabase();
   const { sendMessage: sendStreamMessage } = useChatStream();
-  const [showLoader, setShowLoader] = useState(false);
+
   const {
     session,
     sessionId: sessionIdFromHook,
@@ -27,10 +24,22 @@ export function useChat({ urlSessionId }: UseChatArgs = {}) {
     clearSession: clearSessionBase,
     loadSession,
   } = useChatSession({
-    urlSessionId,
+    urlSessionId: null,
     autoCreate: false,
   });
 
+  useEffect(
+    function autoCreateSession() {
+      if (!hasCreatedSessionRef.current && !isCreating && !sessionIdFromHook) {
+        hasCreatedSessionRef.current = true;
+        createSession().catch((_err) => {
+          hasCreatedSessionRef.current = false;
+        });
+      }
+    },
+    [isCreating, sessionIdFromHook, createSession],
+  );
+
   useEffect(
     function autoClaimSession() {
       if (
@@ -66,17 +75,6 @@ export function useChat({ urlSessionId }: UseChatArgs = {}) {
     ],
   );
 
-  useEffect(() => {
-    if (isLoading || isCreating) {
-      const timer = setTimeout(() => {
-        setShowLoader(true);
-      }, 300);
-      return () => clearTimeout(timer);
-    } else {
-      setShowLoader(false);
-    }
-  }, [isLoading, isCreating]);
-
   useEffect(function monitorNetworkStatus() {
     function handleOnline() {
       toast.success("Connection restored", {
@@ -101,6 +99,7 @@ export function useChat({ urlSessionId }: UseChatArgs = {}) {
 
   function clearSession() {
     clearSessionBase();
+    hasCreatedSessionRef.current = false;
     hasClaimedSessionRef.current = false;
   }
 
@@ -114,6 +113,5 @@ export function useChat({ urlSessionId }: UseChatArgs = {}) {
     clearSession,
     loadSession,
     sessionId: sessionIdFromHook,
-    showLoader,
   };
 }

autogpt_platform/frontend/src/app/(platform)/chat/components/Chat/useChatSession.ts

@@ -0,0 +1,271 @@
+import {
+  getGetV2GetSessionQueryKey,
+  getGetV2GetSessionQueryOptions,
+  postV2CreateSession,
+  useGetV2GetSession,
+  usePatchV2SessionAssignUser,
+  usePostV2CreateSession,
+} from "@/app/api/__generated__/endpoints/chat/chat";
+import type { SessionDetailResponse } from "@/app/api/__generated__/models/sessionDetailResponse";
+import { okData } from "@/app/api/helpers";
+import { isValidUUID } from "@/lib/utils";
+import { Key, storage } from "@/services/storage/local-storage";
+import { useQueryClient } from "@tanstack/react-query";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+
+interface UseChatSessionArgs {
+  urlSessionId?: string | null;
+  autoCreate?: boolean;
+}
+
+export function useChatSession({
+  urlSessionId,
+  autoCreate = false,
+}: UseChatSessionArgs = {}) {
+  const queryClient = useQueryClient();
+  const [sessionId, setSessionId] = useState<string | null>(null);
+  const [error, setError] = useState<Error | null>(null);
+  const justCreatedSessionIdRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (urlSessionId) {
+      if (!isValidUUID(urlSessionId)) {
+        console.error("Invalid session ID format:", urlSessionId);
+        toast.error("Invalid session ID", {
+          description:
+            "The session ID in the URL is not valid. Starting a new session...",
+        });
+        setSessionId(null);
+        storage.clean(Key.CHAT_SESSION_ID);
+        return;
+      }
+      setSessionId(urlSessionId);
+      storage.set(Key.CHAT_SESSION_ID, urlSessionId);
+    } else {
+      const storedSessionId = storage.get(Key.CHAT_SESSION_ID);
+      if (storedSessionId) {
+        if (!isValidUUID(storedSessionId)) {
+          console.error("Invalid stored session ID:", storedSessionId);
+          storage.clean(Key.CHAT_SESSION_ID);
+          setSessionId(null);
+        } else {
+          setSessionId(storedSessionId);
+        }
+      } else if (autoCreate) {
+        setSessionId(null);
+      }
+    }
+  }, [urlSessionId, autoCreate]);
+
+  const {
+    mutateAsync: createSessionMutation,
+    isPending: isCreating,
+    error: createError,
+  } = usePostV2CreateSession();
+
+  const {
+    data: sessionData,
+    isLoading: isLoadingSession,
+    error: loadError,
+    refetch,
+  } = useGetV2GetSession(sessionId || "", {
+    query: {
+      enabled: !!sessionId,
+      select: okData,
+      staleTime: Infinity, // Never mark as stale
+      refetchOnMount: false, // Don't refetch on component mount
+      refetchOnWindowFocus: false, // Don't refetch when window regains focus
+      refetchOnReconnect: false, // Don't refetch when network reconnects
+      retry: 1,
+    },
+  });
+
+  const { mutateAsync: claimSessionMutation } = usePatchV2SessionAssignUser();
+
+  const session = useMemo(() => {
+    if (sessionData) return sessionData;
+
+    if (sessionId && justCreatedSessionIdRef.current === sessionId) {
+      return {
+        id: sessionId,
+        user_id: null,
+        messages: [],
+        created_at: new Date().toISOString(),
+        updated_at: new Date().toISOString(),
+      } as SessionDetailResponse;
+    }
+    return null;
+  }, [sessionData, sessionId]);
+
+  const messages = session?.messages || [];
+  const isLoading = isCreating || isLoadingSession;
+
+  useEffect(() => {
+    if (createError) {
+      setError(
+        createError instanceof Error
+          ? createError
+          : new Error("Failed to create session"),
+      );
+    } else if (loadError) {
+      setError(
+        loadError instanceof Error
+          ? loadError
+          : new Error("Failed to load session"),
+      );
+    } else {
+      setError(null);
+    }
+  }, [createError, loadError]);
+
+  const createSession = useCallback(
+    async function createSession() {
+      try {
+        setError(null);
+        const response = await postV2CreateSession({
+          body: JSON.stringify({}),
+        });
+        if (response.status !== 200) {
+          throw new Error("Failed to create session");
+        }
+        const newSessionId = response.data.id;
+        setSessionId(newSessionId);
+        storage.set(Key.CHAT_SESSION_ID, newSessionId);
+        justCreatedSessionIdRef.current = newSessionId;
+        setTimeout(() => {
+          if (justCreatedSessionIdRef.current === newSessionId) {
+            justCreatedSessionIdRef.current = null;
+          }
+        }, 10000);
+        return newSessionId;
+      } catch (err) {
+        const error =
+          err instanceof Error ? err : new Error("Failed to create session");
+        setError(error);
+        toast.error("Failed to create chat session", {
+          description: error.message,
+        });
+        throw error;
+      }
+    },
+    [createSessionMutation],
+  );
+
+  const loadSession = useCallback(
+    async function loadSession(id: string) {
+      try {
+        setError(null);
+        // Invalidate the query cache for this session to force a fresh fetch
+        await queryClient.invalidateQueries({
+          queryKey: getGetV2GetSessionQueryKey(id),
+        });
+        // Set sessionId after invalidation to ensure the hook refetches
+        setSessionId(id);
+        storage.set(Key.CHAT_SESSION_ID, id);
+        // Force fetch with fresh data (bypass cache)
+        const queryOptions = getGetV2GetSessionQueryOptions(id, {
+          query: {
+            staleTime: 0, // Force fresh fetch
+            retry: 1,
+          },
+        });
+        const result = await queryClient.fetchQuery(queryOptions);
+        if (!result || ("status" in result && result.status !== 200)) {
+          console.warn("Session not found on server, clearing local state");
+          storage.clean(Key.CHAT_SESSION_ID);
+          setSessionId(null);
+          throw new Error("Session not found");
+        }
+      } catch (err) {
+        const error =
+          err instanceof Error ? err : new Error("Failed to load session");
+        setError(error);
+        throw error;
+      }
+    },
+    [queryClient],
+  );
+
+  const refreshSession = useCallback(
+    async function refreshSession() {
+      if (!sessionId) {
+        console.log("[refreshSession] Skipping - no session ID");
+        return;
+      }
+      try {
+        setError(null);
+        await refetch();
+      } catch (err) {
+        const error =
+          err instanceof Error ? err : new Error("Failed to refresh session");
+        setError(error);
+        throw error;
+      }
+    },
+    [sessionId, refetch],
+  );
+
+  const claimSession = useCallback(
+    async function claimSession(id: string) {
+      try {
+        setError(null);
+        await claimSessionMutation({ sessionId: id });
+        if (justCreatedSessionIdRef.current === id) {
+          justCreatedSessionIdRef.current = null;
+        }
+        await queryClient.invalidateQueries({
+          queryKey: getGetV2GetSessionQueryKey(id),
+        });
+        await refetch();
+        toast.success("Session claimed successfully", {
+          description: "Your chat history has been saved to your account",
+        });
+      } catch (err: unknown) {
+        const error =
+          err instanceof Error ? err : new Error("Failed to claim session");
+        const is404 =
+          (typeof err === "object" &&
+            err !== null &&
+            "status" in err &&
+            err.status === 404) ||
+          (typeof err === "object" &&
+            err !== null &&
+            "response" in err &&
+            typeof err.response === "object" &&
+            err.response !== null &&
+            "status" in err.response &&
+            err.response.status === 404);
+        if (!is404) {
+          setError(error);
+          toast.error("Failed to claim session", {
+            description: error.message || "Unable to claim session",
+          });
+        }
+        throw error;
+      }
+    },
+    [claimSessionMutation, queryClient, refetch],
+  );
+
+  const clearSession = useCallback(function clearSession() {
+    setSessionId(null);
+    setError(null);
+    storage.clean(Key.CHAT_SESSION_ID);
+    justCreatedSessionIdRef.current = null;
+  }, []);
+
+  return {
+    session,
+    sessionId,
+    messages,
+    isLoading,
+    isCreating,
+    error,
+    createSession,
+    loadSession,
+    refreshSession,
+    claimSession,
+    clearSession,
+  };
+}

autogpt_platform/frontend/src/app/(platform)/chat/components/Chat/useChatStream.ts

@@ -149,103 +149,22 @@ export function useChatStream() {
   const retryCountRef = useRef<number>(0);
   const retryTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const abortControllerRef = useRef<AbortController | null>(null);
-  const currentSessionIdRef = useRef<string | null>(null);
-  const requestStartTimeRef = useRef<number | null>(null);
 
-  const stopStreaming = useCallback(
-    (sessionId?: string, force: boolean = false) => {
-      console.log("[useChatStream] stopStreaming called", {
-        hasAbortController: !!abortControllerRef.current,
-        isAborted: abortControllerRef.current?.signal.aborted,
-        currentSessionId: currentSessionIdRef.current,
-        requestedSessionId: sessionId,
-        requestStartTime: requestStartTimeRef.current,
-        timeSinceStart: requestStartTimeRef.current
-          ? Date.now() - requestStartTimeRef.current
-          : null,
-        force,
-        stack: new Error().stack,
-      });
-
-      if (
-        sessionId &&
-        currentSessionIdRef.current &&
-        currentSessionIdRef.current !== sessionId
-      ) {
-        console.log(
-          "[useChatStream] Session changed, aborting previous stream",
-          {
-            oldSessionId: currentSessionIdRef.current,
-            newSessionId: sessionId,
-          },
-        );
-      }
-
-      const controller = abortControllerRef.current;
-      if (controller) {
-        const timeSinceStart = requestStartTimeRef.current
-          ? Date.now() - requestStartTimeRef.current
-          : null;
-
-        if (!force && timeSinceStart !== null && timeSinceStart < 100) {
-          console.log(
-            "[useChatStream] Request just started (<100ms), skipping abort to prevent race condition",
-            {
-              timeSinceStart,
-            },
-          );
-          return;
-        }
-
-        try {
-          const signal = controller.signal;
-
-          if (
-            signal &&
-            typeof signal.aborted === "boolean" &&
-            !signal.aborted
-          ) {
-            console.log("[useChatStream] Aborting stream");
-            controller.abort();
-          } else {
-            console.log(
-              "[useChatStream] Stream already aborted or signal invalid",
-            );
-          }
-        } catch (error) {
-          if (error instanceof Error && error.name === "AbortError") {
-            console.log(
-              "[useChatStream] AbortError caught (expected during cleanup)",
-            );
-          } else {
-            console.warn("[useChatStream] Error aborting stream:", error);
-          }
-        } finally {
-          abortControllerRef.current = null;
-          requestStartTimeRef.current = null;
-        }
-      }
-      if (retryTimeoutRef.current) {
-        clearTimeout(retryTimeoutRef.current);
-        retryTimeoutRef.current = null;
-      }
-      setIsStreaming(false);
-    },
-    [],
-  );
+  const stopStreaming = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
+    if (retryTimeoutRef.current) {
+      clearTimeout(retryTimeoutRef.current);
+      retryTimeoutRef.current = null;
+    }
+    setIsStreaming(false);
+  }, []);
 
   useEffect(() => {
-    console.log("[useChatStream] Component mounted");
     return () => {
-      const sessionIdAtUnmount = currentSessionIdRef.current;
-      console.log(
-        "[useChatStream] Component unmounting, calling stopStreaming",
-        {
-          sessionIdAtUnmount,
-        },
-      );
-      stopStreaming(undefined, false);
-      currentSessionIdRef.current = null;
+      stopStreaming();
     };
   }, [stopStreaming]);
 
@@ -258,32 +177,12 @@ export function useChatStream() {
       context?: { url: string; content: string },
       isRetry: boolean = false,
     ) => {
-      console.log("[useChatStream] sendMessage called", {
-        sessionId,
-        message: message.substring(0, 50),
-        isUserMessage,
-        isRetry,
-        stack: new Error().stack,
-      });
-
-      const previousSessionId = currentSessionIdRef.current;
-      stopStreaming(sessionId, true);
-      currentSessionIdRef.current = sessionId;
+      stopStreaming();
 
       const abortController = new AbortController();
       abortControllerRef.current = abortController;
-      requestStartTimeRef.current = Date.now();
-      console.log("[useChatStream] Created new AbortController", {
-        sessionId,
-        previousSessionId,
-        requestStartTime: requestStartTimeRef.current,
-      });
 
       if (abortController.signal.aborted) {
-        console.warn(
-          "[useChatStream] AbortController was aborted before request started",
-        );
-        requestStartTimeRef.current = null;
         return Promise.reject(new Error("Request aborted"));
       }
 
@@ -408,9 +307,6 @@ export function useChatStream() {
             } catch (err) {
               if (err instanceof Error && err.name === "AbortError") {
                 cleanup();
-                dispatchStreamEnd();
-                stopStreaming();
-                resolve();
                 return;
               }
 
@@ -456,10 +352,6 @@ export function useChatStream() {
           readStream();
         });
       } catch (err) {
-        if (err instanceof Error && err.name === "AbortError") {
-          setIsStreaming(false);
-          return Promise.resolve();
-        }
         const streamError =
           err instanceof Error ? err : new Error("Failed to start stream");
         setError(streamError);

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

@@ -0,0 +1,27 @@
+"use client";
+
+import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { Chat } from "./components/Chat/Chat";
+
+export default function ChatPage() {
+  const isChatEnabled = useGetFlag(Flag.CHAT);
+  const router = useRouter();
+
+  useEffect(() => {
+    if (isChatEnabled === false) {
+      router.push("/marketplace");
+    }
+  }, [isChatEnabled, router]);
+
+  if (isChatEnabled === null || isChatEnabled === false) {
+    return null;
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      <Chat className="flex-1" />
+    </div>
+  );
+}

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

@@ -1,88 +0,0 @@
-"use client";
-
-import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
-import { NAVBAR_HEIGHT_PX } from "@/lib/constants";
-import type { ReactNode } from "react";
-import { DesktopSidebar } from "./components/DesktopSidebar/DesktopSidebar";
-import { LoadingState } from "./components/LoadingState/LoadingState";
-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,
-    isLoggedIn,
-    hasActiveSession,
-    sessions,
-    currentSessionId,
-    handleSelectSession,
-    handleOpenDrawer,
-    handleCloseDrawer,
-    handleDrawerOpenChange,
-    handleNewChat,
-    hasNextPage,
-    isFetchingNextPage,
-    fetchNextPage,
-    isReadyToShowContent,
-  } = useCopilotShell();
-
-  if (!isLoggedIn) {
-    return (
-      <div className="flex h-full items-center justify-center">
-        <LoadingSpinner size="large" />
-      </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={handleSelectSession}
-          onFetchNextPage={fetchNextPage}
-          onNewChat={handleNewChat}
-          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">
-          {isReadyToShowContent ? children : <LoadingState />}
-        </div>
-      </div>
-
-      {isMobile && (
-        <MobileDrawer
-          isOpen={isDrawerOpen}
-          sessions={sessions}
-          currentSessionId={currentSessionId}
-          isLoading={isLoading}
-          hasNextPage={hasNextPage}
-          isFetchingNextPage={isFetchingNextPage}
-          onSelectSession={handleSelectSession}
-          onFetchNextPage={fetchNextPage}
-          onNewChat={handleNewChat}
-          onClose={handleCloseDrawer}
-          onOpenChange={handleDrawerOpenChange}
-          hasActiveSession={Boolean(hasActiveSession)}
-        />
-      )}
-    </div>
-  );
-}

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

@@ -1,70 +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 { 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/LoadingState/LoadingState.tsx

@@ -1,15 +0,0 @@
-import { Text } from "@/components/atoms/Text/Text";
-import { ChatLoader } from "@/components/contextual/Chat/components/ChatLoader/ChatLoader";
-
-export function LoadingState() {
-  return (
-    <div className="flex flex-1 items-center justify-center">
-      <div className="flex flex-col items-center gap-4">
-        <ChatLoader />
-        <Text variant="body" className="text-zinc-500">
-          Loading your chats...
-        </Text>
-      </div>
-    </div>
-  );
-}

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

@@ -1,91 +0,0 @@
-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 tasks
-              </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

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

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

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

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

@@ -1,80 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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, useMemo, 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 = useMemo(() => {
-    if (totalCount === null) return false;
-    return accumulatedSessions.length < totalCount;
-  }, [accumulatedSessions.length, totalCount]);
-
-  const areAllSessionsLoaded = useMemo(() => {
-    if (totalCount === null) return false;
-    return (
-      accumulatedSessions.length >= totalCount && !isFetching && !isLoading
-    );
-  }, [accumulatedSessions.length, totalCount, isFetching, isLoading]);
-
-  useEffect(() => {
-    if (
-      hasNextPage &&
-      !isFetching &&
-      !isLoading &&
-      !isError &&
-      totalCount !== null
-    ) {
-      setOffset((prev) => prev + PAGE_SIZE);
-    }
-  }, [hasNextPage, isFetching, isLoading, isError, totalCount]);
-
-  function fetchNextPage() {
-    if (hasNextPage && !isFetching) {
-      setOffset((prev) => prev + PAGE_SIZE);
-    }
-  }
-
-  function reset() {
-    setOffset(0);
-    setAccumulatedSessions([]);
-    setTotalCount(null);
-  }
-
-  return {
-    sessions: accumulatedSessions,
-    isLoading,
-    isFetching,
-    hasNextPage,
-    areAllSessionsLoaded,
-    totalCount,
-    fetchNextPage,
-    reset,
-  };
-}

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

@@ -1,165 +0,0 @@
-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,
-): SessionSummaryResponse {
-  return {
-    id: session.id,
-    created_at: session.created_at,
-    updated_at: session.updated_at,
-    title: undefined,
-  };
-}
-
-export function filterVisibleSessions(
-  sessions: SessionSummaryResponse[],
-): SessionSummaryResponse[] {
-  return sessions.filter(
-    (session) => session.updated_at !== session.created_at,
-  );
-}
-
-export function getSessionTitle(session: SessionSummaryResponse): string {
-  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,
-): string {
-  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,
-): SessionSummaryResponse[] {
-  const filteredSessions: SessionSummaryResponse[] = [];
-
-  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);
-        }
-      }
-    }
-
-    filteredSessions.push(...visibleSessions);
-  }
-
-  if (currentSessionId && currentSessionData) {
-    const isCurrentInList = filteredSessions.some(
-      (s) => s.id === currentSessionId,
-    );
-    if (!isCurrentInList) {
-      const summarySession = convertSessionDetailToSummary(currentSessionData);
-      filteredSessions.unshift(summarySession);
-    }
-  }
-
-  return filteredSessions;
-}
-
-export function getCurrentSessionId(
-  searchParams: URLSearchParams,
-): string | null {
-  return searchParams.get("sessionId");
-}
-
-export function shouldAutoSelectSession(
-  areAllSessionsLoaded: boolean,
-  hasAutoSelectedSession: boolean,
-  paramSessionId: string | null,
-  visibleSessions: SessionSummaryResponse[],
-  accumulatedSessions: SessionSummaryResponse[],
-  isLoading: boolean,
-  totalCount: number | null,
-): {
-  shouldSelect: boolean;
-  sessionIdToSelect: string | null;
-  shouldCreate: boolean;
-} {
-  if (!areAllSessionsLoaded || hasAutoSelectedSession) {
-    return {
-      shouldSelect: false,
-      sessionIdToSelect: null,
-      shouldCreate: false,
-    };
-  }
-
-  if (paramSessionId) {
-    return {
-      shouldSelect: false,
-      sessionIdToSelect: null,
-      shouldCreate: false,
-    };
-  }
-
-  if (visibleSessions.length > 0) {
-    return {
-      shouldSelect: true,
-      sessionIdToSelect: visibleSessions[0].id,
-      shouldCreate: false,
-    };
-  }
-
-  if (accumulatedSessions.length === 0 && !isLoading && totalCount === 0) {
-    return { shouldSelect: false, sessionIdToSelect: null, shouldCreate: true };
-  }
-
-  if (totalCount === 0) {
-    return {
-      shouldSelect: false,
-      sessionIdToSelect: null,
-      shouldCreate: false,
-    };
-  }
-
-  return { shouldSelect: false, sessionIdToSelect: null, shouldCreate: false };
-}
-
-export function checkReadyToShowContent(
-  areAllSessionsLoaded: boolean,
-  paramSessionId: string | null,
-  accumulatedSessions: SessionSummaryResponse[],
-  isCurrentSessionLoading: boolean,
-  currentSessionData: SessionDetailResponse | null | undefined,
-  hasAutoSelectedSession: boolean,
-): boolean {
-  if (!areAllSessionsLoaded) return false;
-
-  if (paramSessionId) {
-    const sessionFound = accumulatedSessions.some(
-      (s) => s.id === paramSessionId,
-    );
-    return (
-      sessionFound ||
-      (!isCurrentSessionLoading &&
-        currentSessionData !== undefined &&
-        currentSessionData !== null)
-    );
-  }
-
-  return hasAutoSelectedSession;
-}

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

@@ -1,170 +0,0 @@
-"use client";
-
-import {
-  getGetV2ListSessionsQueryKey,
-  useGetV2GetSession,
-} from "@/app/api/__generated__/endpoints/chat/chat";
-import { okData } from "@/app/api/helpers";
-import { useBreakpoint } from "@/lib/hooks/useBreakpoint";
-import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
-import { useQueryClient } from "@tanstack/react-query";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { useEffect, useRef, useState } from "react";
-import { useMobileDrawer } from "./components/MobileDrawer/useMobileDrawer";
-import { useSessionsPagination } from "./components/SessionsList/useSessionsPagination";
-import {
-  checkReadyToShowContent,
-  filterVisibleSessions,
-  getCurrentSessionId,
-  mergeCurrentSessionIntoList,
-} from "./helpers";
-
-export function useCopilotShell() {
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const queryClient = useQueryClient();
-  const breakpoint = useBreakpoint();
-  const { isLoggedIn } = useSupabase();
-  const isMobile =
-    breakpoint === "base" || breakpoint === "sm" || breakpoint === "md";
-
-  const isOnHomepage = pathname === "/copilot";
-  const paramSessionId = searchParams.get("sessionId");
-
-  const {
-    isDrawerOpen,
-    handleOpenDrawer,
-    handleCloseDrawer,
-    handleDrawerOpenChange,
-  } = useMobileDrawer();
-
-  const paginationEnabled = !isMobile || isDrawerOpen || !!paramSessionId;
-
-  const {
-    sessions: accumulatedSessions,
-    isLoading: isSessionsLoading,
-    isFetching: isSessionsFetching,
-    hasNextPage,
-    areAllSessionsLoaded,
-    fetchNextPage,
-    reset: resetPagination,
-  } = useSessionsPagination({
-    enabled: paginationEnabled,
-  });
-
-  const currentSessionId = getCurrentSessionId(searchParams);
-
-  const { data: currentSessionData, isLoading: isCurrentSessionLoading } =
-    useGetV2GetSession(currentSessionId || "", {
-      query: {
-        enabled: !!currentSessionId,
-        select: okData,
-      },
-    });
-
-  const [hasAutoSelectedSession, setHasAutoSelectedSession] = useState(false);
-  const hasAutoSelectedRef = useRef(false);
-
-  // Mark as auto-selected when sessionId is in URL
-  useEffect(() => {
-    if (paramSessionId && !hasAutoSelectedRef.current) {
-      hasAutoSelectedRef.current = true;
-      setHasAutoSelectedSession(true);
-    }
-  }, [paramSessionId]);
-
-  // On homepage without sessionId, mark as ready immediately
-  useEffect(() => {
-    if (isOnHomepage && !paramSessionId && !hasAutoSelectedRef.current) {
-      hasAutoSelectedRef.current = true;
-      setHasAutoSelectedSession(true);
-    }
-  }, [isOnHomepage, paramSessionId]);
-
-  // Invalidate sessions list when navigating to homepage (to show newly created sessions)
-  useEffect(() => {
-    if (isOnHomepage && !paramSessionId) {
-      queryClient.invalidateQueries({
-        queryKey: getGetV2ListSessionsQueryKey(),
-      });
-    }
-  }, [isOnHomepage, paramSessionId, queryClient]);
-
-  // Reset pagination when query becomes disabled
-  const prevPaginationEnabledRef = useRef(paginationEnabled);
-  useEffect(() => {
-    if (prevPaginationEnabledRef.current && !paginationEnabled) {
-      resetPagination();
-      resetAutoSelect();
-    }
-    prevPaginationEnabledRef.current = paginationEnabled;
-  }, [paginationEnabled, resetPagination]);
-
-  const sessions = mergeCurrentSessionIntoList(
-    accumulatedSessions,
-    currentSessionId,
-    currentSessionData,
-  );
-
-  const visibleSessions = filterVisibleSessions(sessions);
-
-  const sidebarSelectedSessionId =
-    isOnHomepage && !paramSessionId ? null : currentSessionId;
-
-  const isReadyToShowContent = isOnHomepage
-    ? true
-    : checkReadyToShowContent(
-        areAllSessionsLoaded,
-        paramSessionId,
-        accumulatedSessions,
-        isCurrentSessionLoading,
-        currentSessionData,
-        hasAutoSelectedSession,
-      );
-
-  function handleSelectSession(sessionId: string) {
-    // Navigate using replaceState to avoid full page reload
-    window.history.replaceState(null, "", `/copilot?sessionId=${sessionId}`);
-    // Force a re-render by updating the URL through router
-    router.replace(`/copilot?sessionId=${sessionId}`);
-    if (isMobile) handleCloseDrawer();
-  }
-
-  function handleNewChat() {
-    resetAutoSelect();
-    resetPagination();
-    // Invalidate and refetch sessions list to ensure newly created sessions appear
-    queryClient.invalidateQueries({
-      queryKey: getGetV2ListSessionsQueryKey(),
-    });
-    window.history.replaceState(null, "", "/copilot");
-    router.replace("/copilot");
-    if (isMobile) handleCloseDrawer();
-  }
-
-  function resetAutoSelect() {
-    hasAutoSelectedRef.current = false;
-    setHasAutoSelectedSession(false);
-  }
-
-  return {
-    isMobile,
-    isDrawerOpen,
-    isLoggedIn,
-    hasActiveSession:
-      Boolean(currentSessionId) && (!isOnHomepage || Boolean(paramSessionId)),
-    isLoading: isSessionsLoading || !areAllSessionsLoaded,
-    sessions: visibleSessions,
-    currentSessionId: sidebarSelectedSessionId,
-    handleSelectSession,
-    handleOpenDrawer,
-    handleCloseDrawer,
-    handleDrawerOpenChange,
-    handleNewChat,
-    hasNextPage,
-    isFetchingNextPage: isSessionsFetching,
-    fetchNextPage,
-    isReadyToShowContent,
-  };
-}

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

@@ -1,33 +0,0 @@
-import type { User } from "@supabase/supabase-js";
-
-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;
-  const name = metadata?.name;
-  if (typeof fullName === "string" && fullName.trim()) {
-    return fullName.split(" ")[0];
-  }
-  if (typeof name === "string" && name.trim()) {
-    return name.split(" ")[0];
-  }
-  if (user.email) {
-    return user.email.split("@")[0];
-  }
-  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 [
-    "Show me what I can automate",
-    "Design a custom workflow",
-    "Help me with content creation",
-  ];
-}

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

@@ -1,6 +0,0 @@
-import type { ReactNode } from "react";
-import { CopilotShell } from "./components/CopilotShell/CopilotShell";
-
-export default function CopilotLayout({ children }: { children: ReactNode }) {
-  return <CopilotShell>{children}</CopilotShell>;
-}

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

@@ -1,223 +0,0 @@
-"use client";
-
-import { postV2CreateSession } from "@/app/api/__generated__/endpoints/chat/chat";
-import { Skeleton } from "@/components/__legacy__/ui/skeleton";
-import { Button } from "@/components/atoms/Button/Button";
-import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
-import { Text } from "@/components/atoms/Text/Text";
-import { Chat } from "@/components/contextual/Chat/Chat";
-import { ChatInput } from "@/components/contextual/Chat/components/ChatInput/ChatInput";
-import { getHomepageRoute } from "@/lib/constants";
-import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
-import {
-  Flag,
-  type FlagValues,
-  useGetFlag,
-} from "@/services/feature-flags/use-get-flag";
-import { useFlags } from "launchdarkly-react-client-sdk";
-import { useRouter, useSearchParams } from "next/navigation";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { getGreetingName, getQuickActions } from "./helpers";
-
-type PageState =
-  | { type: "welcome" }
-  | { type: "creating"; prompt: string }
-  | { type: "chat"; sessionId: string; initialPrompt?: string };
-
-export default function CopilotPage() {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const { user, isLoggedIn, isUserLoading } = useSupabase();
-
-  const isChatEnabled = useGetFlag(Flag.CHAT);
-  const flags = useFlags<FlagValues>();
-  const homepageRoute = getHomepageRoute(isChatEnabled);
-  const envEnabled = process.env.NEXT_PUBLIC_LAUNCHDARKLY_ENABLED === "true";
-  const clientId = process.env.NEXT_PUBLIC_LAUNCHDARKLY_CLIENT_ID;
-  const isLaunchDarklyConfigured = envEnabled && Boolean(clientId);
-  const isFlagReady =
-    !isLaunchDarklyConfigured || flags[Flag.CHAT] !== undefined;
-
-  const [pageState, setPageState] = useState<PageState>({ type: "welcome" });
-  const initialPromptRef = useRef<Map<string, string>>(new Map());
-
-  const urlSessionId = searchParams.get("sessionId");
-
-  // Sync with URL sessionId (preserve initialPrompt from ref)
-  useEffect(
-    function syncSessionFromUrl() {
-      if (urlSessionId) {
-        // If we're already in chat state with this sessionId, don't overwrite
-        if (pageState.type === "chat" && pageState.sessionId === urlSessionId) {
-          return;
-        }
-        // Get initialPrompt from ref or current state
-        const storedInitialPrompt = initialPromptRef.current.get(urlSessionId);
-        const currentInitialPrompt =
-          storedInitialPrompt ||
-          (pageState.type === "creating"
-            ? pageState.prompt
-            : pageState.type === "chat"
-              ? pageState.initialPrompt
-              : undefined);
-        if (currentInitialPrompt) {
-          initialPromptRef.current.set(urlSessionId, currentInitialPrompt);
-        }
-        setPageState({
-          type: "chat",
-          sessionId: urlSessionId,
-          initialPrompt: currentInitialPrompt,
-        });
-      } else if (pageState.type === "chat") {
-        setPageState({ type: "welcome" });
-      }
-    },
-    [urlSessionId],
-  );
-
-  useEffect(
-    function ensureAccess() {
-      if (!isFlagReady) return;
-      if (isChatEnabled === false) {
-        router.replace(homepageRoute);
-      }
-    },
-    [homepageRoute, isChatEnabled, isFlagReady, router],
-  );
-
-  const greetingName = useMemo(
-    function getName() {
-      return getGreetingName(user);
-    },
-    [user],
-  );
-
-  const quickActions = useMemo(function getActions() {
-    return getQuickActions();
-  }, []);
-
-  async function startChatWithPrompt(prompt: string) {
-    if (!prompt?.trim()) return;
-    if (pageState.type === "creating") return;
-
-    const trimmedPrompt = prompt.trim();
-    setPageState({ type: "creating", prompt: trimmedPrompt });
-
-    try {
-      // Create session
-      const sessionResponse = await postV2CreateSession({
-        body: JSON.stringify({}),
-      });
-
-      if (sessionResponse.status !== 200 || !sessionResponse.data?.id) {
-        throw new Error("Failed to create session");
-      }
-
-      const sessionId = sessionResponse.data.id;
-
-      // Store initialPrompt in ref so it persists across re-renders
-      initialPromptRef.current.set(sessionId, trimmedPrompt);
-
-      // Update URL and show Chat with initial prompt
-      // Chat will handle sending the message and streaming
-      window.history.replaceState(null, "", `/copilot?sessionId=${sessionId}`);
-      setPageState({ type: "chat", sessionId, initialPrompt: trimmedPrompt });
-    } catch (error) {
-      console.error("[CopilotPage] Failed to start chat:", error);
-      setPageState({ type: "welcome" });
-    }
-  }
-
-  function handleQuickAction(action: string) {
-    startChatWithPrompt(action);
-  }
-
-  if (!isFlagReady || isChatEnabled === false || !isLoggedIn) {
-    return null;
-  }
-
-  // Show Chat when we have an active session
-  if (pageState.type === "chat") {
-    return (
-      <div className="flex h-full flex-col">
-        <Chat
-          key={pageState.sessionId ?? "welcome"}
-          className="flex-1"
-          urlSessionId={pageState.sessionId}
-          initialPrompt={pageState.initialPrompt}
-        />
-      </div>
-    );
-  }
-
-  // Show loading state while creating session and sending first message
-  if (pageState.type === "creating") {
-    return (
-      <div className="flex h-full flex-1 flex-col items-center justify-center bg-[#f8f8f9] px-6 py-10">
-        <LoadingSpinner size="large" />
-        <Text variant="body" className="mt-4 text-zinc-500">
-          Starting your chat...
-        </Text>
-      </div>
-    );
-  }
-
-  // Show Welcome screen
-  const isLoading = isUserLoading;
-
-  return (
-    <div className="flex h-full flex-1 items-center justify-center overflow-y-auto bg-[#f8f8f9] px-6 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-2xl">
-              <Text
-                variant="h3"
-                className="mb-3 !text-[1.375rem] text-zinc-700"
-              >
-                Hey, <span className="text-violet-600">{greetingName}</span>
-              </Text>
-              <Text variant="h3" className="mb-8 !font-normal">
-                What do you want to automate?
-              </Text>
-
-              <div className="mb-6">
-                <ChatInput
-                  onSend={startChatWithPrompt}
-                  placeholder='You can search or just ask - e.g. "create a blog post outline"'
-                />
-              </div>
-            </div>
-            <div className="flex flex-nowrap 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-600 !px-4 !py-2 text-[1rem] text-zinc-600"
-                >
-                  {action}
-                </Button>
-              ))}
-            </div>
-          </>
-        )}
-      </div>
-    </div>
-  );
-}

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

@@ -1,8 +1,6 @@
 "use client";
 
 import { ErrorCard } from "@/components/molecules/ErrorCard/ErrorCard";
-import { getHomepageRoute } from "@/lib/constants";
-import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
 import { useSearchParams } from "next/navigation";
 import { Suspense } from "react";
 import { getErrorDetails } from "./helpers";
@@ -11,8 +9,6 @@ function ErrorPageContent() {
   const searchParams = useSearchParams();
   const errorMessage = searchParams.get("message");
   const errorDetails = getErrorDetails(errorMessage);
-  const isChatEnabled = useGetFlag(Flag.CHAT);
-  const homepageRoute = getHomepageRoute(isChatEnabled);
 
   function handleRetry() {
     // Auth-related errors should redirect to login
@@ -29,8 +25,8 @@ function ErrorPageContent() {
         window.location.reload();
       }, 2000);
     } else {
-      // For server/network errors, go to home
-      window.location.href = homepageRoute;
+      // For server/network errors, go to marketplace
+      window.location.href = "/marketplace";
     }
   }
 

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

@@ -180,7 +180,7 @@ export function RunAgentModal({
 
               {/* Content */}
               {hasAnySetupFields ? (
-                <div className="mt-4 pb-10">
+                <div className="mt-10 pb-32">
                   <RunAgentModalContextProvider
                     value={{
                       agent,

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

@@ -5,37 +5,30 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@/components/molecules/Accordion/Accordion";
-import {
-  CredentialsMetaInput,
-  CredentialsType,
-} from "@/lib/autogpt-server-api/types";
 import { CredentialsProvidersContext } from "@/providers/agent-credentials/credentials-provider";
-import { SlidersHorizontalIcon } from "@phosphor-icons/react";
+import { SlidersHorizontal } from "@phosphor-icons/react";
 import { useContext, useEffect, useMemo, useRef } from "react";
+import { useRunAgentModalContext } from "../../context";
 import {
   areSystemCredentialProvidersLoading,
   CredentialField,
   findSavedCredentialByProviderAndType,
   hasMissingRequiredSystemCredentials,
   splitCredentialFieldsBySystem,
-} from "./helpers";
+} from "../helpers";
 
 type Props = {
   credentialFields: CredentialField[];
   requiredCredentials: Set<string>;
-  inputCredentials: Record<string, CredentialsMetaInput | undefined>;
-  inputValues: Record<string, any>;
-  onCredentialChange: (key: string, value?: CredentialsMetaInput) => void;
 };
 
 export function CredentialsGroupedView({
   credentialFields,
   requiredCredentials,
-  inputCredentials,
-  inputValues,
-  onCredentialChange,
 }: Props) {
   const allProviders = useContext(CredentialsProvidersContext);
+  const { inputCredentials, setInputCredentialsValue, inputValues } =
+    useRunAgentModalContext();
 
   const { userCredentialFields, systemCredentialFields } = useMemo(
     () =>
@@ -94,11 +87,11 @@ export function CredentialsGroupedView({
       );
 
       if (savedCredential) {
-        onCredentialChange(key, {
+        setInputCredentialsValue(key, {
           id: savedCredential.id,
           provider: savedCredential.provider,
-          type: savedCredential.type as CredentialsType,
-          title: savedCredential.title,
+          type: savedCredential.type,
+          title: (savedCredential as { title?: string }).title,
         });
       }
     }
@@ -110,7 +103,7 @@ export function CredentialsGroupedView({
     systemCredentialFields,
     requiredCredentials,
     inputCredentials,
-    onCredentialChange,
+    setInputCredentialsValue,
     isLoadingProviders,
   ]);
 
@@ -130,7 +123,7 @@ export function CredentialsGroupedView({
                   }
                   selectedCredentials={selectedCred}
                   onSelectCredentials={(value) => {
-                    onCredentialChange(key, value);
+                    setInputCredentialsValue(key, value);
                   }}
                   siblingInputs={inputValues}
                   isOptional={!requiredCredentials.has(key)}
@@ -150,8 +143,7 @@ export function CredentialsGroupedView({
           <AccordionItem value="system-credentials" className="border-none">
             <AccordionTrigger className="py-2 text-sm text-muted-foreground hover:no-underline">
               <div className="flex items-center gap-1">
-                <SlidersHorizontalIcon size={16} weight="bold" /> System
-                credentials
+                <SlidersHorizontal size={16} weight="bold" /> System credentials
                 {hasMissingSystemCredentials && (
                   <span className="text-destructive">(missing)</span>
                 )}
@@ -171,7 +163,7 @@ export function CredentialsGroupedView({
                         }
                         selectedCredentials={selectedCred}
                         onSelectCredentials={(value) => {
-                          onCredentialChange(key, value);
+                          setInputCredentialsValue(key, value);
                         }}
                         siblingInputs={inputValues}
                         isOptional={!requiredCredentials.has(key)}

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

@@ -29,7 +29,7 @@ export function ModalHeader({ agent }: ModalHeaderProps) {
           <ShowMoreText
             previewLimit={400}
             variant="small"
-            className="mb-2 mt-4 !text-zinc-700"
+            className="mt-4 !text-zinc-700"
           >
             {agent.description}
           </ShowMoreText>
@@ -40,8 +40,6 @@ export function ModalHeader({ agent }: ModalHeaderProps) {
             <Text variant="lead-semibold" className="text-blue-600">
               Tip
             </Text>
-            <div className="h-px w-full bg-blue-100" />
-
             <Text variant="body">
               For best results, run this agent{" "}
               {humanizeCronExpression(
@@ -52,7 +50,7 @@ export function ModalHeader({ agent }: ModalHeaderProps) {
         ) : null}
 
         {agent.instructions ? (
-          <div className="mt-4 flex flex-col gap-4 rounded-medium border border-purple-100 bg-[#f1ebfe80] p-4">
+          <div className="flex flex-col gap-4 rounded-medium border border-purple-100 bg-[#F1EBFE/5] p-4">
             <Text variant="lead-semibold" className="text-purple-600">
               Instructions
             </Text>

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

@@ -1,9 +1,9 @@
 import { Input } from "@/components/atoms/Input/Input";
-import { CredentialsGroupedView } from "@/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView";
 import { InformationTooltip } from "@/components/molecules/InformationTooltip/InformationTooltip";
 import { useMemo } from "react";
 import { RunAgentInputs } from "../../../RunAgentInputs/RunAgentInputs";
 import { useRunAgentModalContext } from "../../context";
+import { CredentialsGroupedView } from "../CredentialsGroupedView/CredentialsGroupedView";
 import { ModalSection } from "../ModalSection/ModalSection";
 import { WebhookTriggerBanner } from "../WebhookTriggerBanner/WebhookTriggerBanner";
 
@@ -19,8 +19,6 @@ export function ModalRunSection() {
     setInputValue,
     agentInputFields,
     agentCredentialsInputFields,
-    inputCredentials,
-    setInputCredentialsValue,
   } = useRunAgentModalContext();
 
   const inputFields = Object.entries(agentInputFields || {});
@@ -104,9 +102,6 @@ export function ModalRunSection() {
           <CredentialsGroupedView
             credentialFields={credentialFields}
             requiredCredentials={requiredCredentials}
-            inputCredentials={inputCredentials}
-            inputValues={inputValues}
-            onCredentialChange={setInputCredentialsValue}
           />
         </ModalSection>
       ) : null}

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

@@ -1,5 +1,5 @@
 import { CredentialsProvidersContextType } from "@/providers/agent-credentials/credentials-provider";
-import { getSystemCredentials } from "../../helpers";
+import { getSystemCredentials } from "../../../../../../../../../../../components/contextual/CredentialsInput/helpers";
 
 export type CredentialField = [string, any];
 

autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/useLibraryAgentCard.ts

@@ -8,8 +8,6 @@ import { useGetV2GetUserProfile } from "@/app/api/__generated__/endpoints/store/
 import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
 import { okData } from "@/app/api/helpers";
 import { useToast } from "@/components/molecules/Toast/use-toast";
-import { isLogoutInProgress } from "@/lib/autogpt-server-api/helpers";
-import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
 import { updateFavoriteInQueries } from "./helpers";
 
 interface Props {
@@ -25,14 +23,10 @@ export function useLibraryAgentCard({ agent }: Props) {
   const { toast } = useToast();
   const queryClient = getQueryClient();
   const { mutateAsync: updateLibraryAgent } = usePatchV2UpdateLibraryAgent();
-  const { user, isLoggedIn } = useSupabase();
-  const logoutInProgress = isLogoutInProgress();
 
   const { data: profile } = useGetV2GetUserProfile({
     query: {
       select: okData,
-      enabled: isLoggedIn && !!user && !logoutInProgress,
-      queryKey: ["/api/store/profile", user?.id],
     },
   });
 

autogpt_platform/frontend/src/app/(platform)/library/components/LibraryUploadAgentDialog/LibraryUploadAgentDialog.tsx

@@ -2,7 +2,6 @@
 import { Button } from "@/components/atoms/Button/Button";
 import { FileInput } from "@/components/atoms/FileInput/FileInput";
 import { Input } from "@/components/atoms/Input/Input";
-import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
 import { Dialog } from "@/components/molecules/Dialog/Dialog";
 import {
   Form,
@@ -121,7 +120,7 @@ export default function LibraryUploadAgentDialog() {
           >
             {isUploading ? (
               <div className="flex items-center gap-2">
-                <LoadingSpinner size="small" className="text-white" />
+                <div className="h-4 w-4 animate-spin rounded-full border-b-2 border-t-2 border-white"></div>
                 <span>Uploading...</span>
               </div>
             ) : (

autogpt_platform/frontend/src/app/(platform)/login/useLoginPage.ts

@@ -1,8 +1,6 @@
 import { useToast } from "@/components/molecules/Toast/use-toast";
-import { getHomepageRoute } from "@/lib/constants";
 import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
 import { environment } from "@/services/environment";
-import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
 import { loginFormSchema, LoginProvider } from "@/types/auth";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter, useSearchParams } from "next/navigation";
@@ -22,17 +20,15 @@ export function useLoginPage() {
   const [isGoogleLoading, setIsGoogleLoading] = useState(false);
   const [showNotAllowedModal, setShowNotAllowedModal] = useState(false);
   const isCloudEnv = environment.isCloud();
-  const isChatEnabled = useGetFlag(Flag.CHAT);
-  const homepageRoute = getHomepageRoute(isChatEnabled);
 
   // Get redirect destination from 'next' query parameter
   const nextUrl = searchParams.get("next");
 
   useEffect(() => {
     if (isLoggedIn && !isLoggingIn) {
-      router.push(nextUrl || homepageRoute);
+      router.push(nextUrl || "/marketplace");
     }
-  }, [homepageRoute, isLoggedIn, isLoggingIn, nextUrl, router]);
+  }, [isLoggedIn, isLoggingIn, nextUrl, router]);
 
   const form = useForm<z.infer<typeof loginFormSchema>>({
     resolver: zodResolver(loginFormSchema),
@@ -102,7 +98,7 @@ export function useLoginPage() {
       } else if (result.onboarding) {
         router.replace("/onboarding");
       } else {
-        router.replace(homepageRoute);
+        router.replace("/marketplace");
       }
     } catch (error) {
       toast({

autogpt_platform/frontend/src/app/(platform)/profile/(user)/page.tsx

@@ -3,14 +3,12 @@
 import { useGetV2GetUserProfile } from "@/app/api/__generated__/endpoints/store/store";
 import { ProfileInfoForm } from "@/components/__legacy__/ProfileInfoForm";
 import { ErrorCard } from "@/components/molecules/ErrorCard/ErrorCard";
-import { isLogoutInProgress } from "@/lib/autogpt-server-api/helpers";
 import { ProfileDetails } from "@/lib/autogpt-server-api/types";
 import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
 import { ProfileLoading } from "./ProfileLoading";
 
 export default function UserProfilePage() {
   const { user } = useSupabase();
-  const logoutInProgress = isLogoutInProgress();
 
   const {
     data: profile,
@@ -20,7 +18,7 @@ export default function UserProfilePage() {
     refetch,
   } = useGetV2GetUserProfile<ProfileDetails | null>({
     query: {
-      enabled: !!user && !logoutInProgress,
+      enabled: !!user,
       select: (res) => {
         if (res.status === 200) {
           return {

autogpt_platform/frontend/src/app/(platform)/signup/actions.ts

@@ -1,6 +1,5 @@
 "use server";
 
-import { getHomepageRoute } from "@/lib/constants";
 import { getServerSupabase } from "@/lib/supabase/server/getServerSupabase";
 import { signupFormSchema } from "@/types/auth";
 import * as Sentry from "@sentry/nextjs";
@@ -59,7 +58,7 @@ export async function signup(
     }
 
     const isOnboardingEnabled = await shouldShowOnboarding();
-    const next = isOnboardingEnabled ? "/onboarding" : getHomepageRoute();
+    const next = isOnboardingEnabled ? "/onboarding" : "/";
 
     return { success: true, next };
   } catch (err) {

autogpt_platform/frontend/src/app/(platform)/signup/useSignupPage.ts

@@ -1,8 +1,6 @@
 import { useToast } from "@/components/molecules/Toast/use-toast";
-import { getHomepageRoute } from "@/lib/constants";
 import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
 import { environment } from "@/services/environment";
-import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
 import { LoginProvider, signupFormSchema } from "@/types/auth";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter, useSearchParams } from "next/navigation";
@@ -22,17 +20,15 @@ export function useSignupPage() {
   const [isGoogleLoading, setIsGoogleLoading] = useState(false);
   const [showNotAllowedModal, setShowNotAllowedModal] = useState(false);
   const isCloudEnv = environment.isCloud();
-  const isChatEnabled = useGetFlag(Flag.CHAT);
-  const homepageRoute = getHomepageRoute(isChatEnabled);
 
   // Get redirect destination from 'next' query parameter
   const nextUrl = searchParams.get("next");
 
   useEffect(() => {
     if (isLoggedIn && !isSigningUp) {
-      router.push(nextUrl || homepageRoute);
+      router.push(nextUrl || "/marketplace");
     }
-  }, [homepageRoute, isLoggedIn, isSigningUp, nextUrl, router]);
+  }, [isLoggedIn, isSigningUp, nextUrl, router]);
 
   const form = useForm<z.infer<typeof signupFormSchema>>({
     resolver: zodResolver(signupFormSchema),
@@ -133,7 +129,7 @@ export function useSignupPage() {
       }
 
       // Prefer the URL's next parameter, then result.next (for onboarding), then default
-      const redirectTo = nextUrl || result.next || homepageRoute;
+      const redirectTo = nextUrl || result.next || "/";
       router.replace(redirectTo);
     } catch (error) {
       setIsLoading(false);

autogpt_platform/frontend/src/app/api/mutators/custom-mutator.ts

@@ -4,12 +4,12 @@ import {
   getServerAuthToken,
 } from "@/lib/autogpt-server-api/helpers";
 
+import { transformDates } from "./date-transformer";
+import { environment } from "@/services/environment";
 import {
   IMPERSONATION_HEADER_NAME,
   IMPERSONATION_STORAGE_KEY,
 } from "@/lib/constants";
-import { environment } from "@/services/environment";
-import { transformDates } from "./date-transformer";
 
 const FRONTEND_BASE_URL =
   process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || "http://localhost:3000";

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

@@ -1022,7 +1022,7 @@
       "get": {
         "tags": ["v2", "chat", "chat"],
         "summary": "Get Session",
-        "description": "Retrieve the details of a specific chat session.\n\nLooks up a chat session by ID for the given user (if authenticated) and returns all session data including messages.\n\nArgs:\n    session_id: The unique identifier for the desired chat session.\n    user_id: The optional authenticated user ID, or None for anonymous access.\n\nReturns:\n    SessionDetailResponse: Details for the requested session, or None if not found.",
+        "description": "Retrieve the details of a specific chat session.\n\nLooks up a chat session by ID for the given user (if authenticated) and returns all session data including messages.\n\nArgs:\n    session_id: The unique identifier for the desired chat session.\n    user_id: The optional authenticated user ID, or None for anonymous access.\n\nReturns:\n    SessionDetailResponse: Details for the requested session; raises NotFoundError if not found.",
         "operationId": "getV2GetSession",
         "security": [{ "HTTPBearerJWT": [] }],
         "parameters": [
@@ -1039,11 +1039,7 @@
             "content": {
               "application/json": {
                 "schema": {
-                  "anyOf": [
-                    { "$ref": "#/components/schemas/SessionDetailResponse" },
-                    { "type": "null" }
-                  ],
-                  "title": "Response Getv2Getsession"
+                  "$ref": "#/components/schemas/SessionDetailResponse"
                 }
               }
             }