fix(copilot): update shared counter after collision detection

When collision detection in add_chat_messages_batch retries with a higher
sequence number, the actual persisted message count may differ from
len(session.messages). This commit ensures the shared counter
(saved_msg_count_ref) used by the streaming loop and long-running callback
stays synchronized with the actual DB state.

Changes:
- Modified add_chat_messages_batch to return tuple[list[ChatMessage], int]
  where the int is the final message count after collision resolution
- Updated _save_session_to_db and upsert_chat_session to propagate the
  final count up the call chain
- Updated all callers in sdk/service.py to use the returned count instead
  of len(session.messages) when updating saved_msg_count_ref
- Updated all other callers in service.py and tests to handle tuple return

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

@@ -83,65 +83,6 @@ jobs:
       - name: Run lint
         run: pnpm lint
 
-  react-doctor:
-    runs-on: ubuntu-latest
-    needs: setup
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v6
-        with:
-          fetch-depth: 0
-
-      - name: Enable corepack
-        run: corepack enable
-
-      - name: Set up Node
-        uses: actions/setup-node@v6
-        with:
-          node-version: "22.18.0"
-          cache: "pnpm"
-          cache-dependency-path: autogpt_platform/frontend/pnpm-lock.yaml
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Run React Doctor
-        id: react-doctor
-        continue-on-error: true
-        run: |
-          OUTPUT=$(pnpm react-doctor:diff 2>&1) || true
-          echo "$OUTPUT"
-          SCORE=$(echo "$OUTPUT" | grep -oP '\d+(?= / 100)' | head -1)
-          echo "score=${SCORE:-0}" >> "$GITHUB_OUTPUT"
-
-      - name: Check React Doctor score
-        env:
-          RD_SCORE: ${{ steps.react-doctor.outputs.score }}
-          MIN_SCORE: "90"
-        run: |
-          echo "React Doctor score: ${RD_SCORE}/100 (minimum: ${MIN_SCORE})"
-          if [ "${RD_SCORE}" -lt "${MIN_SCORE}" ]; then
-            echo "::error::React Doctor score ${RD_SCORE} is below the minimum threshold of ${MIN_SCORE}."
-            echo ""
-            echo "=========================================="
-            echo "  React Doctor score too low!"
-            echo "=========================================="
-            echo ""
-            echo "To fix these issues, run Claude Code locally:"
-            echo ""
-            echo "  cd autogpt_platform/frontend"
-            echo "  claude"
-            echo ""
-            echo "Then ask Claude to run react-doctor and fix the issues."
-            echo "You can also run it manually:"
-            echo ""
-            echo "  pnpm react-doctor       # scan all files"
-            echo "  pnpm react-doctor:diff  # scan only changed files"
-            echo ""
-            exit 1
-          fi
-
   chromatic:
     runs-on: ubuntu-latest
     needs: setup

autogpt_platform/backend/backend/copilot/config.py

@@ -49,11 +49,6 @@ class ChatConfig(BaseSettings):
         default=3600,
         description="TTL in seconds for stream data in Redis (1 hour)",
     )
-    stream_lock_ttl: int = Field(
-        default=120,
-        description="TTL in seconds for stream lock (2 minutes). Short timeout allows "
-        "reconnection after refresh/crash without long waits.",
-    )
     stream_max_length: int = Field(
         default=10000,
         description="Maximum number of messages to store per stream",

autogpt_platform/backend/backend/copilot/db.py

@@ -3,9 +3,8 @@
 import asyncio
 import logging
 from datetime import UTC, datetime
-from typing import Any
+from typing import Any, cast
 
-from prisma.errors import UniqueViolationError
 from prisma.models import ChatMessage as PrismaChatMessage
 from prisma.models import ChatSession as PrismaChatSession
 from prisma.types import (
@@ -93,9 +92,10 @@ async def add_chat_message(
     function_call: dict[str, Any] | None = None,
 ) -> ChatMessage:
     """Add a message to a chat session."""
-    # Build ChatMessageCreateInput with only non-None values
-    # (Prisma TypedDict rejects optional fields set to None)
-    data: ChatMessageCreateInput = {
+    # Build input dict dynamically rather than using ChatMessageCreateInput directly
+    # because Prisma's TypedDict validation rejects optional fields set to None.
+    # We only include fields that have values, then cast at the end.
+    data: dict[str, Any] = {
         "Session": {"connect": {"id": session_id}},
         "role": role,
         "sequence": sequence,
@@ -123,7 +123,7 @@ async def add_chat_message(
             where={"id": session_id},
             data={"updatedAt": datetime.now(UTC)},
         ),
-        PrismaChatMessage.prisma().create(data=data),
+        PrismaChatMessage.prisma().create(data=cast(ChatMessageCreateInput, data)),
     )
     return ChatMessage.from_db(message)
 
@@ -132,42 +132,38 @@ async def add_chat_messages_batch(
     session_id: str,
     messages: list[dict[str, Any]],
     start_sequence: int,
-) -> int:
+) -> tuple[list[ChatMessage], int]:
     """Add multiple messages to a chat session in a batch.
 
     Uses collision detection with retry: tries to create messages starting
     at start_sequence. If a unique constraint violation occurs (e.g., the
-    streaming loop and long-running callback race), queries the latest
-    sequence and retries with the correct offset. This avoids unnecessary
-    upserts and DB queries in the common case (no collision).
+    streaming loop and long-running callback race), queries MAX(sequence)
+    and retries with the correct next sequence number. This avoids
+    unnecessary upserts and DB queries in the common case (no collision).
 
     Returns:
-        Next sequence number for the next message to be inserted. This equals
-        start_sequence + len(messages) and allows callers to update their
-        counters even when collision detection adjusts start_sequence.
+        Tuple of (messages, final_message_count) where final_message_count
+        is the total number of messages in the session after insertion.
+        This allows callers to update their counters even when collision
+        detection adjusts start_sequence.
     """
     if not messages:
         # No messages to add - return current count
-        return start_sequence
+        return [], start_sequence
 
-    max_retries = 5
+    max_retries = 3
     for attempt in range(max_retries):
         try:
-            # Single timestamp for all messages and session update
-            now = datetime.now(UTC)
-
+            created_messages = []
             async with db.transaction() as tx:
-                # Build all message data
-                messages_data = []
                 for i, msg in enumerate(messages):
-                    # Build ChatMessageCreateInput with only non-None values
-                    # (Prisma TypedDict rejects optional fields set to None)
-                    # Note: create_many doesn't support nested creates, use sessionId directly
-                    data: ChatMessageCreateInput = {
-                        "sessionId": session_id,
+                    # Build input dict dynamically rather than using ChatMessageCreateInput
+                    # directly because Prisma's TypedDict validation rejects optional fields
+                    # set to None. We only include fields that have values, then cast.
+                    data: dict[str, Any] = {
+                        "Session": {"connect": {"id": session_id}},
                         "role": msg["role"],
                         "sequence": start_sequence + i,
-                        "createdAt": now,
                     }
 
                     # Add optional string fields
@@ -186,23 +182,31 @@ async def add_chat_messages_batch(
                     if msg.get("function_call") is not None:
                         data["functionCall"] = SafeJson(msg["function_call"])
 
-                    messages_data.append(data)
+                    created = await PrismaChatMessage.prisma(tx).create(
+                        data=cast(ChatMessageCreateInput, data)
+                    )
+                    created_messages.append(created)
 
-                # Run create_many and session update in parallel within transaction
-                # Both use the same timestamp for consistency
-                await asyncio.gather(
-                    PrismaChatMessage.prisma(tx).create_many(data=messages_data),
-                    PrismaChatSession.prisma(tx).update(
-                        where={"id": session_id},
-                        data={"updatedAt": now},
-                    ),
+                # Update session's updatedAt timestamp within the same transaction.
+                # Note: Token usage (total_prompt_tokens, total_completion_tokens) is updated
+                # separately via update_chat_session() after streaming completes.
+                await PrismaChatSession.prisma(tx).update(
+                    where={"id": session_id},
+                    data={"updatedAt": datetime.now(UTC)},
                 )
 
-            # Return next sequence number for counter sync
-            return start_sequence + len(messages)
+            # Return messages and final message count (for shared counter sync)
+            final_count = start_sequence + len(messages)
+            return [ChatMessage.from_db(m) for m in created_messages], final_count
 
-        except UniqueViolationError:
-            if attempt < max_retries - 1:
+        except Exception as e:
+            # Check if it's a unique constraint violation
+            error_msg = str(e).lower()
+            is_unique_constraint = (
+                "unique constraint" in error_msg or "duplicate key" in error_msg
+            )
+
+            if is_unique_constraint and attempt < max_retries - 1:
                 # Collision detected - query MAX(sequence)+1 and retry with correct offset
                 logger.info(
                     f"Collision detected for session {session_id} at sequence "
@@ -214,7 +218,7 @@ async def add_chat_messages_batch(
                 )
                 continue
             else:
-                # Max retries exceeded - propagate error
+                # Not a collision or max retries exceeded - propagate error
                 raise
 
     # Should never reach here due to raise in exception handler
@@ -277,15 +281,18 @@ async def get_next_sequence(session_id: str) -> int:
 
     Uses MAX(sequence) + 1 for robustness. Returns 0 if no messages exist.
     More robust than COUNT(*) because it's immune to deleted messages.
-
-    Optimized to select only the sequence column using raw SQL.
-    The unique index on (sessionId, sequence) makes this query fast.
     """
-    results = await db.query_raw_with_schema(
-        'SELECT "sequence" FROM {schema_prefix}"ChatMessage" WHERE "sessionId" = $1 ORDER BY "sequence" DESC LIMIT 1',
+    result = await db.prisma.query_raw(
+        """
+        SELECT COALESCE(MAX(sequence) + 1, 0) as next_seq
+        FROM "ChatMessage"
+        WHERE "sessionId" = $1
+        """,
         session_id,
     )
-    return 0 if not results else results[0]["sequence"] + 1
+    if not result or len(result) == 0:
+        return 0
+    return int(result[0]["next_seq"])
 
 
 async def update_tool_message_content(

autogpt_platform/backend/backend/copilot/model.py

@@ -434,13 +434,25 @@ async def _get_session_from_db(session_id: str) -> ChatSession | None:
 
 async def upsert_chat_session(
     session: ChatSession,
-) -> ChatSession:
+    *,
+    existing_message_count: int | None = None,
+) -> tuple[ChatSession, int]:
     """Update a chat session in both cache and database.
 
     Uses session-level locking to prevent race conditions when concurrent
     operations (e.g., background title update and main stream handler)
     attempt to upsert the same session simultaneously.
 
+    Args:
+        existing_message_count: If provided, skip the DB query to count
+            existing messages. The caller is responsible for tracking this
+            accurately. Useful for incremental saves in a streaming loop
+            where the caller already knows how many messages are persisted.
+
+    Returns:
+        Tuple of (session, final_message_count) where final_message_count is
+        the actual persisted message count after collision detection adjustments.
+
     Raises:
         DatabaseError: If the database write fails. The cache is still updated
             as a best-effort optimization, but the error is propagated to ensure
@@ -451,14 +463,18 @@ async def upsert_chat_session(
     lock = await _get_session_lock(session.session_id)
 
     async with lock:
-        # Always query DB for existing message count to ensure consistency
-        existing_message_count = await chat_db().get_next_sequence(session.session_id)
+        # Get existing message count from DB for incremental saves
+        if existing_message_count is None:
+            existing_message_count = await chat_db().get_next_sequence(
+                session.session_id
+            )
 
         db_error: Exception | None = None
+        final_count = existing_message_count
 
         # Save to database (primary storage)
         try:
-            await _save_session_to_db(
+            final_count = await _save_session_to_db(
                 session,
                 existing_message_count,
                 skip_existence_check=existing_message_count > 0,
@@ -489,7 +505,7 @@ async def upsert_chat_session(
                 f"Failed to persist chat session {session.session_id} to database"
             ) from db_error
 
-        return session
+        return session, final_count
 
 
 async def _save_session_to_db(
@@ -497,13 +513,16 @@ async def _save_session_to_db(
     existing_message_count: int,
     *,
     skip_existence_check: bool = False,
-) -> None:
+) -> int:
     """Save or update a chat session in the database.
 
     Args:
         skip_existence_check: When True, skip the ``get_chat_session`` query
             and assume the session row already exists.  Saves one DB round trip
             for incremental saves during streaming.
+
+    Returns:
+        Final message count after save (accounting for collision detection).
     """
     db = chat_db()
 
@@ -535,6 +554,7 @@ async def _save_session_to_db(
 
     # Add new messages (only those after existing count)
     new_messages = session.messages[existing_message_count:]
+    final_count = existing_message_count
     if new_messages:
         messages_data = []
         for msg in new_messages:
@@ -554,12 +574,14 @@ async def _save_session_to_db(
             f"roles={[m['role'] for m in messages_data]}, "
             f"start_sequence={existing_message_count}"
         )
-        await db.add_chat_messages_batch(
+        _, final_count = await db.add_chat_messages_batch(
             session_id=session.session_id,
             messages=messages_data,
             start_sequence=existing_message_count,
         )
 
+    return final_count
+
 
 async def append_and_save_message(session_id: str, message: ChatMessage) -> ChatSession:
     """Atomically append a message to a session and persist it.

autogpt_platform/backend/backend/copilot/model_test.py

@@ -60,7 +60,7 @@ async def test_chatsession_redis_storage(setup_test_user, test_user_id):
     s = ChatSession.new(user_id=test_user_id)
     s.messages = messages
 
-    s = await upsert_chat_session(s)
+    s, _ = await upsert_chat_session(s)
 
     s2 = await get_chat_session(
         session_id=s.session_id,
@@ -77,7 +77,7 @@ async def test_chatsession_redis_storage_user_id_mismatch(
 
     s = ChatSession.new(user_id=test_user_id)
     s.messages = messages
-    s = await upsert_chat_session(s)
+    s, _ = await upsert_chat_session(s)
 
     s2 = await get_chat_session(s.session_id, "different_user_id")
 
@@ -94,7 +94,7 @@ async def test_chatsession_db_storage(setup_test_user, test_user_id):
     s.messages = messages  # Contains user, assistant, and tool messages
     assert s.session_id is not None, "Session id is not set"
     # Upsert to save to both cache and DB
-    s = await upsert_chat_session(s)
+    s, _ = await upsert_chat_session(s)
 
     # Clear the Redis cache to force DB load
     redis_key = f"chat:session:{s.session_id}"
@@ -331,96 +331,3 @@ def test_to_openai_messages_merges_split_assistants():
     tc_list = merged.get("tool_calls")
     assert tc_list is not None and len(list(tc_list)) == 1
     assert list(tc_list)[0]["id"] == "tc1"
-
-
-# --------------------------------------------------------------------------- #
-#  Concurrent save collision detection                                        #
-# --------------------------------------------------------------------------- #
-
-
-@pytest.mark.asyncio(loop_scope="session")
-async def test_concurrent_saves_collision_detection(setup_test_user, test_user_id):
-    """Test that concurrent saves from streaming loop and callback handle collisions correctly.
-
-    Simulates the race condition where:
-    1. Streaming loop starts with saved_msg_count=5
-    2. Long-running callback appends message #5 and saves
-    3. Streaming loop tries to save with stale count=5
-
-    The collision detection should handle this gracefully.
-    """
-    import asyncio
-
-    # Create a session with initial messages
-    session = ChatSession.new(user_id=test_user_id)
-    for i in range(3):
-        session.messages.append(
-            ChatMessage(
-                role="user" if i % 2 == 0 else "assistant", content=f"Message {i}"
-            )
-        )
-
-    # Save initial messages
-    session = await upsert_chat_session(session)
-
-    # Simulate streaming loop and callback saving concurrently
-    async def streaming_loop_save():
-        """Simulates streaming loop saving messages."""
-        # Add 2 messages
-        session.messages.append(ChatMessage(role="user", content="Streaming message 1"))
-        session.messages.append(
-            ChatMessage(role="assistant", content="Streaming message 2")
-        )
-
-        # Wait a bit to let callback potentially save first
-        await asyncio.sleep(0.01)
-
-        # Save (will query DB for existing count)
-        return await upsert_chat_session(session)
-
-    async def callback_save():
-        """Simulates long-running callback saving a message."""
-        # Add 1 message
-        session.messages.append(
-            ChatMessage(role="tool", content="Callback result", tool_call_id="tc1")
-        )
-
-        # Save immediately (will query DB for existing count)
-        return await upsert_chat_session(session)
-
-    # Run both saves concurrently - one will hit collision detection
-    results = await asyncio.gather(streaming_loop_save(), callback_save())
-
-    # Both should succeed
-    assert all(r is not None for r in results)
-
-    # Reload session from DB to verify
-    from backend.data.redis_client import get_redis_async
-
-    redis_key = f"chat:session:{session.session_id}"
-    async_redis = await get_redis_async()
-    await async_redis.delete(redis_key)  # Clear cache to force DB load
-
-    loaded_session = await get_chat_session(session.session_id, test_user_id)
-    assert loaded_session is not None
-
-    # Should have all 6 messages (3 initial + 2 streaming + 1 callback)
-    assert len(loaded_session.messages) == 6
-
-    # Verify no duplicate sequences
-    sequences = []
-    for i, msg in enumerate(loaded_session.messages):
-        # Messages should have sequential sequence numbers starting from 0
-        sequences.append(i)
-
-    # All sequences should be unique and sequential
-    assert sequences == list(range(6))
-
-    # Verify message content is preserved
-    contents = [m.content for m in loaded_session.messages]
-    assert "Message 0" in contents
-    assert "Message 1" in contents
-    assert "Message 2" in contents
-    assert "Streaming message 1" in contents
-    assert "Streaming message 2" in contents
-    assert "Callback result" in contents

autogpt_platform/backend/backend/copilot/sdk/service.py

@@ -7,10 +7,9 @@ import os
 import uuid
 from collections.abc import AsyncGenerator
 from dataclasses import dataclass
-from typing import Any, cast
+from typing import Any
 
 from backend.data.redis_client import get_redis_async
-from backend.executor.cluster_lock import AsyncClusterLock
 from backend.util.exceptions import NotFoundError
 
 from .. import stream_registry
@@ -63,7 +62,6 @@ from .transcript import (
 logger = logging.getLogger(__name__)
 config = ChatConfig()
 
-
 # Set to hold background tasks to prevent garbage collection
 _background_tasks: set[asyncio.Task[Any]] = set()
 
@@ -135,11 +133,64 @@ is delivered to the user via a background stream.
   All tasks must run in the foreground.
 """
 
+# Session streaming lock configuration
 STREAM_LOCK_PREFIX = "copilot:stream:lock:"
+STREAM_LOCK_TTL = 3600  # 1 hour - matches stream_ttl
+
+
+async def _acquire_stream_lock(session_id: str, stream_id: str) -> bool:
+    """Acquire an exclusive lock for streaming to this session.
+
+    Prevents multiple concurrent streams to the same session which can cause:
+    - Message duplication
+    - Race conditions in message saves
+    - Confusing UX with multiple AI responses
+
+    Returns:
+        True if lock was acquired, False if another stream is active.
+    """
+    redis = await get_redis_async()
+    lock_key = f"{STREAM_LOCK_PREFIX}{session_id}"
+    # SET NX EX - atomic "set if not exists" with expiry
+    result = await redis.set(lock_key, stream_id, ex=STREAM_LOCK_TTL, nx=True)
+    return result is not None
+
+
+async def _release_stream_lock(session_id: str, stream_id: str) -> None:
+    """Release the stream lock if we still own it.
+
+    Only releases the lock if the stored stream_id matches ours (prevents
+    releasing another stream's lock if we somehow timed out).
+    """
+    redis = await get_redis_async()
+    lock_key = f"{STREAM_LOCK_PREFIX}{session_id}"
+
+    # Lua script for atomic compare-and-delete (only delete if value matches)
+    script = """
+    if redis.call("GET", KEYS[1]) == ARGV[1] then
+        return redis.call("DEL", KEYS[1])
+    else
+        return 0
+    end
+    """
+    await redis.eval(script, 1, lock_key, stream_id)  # type: ignore[misc]
+
+
+async def check_active_stream(session_id: str) -> str | None:
+    """Check if a stream is currently active for this session.
+
+    Returns:
+        The active stream_id if one exists, None otherwise.
+    """
+    redis = await get_redis_async()
+    lock_key = f"{STREAM_LOCK_PREFIX}{session_id}"
+    active_stream = await redis.get(lock_key)
+    return active_stream.decode() if isinstance(active_stream, bytes) else active_stream
 
 
 def _build_long_running_callback(
     user_id: str | None,
+    saved_msg_count_ref: list[int] | None = None,
 ) -> LongRunningCallback:
     """Build a callback that delegates long-running tools to the non-SDK infrastructure.
 
@@ -151,6 +202,9 @@ def _build_long_running_callback(
 
     Args:
         user_id: User ID for the session
+        saved_msg_count_ref: Mutable reference [count] shared with streaming loop
+            for coordinating message saves. When provided, the callback will update
+            it after appending messages to prevent counter drift.
 
     The returned callback matches the ``LongRunningCallback`` signature:
     ``(tool_name, args, session) -> MCP response dict``.
@@ -218,7 +272,10 @@ def _build_long_running_callback(
         )
         session.messages.append(pending_message)
         # Collision detection happens in add_chat_messages_batch (db.py)
-        session = await upsert_chat_session(session)
+        _, final_count = await upsert_chat_session(session)
+        # Update shared counter so streaming loop stays in sync
+        if saved_msg_count_ref is not None:
+            saved_msg_count_ref[0] = final_count
 
         # --- Spawn background task (reuses non-SDK infrastructure) ---
         bg_task = asyncio.create_task(
@@ -538,9 +595,6 @@ async def stream_chat_completion_sdk(
             f"Session {session_id} not found. Please create a new session first."
         )
 
-    # Type narrowing: session is guaranteed ChatSession after the check above
-    session = cast(ChatSession, session)
-
     # Append the new message to the session if it's not already there
     new_message_role = "user" if is_user_message else "assistant"
     if message and (
@@ -556,7 +610,7 @@ async def stream_chat_completion_sdk(
                 user_id=user_id, session_id=session_id, message_length=len(message)
             )
 
-    session = await upsert_chat_session(session)
+    session, _ = await upsert_chat_session(session)
 
     # Generate title for new sessions (first user message)
     if is_user_message and not session.title:
@@ -581,22 +635,16 @@ async def stream_chat_completion_sdk(
     stream_id = task_id  # Use task_id as unique stream identifier
 
     # Acquire stream lock to prevent concurrent streams to the same session
-    lock = AsyncClusterLock(
-        redis=await get_redis_async(),
-        key=f"{STREAM_LOCK_PREFIX}{session_id}",
-        owner_id=stream_id,
-        timeout=config.stream_lock_ttl,
-    )
-
-    lock_owner = await lock.try_acquire()
-    if lock_owner != stream_id:
-        # Another stream is active
+    lock_acquired = await _acquire_stream_lock(session_id, stream_id)
+    if not lock_acquired:
+        # Another stream is active - check if it's still alive
+        active_stream = await check_active_stream(session_id)
         logger.warning(
-            f"[SDK] Session {session_id} already has an active stream: {lock_owner}"
+            f"[SDK] Session {session_id} already has an active stream: {active_stream}"
         )
         yield StreamError(
             errorText="Another stream is already active for this session. "
-            "Please wait or stop it.",
+            "Please wait for it to complete or refresh the page.",
             code="stream_already_active",
         )
         yield StreamFinish()
@@ -618,10 +666,16 @@ async def stream_chat_completion_sdk(
         sdk_cwd = _make_sdk_cwd(session_id)
         os.makedirs(sdk_cwd, exist_ok=True)
 
+        # Initialize saved message counter as mutable list so long-running
+        # callback and streaming loop can coordinate
+        saved_msg_count_ref: list[int] = [len(session.messages)]
+
         set_execution_context(
             user_id,
             session,
-            long_running_callback=_build_long_running_callback(user_id),
+            long_running_callback=_build_long_running_callback(
+                user_id, saved_msg_count_ref
+            ),
         )
         try:
             from claude_agent_sdk import ClaudeAgentOptions, ClaudeSDKClient
@@ -752,6 +806,8 @@ async def stream_chat_completion_sdk(
                 accumulated_tool_calls: list[dict[str, Any]] = []
                 has_appended_assistant = False
                 has_tool_results = False
+                # Track persisted message count. Uses shared ref so long-running
+                # callback can update it for coordination
 
                 # Use an explicit async iterator with non-cancelling heartbeats.
                 # CRITICAL: we must NOT cancel __anext__() mid-flight — doing so
@@ -778,8 +834,6 @@ async def stream_chat_completion_sdk(
 
                         if not done:
                             # Timeout — emit heartbeat but keep the task alive
-                            # Also refresh lock TTL to keep it alive
-                            await lock.refresh()
                             yield StreamHeartbeat()
                             continue
 
@@ -932,7 +986,9 @@ async def stream_chat_completion_sdk(
                                 # other devices. Collision detection happens
                                 # in add_chat_messages_batch (db.py).
                                 try:
-                                    session = await upsert_chat_session(session)
+                                    _, final_count = await upsert_chat_session(session)
+                                    # Update shared ref so callback stays in sync
+                                    saved_msg_count_ref[0] = final_count
                                 except Exception as save_err:
                                     logger.warning(
                                         "[SDK] [%s] Incremental save " "failed: %s",
@@ -957,7 +1013,9 @@ async def stream_chat_completion_sdk(
                                 # visible on refresh / other devices.
                                 # Collision detection happens in add_chat_messages_batch (db.py).
                                 try:
-                                    session = await upsert_chat_session(session)
+                                    _, final_count = await upsert_chat_session(session)
+                                    # Update shared ref so callback stays in sync
+                                    saved_msg_count_ref[0] = final_count
                                 except Exception as save_err:
                                     logger.warning(
                                         "[SDK] [%s] Incremental save " "failed: %s",
@@ -1089,11 +1147,12 @@ async def stream_chat_completion_sdk(
                 "to use the OpenAI-compatible fallback."
             )
 
-        session = cast(ChatSession, await asyncio.shield(upsert_chat_session(session)))
+        _, final_count = await asyncio.shield(upsert_chat_session(session))
         logger.info(
-            "[SDK] [%s] Session saved with %d messages",
+            "[SDK] [%s] Session saved with %d messages (DB count: %d)",
             session_id[:12],
             len(session.messages),
+            final_count,
         )
         if not stream_completed:
             yield StreamFinish()
@@ -1106,11 +1165,10 @@ async def stream_chat_completion_sdk(
         raise
     except Exception as e:
         logger.error(f"[SDK] Error: {e}", exc_info=True)
-        if session:
-            try:
-                await asyncio.shield(upsert_chat_session(session))
-            except Exception as save_err:
-                logger.error(f"[SDK] Failed to save session on error: {save_err}")
+        try:
+            await asyncio.shield(upsert_chat_session(session))
+        except Exception as save_err:
+            logger.error(f"[SDK] Failed to save session on error: {save_err}")
         yield StreamError(
             errorText="An error occurred. Please try again.",
             code="sdk_error",
@@ -1132,7 +1190,7 @@ async def stream_chat_completion_sdk(
                 if not raw_transcript and use_resume and resume_file:
                     raw_transcript = read_transcript_file(resume_file)
 
-                if raw_transcript and session is not None:
+                if raw_transcript:
                     await asyncio.shield(
                         _try_upload_transcript(
                             user_id,
@@ -1153,7 +1211,7 @@ async def stream_chat_completion_sdk(
             _cleanup_sdk_tool_results(sdk_cwd)
 
         # Release stream lock to allow new streams for this session
-        await lock.release()
+        await _release_stream_lock(session_id, stream_id)
 
 
 async def _try_upload_transcript(

autogpt_platform/backend/backend/copilot/service.py

@@ -352,7 +352,7 @@ async def assign_user_to_session(
     if not session:
         raise NotFoundError(f"Session {session_id} not found")
     session.user_id = user_id
-    session = await upsert_chat_session(session)
+    session, _ = await upsert_chat_session(session)
     return session
 
 
@@ -464,7 +464,7 @@ async def stream_chat_completion(
             )
 
     upsert_start = time.monotonic()
-    session = await upsert_chat_session(session)
+    session, _ = await upsert_chat_session(session)
     upsert_time = (time.monotonic() - upsert_start) * 1000
     logger.info(
         f"[TIMING] upsert_chat_session took {upsert_time:.1f}ms",
@@ -690,7 +690,7 @@ async def stream_chat_completion(
                                 f"tool_responses={len(tool_response_messages)}"
                             )
                         if messages_to_save_early or has_appended_streaming_message:
-                            await upsert_chat_session(session)
+                            _ = await upsert_chat_session(session)
                             has_saved_assistant_message = True
 
                     has_yielded_end = True
@@ -729,7 +729,7 @@ async def stream_chat_completion(
             if tool_response_messages:
                 session.messages.extend(tool_response_messages)
             try:
-                await upsert_chat_session(session)
+                _ = await upsert_chat_session(session)
             except Exception as e:
                 logger.warning(
                     f"Failed to save interrupted session {session.session_id}: {e}"
@@ -770,7 +770,7 @@ async def stream_chat_completion(
                 if messages_to_save:
                     session.messages.extend(messages_to_save)
                 if messages_to_save or has_appended_streaming_message:
-                    await upsert_chat_session(session)
+                    _ = await upsert_chat_session(session)
 
             if not has_yielded_error:
                 error_message = str(e)
@@ -854,7 +854,7 @@ async def stream_chat_completion(
             not has_long_running_tool_call
             and (messages_to_save or has_appended_streaming_message)
         ):
-            await upsert_chat_session(session)
+            _ = await upsert_chat_session(session)
     else:
         logger.info(
             "Assistant message already saved when StreamFinish was received, "
@@ -1526,7 +1526,7 @@ async def _yield_tool_call(
                     tool_call_id=tool_call_id,
                 )
                 session.messages.append(pending_message)
-                await upsert_chat_session(session)
+                _ = await upsert_chat_session(session)
 
             await _with_optional_lock(session_lock, _save_pending)
             logger.info(
@@ -2020,7 +2020,7 @@ async def _generate_llm_continuation(
             fresh_session.messages.append(assistant_message)
 
             # Save to database (not cache) to persist the response
-            await upsert_chat_session(fresh_session)
+            _ = await upsert_chat_session(fresh_session)
 
             # Invalidate cache so next poll/refresh gets fresh data
             await invalidate_session_cache(session_id)
@@ -2226,7 +2226,7 @@ async def _generate_llm_continuation_with_streaming(
             fresh_session.messages.append(assistant_message)
 
             # Save to database (not cache) to persist the response
-            await upsert_chat_session(fresh_session)
+            _ = await upsert_chat_session(fresh_session)
 
             # Invalidate cache so next poll/refresh gets fresh data
             await invalidate_session_cache(session_id)

autogpt_platform/backend/backend/copilot/service_test.py

@@ -58,7 +58,7 @@ async def test_stream_chat_completion_with_tool_calls(setup_test_user, test_user
         return pytest.skip("OPEN_ROUTER_API_KEY is not set, skipping test")
 
     session = await create_chat_session(test_user_id)
-    session = await upsert_chat_session(session)
+    session, _ = await upsert_chat_session(session)
 
     has_errors = False
     has_ended = False
@@ -104,7 +104,7 @@ async def test_sdk_resume_multi_turn(setup_test_user, test_user_id):
         return pytest.skip("CLAUDE_AGENT_USE_RESUME is not enabled, skipping test")
 
     session = await create_chat_session(test_user_id)
-    session = await upsert_chat_session(session)
+    session, _ = await upsert_chat_session(session)
 
     # --- Turn 1: send a message with a unique keyword ---
     keyword = "ZEPHYR42"

autogpt_platform/backend/backend/executor/cluster_lock.py

@@ -1,6 +1,5 @@
 """Redis-based distributed locking for cluster coordination."""
 
-import asyncio
 import logging
 import threading
 import time
@@ -8,7 +7,6 @@ from typing import TYPE_CHECKING
 
 if TYPE_CHECKING:
     from redis import Redis
-    from redis.asyncio import Redis as AsyncRedis
 
 logger = logging.getLogger(__name__)
 
@@ -128,124 +126,3 @@ class ClusterLock:
 
         with self._refresh_lock:
             self._last_refresh = 0.0
-
-
-class AsyncClusterLock:
-    """Async Redis-based distributed lock for preventing duplicate execution."""
-
-    def __init__(
-        self, redis: "AsyncRedis", key: str, owner_id: str, timeout: int = 300
-    ):
-        self.redis = redis
-        self.key = key
-        self.owner_id = owner_id
-        self.timeout = timeout
-        self._last_refresh = 0.0
-        self._refresh_lock = asyncio.Lock()
-
-    async def try_acquire(self) -> str | None:
-        """Try to acquire the lock.
-
-        Returns:
-            - owner_id (self.owner_id) if successfully acquired
-            - different owner_id if someone else holds the lock
-            - None if Redis is unavailable or other error
-        """
-        try:
-            success = await self.redis.set(
-                self.key, self.owner_id, nx=True, ex=self.timeout
-            )
-            if success:
-                async with self._refresh_lock:
-                    self._last_refresh = time.time()
-                return self.owner_id  # Successfully acquired
-
-            # Failed to acquire, get current owner
-            current_value = await self.redis.get(self.key)
-            if current_value:
-                current_owner = (
-                    current_value.decode("utf-8")
-                    if isinstance(current_value, bytes)
-                    else str(current_value)
-                )
-                return current_owner
-
-            # Key doesn't exist but we failed to set it - race condition or Redis issue
-            return None
-
-        except Exception as e:
-            logger.error(f"AsyncClusterLock.try_acquire failed for key {self.key}: {e}")
-            return None
-
-    async def refresh(self) -> bool:
-        """Refresh lock TTL if we still own it.
-
-        Rate limited to at most once every timeout/10 seconds (minimum 1 second).
-        During rate limiting, still verifies lock existence but skips TTL extension.
-        Setting _last_refresh to 0 bypasses rate limiting for testing.
-
-        Async-safe: uses asyncio.Lock to protect _last_refresh access.
-        """
-        # Calculate refresh interval: max(timeout // 10, 1)
-        refresh_interval = max(self.timeout // 10, 1)
-        current_time = time.time()
-
-        # Check if we're within the rate limit period (async-safe read)
-        # _last_refresh == 0 forces a refresh (bypasses rate limiting for testing)
-        async with self._refresh_lock:
-            last_refresh = self._last_refresh
-        is_rate_limited = (
-            last_refresh > 0 and (current_time - last_refresh) < refresh_interval
-        )
-
-        try:
-            # Always verify lock existence, even during rate limiting
-            current_value = await self.redis.get(self.key)
-            if not current_value:
-                async with self._refresh_lock:
-                    self._last_refresh = 0
-                return False
-
-            stored_owner = (
-                current_value.decode("utf-8")
-                if isinstance(current_value, bytes)
-                else str(current_value)
-            )
-            if stored_owner != self.owner_id:
-                async with self._refresh_lock:
-                    self._last_refresh = 0
-                return False
-
-            # If rate limited, return True but don't update TTL or timestamp
-            if is_rate_limited:
-                return True
-
-            # Perform actual refresh
-            if await self.redis.expire(self.key, self.timeout):
-                async with self._refresh_lock:
-                    self._last_refresh = current_time
-                return True
-
-            async with self._refresh_lock:
-                self._last_refresh = 0
-            return False
-
-        except Exception as e:
-            logger.error(f"AsyncClusterLock.refresh failed for key {self.key}: {e}")
-            async with self._refresh_lock:
-                self._last_refresh = 0
-            return False
-
-    async def release(self):
-        """Release the lock."""
-        async with self._refresh_lock:
-            if self._last_refresh == 0:
-                return
-
-        try:
-            await self.redis.delete(self.key)
-        except Exception:
-            pass
-
-        async with self._refresh_lock:
-            self._last_refresh = 0.0

autogpt_platform/frontend/package.json

@@ -23,8 +23,6 @@
     "build-storybook": "storybook build",
     "test-storybook": "test-storybook",
     "test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm run build-storybook -- --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && pnpm run test-storybook\"",
-    "react-doctor": "npx -y react-doctor@latest . --verbose",
-    "react-doctor:diff": "npx -y react-doctor@latest . --verbose --diff",
     "generate:api": "npx --yes tsx ./scripts/generate-api-queries.ts && orval --config ./orval.config.ts",
     "generate:api:force": "npx --yes tsx ./scripts/generate-api-queries.ts --force && orval --config ./orval.config.ts"
   },

autogpt_platform/frontend/src/app/(platform)/build/BuilderContent.tsx

@@ -1,13 +0,0 @@
-"use client";
-import { ReactFlowProvider } from "@xyflow/react";
-import { Flow } from "./components/FlowEditor/Flow/Flow";
-
-export function BuilderContent() {
-  return (
-    <div className="relative h-full w-full">
-      <ReactFlowProvider>
-        <Flow />
-      </ReactFlowProvider>
-    </div>
-  );
-}

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

@@ -7,7 +7,7 @@ import {
   TooltipTrigger,
 } from "@/components/atoms/Tooltip/BaseTooltip";
 import { beautifyString, cn } from "@/lib/utils";
-import { useCallback, useState } from "react";
+import { useState } from "react";
 import { CustomNodeData } from "../CustomNode";
 import { NodeBadges } from "./NodeBadges";
 import { NodeContextMenu } from "./NodeContextMenu";
@@ -25,9 +25,6 @@ export const NodeHeader = ({ data, nodeId }: Props) => {
 
   const [isEditingTitle, setIsEditingTitle] = useState(false);
   const [editedTitle, setEditedTitle] = useState(title);
-  const titleInputRef = useCallback((node: HTMLInputElement | null) => {
-    node?.focus();
-  }, []);
 
   const handleTitleEdit = () => {
     updateNodeData(nodeId, {
@@ -55,10 +52,10 @@ export const NodeHeader = ({ data, nodeId }: Props) => {
           >
             {isEditingTitle ? (
               <input
-                ref={titleInputRef}
                 id="node-title-input"
                 value={editedTitle}
                 onChange={(e) => setEditedTitle(e.target.value)}
+                autoFocus
                 className={cn(
                   "m-0 h-fit w-full border-none bg-transparent p-0 focus:outline-none focus:ring-0",
                   "font-sans text-[1rem] font-semibold leading-[1.5rem] text-zinc-800",

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

@@ -300,6 +300,7 @@ export function MCPToolDialog({
                 value={serverUrl}
                 onChange={(e) => setServerUrl(e.target.value)}
                 onKeyDown={(e) => e.key === "Enter" && handleDiscoverTools()}
+                autoFocus
               />
             </div>
 
@@ -326,6 +327,7 @@ export function MCPToolDialog({
                   value={manualToken}
                   onChange={(e) => setManualToken(e.target.value)}
                   onKeyDown={(e) => e.key === "Enter" && handleDiscoverTools()}
+                  autoFocus
                 />
               </div>
             )}

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/HorizontalScroll.tsx

@@ -52,7 +52,7 @@ export const HorizontalScroll: React.FC<HorizontalScrollAreaProps> = ({
       return;
     }
     const handleScroll = () => updateScrollState();
-    element.addEventListener("scroll", handleScroll, { passive: true });
+    element.addEventListener("scroll", handleScroll);
     window.addEventListener("resize", handleScroll);
     return () => {
       element.removeEventListener("scroll", handleScroll);

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewSearchGraph/GraphMenuContent/GraphContent.tsx

@@ -85,20 +85,12 @@ export const GraphSearchContent: React.FC<GraphSearchContentProps> = ({
                   <Tooltip delayDuration={300}>
                     <TooltipTrigger asChild>
                       <div
-                        role="button"
-                        tabIndex={0}
                         className={`mx-4 my-2 flex h-20 cursor-pointer rounded-lg border border-zinc-200 bg-white ${
                           index === selectedIndex
                             ? "border-zinc-400 shadow-md"
                             : "hover:border-zinc-300 hover:shadow-sm"
                         }`}
                         onClick={() => onNodeSelect(node.id)}
-                        onKeyDown={(e) => {
-                          if (e.key === "Enter" || e.key === " ") {
-                            e.preventDefault();
-                            onNodeSelect(node.id);
-                          }
-                        }}
                         onMouseEnter={() => {
                           setSelectedIndex(index);
                           onNodeHover?.(node.id);

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/agent-run-draft-view.tsx

@@ -140,7 +140,10 @@ export function AgentRunDraftView({
       ),
     [agentInputSchema],
   );
-  const agentCredentialsInputFields = graph.credentials_input_schema.properties;
+  const agentCredentialsInputFields = useMemo(
+    () => graph.credentials_input_schema.properties,
+    [graph],
+  );
   const credentialFields = useMemo(
     function getCredentialFields() {
       return Object.entries(agentCredentialsInputFields);

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

@@ -1,11 +1,13 @@
-import type { Metadata } from "next";
-import { BuilderContent } from "./BuilderContent";
-
-export const metadata: Metadata = {
-  title: "Build",
-  description: "Build your agent",
-};
+"use client";
+import { ReactFlowProvider } from "@xyflow/react";
+import { Flow } from "./components/FlowEditor/Flow/Flow";
 
 export default function BuilderPage() {
-  return <BuilderContent />;
+  return (
+    <div className="relative h-full w-full">
+      <ReactFlowProvider>
+        <Flow />
+      </ReactFlowProvider>
+    </div>
+  );
 }

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

@@ -1,7 +1,7 @@
 "use client";
 import { ChatInput } from "@/app/(platform)/copilot/components/ChatInput/ChatInput";
 import { UIDataTypes, UIMessage, UITools } from "ai";
-import { LayoutGroup, LazyMotion, domAnimation, m } from "framer-motion";
+import { LayoutGroup, motion } from "framer-motion";
 import { ReactNode } from "react";
 import { ChatMessagesContainer } from "../ChatMessagesContainer/ChatMessagesContainer";
 import { CopilotChatActionsProvider } from "../CopilotChatActionsProvider/CopilotChatActionsProvider";
@@ -38,47 +38,45 @@ export const ChatContainer = ({
   const inputLayoutId = "copilot-2-chat-input";
 
   return (
-    <LazyMotion features={domAnimation}>
-      <CopilotChatActionsProvider onSend={onSend}>
-        <LayoutGroup id="copilot-2-chat-layout">
-          <div className="flex h-full min-h-0 w-full flex-col bg-[#f8f8f9] px-2 lg:px-0">
-            {sessionId ? (
-              <div className="mx-auto flex h-full min-h-0 w-full max-w-3xl flex-col">
-                <ChatMessagesContainer
-                  messages={messages}
-                  status={status}
-                  error={error}
-                  isLoading={isLoadingSession}
-                  headerSlot={headerSlot}
-                />
-                <m.div
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  transition={{ duration: 0.3 }}
-                  className="relative px-3 pb-2 pt-2"
-                >
-                  <div className="pointer-events-none absolute left-0 right-0 top-[-18px] z-10 h-6 bg-gradient-to-b from-transparent to-[#f8f8f9]" />
-                  <ChatInput
-                    inputId="chat-input-session"
-                    onSend={onSend}
-                    disabled={isBusy}
-                    isStreaming={isBusy}
-                    onStop={onStop}
-                    placeholder="What else can I help with?"
-                  />
-                </m.div>
-              </div>
-            ) : (
-              <EmptySession
-                inputLayoutId={inputLayoutId}
-                isCreatingSession={isCreatingSession}
-                onCreateSession={onCreateSession}
-                onSend={onSend}
+    <CopilotChatActionsProvider onSend={onSend}>
+      <LayoutGroup id="copilot-2-chat-layout">
+        <div className="flex h-full min-h-0 w-full flex-col bg-[#f8f8f9] px-2 lg:px-0">
+          {sessionId ? (
+            <div className="mx-auto flex h-full min-h-0 w-full max-w-3xl flex-col">
+              <ChatMessagesContainer
+                messages={messages}
+                status={status}
+                error={error}
+                isLoading={isLoadingSession}
+                headerSlot={headerSlot}
               />
-            )}
-          </div>
-        </LayoutGroup>
-      </CopilotChatActionsProvider>
-    </LazyMotion>
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 0.3 }}
+                className="relative px-3 pb-2 pt-2"
+              >
+                <div className="pointer-events-none absolute left-0 right-0 top-[-18px] z-10 h-6 bg-gradient-to-b from-transparent to-[#f8f8f9]" />
+                <ChatInput
+                  inputId="chat-input-session"
+                  onSend={onSend}
+                  disabled={isBusy}
+                  isStreaming={isBusy}
+                  onStop={onStop}
+                  placeholder="What else can I help with?"
+                />
+              </motion.div>
+            </div>
+          ) : (
+            <EmptySession
+              inputLayoutId={inputLayoutId}
+              isCreatingSession={isCreatingSession}
+              onCreateSession={onCreateSession}
+              onSend={onSend}
+            />
+          )}
+        </div>
+      </LayoutGroup>
+    </CopilotChatActionsProvider>
   );
 };

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

@@ -117,7 +117,6 @@ export function AudioWaveform({
       {bars.map((height, i) => {
         const barHeight = Math.max(minBarHeight, height);
         return (
-          // eslint-disable-next-line react/no-array-index-key
           <div
             key={i}
             className="relative"

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

@@ -12,7 +12,6 @@ import {
 import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
 import { toast } from "@/components/molecules/Toast/use-toast";
 import { ToolUIPart, UIDataTypes, UIMessage, UITools } from "ai";
-import Image from "next/image";
 import { useEffect, useRef, useState } from "react";
 import { CreateAgentTool } from "../../tools/CreateAgent/CreateAgent";
 import { EditAgentTool } from "../../tools/EditAgent/EditAgent";
@@ -58,7 +57,7 @@ function resolveWorkspaceUrls(text: string): string {
  * Falls back to <video> when an <img> fails to load for workspace files.
  */
 function WorkspaceMediaImage(props: React.JSX.IntrinsicElements["img"]) {
-  const { src, alt } = props;
+  const { src, alt, ...rest } = props;
   const [imgFailed, setImgFailed] = useState(false);
   const isWorkspace = src?.includes("/workspace/files/") ?? false;
 
@@ -80,17 +79,16 @@ function WorkspaceMediaImage(props: React.JSX.IntrinsicElements["img"]) {
   }
 
   return (
-    <Image
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
       src={src}
       alt={alt || "Image"}
-      width={0}
-      height={0}
-      sizes="100vw"
-      className="h-auto w-full rounded-md border border-zinc-200"
-      unoptimized
+      className="h-auto max-w-full rounded-md border border-zinc-200"
+      loading="lazy"
       onError={() => {
         if (isWorkspace) setImgFailed(true);
       }}
+      {...rest}
     />
   );
 }
@@ -197,12 +195,12 @@ export const ChatMessagesContainer = ({
                   "group-[.is-assistant]:bg-transparent group-[.is-assistant]:text-slate-900"
                 }
               >
-                {message.parts.map((part) => {
+                {message.parts.map((part, i) => {
                   switch (part.type) {
                     case "text":
                       return (
                         <MessageResponse
-                          key={`${message.id}-text`}
+                          key={`${message.id}-${i}`}
                           components={STREAMDOWN_COMPONENTS}
                         >
                           {resolveWorkspaceUrls(part.text)}
@@ -211,7 +209,7 @@ export const ChatMessagesContainer = ({
                     case "tool-find_block":
                       return (
                         <FindBlocksTool
-                          key={(part as ToolUIPart).toolCallId}
+                          key={`${message.id}-${i}`}
                           part={part as ToolUIPart}
                         />
                       );
@@ -219,7 +217,7 @@ export const ChatMessagesContainer = ({
                     case "tool-find_library_agent":
                       return (
                         <FindAgentsTool
-                          key={(part as ToolUIPart).toolCallId}
+                          key={`${message.id}-${i}`}
                           part={part as ToolUIPart}
                         />
                       );
@@ -227,14 +225,14 @@ export const ChatMessagesContainer = ({
                     case "tool-get_doc_page":
                       return (
                         <SearchDocsTool
-                          key={(part as ToolUIPart).toolCallId}
+                          key={`${message.id}-${i}`}
                           part={part as ToolUIPart}
                         />
                       );
                     case "tool-run_block":
                       return (
                         <RunBlockTool
-                          key={(part as ToolUIPart).toolCallId}
+                          key={`${message.id}-${i}`}
                           part={part as ToolUIPart}
                         />
                       );
@@ -242,42 +240,42 @@ export const ChatMessagesContainer = ({
                     case "tool-schedule_agent":
                       return (
                         <RunAgentTool
-                          key={(part as ToolUIPart).toolCallId}
+                          key={`${message.id}-${i}`}
                           part={part as ToolUIPart}
                         />
                       );
                     case "tool-create_agent":
                       return (
                         <CreateAgentTool
-                          key={(part as ToolUIPart).toolCallId}
+                          key={`${message.id}-${i}`}
                           part={part as ToolUIPart}
                         />
                       );
                     case "tool-edit_agent":
                       return (
                         <EditAgentTool
-                          key={(part as ToolUIPart).toolCallId}
+                          key={`${message.id}-${i}`}
                           part={part as ToolUIPart}
                         />
                       );
                     case "tool-view_agent_output":
                       return (
                         <ViewAgentOutputTool
-                          key={(part as ToolUIPart).toolCallId}
+                          key={`${message.id}-${i}`}
                           part={part as ToolUIPart}
                         />
                       );
                     case "tool-search_feature_requests":
                       return (
                         <SearchFeatureRequestsTool
-                          key={(part as ToolUIPart).toolCallId}
+                          key={`${message.id}-${i}`}
                           part={part as ToolUIPart}
                         />
                       );
                     case "tool-create_feature_request":
                       return (
                         <CreateFeatureRequestTool
-                          key={(part as ToolUIPart).toolCallId}
+                          key={`${message.id}-${i}`}
                           part={part as ToolUIPart}
                         />
                       );
@@ -287,7 +285,7 @@ export const ChatMessagesContainer = ({
                       if (part.type.startsWith("tool-")) {
                         return (
                           <GenericTool
-                            key={(part as ToolUIPart).toolCallId}
+                            key={`${message.id}-${i}`}
                             part={part as ToolUIPart}
                           />
                         );

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

@@ -25,7 +25,7 @@ import {
 import { cn } from "@/lib/utils";
 import { DotsThree, PlusCircleIcon, PlusIcon } from "@phosphor-icons/react";
 import { useQueryClient } from "@tanstack/react-query";
-import { LazyMotion, domAnimation, m } from "framer-motion";
+import { motion } from "framer-motion";
 import { parseAsString, useQueryState } from "nuqs";
 import { useState } from "react";
 import { DeleteChatDialog } from "../DeleteChatDialog/DeleteChatDialog";
@@ -129,7 +129,7 @@ export function ChatSidebar() {
   }
 
   return (
-    <LazyMotion features={domAnimation}>
+    <>
       <Sidebar
         variant="inset"
         collapsible="icon"
@@ -144,7 +144,7 @@ export function ChatSidebar() {
                 : "flex-row items-center justify-between",
             )}
           >
-            <m.div
+            <motion.div
               key={isCollapsed ? "header-collapsed" : "header-expanded"}
               className="flex flex-col items-center gap-3 pt-4"
               initial={{ opacity: 0, filter: "blur(3px)" }}
@@ -162,12 +162,12 @@ export function ChatSidebar() {
                   <span className="sr-only">New Chat</span>
                 </Button>
               </div>
-            </m.div>
+            </motion.div>
           </SidebarHeader>
         )}
         <SidebarContent className="gap-4 overflow-y-auto px-4 py-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
           {!isCollapsed && (
-            <m.div
+            <motion.div
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               transition={{ duration: 0.2, delay: 0.1 }}
@@ -179,11 +179,11 @@ export function ChatSidebar() {
               <div className="relative left-6">
                 <SidebarTrigger />
               </div>
-            </m.div>
+            </motion.div>
           )}
 
           {!isCollapsed && (
-            <m.div
+            <motion.div
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               transition={{ duration: 0.2, delay: 0.15 }}
@@ -256,12 +256,12 @@ export function ChatSidebar() {
                   </div>
                 ))
               )}
-            </m.div>
+            </motion.div>
           )}
         </SidebarContent>
         {!isCollapsed && sessionId && (
           <SidebarFooter className="shrink-0 bg-zinc-50 p-3 pb-1 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
-            <m.div
+            <motion.div
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               transition={{ duration: 0.2, delay: 0.2 }}
@@ -275,7 +275,7 @@ export function ChatSidebar() {
               >
                 New Chat
               </Button>
-            </m.div>
+            </motion.div>
           </SidebarFooter>
         )}
       </Sidebar>
@@ -286,6 +286,6 @@ export function ChatSidebar() {
         onConfirm={handleConfirmDelete}
         onCancel={handleCancelDelete}
       />
-    </LazyMotion>
+    </>
   );
 }

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

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

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

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

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

@@ -2,13 +2,7 @@
 
 import { cn } from "@/lib/utils";
 import { CaretDownIcon } from "@phosphor-icons/react";
-import {
-  AnimatePresence,
-  LazyMotion,
-  domAnimation,
-  m,
-  useReducedMotion,
-} from "framer-motion";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
 import { useId } from "react";
 import { useToolAccordion } from "./useToolAccordion";
 
@@ -44,66 +38,65 @@ export function ToolAccordion({
   });
 
   return (
-    <LazyMotion features={domAnimation}>
-      <div
-        className={cn(
-          "mt-2 w-full rounded-lg border border-slate-200 bg-slate-100 px-3 py-2",
-          className,
-        )}
+    <div
+      className={cn(
+        "mt-2 w-full rounded-lg border border-slate-200 bg-slate-100 px-3 py-2",
+        className,
+      )}
+    >
+      <button
+        type="button"
+        aria-expanded={isExpanded}
+        aria-controls={contentId}
+        onClick={toggle}
+        className="flex w-full items-center justify-between gap-3 py-1 text-left"
       >
-        <button
-          type="button"
-          aria-expanded={isExpanded}
-          aria-controls={contentId}
-          onClick={toggle}
-          className="flex w-full items-center justify-between gap-3 py-1 text-left"
-        >
-          <div className="flex min-w-0 items-center gap-3">
-            <span className="flex shrink-0 items-center text-gray-800">
-              {icon}
-            </span>
-            <div className="min-w-0">
-              <p
-                className={cn(
-                  "truncate text-sm font-medium text-gray-800",
-                  titleClassName,
-                )}
-              >
-                {title}
-              </p>
-              {description && (
-                <p className="truncate text-xs text-slate-800">{description}</p>
+        <div className="flex min-w-0 items-center gap-3">
+          <span className="flex shrink-0 items-center text-gray-800">
+            {icon}
+          </span>
+          <div className="min-w-0">
+            <p
+              className={cn(
+                "truncate text-sm font-medium text-gray-800",
+                titleClassName,
               )}
-            </div>
-          </div>
-          <CaretDownIcon
-            className={cn(
-              "h-4 w-4 shrink-0 text-slate-500 transition-transform",
-              isExpanded && "rotate-180",
-            )}
-            weight="bold"
-          />
-        </button>
-
-        <AnimatePresence initial={false}>
-          {isExpanded && (
-            <m.div
-              id={contentId}
-              initial={{ height: 0, opacity: 0, filter: "blur(10px)" }}
-              animate={{ height: "auto", opacity: 1, filter: "blur(0px)" }}
-              exit={{ height: 0, opacity: 0, filter: "blur(10px)" }}
-              transition={
-                shouldReduceMotion
-                  ? { duration: 0 }
-                  : { type: "spring", bounce: 0.35, duration: 0.55 }
-              }
-              className="overflow-hidden"
             >
-              <div className="pb-2 pt-3">{children}</div>
-            </m.div>
+              {title}
+            </p>
+            {description && (
+              <p className="truncate text-xs text-slate-800">{description}</p>
+            )}
+          </div>
+        </div>
+        <CaretDownIcon
+          className={cn(
+            "h-4 w-4 shrink-0 text-slate-500 transition-transform",
+            isExpanded && "rotate-180",
           )}
-        </AnimatePresence>
-      </div>
-    </LazyMotion>
+          weight="bold"
+        />
+      </button>
+
+      <AnimatePresence initial={false}>
+        {isExpanded && (
+          <motion.div
+            id={contentId}
+            initial={{ height: 0, opacity: 0, filter: "blur(10px)" }}
+            animate={{ height: "auto", opacity: 1, filter: "blur(0px)" }}
+            exit={{ height: 0, opacity: 0, filter: "blur(10px)" }}
+            transition={
+              shouldReduceMotion
+                ? { duration: 0 }
+                : { type: "spring", bounce: 0.35, duration: 0.55 }
+            }
+            className="overflow-hidden"
+            style={{ willChange: "height, opacity, filter" }}
+          >
+            <div className="pb-2 pt-3">{children}</div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
   );
 }

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

@@ -1,14 +0,0 @@
-import type { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Copilot",
-  description: "Chat with your AI copilot",
-};
-
-export default function CopilotLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return children;
-}

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

@@ -1,14 +0,0 @@
-import type { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Copilot Styleguide",
-  description: "Copilot UI component styleguide",
-};
-
-export default function StyleguideLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return children;
-}

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

@@ -11,11 +11,6 @@ import {
   MessageResponse,
 } from "@/components/ai-elements/message";
 import { Text } from "@/components/atoms/Text/Text";
-import {
-  CredentialsProvidersContext,
-  type CredentialsProviderData,
-  type CredentialsProvidersContextType,
-} from "@/providers/agent-credentials/credentials-provider";
 import { CopilotChatActionsProvider } from "../components/CopilotChatActionsProvider/CopilotChatActionsProvider";
 import { CreateAgentTool } from "../tools/CreateAgent/CreateAgent";
 import { EditAgentTool } from "../tools/EditAgent/EditAgent";
@@ -102,65 +97,6 @@ function uid() {
   return `sg-${++_id}`;
 }
 
-// ---------------------------------------------------------------------------
-// Mock credential providers for setup-requirements demos
-// ---------------------------------------------------------------------------
-
-const noop = () => Promise.reject(new Error("Styleguide mock"));
-
-function makeMockProvider(
-  provider: string,
-  providerName: string,
-  savedCredentials: CredentialsProviderData["savedCredentials"] = [],
-): CredentialsProviderData {
-  return {
-    provider,
-    providerName,
-    savedCredentials,
-    isSystemProvider: false,
-    oAuthCallback: noop as CredentialsProviderData["oAuthCallback"],
-    mcpOAuthCallback: noop as CredentialsProviderData["mcpOAuthCallback"],
-    createAPIKeyCredentials:
-      noop as CredentialsProviderData["createAPIKeyCredentials"],
-    createUserPasswordCredentials:
-      noop as CredentialsProviderData["createUserPasswordCredentials"],
-    createHostScopedCredentials:
-      noop as CredentialsProviderData["createHostScopedCredentials"],
-    deleteCredentials: noop as CredentialsProviderData["deleteCredentials"],
-  };
-}
-
-/**
- * Provider context where the user already has saved credentials
- * so the credential picker shows a selection list.
- */
-const MOCK_PROVIDERS_WITH_CREDENTIALS: CredentialsProvidersContextType = {
-  google: makeMockProvider("google", "Google", [
-    {
-      id: "cred-google-1",
-      provider: "google",
-      type: "oauth2",
-      title: "work@company.com",
-      scopes: ["email", "calendar"],
-    },
-    {
-      id: "cred-google-2",
-      provider: "google",
-      type: "oauth2",
-      title: "personal@gmail.com",
-      scopes: ["email", "calendar"],
-    },
-  ]),
-};
-
-/**
- * Provider context where the user has NO saved credentials,
- * so the credential picker shows an "add new" flow.
- */
-const MOCK_PROVIDERS_WITHOUT_CREDENTIALS: CredentialsProvidersContextType = {
-  openweathermap: makeMockProvider("openweathermap", "OpenWeatherMap"),
-};
-
 // ---------------------------------------------------------------------------
 // Page
 // ---------------------------------------------------------------------------
@@ -618,80 +554,45 @@ export default function StyleguidePage() {
                 />
               </SubSection>
 
-              <SubSection label="Setup requirements — no credentials (add new)">
-                <CredentialsProvidersContext.Provider
-                  value={MOCK_PROVIDERS_WITHOUT_CREDENTIALS}
-                >
-                  <RunBlockTool
-                    part={{
-                      type: "tool-run_block",
-                      toolCallId: uid(),
-                      state: "output-available",
-                      input: { block_id: "weather-block-123" },
-                      output: {
-                        type: ResponseType.setup_requirements,
-                        message:
-                          "This block requires API credentials to run. Please configure them below.",
-                        setup_info: {
-                          agent_id: "agent-weather-1",
-                          agent_name: "Weather Agent",
-                          requirements: {
-                            inputs: [
-                              {
-                                name: "city",
-                                title: "City",
-                                type: "string",
-                                required: true,
-                                description: "The city to get weather for",
-                              },
-                            ],
-                          },
-                          user_readiness: {
-                            missing_credentials: {
-                              openweathermap_key: {
-                                provider: "openweathermap",
-                                types: ["api_key"],
-                              },
+              <SubSection label="Output available (setup requirements)">
+                <RunBlockTool
+                  part={{
+                    type: "tool-run_block",
+                    toolCallId: uid(),
+                    state: "output-available",
+                    input: { block_id: "weather-block-123" },
+                    output: {
+                      type: ResponseType.setup_requirements,
+                      message:
+                        "This block requires API credentials to run. Please configure them below.",
+                      setup_info: {
+                        agent_name: "Weather Agent",
+                        requirements: {
+                          inputs: [
+                            {
+                              name: "city",
+                              title: "City",
+                              type: "string",
+                              required: true,
+                              description: "The city to get weather for",
+                            },
+                          ],
+                        },
+                        user_readiness: {
+                          missing_credentials: {
+                            openweathermap: {
+                              provider: "openweathermap",
+                              credentials_type: "api_key",
+                              title: "OpenWeatherMap API Key",
+                              description:
+                                "Required to access weather data. Get your key at openweathermap.org",
                             },
                           },
                         },
                       },
-                    }}
-                  />
-                </CredentialsProvidersContext.Provider>
-              </SubSection>
-
-              <SubSection label="Setup requirements — has credentials (pick from list)">
-                <CredentialsProvidersContext.Provider
-                  value={MOCK_PROVIDERS_WITH_CREDENTIALS}
-                >
-                  <RunBlockTool
-                    part={{
-                      type: "tool-run_block",
-                      toolCallId: uid(),
-                      state: "output-available",
-                      input: { block_id: "calendar-block-456" },
-                      output: {
-                        type: ResponseType.setup_requirements,
-                        message:
-                          "This block requires Google credentials. Pick an account below or connect a new one.",
-                        setup_info: {
-                          agent_id: "agent-calendar-1",
-                          agent_name: "Calendar Agent",
-                          user_readiness: {
-                            missing_credentials: {
-                              google_oauth: {
-                                provider: "google",
-                                types: ["oauth2"],
-                                scopes: ["email", "calendar"],
-                              },
-                            },
-                          },
-                        },
-                      },
-                    }}
-                  />
-                </CredentialsProvidersContext.Provider>
+                    },
+                  }}
+                />
               </SubSection>
 
               <SubSection label="Output available (error)">
@@ -948,71 +849,34 @@ export default function StyleguidePage() {
                 />
               </SubSection>
 
-              <SubSection label="Setup requirements — no credentials (add new)">
-                <CredentialsProvidersContext.Provider
-                  value={MOCK_PROVIDERS_WITHOUT_CREDENTIALS}
-                >
-                  <RunAgentTool
-                    part={{
-                      type: "tool-run_agent",
-                      toolCallId: uid(),
-                      state: "output-available",
-                      input: { username_agent_slug: "creator/weather-agent" },
-                      output: {
-                        type: ResponseType.setup_requirements,
-                        message:
-                          "This agent requires an API key. Add your credentials below.",
-                        setup_info: {
-                          agent_id: "agent-weather-1",
-                          agent_name: "Weather Agent",
-                          requirements: {},
-                          user_readiness: {
-                            missing_credentials: {
-                              openweathermap_key: {
-                                provider: "openweathermap",
-                                types: ["api_key"],
-                              },
+              <SubSection label="Output available (setup requirements)">
+                <RunAgentTool
+                  part={{
+                    type: "tool-run_agent",
+                    toolCallId: uid(),
+                    state: "output-available",
+                    input: { username_agent_slug: "creator/my-agent" },
+                    output: {
+                      type: ResponseType.setup_requirements,
+                      message: "This agent requires additional setup.",
+                      setup_info: {
+                        agent_name: "YouTube Summarizer",
+                        requirements: {},
+                        user_readiness: {
+                          missing_credentials: {
+                            youtube_api: {
+                              provider: "youtube",
+                              credentials_type: "api_key",
+                              title: "YouTube Data API Key",
+                              description:
+                                "Required to access YouTube video data.",
                             },
                           },
                         },
                       },
-                    }}
-                  />
-                </CredentialsProvidersContext.Provider>
-              </SubSection>
-
-              <SubSection label="Setup requirements — has credentials (pick from list)">
-                <CredentialsProvidersContext.Provider
-                  value={MOCK_PROVIDERS_WITH_CREDENTIALS}
-                >
-                  <RunAgentTool
-                    part={{
-                      type: "tool-run_agent",
-                      toolCallId: uid(),
-                      state: "output-available",
-                      input: { username_agent_slug: "creator/calendar-agent" },
-                      output: {
-                        type: ResponseType.setup_requirements,
-                        message:
-                          "This agent needs Google credentials. Pick an account or connect a new one.",
-                        setup_info: {
-                          agent_id: "agent-calendar-1",
-                          agent_name: "Google Calendar Agent",
-                          requirements: {},
-                          user_readiness: {
-                            missing_credentials: {
-                              google_oauth: {
-                                provider: "google",
-                                types: ["oauth2"],
-                                scopes: ["email", "calendar"],
-                              },
-                            },
-                          },
-                        },
-                      },
-                    }}
-                  />
-                </CredentialsProvidersContext.Provider>
+                    },
+                  }}
+                />
               </SubSection>
 
               <SubSection label="Output available (need login)">

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

@@ -16,6 +16,7 @@ import {
   ContentCardDescription,
   ContentCodeBlock,
   ContentGrid,
+  ContentHint,
   ContentMessage,
 } from "../../components/ToolAccordion/AccordionContent";
 import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
@@ -23,8 +24,8 @@ import {
   ClarificationQuestionsCard,
   ClarifyingQuestion,
 } from "./components/ClarificationQuestionsCard";
-import sparklesImg from "../../components/MiniGame/assets/sparkles.png";
-import { MiniGame } from "../../components/MiniGame/MiniGame";
+import sparklesImg from "./components/MiniGame/assets/sparkles.png";
+import { MiniGame } from "./components/MiniGame/MiniGame";
 import { SuggestedGoalCard } from "./components/SuggestedGoalCard";
 import {
   AccordionIcon,
@@ -92,7 +93,9 @@ function getAccordionMeta(output: CreateAgentToolOutput) {
   ) {
     return {
       icon,
-      title: output.message || "Agent creation started",
+      title:
+        "Creating agent, this may take a few minutes. Play while you wait.",
+      expanded: true,
     };
   }
   return {
@@ -166,22 +169,15 @@ export function CreateAgentTool({ part }: Props) {
         />
       </div>
 
-      {isStreaming && (
-        <ToolAccordion
-          icon={<AccordionIcon />}
-          title="Creating agent, this may take a few minutes. Play while you wait."
-          expanded
-        >
-          <ContentGrid>
-            <MiniGame />
-          </ContentGrid>
-        </ToolAccordion>
-      )}
-
       {hasExpandableContent && output && (
         <ToolAccordion {...getAccordionMeta(output)}>
-          {isOperating && output.message && (
-            <ContentMessage>{output.message}</ContentMessage>
+          {isOperating && (
+            <ContentGrid>
+              <MiniGame />
+              <ContentHint>
+                This could take a few minutes — play while you wait!
+              </ContentHint>
+            </ContentGrid>
           )}
 
           {isAgentSavedOutput(output) && (

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

@@ -161,7 +161,7 @@ export function ClarificationQuestionsCard({
 
                 return (
                   <div
-                    key={q.keyword}
+                    key={`${q.keyword}-${index}`}
                     className={cn(
                       "relative rounded-lg border p-3",
                       isAnswered

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

@@ -4,15 +4,17 @@ import { WarningDiamondIcon } from "@phosphor-icons/react";
 import type { ToolUIPart } from "ai";
 import { useCopilotChatActions } from "../../components/CopilotChatActionsProvider/useCopilotChatActions";
 import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
+import { OrbitLoader } from "../../components/OrbitLoader/OrbitLoader";
 import {
   ContentCardDescription,
   ContentCodeBlock,
   ContentGrid,
+  ContentHint,
   ContentLink,
   ContentMessage,
 } from "../../components/ToolAccordion/AccordionContent";
 import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
-import { MiniGame } from "../../components/MiniGame/MiniGame";
+import { MiniGame } from "../CreateAgent/components/MiniGame/MiniGame";
 import {
   ClarificationQuestionsCard,
   ClarifyingQuestion,
@@ -79,8 +81,9 @@ function getAccordionMeta(output: EditAgentToolOutput): {
     isOperationInProgressOutput(output)
   ) {
     return {
-      icon,
-      title: output.message || "Agent editing started",
+      icon: <OrbitLoader size={32} />,
+      title: "Editing agent, this may take a few minutes. Play while you wait.",
+      expanded: true,
     };
   }
   return {
@@ -145,22 +148,15 @@ export function EditAgentTool({ part }: Props) {
         />
       </div>
 
-      {isStreaming && (
-        <ToolAccordion
-          icon={<AccordionIcon />}
-          title="Editing agent, this may take a few minutes. Play while you wait."
-          expanded
-        >
-          <ContentGrid>
-            <MiniGame />
-          </ContentGrid>
-        </ToolAccordion>
-      )}
-
       {hasExpandableContent && output && (
         <ToolAccordion {...getAccordionMeta(output)}>
-          {isOperating && output.message && (
-            <ContentMessage>{output.message}</ContentMessage>
+          {isOperating && (
+            <ContentGrid>
+              <MiniGame />
+              <ContentHint>
+                This could take a few minutes — play while you wait!
+              </ContentHint>
+            </ContentGrid>
           )}
 
           {isAgentSavedOutput(output) && (

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

@@ -557,11 +557,8 @@ function getTodoAccordionData(input: unknown): AccordionData {
     description: `${completed}/${total} completed`,
     content: (
       <div className="space-y-1 py-1">
-        {todos.map((todo, idx) => (
-          <div
-            key={`${todo.status}:${todo.content}:${idx}`}
-            className="flex items-start gap-2 text-xs"
-          >
+        {todos.map((todo, i) => (
+          <div key={i} className="flex items-start gap-2 text-xs">
             <span className="mt-0.5 flex-shrink-0">
               {todo.status === "completed" ? (
                 <CheckCircleIcon

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

@@ -9,7 +9,7 @@ import {
   ContentHint,
   ContentMessage,
 } from "../../components/ToolAccordion/AccordionContent";
-import { MiniGame } from "../../components/MiniGame/MiniGame";
+import { MiniGame } from "../CreateAgent/components/MiniGame/MiniGame";
 import {
   getAccordionMeta,
   getAnimationText,
@@ -47,25 +47,14 @@ export function RunAgentTool({ part }: Props) {
   const isError =
     part.state === "output-error" ||
     (!!output && isRunAgentErrorOutput(output));
-  const isOutputAvailable = part.state === "output-available" && !!output;
-
-  const setupRequirementsOutput =
-    isOutputAvailable && isRunAgentSetupRequirementsOutput(output)
-      ? output
-      : null;
-
-  const agentDetailsOutput =
-    isOutputAvailable && isRunAgentAgentDetailsOutput(output) ? output : null;
-
-  const needLoginOutput =
-    isOutputAvailable && isRunAgentNeedLoginOutput(output) ? output : null;
-
   const hasExpandableContent =
-    isOutputAvailable &&
-    !setupRequirementsOutput &&
-    !agentDetailsOutput &&
-    !needLoginOutput &&
-    (isRunAgentExecutionStartedOutput(output) || isRunAgentErrorOutput(output));
+    part.state === "output-available" &&
+    !!output &&
+    (isRunAgentExecutionStartedOutput(output) ||
+      isRunAgentAgentDetailsOutput(output) ||
+      isRunAgentSetupRequirementsOutput(output) ||
+      isRunAgentNeedLoginOutput(output) ||
+      isRunAgentErrorOutput(output));
 
   return (
     <div className="py-2">
@@ -92,30 +81,24 @@ export function RunAgentTool({ part }: Props) {
         </ToolAccordion>
       )}
 
-      {setupRequirementsOutput && (
-        <div className="mt-2">
-          <SetupRequirementsCard output={setupRequirementsOutput} />
-        </div>
-      )}
-
-      {agentDetailsOutput && (
-        <div className="mt-2">
-          <AgentDetailsCard output={agentDetailsOutput} />
-        </div>
-      )}
-
-      {needLoginOutput && (
-        <div className="mt-2">
-          <ContentMessage>{needLoginOutput.message}</ContentMessage>
-        </div>
-      )}
-
       {hasExpandableContent && output && (
         <ToolAccordion {...getAccordionMeta(output)}>
           {isRunAgentExecutionStartedOutput(output) && (
             <ExecutionStartedCard output={output} />
           )}
 
+          {isRunAgentAgentDetailsOutput(output) && (
+            <AgentDetailsCard output={output} />
+          )}
+
+          {isRunAgentSetupRequirementsOutput(output) && (
+            <SetupRequirementsCard output={output} />
+          )}
+
+          {isRunAgentNeedLoginOutput(output) && (
+            <ContentMessage>{output.message}</ContentMessage>
+          )}
+
           {isRunAgentErrorOutput(output) && <ErrorCard output={output} />}
         </ToolAccordion>
       )}

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

@@ -4,7 +4,7 @@ import type { AgentDetailsResponse } from "@/app/api/__generated__/models/agentD
 import { Button } from "@/components/atoms/Button/Button";
 import { Text } from "@/components/atoms/Text/Text";
 import { FormRenderer } from "@/components/renderers/InputRenderer/FormRenderer";
-import { AnimatePresence, LazyMotion, domAnimation, m } from "framer-motion";
+import { AnimatePresence, motion } from "framer-motion";
 import { useState } from "react";
 import { useCopilotChatActions } from "../../../../components/CopilotChatActionsProvider/useCopilotChatActions";
 import { ContentMessage } from "../../../../components/ToolAccordion/AccordionContent";
@@ -39,83 +39,78 @@ export function AgentDetailsCard({ output }: Props) {
   }
 
   return (
-    <LazyMotion features={domAnimation}>
-      <div className="grid gap-2">
-        <ContentMessage>
-          Run this agent with example values or your own inputs.
-        </ContentMessage>
+    <div className="grid gap-2">
+      <ContentMessage>
+        Run this agent with example values or your own inputs.
+      </ContentMessage>
 
-        <div className="flex gap-2 pt-4">
-          <Button
-            size="small"
-            className="w-fit"
-            onClick={handleRunWithExamples}
-          >
-            Run with example values
-          </Button>
-          <Button
-            variant="outline"
-            size="small"
-            className="w-fit"
-            onClick={() => setShowInputForm((prev) => !prev)}
-          >
-            Run with my inputs
-          </Button>
-        </div>
-
-        <AnimatePresence initial={false}>
-          {showInputForm && buildInputSchema(output.agent.inputs) && (
-            <m.div
-              initial={{ height: 0, opacity: 0, filter: "blur(6px)" }}
-              animate={{ height: "auto", opacity: 1, filter: "blur(0px)" }}
-              exit={{ height: 0, opacity: 0, filter: "blur(6px)" }}
-              transition={{
-                height: { type: "spring", bounce: 0.15, duration: 0.5 },
-                opacity: { duration: 0.25 },
-                filter: { duration: 0.2 },
-              }}
-              className="overflow-hidden"
-            >
-              <div className="mt-4 rounded-2xl border bg-background p-3 pt-4">
-                <Text variant="body-medium">Enter your inputs</Text>
-                <FormRenderer
-                  jsonSchema={buildInputSchema(output.agent.inputs)!}
-                  handleChange={(v) => setInputValues(v.formData ?? {})}
-                  uiSchema={{
-                    "ui:submitButtonOptions": { norender: true },
-                  }}
-                  initialValues={inputValues}
-                  formContext={{
-                    showHandles: false,
-                    size: "small",
-                  }}
-                />
-                <div className="-mt-8 flex gap-2">
-                  <Button
-                    variant="primary"
-                    size="small"
-                    className="w-fit"
-                    onClick={handleRunWithInputs}
-                  >
-                    Run
-                  </Button>
-                  <Button
-                    variant="secondary"
-                    size="small"
-                    className="w-fit"
-                    onClick={() => {
-                      setShowInputForm(false);
-                      setInputValues({});
-                    }}
-                  >
-                    Cancel
-                  </Button>
-                </div>
-              </div>
-            </m.div>
-          )}
-        </AnimatePresence>
+      <div className="flex gap-2 pt-4">
+        <Button size="small" className="w-fit" onClick={handleRunWithExamples}>
+          Run with example values
+        </Button>
+        <Button
+          variant="outline"
+          size="small"
+          className="w-fit"
+          onClick={() => setShowInputForm((prev) => !prev)}
+        >
+          Run with my inputs
+        </Button>
       </div>
-    </LazyMotion>
+
+      <AnimatePresence initial={false}>
+        {showInputForm && buildInputSchema(output.agent.inputs) && (
+          <motion.div
+            initial={{ height: 0, opacity: 0, filter: "blur(6px)" }}
+            animate={{ height: "auto", opacity: 1, filter: "blur(0px)" }}
+            exit={{ height: 0, opacity: 0, filter: "blur(6px)" }}
+            transition={{
+              height: { type: "spring", bounce: 0.15, duration: 0.5 },
+              opacity: { duration: 0.25 },
+              filter: { duration: 0.2 },
+            }}
+            className="overflow-hidden"
+            style={{ willChange: "height, opacity, filter" }}
+          >
+            <div className="mt-4 rounded-2xl border bg-background p-3 pt-4">
+              <Text variant="body-medium">Enter your inputs</Text>
+              <FormRenderer
+                jsonSchema={buildInputSchema(output.agent.inputs)!}
+                handleChange={(v) => setInputValues(v.formData ?? {})}
+                uiSchema={{
+                  "ui:submitButtonOptions": { norender: true },
+                }}
+                initialValues={inputValues}
+                formContext={{
+                  showHandles: false,
+                  size: "small",
+                }}
+              />
+              <div className="-mt-8 flex gap-2">
+                <Button
+                  variant="primary"
+                  size="small"
+                  className="w-fit"
+                  onClick={handleRunWithInputs}
+                >
+                  Run
+                </Button>
+                <Button
+                  variant="secondary"
+                  size="small"
+                  className="w-fit"
+                  onClick={() => {
+                    setShowInputForm(false);
+                    setInputValues({});
+                  }}
+                >
+                  Cancel
+                </Button>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
   );
 }

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

@@ -1,11 +1,10 @@
 "use client";
 
-import type { SetupRequirementsResponse } from "@/app/api/__generated__/models/setupRequirementsResponse";
-import { Button } from "@/components/atoms/Button/Button";
-import { Text } from "@/components/atoms/Text/Text";
-import { CredentialsGroupedView } from "@/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView";
-import type { CredentialsMetaInput } from "@/lib/autogpt-server-api/types";
 import { useState } from "react";
+import { CredentialsGroupedView } from "@/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView";
+import { Button } from "@/components/atoms/Button/Button";
+import type { CredentialsMetaInput } from "@/lib/autogpt-server-api/types";
+import type { SetupRequirementsResponse } from "@/app/api/__generated__/models/setupRequirementsResponse";
 import { useCopilotChatActions } from "../../../../components/CopilotChatActionsProvider/useCopilotChatActions";
 import {
   ContentBadge,
@@ -39,40 +38,40 @@ export function SetupRequirementsCard({ output }: Props) {
     setInputCredentials((prev) => ({ ...prev, [key]: value }));
   }
 
-  const needsCredentials = credentialFields.length > 0;
-  const isAllCredentialsComplete =
-    needsCredentials &&
+  const isAllComplete =
+    credentialFields.length > 0 &&
     [...requiredCredentials].every((key) => !!inputCredentials[key]);
 
-  const canProceed =
-    !hasSent && (!needsCredentials || isAllCredentialsComplete);
-
   function handleProceed() {
     setHasSent(true);
-    const message = needsCredentials
-      ? "I've configured the required credentials. Please check if everything is ready and proceed with running the agent."
-      : "Please proceed with running the agent.";
-    onSend(message);
+    onSend(
+      "I've configured the required credentials. Please check if everything is ready and proceed with running the agent.",
+    );
   }
 
   return (
     <div className="grid gap-2">
       <ContentMessage>{output.message}</ContentMessage>
 
-      {needsCredentials && (
+      {credentialFields.length > 0 && (
         <div className="rounded-2xl border bg-background p-3">
-          <Text variant="small" className="w-fit border-b text-zinc-500">
-            Agent credentials
-          </Text>
-          <div className="mt-6">
-            <CredentialsGroupedView
-              credentialFields={credentialFields}
-              requiredCredentials={requiredCredentials}
-              inputCredentials={inputCredentials}
-              inputValues={{}}
-              onCredentialChange={handleCredentialChange}
-            />
-          </div>
+          <CredentialsGroupedView
+            credentialFields={credentialFields}
+            requiredCredentials={requiredCredentials}
+            inputCredentials={inputCredentials}
+            inputValues={{}}
+            onCredentialChange={handleCredentialChange}
+          />
+          {isAllComplete && !hasSent && (
+            <Button
+              variant="primary"
+              size="small"
+              className="mt-3 w-full"
+              onClick={handleProceed}
+            >
+              Proceed
+            </Button>
+          )}
         </div>
       )}
 
@@ -101,18 +100,6 @@ export function SetupRequirementsCard({ output }: Props) {
           </div>
         </div>
       )}
-
-      {(needsCredentials || expectedInputs.length > 0) && (
-        <Button
-          variant="primary"
-          size="small"
-          className="mt-4 w-fit"
-          disabled={!canProceed}
-          onClick={handleProceed}
-        >
-          Proceed
-        </Button>
-      )}
     </div>
   );
 }

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

@@ -39,19 +39,12 @@ export function RunBlockTool({ part }: Props) {
   const isError =
     part.state === "output-error" ||
     (!!output && isRunBlockErrorOutput(output));
-  const setupRequirementsOutput =
-    part.state === "output-available" &&
-    output &&
-    isRunBlockSetupRequirementsOutput(output)
-      ? output
-      : null;
-
   const hasExpandableContent =
     part.state === "output-available" &&
     !!output &&
-    !setupRequirementsOutput &&
     (isRunBlockBlockOutput(output) ||
       isRunBlockDetailsOutput(output) ||
+      isRunBlockSetupRequirementsOutput(output) ||
       isRunBlockErrorOutput(output));
 
   return (
@@ -64,12 +57,6 @@ export function RunBlockTool({ part }: Props) {
         />
       </div>
 
-      {setupRequirementsOutput && (
-        <div className="mt-2">
-          <SetupRequirementsCard output={setupRequirementsOutput} />
-        </div>
-      )}
-
       {hasExpandableContent && output && (
         <ToolAccordion {...getAccordionMeta(output)}>
           {isRunBlockBlockOutput(output) && <BlockOutputCard output={output} />}
@@ -78,6 +65,10 @@ export function RunBlockTool({ part }: Props) {
             <BlockDetailsCard output={output} />
           )}
 
+          {isRunBlockSetupRequirementsOutput(output) && (
+            <SetupRequirementsCard output={output} />
+          )}
+
           {isRunBlockErrorOutput(output) && <ErrorCard output={output} />}
         </ToolAccordion>
       )}

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

@@ -103,7 +103,7 @@ function OutputKeySection({
       </div>
       <div className="mt-2">
         {visibleItems.map((item, i) => (
-          <RenderOutputValue key={`${outputKey}-${i}`} value={item} />
+          <RenderOutputValue key={i} value={item} />
         ))}
       </div>
       {hasMoreItems && (

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

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

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

@@ -209,10 +209,7 @@ export function ViewAgentOutputTool({ part }: Props) {
                         </div>
                         <div className="mt-2">
                           {items.slice(0, 3).map((item, i) => (
-                            <RenderOutputValue
-                              key={`${key}-${i}`}
-                              value={item}
-                            />
+                            <RenderOutputValue key={i} value={item} />
                           ))}
                         </div>
                       </ContentCard>

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

@@ -23,23 +23,13 @@ export function SidebarItemCard({
   onClick,
   actions,
 }: Props) {
-  function handleKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      onClick?.();
-    }
-  }
-
   return (
     <div
-      role="button"
-      tabIndex={0}
       className={cn(
         "w-full cursor-pointer rounded-large border border-zinc-200 bg-white p-3 text-left ring-1 ring-transparent transition-all duration-150 hover:scale-[1.01] hover:bg-slate-50/50",
         selected ? "border-slate-800 ring-slate-800" : undefined,
       )}
       onClick={onClick}
-      onKeyDown={handleKeyDown}
     >
       <div className="flex min-w-0 items-center justify-start gap-3">
         {icon}
@@ -59,13 +49,7 @@ export function SidebarItemCard({
           </Text>
         </div>
         {actions ? (
-          <div
-            role="presentation"
-            onClick={(e) => e.stopPropagation()}
-            onKeyDown={(e) => e.stopPropagation()}
-          >
-            {actions}
-          </div>
+          <div onClick={(e) => e.stopPropagation()}>{actions}</div>
         ) : null}
       </div>
     </div>

autogpt_platform/frontend/src/app/page.tsx

@@ -1,12 +1,15 @@
-import { redirect } from "next/navigation";
+"use client";
 
-import type { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "AutoGPT Platform",
-  description: "AutoGPT Platform",
-};
+import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
 
 export default function Page() {
-  redirect("/copilot");
+  const router = useRouter();
+
+  useEffect(() => {
+    router.replace("/copilot");
+  }, [router]);
+
+  return <LoadingSpinner size="large" cover />;
 }

autogpt_platform/frontend/src/components/__legacy__/ui/render.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import * as React from "react";
-import Image from "next/image";
 
 const getYouTubeVideoId = (url: string) => {
   const regExp =
@@ -77,7 +76,6 @@ const VideoRenderer: React.FC<{ videoUrl: string }> = ({ videoUrl }) => {
           width="100%"
           height="315"
           src={`https://www.youtube.com/embed/${videoId}`}
-          title="Embedded content"
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
           allowFullScreen
         ></iframe>
@@ -94,15 +92,15 @@ const VideoRenderer: React.FC<{ videoUrl: string }> = ({ videoUrl }) => {
 const ImageRenderer: React.FC<{ imageUrl: string }> = ({ imageUrl }) => {
   return (
     <div className="w-full p-2">
-      <Image
-        src={imageUrl}
-        alt="Image"
-        width={0}
-        height={0}
-        sizes="100vw"
-        className="h-auto w-full"
-        unoptimized
-      />
+      <picture>
+        <img
+          src={imageUrl}
+          alt="Image"
+          className="h-auto max-w-full"
+          width="100%"
+          height="auto"
+        />
+      </picture>
     </div>
   );
 };

autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/APIKeyCredentialsModal/APIKeyCredentialsModal.tsx

@@ -93,7 +93,7 @@ export function APIKeyCredentialsModal({
                         <FormDescription>
                           Required scope(s) for this block:{" "}
                           {schema.credentials_scopes?.map((s, i, a) => (
-                            <span key={s}>
+                            <span key={i}>
                               <code className="text-xs font-bold">{s}</code>
                               {i < a.length - 1 && ", "}
                             </span>

autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsFlatView/CredentialsFlatView.tsx

@@ -119,7 +119,7 @@ export function CredentialsFlatView({
       ) : (
         !readOnly && (
           <Button
-            variant="primary"
+            variant="secondary"
             size="small"
             onClick={onAddCredential}
             className="w-fit"

autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/HotScopedCredentialsModal/HotScopedCredentialsModal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { z } from "zod";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -66,18 +66,16 @@ export function HostScopedCredentialsModal({
   });
 
   const [headerPairs, setHeaderPairs] = useState<
-    Array<{ id: string; key: string; value: string }>
-  >([{ id: crypto.randomUUID(), key: "", value: "" }]);
+    Array<{ key: string; value: string }>
+  >([{ key: "", value: "" }]);
 
   // Update form values when siblingInputs change
-  const prevHostRef = useRef(currentHost);
   useEffect(() => {
-    if (currentHost === prevHostRef.current) return;
-    prevHostRef.current = currentHost;
     if (currentHost) {
       form.setValue("host", currentHost);
       form.setValue("title", currentHost);
     } else {
+      // Reset to empty when no current host
       form.setValue("host", "");
       form.setValue("title", "Manual Entry");
     }
@@ -93,12 +91,9 @@ export function HostScopedCredentialsModal({
 
   const { provider, providerName, createHostScopedCredentials } = credentials;
 
-  function addHeaderPair() {
-    setHeaderPairs((prev) => [
-      ...prev,
-      { id: crypto.randomUUID(), key: "", value: "" },
-    ]);
-  }
+  const addHeaderPair = () => {
+    setHeaderPairs([...headerPairs, { key: "", value: "" }]);
+  };
 
   const removeHeaderPair = (index: number) => {
     if (headerPairs.length > 1) {
@@ -197,7 +192,7 @@ export function HostScopedCredentialsModal({
               </FormDescription>
 
               {headerPairs.map((pair, index) => (
-                <div key={pair.id} className="flex w-full items-center gap-4">
+                <div key={index} className="flex w-full items-center gap-4">
                   <Input
                     id={`header-${index}-key`}
                     label="Header Name"

autogpt_platform/frontend/src/components/contextual/CronScheduler/cron-scheduler-dialog.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { Input } from "@/components/__legacy__/ui/input";
 import { Button } from "@/components/__legacy__/ui/button";
 import { useToast } from "@/components/molecules/Toast/use-toast";
@@ -7,7 +7,6 @@ import { Dialog } from "@/components/molecules/Dialog/Dialog";
 import { getTimezoneDisplayName } from "@/lib/timezone-utils";
 import { useUserTimezone } from "@/lib/hooks/useUserTimezone";
 import { InfoIcon } from "lucide-react";
-import Link from "next/link";
 
 // Base type for cron expression only
 type CronOnlyCallback = (cronExpression: string) => void;
@@ -54,15 +53,15 @@ export function CronSchedulerDialog(props: CronSchedulerDialogProps) {
   const userTimezone = useUserTimezone();
   const timezoneDisplay = getTimezoneDisplayName(userTimezone || "UTC");
 
-  // Reset state when dialog opens (render-time sync instead of useEffect)
-  const prevOpenRef = useRef(open);
-  if (open && !prevOpenRef.current) {
-    const defaultName =
-      props.mode === "with-name" ? props.defaultScheduleName || "" : "";
-    setScheduleName(defaultName);
-    setCronExpression(defaultCronExpression);
-  }
-  prevOpenRef.current = open;
+  // Reset state when dialog opens
+  useEffect(() => {
+    if (open) {
+      const defaultName =
+        props.mode === "with-name" ? props.defaultScheduleName || "" : "";
+      setScheduleName(defaultName);
+      setCronExpression(defaultCronExpression);
+    }
+  }, [open, props, defaultCronExpression]);
 
   const handleDone = () => {
     if (props.mode === "with-name" && !scheduleName.trim()) {
@@ -101,11 +100,8 @@ export function CronSchedulerDialog(props: CronSchedulerDialogProps) {
         <div className="flex flex-col gap-4">
           {props.mode === "with-name" && (
             <div className="flex max-w-[448px] flex-col space-y-2">
-              <label htmlFor="schedule-name" className="text-sm font-medium">
-                Schedule Name
-              </label>
+              <label className="text-sm font-medium">Schedule Name</label>
               <Input
-                id="schedule-name"
                 value={scheduleName}
                 onChange={(e) => setScheduleName(e.target.value)}
                 placeholder="Enter a name for this schedule"
@@ -125,9 +121,9 @@ export function CronSchedulerDialog(props: CronSchedulerDialogProps) {
               <InfoIcon className="h-4 w-4 text-amber-600" />
               <p className="text-sm text-amber-800">
                 No timezone set. Schedule will run in UTC.
-                <Link href="/profile/settings" className="ml-1 underline">
+                <a href="/profile/settings" className="ml-1 underline">
                   Set your timezone
-                </Link>
+                </a>
               </p>
             </div>
           ) : (

autogpt_platform/frontend/src/components/contextual/CronScheduler/cron-scheduler.tsx

@@ -452,7 +452,7 @@ export function CronScheduler({
               const monthNumber = i + 1;
               return (
                 <Button
-                  key={month.label}
+                  key={i}
                   variant={
                     selectedMonths.includes(monthNumber) ? "default" : "outline"
                   }

autogpt_platform/frontend/src/components/contextual/OutputRenderers/renderers/MarkdownRenderer.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React from "react";
-import Image from "next/image";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
@@ -360,23 +359,20 @@ function renderMarkdown(
             </del>
           ),
           // Image handling
-          img: ({ src, alt }) => {
+          img: ({ src, alt, ...props }) => {
             // Check if it's a video URL pattern
             if (src && isVideoUrl(src)) {
               return renderVideoEmbed(src);
             }
 
-            if (!src) return null;
-
             return (
-              <Image
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
                 src={src}
-                alt={alt || "Image"}
-                width={0}
-                height={0}
-                sizes="100vw"
-                className="my-4 h-auto w-full rounded-lg shadow-md"
-                unoptimized
+                alt={alt}
+                className="my-4 h-auto max-w-full rounded-lg shadow-md"
+                loading="lazy"
+                {...props}
               />
             );
           },

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

@@ -89,6 +89,7 @@ export function ActivityDropdown({
                   className="!focus:border-1 w-full pr-10"
                   wrapperClassName="!mb-0"
                   autoComplete="off"
+                  autoFocus
                 />
                 <button
                   onClick={handleClearSearch}

autogpt_platform/frontend/src/components/renderers/InputRenderer/FormRenderer.tsx

@@ -1,11 +1,10 @@
-import { cn } from "@/lib/utils";
 import { RJSFSchema } from "@rjsf/utils";
+import { preprocessInputSchema } from "./utils/input-schema-pre-processor";
 import { useMemo } from "react";
+import { customValidator } from "./utils/custom-validator";
 import Form from "./registry";
 import { ExtendedFormContextType } from "./types";
-import { customValidator } from "./utils/custom-validator";
 import { generateUiSchemaForCustomFields } from "./utils/generate-ui-schema";
-import { preprocessInputSchema } from "./utils/input-schema-pre-processor";
 
 type FormRendererProps = {
   jsonSchema: RJSFSchema;
@@ -13,17 +12,15 @@ type FormRendererProps = {
   uiSchema: any;
   initialValues: any;
   formContext: ExtendedFormContextType;
-  className?: string;
 };
 
-export function FormRenderer({
+export const FormRenderer = ({
   jsonSchema,
   handleChange,
   uiSchema,
   initialValues,
   formContext,
-  className,
-}: FormRendererProps) {
+}: FormRendererProps) => {
   const preprocessedSchema = useMemo(() => {
     return preprocessInputSchema(jsonSchema);
   }, [jsonSchema]);
@@ -34,10 +31,7 @@ export function FormRenderer({
   }, [preprocessedSchema, uiSchema]);
 
   return (
-    <div
-      className={cn("mb-6 mt-4", className)}
-      data-tutorial-id="input-handles"
-    >
+    <div className={"mb-6 mt-4"} data-tutorial-id="input-handles">
       <Form
         formContext={formContext}
         idPrefix="agpt"
@@ -51,4 +45,4 @@ export function FormRenderer({
       />
     </div>
   );
-}
+};