chore: fix tests

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

@@ -6,15 +6,11 @@ on:
     paths:
       - '.github/workflows/classic-autogpt-ci.yml'
       - 'classic/original_autogpt/**'
-      - 'classic/direct_benchmark/**'
-      - 'classic/forge/**'
   pull_request:
     branches: [ master, dev, release-* ]
     paths:
       - '.github/workflows/classic-autogpt-ci.yml'
       - 'classic/original_autogpt/**'
-      - 'classic/direct_benchmark/**'
-      - 'classic/forge/**'
 
 concurrency:
   group: ${{ format('classic-autogpt-ci-{0}', github.head_ref && format('{0}-{1}', github.event_name, github.event.pull_request.number) || github.sha) }}
@@ -23,22 +19,47 @@ concurrency:
 defaults:
   run:
     shell: bash
-    working-directory: classic
+    working-directory: classic/original_autogpt
 
 jobs:
   test:
     permissions:
       contents: read
     timeout-minutes: 30
-    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        python-version: ["3.10"]
+        platform-os: [ubuntu, macos, macos-arm64, windows]
+    runs-on: ${{ matrix.platform-os != 'macos-arm64' && format('{0}-latest', matrix.platform-os) || 'macos-14' }}
 
     steps:
-      - name: Start MinIO service
+      # Quite slow on macOS (2~4 minutes to set up Docker)
+      # - name: Set up Docker (macOS)
+      #   if: runner.os == 'macOS'
+      #   uses: crazy-max/ghaction-setup-docker@v3
+
+      - name: Start MinIO service (Linux)
+        if: runner.os == 'Linux'
         working-directory: '.'
         run: |
           docker pull minio/minio:edge-cicd
           docker run -d -p 9000:9000 minio/minio:edge-cicd
 
+      - name: Start MinIO service (macOS)
+        if: runner.os == 'macOS'
+        working-directory: ${{ runner.temp }}
+        run: |
+          brew install minio/stable/minio
+          mkdir data
+          minio server ./data &
+
+      # No MinIO on Windows:
+      # - Windows doesn't support running Linux Docker containers
+      # - It doesn't seem possible to start background processes on Windows. They are
+      #   killed after the step returns.
+      #   See: https://github.com/actions/runner/issues/598#issuecomment-2011890429
+
       - name: Checkout repository
         uses: actions/checkout@v4
         with:
@@ -50,23 +71,41 @@ jobs:
           git config --global user.name "Auto-GPT-Bot"
           git config --global user.email "github-bot@agpt.co"
 
-      - name: Set up Python 3.12
+      - name: Set up Python ${{ matrix.python-version }}
         uses: actions/setup-python@v5
         with:
-          python-version: "3.12"
+          python-version: ${{ matrix.python-version }}
 
       - id: get_date
         name: Get date
         run: echo "date=$(date +'%Y-%m-%d')" >> $GITHUB_OUTPUT
 
       - name: Set up Python dependency cache
+        # On Windows, unpacking cached dependencies takes longer than just installing them
+        if: runner.os != 'Windows'
         uses: actions/cache@v4
         with:
-          path: ~/.cache/pypoetry
-          key: poetry-${{ runner.os }}-${{ hashFiles('classic/poetry.lock') }}
+          path: ${{ runner.os == 'macOS' && '~/Library/Caches/pypoetry' || '~/.cache/pypoetry' }}
+          key: poetry-${{ runner.os }}-${{ hashFiles('classic/original_autogpt/poetry.lock') }}
 
-      - name: Install Poetry
-        run: curl -sSL https://install.python-poetry.org | python3 -
+      - name: Install Poetry (Unix)
+        if: runner.os != 'Windows'
+        run: |
+          curl -sSL https://install.python-poetry.org | python3 -
+
+          if [ "${{ runner.os }}" = "macOS" ]; then
+            PATH="$HOME/.local/bin:$PATH"
+            echo "$HOME/.local/bin" >> $GITHUB_PATH
+          fi
+
+      - name: Install Poetry (Windows)
+        if: runner.os == 'Windows'
+        shell: pwsh
+        run: |
+          (Invoke-WebRequest -Uri https://install.python-poetry.org -UseBasicParsing).Content | python -
+
+          $env:PATH += ";$env:APPDATA\Python\Scripts"
+          echo "$env:APPDATA\Python\Scripts" >> $env:GITHUB_PATH
 
       - name: Install Python dependencies
         run: poetry install
@@ -77,12 +116,12 @@ jobs:
             --cov=autogpt --cov-branch --cov-report term-missing --cov-report xml \
             --numprocesses=logical --durations=10 \
             --junitxml=junit.xml -o junit_family=legacy \
-            original_autogpt/tests/unit original_autogpt/tests/integration
+            tests/unit tests/integration
         env:
           CI: true
           PLAIN_OUTPUT: True
           OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
-          S3_ENDPOINT_URL: http://127.0.0.1:9000
+          S3_ENDPOINT_URL: ${{ runner.os != 'Windows' && 'http://127.0.0.1:9000' || '' }}
           AWS_ACCESS_KEY_ID: minioadmin
           AWS_SECRET_ACCESS_KEY: minioadmin
 
@@ -96,11 +135,11 @@ jobs:
         uses: codecov/codecov-action@v5
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
-          flags: autogpt-agent
+          flags: autogpt-agent,${{ runner.os }}
 
       - name: Upload logs to artifact
         if: always()
         uses: actions/upload-artifact@v4
         with:
           name: test-logs
-          path: classic/logs/
+          path: classic/original_autogpt/logs/

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

@@ -11,6 +11,9 @@ on:
       - 'classic/original_autogpt/**'
       - 'classic/forge/**'
       - 'classic/benchmark/**'
+      - 'classic/run'
+      - 'classic/cli.py'
+      - 'classic/setup.py'
       - '!**/*.md'
   pull_request:
     branches: [ master, dev, release-* ]
@@ -19,6 +22,9 @@ on:
       - 'classic/original_autogpt/**'
       - 'classic/forge/**'
       - 'classic/benchmark/**'
+      - 'classic/run'
+      - 'classic/cli.py'
+      - 'classic/setup.py'
       - '!**/*.md'
 
 defaults:
@@ -29,9 +35,13 @@ defaults:
 jobs:
   serve-agent-protocol:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        agent-name: [ original_autogpt ]
+      fail-fast: false
     timeout-minutes: 20
     env:
-      min-python-version: '3.12'
+      min-python-version: '3.10'
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -45,22 +55,22 @@ jobs:
           python-version: ${{ env.min-python-version }}
 
       - name: Install Poetry
+        working-directory: ./classic/${{ matrix.agent-name }}/
         run: |
           curl -sSL https://install.python-poetry.org | python -
 
-      - name: Install dependencies
-        run: poetry install
-
-      - name: Run smoke tests with direct-benchmark
+      - name: Run regression tests
         run: |
-          poetry run direct-benchmark run \
-            --strategies one_shot \
-            --models claude \
-            --tests ReadFile,WriteFile \
-            --json
+          ./run agent start ${{ matrix.agent-name }}
+          cd ${{ matrix.agent-name }}
+          poetry run agbenchmark --mock --test=BasicRetrieval --test=Battleship --test=WebArenaTask_0
+          poetry run agbenchmark --test=WriteFile
         env:
           OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
-          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
+          AGENT_NAME: ${{ matrix.agent-name }}
           REQUESTS_CA_BUNDLE: /etc/ssl/certs/ca-certificates.crt
-          NONINTERACTIVE_MODE: "true"
-          CI: true
+          HELICONE_CACHE_ENABLED: false
+          HELICONE_PROPERTY_AGENT: ${{ matrix.agent-name }}
+          REPORTS_FOLDER: ${{ format('../../reports/{0}', matrix.agent-name) }}
+          TELEMETRY_ENVIRONMENT: autogpt-ci
+          TELEMETRY_OPT_IN: ${{ github.ref_name == 'master' }}

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

@@ -1,21 +1,17 @@
-name: Classic - Direct Benchmark CI
+name: Classic - AGBenchmark CI
 
 on:
   push:
     branches: [ master, dev, ci-test* ]
     paths:
-      - 'classic/direct_benchmark/**'
-      - 'classic/benchmark/agbenchmark/challenges/**'
-      - 'classic/original_autogpt/**'
-      - 'classic/forge/**'
+      - 'classic/benchmark/**'
+      - '!classic/benchmark/reports/**'
       - .github/workflows/classic-benchmark-ci.yml
   pull_request:
     branches: [ master, dev, release-* ]
     paths:
-      - 'classic/direct_benchmark/**'
-      - 'classic/benchmark/agbenchmark/challenges/**'
-      - 'classic/original_autogpt/**'
-      - 'classic/forge/**'
+      - 'classic/benchmark/**'
+      - '!classic/benchmark/reports/**'
       - .github/workflows/classic-benchmark-ci.yml
 
 concurrency:
@@ -27,16 +23,23 @@ defaults:
     shell: bash
 
 env:
-  min-python-version: '3.12'
+  min-python-version: '3.10'
 
 jobs:
-  benchmark-tests:
-    runs-on: ubuntu-latest
+  test:
+    permissions:
+      contents: read
     timeout-minutes: 30
+    strategy:
+      fail-fast: false
+      matrix:
+        python-version: ["3.10"]
+        platform-os: [ubuntu, macos, macos-arm64, windows]
+    runs-on: ${{ matrix.platform-os != 'macos-arm64' && format('{0}-latest', matrix.platform-os) || 'macos-14' }}
     defaults:
       run:
         shell: bash
-        working-directory: classic
+        working-directory: classic/benchmark
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -44,84 +47,71 @@ jobs:
           fetch-depth: 0
           submodules: true
 
-      - name: Set up Python ${{ env.min-python-version }}
+      - name: Set up Python ${{ matrix.python-version }}
         uses: actions/setup-python@v5
         with:
-          python-version: ${{ env.min-python-version }}
+          python-version: ${{ matrix.python-version }}
 
       - name: Set up Python dependency cache
+        # On Windows, unpacking cached dependencies takes longer than just installing them
+        if: runner.os != 'Windows'
         uses: actions/cache@v4
         with:
-          path: ~/.cache/pypoetry
-          key: poetry-${{ runner.os }}-${{ hashFiles('classic/poetry.lock') }}
+          path: ${{ runner.os == 'macOS' && '~/Library/Caches/pypoetry' || '~/.cache/pypoetry' }}
+          key: poetry-${{ runner.os }}-${{ hashFiles('classic/benchmark/poetry.lock') }}
 
-      - name: Install Poetry
+      - name: Install Poetry (Unix)
+        if: runner.os != 'Windows'
         run: |
           curl -sSL https://install.python-poetry.org | python3 -
 
-      - name: Install dependencies
+          if [ "${{ runner.os }}" = "macOS" ]; then
+            PATH="$HOME/.local/bin:$PATH"
+            echo "$HOME/.local/bin" >> $GITHUB_PATH
+          fi
+
+      - name: Install Poetry (Windows)
+        if: runner.os == 'Windows'
+        shell: pwsh
+        run: |
+          (Invoke-WebRequest -Uri https://install.python-poetry.org -UseBasicParsing).Content | python -
+
+          $env:PATH += ";$env:APPDATA\Python\Scripts"
+          echo "$env:APPDATA\Python\Scripts" >> $env:GITHUB_PATH
+
+      - name: Install Python dependencies
         run: poetry install
 
-      - name: Run basic benchmark tests
+      - name: Run pytest with coverage
         run: |
-          echo "Testing ReadFile challenge with one_shot strategy..."
-          poetry run direct-benchmark run \
-            --strategies one_shot \
-            --models claude \
-            --tests ReadFile \
-            --json
-
-          echo "Testing WriteFile challenge..."
-          poetry run direct-benchmark run \
-            --strategies one_shot \
-            --models claude \
-            --tests WriteFile \
-            --json
+          poetry run pytest -vv \
+            --cov=agbenchmark --cov-branch --cov-report term-missing --cov-report xml \
+            --durations=10 \
+            --junitxml=junit.xml -o junit_family=legacy \
+            tests
         env:
           CI: true
-          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
           OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
-          NONINTERACTIVE_MODE: "true"
 
-      - name: Test category filtering
-        run: |
-          echo "Testing coding category..."
-          poetry run direct-benchmark run \
-            --strategies one_shot \
-            --models claude \
-            --categories coding \
-            --tests ReadFile,WriteFile \
-            --json
-        env:
-          CI: true
-          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
-          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
-          NONINTERACTIVE_MODE: "true"
+      - name: Upload test results to Codecov
+        if: ${{ !cancelled() }}  # Run even if tests fail
+        uses: codecov/test-results-action@v1
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
 
-      - name: Test multiple strategies
-        run: |
-          echo "Testing multiple strategies..."
-          poetry run direct-benchmark run \
-            --strategies one_shot,plan_execute \
-            --models claude \
-            --tests ReadFile \
-            --parallel 2 \
-            --json
-        env:
-          CI: true
-          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
-          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
-          NONINTERACTIVE_MODE: "true"
+      - name: Upload coverage reports to Codecov
+        uses: codecov/codecov-action@v5
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          flags: agbenchmark,${{ runner.os }}
 
-  # Run regression tests on maintain challenges
-  regression-tests:
+  self-test-with-agent:
     runs-on: ubuntu-latest
-    timeout-minutes: 45
-    if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/dev'
-    defaults:
-      run:
-        shell: bash
-        working-directory: classic
+    strategy:
+      matrix:
+        agent-name: [forge]
+      fail-fast: false
+    timeout-minutes: 20
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -136,22 +126,51 @@ jobs:
 
       - name: Install Poetry
         run: |
-          curl -sSL https://install.python-poetry.org | python3 -
-
-      - name: Install dependencies
-        run: poetry install
+          curl -sSL https://install.python-poetry.org | python -
 
       - name: Run regression tests
+        working-directory: classic
         run: |
-          echo "Running regression tests (previously beaten challenges)..."
-          poetry run direct-benchmark run \
-            --strategies one_shot \
-            --models claude \
-            --maintain \
-            --parallel 4 \
-            --json
+          ./run agent start ${{ matrix.agent-name }}
+          cd ${{ matrix.agent-name }}
+
+          set +e # Ignore non-zero exit codes and continue execution
+          echo "Running the following command: poetry run agbenchmark --maintain --mock"
+          poetry run agbenchmark --maintain --mock
+          EXIT_CODE=$?
+          set -e  # Stop ignoring non-zero exit codes
+          # Check if the exit code was 5, and if so, exit with 0 instead
+          if [ $EXIT_CODE -eq 5 ]; then
+            echo "regression_tests.json is empty."
+          fi
+
+          echo "Running the following command: poetry run agbenchmark --mock"
+          poetry run agbenchmark --mock
+
+          echo "Running the following command: poetry run agbenchmark --mock --category=data"
+          poetry run agbenchmark --mock --category=data
+
+          echo "Running the following command: poetry run agbenchmark --mock --category=coding"
+          poetry run agbenchmark --mock --category=coding
+
+          # echo "Running the following command: poetry run agbenchmark --test=WriteFile"
+          # poetry run agbenchmark --test=WriteFile
+          cd ../benchmark
+          poetry install
+          echo "Adding the BUILD_SKILL_TREE environment variable. This will attempt to add new elements in the skill tree. If new elements are added, the CI fails because they should have been pushed"
+          export BUILD_SKILL_TREE=true
+
+          # poetry run agbenchmark --mock
+
+          # CHANGED=$(git diff --name-only | grep -E '(agbenchmark/challenges)|(../classic/frontend/assets)') || echo "No diffs"
+          # if [ ! -z "$CHANGED" ]; then
+          #   echo "There are unstaged changes please run agbenchmark and commit those changes since they are needed."
+          #   echo "$CHANGED"
+          #   exit 1
+          # else
+          #   echo "No unstaged changes."
+          # fi
         env:
-          CI: true
-          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
           OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
-          NONINTERACTIVE_MODE: "true"
+          TELEMETRY_ENVIRONMENT: autogpt-benchmark-ci
+          TELEMETRY_OPT_IN: ${{ github.ref_name == 'master' }}

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

@@ -6,11 +6,13 @@ on:
     paths:
       - '.github/workflows/classic-forge-ci.yml'
       - 'classic/forge/**'
+      - '!classic/forge/tests/vcr_cassettes'
   pull_request:
     branches: [ master, dev, release-* ]
     paths:
       - '.github/workflows/classic-forge-ci.yml'
       - 'classic/forge/**'
+      - '!classic/forge/tests/vcr_cassettes'
 
 concurrency:
   group: ${{ format('forge-ci-{0}', github.head_ref && format('{0}-{1}', github.event_name, github.event.pull_request.number) || github.sha) }}
@@ -19,38 +21,115 @@ concurrency:
 defaults:
   run:
     shell: bash
-    working-directory: classic
+    working-directory: classic/forge
 
 jobs:
   test:
     permissions:
       contents: read
     timeout-minutes: 30
-    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        python-version: ["3.10"]
+        platform-os: [ubuntu, macos, macos-arm64, windows]
+    runs-on: ${{ matrix.platform-os != 'macos-arm64' && format('{0}-latest', matrix.platform-os) || 'macos-14' }}
 
     steps:
-      - name: Start MinIO service
+      # Quite slow on macOS (2~4 minutes to set up Docker)
+      # - name: Set up Docker (macOS)
+      #   if: runner.os == 'macOS'
+      #   uses: crazy-max/ghaction-setup-docker@v3
+
+      - name: Start MinIO service (Linux)
+        if: runner.os == 'Linux'
         working-directory: '.'
         run: |
           docker pull minio/minio:edge-cicd
           docker run -d -p 9000:9000 minio/minio:edge-cicd
 
+      - name: Start MinIO service (macOS)
+        if: runner.os == 'macOS'
+        working-directory: ${{ runner.temp }}
+        run: |
+          brew install minio/stable/minio
+          mkdir data
+          minio server ./data &
+
+      # No MinIO on Windows:
+      # - Windows doesn't support running Linux Docker containers
+      # - It doesn't seem possible to start background processes on Windows. They are
+      #   killed after the step returns.
+      #   See: https://github.com/actions/runner/issues/598#issuecomment-2011890429
+
       - name: Checkout repository
         uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          submodules: true
 
-      - name: Set up Python 3.12
+      - name: Checkout cassettes
+        if: ${{ startsWith(github.event_name, 'pull_request') }}
+        env:
+          PR_BASE: ${{ github.event.pull_request.base.ref }}
+          PR_BRANCH: ${{ github.event.pull_request.head.ref }}
+          PR_AUTHOR: ${{ github.event.pull_request.user.login }}
+        run: |
+          cassette_branch="${PR_AUTHOR}-${PR_BRANCH}"
+          cassette_base_branch="${PR_BASE}"
+          cd tests/vcr_cassettes
+
+          if ! git ls-remote --exit-code --heads origin $cassette_base_branch ; then
+            cassette_base_branch="master"
+          fi
+
+          if git ls-remote --exit-code --heads origin $cassette_branch ; then
+            git fetch origin $cassette_branch
+            git fetch origin $cassette_base_branch
+
+            git checkout $cassette_branch
+
+            # Pick non-conflicting cassette updates from the base branch
+            git merge --no-commit --strategy-option=ours origin/$cassette_base_branch
+            echo "Using cassettes from mirror branch '$cassette_branch'," \
+              "synced to upstream branch '$cassette_base_branch'."
+          else
+            git checkout -b $cassette_branch
+            echo "Branch '$cassette_branch' does not exist in cassette submodule." \
+              "Using cassettes from '$cassette_base_branch'."
+          fi
+
+      - name: Set up Python ${{ matrix.python-version }}
         uses: actions/setup-python@v5
         with:
-          python-version: "3.12"
+          python-version: ${{ matrix.python-version }}
 
       - name: Set up Python dependency cache
+        # On Windows, unpacking cached dependencies takes longer than just installing them
+        if: runner.os != 'Windows'
         uses: actions/cache@v4
         with:
-          path: ~/.cache/pypoetry
-          key: poetry-${{ runner.os }}-${{ hashFiles('classic/poetry.lock') }}
+          path: ${{ runner.os == 'macOS' && '~/Library/Caches/pypoetry' || '~/.cache/pypoetry' }}
+          key: poetry-${{ runner.os }}-${{ hashFiles('classic/forge/poetry.lock') }}
 
-      - name: Install Poetry
-        run: curl -sSL https://install.python-poetry.org | python3 -
+      - name: Install Poetry (Unix)
+        if: runner.os != 'Windows'
+        run: |
+          curl -sSL https://install.python-poetry.org | python3 -
+
+          if [ "${{ runner.os }}" = "macOS" ]; then
+            PATH="$HOME/.local/bin:$PATH"
+            echo "$HOME/.local/bin" >> $GITHUB_PATH
+          fi
+
+      - name: Install Poetry (Windows)
+        if: runner.os == 'Windows'
+        shell: pwsh
+        run: |
+          (Invoke-WebRequest -Uri https://install.python-poetry.org -UseBasicParsing).Content | python -
+
+          $env:PATH += ";$env:APPDATA\Python\Scripts"
+          echo "$env:APPDATA\Python\Scripts" >> $env:GITHUB_PATH
 
       - name: Install Python dependencies
         run: poetry install
@@ -61,15 +140,12 @@ jobs:
             --cov=forge --cov-branch --cov-report term-missing --cov-report xml \
             --durations=10 \
             --junitxml=junit.xml -o junit_family=legacy \
-            forge/forge forge/tests
+            forge
         env:
           CI: true
           PLAIN_OUTPUT: True
-          # API keys - tests that need these will skip if not available
-          # Secrets are not available to fork PRs (GitHub security feature)
           OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
-          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
-          S3_ENDPOINT_URL: http://127.0.0.1:9000
+          S3_ENDPOINT_URL: ${{ runner.os != 'Windows' && 'http://127.0.0.1:9000' || '' }}
           AWS_ACCESS_KEY_ID: minioadmin
           AWS_SECRET_ACCESS_KEY: minioadmin
 
@@ -83,11 +159,85 @@ jobs:
         uses: codecov/codecov-action@v5
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
-          flags: forge
+          flags: forge,${{ runner.os }}
+
+      - id: setup_git_auth
+        name: Set up git token authentication
+        # Cassettes may be pushed even when tests fail
+        if: success() || failure()
+        run: |
+          config_key="http.${{ github.server_url }}/.extraheader"
+          if [ "${{ runner.os }}" = 'macOS' ]; then
+            base64_pat=$(echo -n "pat:${{ secrets.PAT_REVIEW }}" | base64)
+          else
+            base64_pat=$(echo -n "pat:${{ secrets.PAT_REVIEW }}" | base64 -w0)
+          fi
+
+          git config "$config_key" \
+            "Authorization: Basic $base64_pat"
+
+          cd tests/vcr_cassettes
+          git config "$config_key" \
+            "Authorization: Basic $base64_pat"
+
+          echo "config_key=$config_key" >> $GITHUB_OUTPUT
+
+      - id: push_cassettes
+        name: Push updated cassettes
+        # For pull requests, push updated cassettes even when tests fail
+        if: github.event_name == 'push' || (! github.event.pull_request.head.repo.fork && (success() || failure()))
+        env:
+          PR_BRANCH: ${{ github.event.pull_request.head.ref }}
+          PR_AUTHOR: ${{ github.event.pull_request.user.login }}
+        run: |
+          if [ "${{ startsWith(github.event_name, 'pull_request') }}" = "true" ]; then
+            is_pull_request=true
+            cassette_branch="${PR_AUTHOR}-${PR_BRANCH}"
+          else
+            cassette_branch="${{ github.ref_name }}"
+          fi
+
+          cd tests/vcr_cassettes
+          # Commit & push changes to cassettes if any
+          if ! git diff --quiet; then
+            git add .
+            git commit -m "Auto-update cassettes"
+            git push origin HEAD:$cassette_branch
+            if [ ! $is_pull_request ]; then
+              cd ../..
+              git add tests/vcr_cassettes
+              git commit -m "Update cassette submodule"
+              git push origin HEAD:$cassette_branch
+            fi
+            echo "updated=true" >> $GITHUB_OUTPUT
+          else
+            echo "updated=false" >> $GITHUB_OUTPUT
+            echo "No cassette changes to commit"
+          fi
+
+      - name: Post Set up git token auth
+        if: steps.setup_git_auth.outcome == 'success'
+        run: |
+          git config --unset-all '${{ steps.setup_git_auth.outputs.config_key }}'
+          git submodule foreach git config --unset-all '${{ steps.setup_git_auth.outputs.config_key }}'
+
+      - name: Apply "behaviour change" label and comment on PR
+        if: ${{ startsWith(github.event_name, 'pull_request') }}
+        run: |
+          PR_NUMBER="${{ github.event.pull_request.number }}"
+          TOKEN="${{ secrets.PAT_REVIEW }}"
+          REPO="${{ github.repository }}"
+
+          if [[ "${{ steps.push_cassettes.outputs.updated }}" == "true" ]]; then
+            echo "Adding label and comment..."
+            echo $TOKEN | gh auth login --with-token
+            gh issue edit $PR_NUMBER --add-label "behaviour change"
+            gh issue comment $PR_NUMBER --body "You changed AutoGPT's behaviour on ${{ runner.os }}. The cassettes have been updated and will be merged to the submodule when this Pull Request gets merged."
+          fi
 
       - name: Upload logs to artifact
         if: always()
         uses: actions/upload-artifact@v4
         with:
           name: test-logs
-          path: classic/logs/
+          path: classic/forge/logs/

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

@@ -0,0 +1,60 @@
+name: Classic - Frontend CI/CD
+
+on:
+  push:
+    branches:
+      - master
+      - dev
+      - 'ci-test*' # This will match any branch that starts with "ci-test"
+    paths:
+      - 'classic/frontend/**'
+      - '.github/workflows/classic-frontend-ci.yml'
+  pull_request:
+    paths:
+      - 'classic/frontend/**'
+      - '.github/workflows/classic-frontend-ci.yml'
+
+jobs:
+  build:
+    permissions:
+      contents: write
+      pull-requests: write
+    runs-on: ubuntu-latest
+    env:
+      BUILD_BRANCH: ${{ format('classic-frontend-build/{0}', github.ref_name) }}
+
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v4
+
+      - name: Setup Flutter
+        uses: subosito/flutter-action@v2
+        with:
+          flutter-version: '3.13.2'
+
+      - name: Build Flutter to Web
+        run: |
+          cd classic/frontend
+          flutter build web --base-href /app/
+
+      # - name: Commit and Push to ${{ env.BUILD_BRANCH }}
+      #   if: github.event_name == 'push'
+      #   run: |
+      #     git config --local user.email "action@github.com"
+      #     git config --local user.name "GitHub Action"
+      #     git add classic/frontend/build/web
+      #     git checkout -B ${{ env.BUILD_BRANCH }}
+      #     git commit -m "Update frontend build to ${GITHUB_SHA:0:7}" -a
+      #     git push -f origin ${{ env.BUILD_BRANCH }}
+
+      - name: Create PR ${{ env.BUILD_BRANCH }} -> ${{ github.ref_name }}
+        if: github.event_name == 'push'
+        uses: peter-evans/create-pull-request@v7
+        with:
+          add-paths: classic/frontend/build/web
+          base: ${{ github.ref_name }}
+          branch: ${{ env.BUILD_BRANCH }}
+          delete-branch: true
+          title: "Update frontend build in `${{ github.ref_name }}`"
+          body: "This PR updates the frontend build based on commit ${{ github.sha }}."
+          commit-message: "Update frontend build based on commit ${{ github.sha }}"

.github/workflows/classic-python-checks.yml

@@ -7,9 +7,7 @@ on:
       - '.github/workflows/classic-python-checks-ci.yml'
       - 'classic/original_autogpt/**'
       - 'classic/forge/**'
-      - 'classic/direct_benchmark/**'
-      - 'classic/pyproject.toml'
-      - 'classic/poetry.lock'
+      - 'classic/benchmark/**'
       - '**.py'
       - '!classic/forge/tests/vcr_cassettes'
   pull_request:
@@ -18,9 +16,7 @@ on:
       - '.github/workflows/classic-python-checks-ci.yml'
       - 'classic/original_autogpt/**'
       - 'classic/forge/**'
-      - 'classic/direct_benchmark/**'
-      - 'classic/pyproject.toml'
-      - 'classic/poetry.lock'
+      - 'classic/benchmark/**'
       - '**.py'
       - '!classic/forge/tests/vcr_cassettes'
 
@@ -31,13 +27,44 @@ concurrency:
 defaults:
   run:
     shell: bash
-    working-directory: classic
 
 jobs:
+  get-changed-parts:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - id: changes-in
+        name: Determine affected subprojects
+        uses: dorny/paths-filter@v3
+        with:
+          filters: |
+            original_autogpt:
+              - classic/original_autogpt/autogpt/**
+              - classic/original_autogpt/tests/**
+              - classic/original_autogpt/poetry.lock
+            forge:
+              - classic/forge/forge/**
+              - classic/forge/tests/**
+              - classic/forge/poetry.lock
+            benchmark:
+              - classic/benchmark/agbenchmark/**
+              - classic/benchmark/tests/**
+              - classic/benchmark/poetry.lock
+    outputs:
+      changed-parts: ${{ steps.changes-in.outputs.changes }}
+
   lint:
+    needs: get-changed-parts
     runs-on: ubuntu-latest
     env:
-      min-python-version: "3.12"
+      min-python-version: "3.10"
+
+    strategy:
+      matrix:
+        sub-package: ${{ fromJson(needs.get-changed-parts.outputs.changed-parts) }}
+      fail-fast: false
 
     steps:
       - name: Checkout repository
@@ -54,31 +81,42 @@ jobs:
         uses: actions/cache@v4
         with:
           path: ~/.cache/pypoetry
-          key: ${{ runner.os }}-poetry-${{ hashFiles('classic/poetry.lock') }}
+          key: ${{ runner.os }}-poetry-${{ hashFiles(format('{0}/poetry.lock', matrix.sub-package)) }}
 
       - name: Install Poetry
         run: curl -sSL https://install.python-poetry.org | python3 -
 
+      # Install dependencies
+
       - name: Install Python dependencies
-        run: poetry install
+        run: poetry -C classic/${{ matrix.sub-package }} install
 
       # Lint
 
       - name: Lint (isort)
         run: poetry run isort --check .
+        working-directory: classic/${{ matrix.sub-package }}
 
       - name: Lint (Black)
         if: success() || failure()
         run: poetry run black --check .
+        working-directory: classic/${{ matrix.sub-package }}
 
       - name: Lint (Flake8)
         if: success() || failure()
         run: poetry run flake8 .
+        working-directory: classic/${{ matrix.sub-package }}
 
   types:
+    needs: get-changed-parts
     runs-on: ubuntu-latest
     env:
-      min-python-version: "3.12"
+      min-python-version: "3.10"
+
+    strategy:
+      matrix:
+        sub-package: ${{ fromJson(needs.get-changed-parts.outputs.changed-parts) }}
+      fail-fast: false
 
     steps:
       - name: Checkout repository
@@ -95,16 +133,19 @@ jobs:
         uses: actions/cache@v4
         with:
           path: ~/.cache/pypoetry
-          key: ${{ runner.os }}-poetry-${{ hashFiles('classic/poetry.lock') }}
+          key: ${{ runner.os }}-poetry-${{ hashFiles(format('{0}/poetry.lock', matrix.sub-package)) }}
 
       - name: Install Poetry
         run: curl -sSL https://install.python-poetry.org | python3 -
 
+      # Install dependencies
+
       - name: Install Python dependencies
-        run: poetry install
+        run: poetry -C classic/${{ matrix.sub-package }} install
 
       # Typecheck
 
       - name: Typecheck
         if: success() || failure()
         run: poetry run pyright
+        working-directory: classic/${{ matrix.sub-package }}

.gitignore

@@ -3,7 +3,6 @@
 classic/original_autogpt/keys.py
 classic/original_autogpt/*.json
 auto_gpt_workspace/*
-.autogpt/
 *.mpeg
 .env
 # Root .env files
@@ -178,5 +177,5 @@ autogpt_platform/backend/settings.py
 
 *.ign.*
 .test-contents
-**/.claude/settings.local.json
+.claude/settings.local.json
 /autogpt_platform/backend/logs

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "classic/forge/tests/vcr_cassettes"]
+	path = classic/forge/tests/vcr_cassettes
+	url = https://github.com/Significant-Gravitas/Auto-GPT-test-cassettes

.pre-commit-config.yaml

@@ -43,10 +43,29 @@ repos:
         pass_filenames: false
 
       - id: poetry-install
-        name: Check & Install dependencies - Classic
-        alias: poetry-install-classic
-        entry: poetry -C classic install
-        files: ^classic/poetry\.lock$
+        name: Check & Install dependencies - Classic - AutoGPT
+        alias: poetry-install-classic-autogpt
+        entry: poetry -C classic/original_autogpt install
+        # include forge source (since it's a path dependency)
+        files: ^classic/(original_autogpt|forge)/poetry\.lock$
+        types: [file]
+        language: system
+        pass_filenames: false
+
+      - id: poetry-install
+        name: Check & Install dependencies - Classic - Forge
+        alias: poetry-install-classic-forge
+        entry: poetry -C classic/forge install
+        files: ^classic/forge/poetry\.lock$
+        types: [file]
+        language: system
+        pass_filenames: false
+
+      - id: poetry-install
+        name: Check & Install dependencies - Classic - Benchmark
+        alias: poetry-install-classic-benchmark
+        entry: poetry -C classic/benchmark install
+        files: ^classic/benchmark/poetry\.lock$
         types: [file]
         language: system
         pass_filenames: false
@@ -97,10 +116,26 @@ repos:
         language: system
 
       - id: isort
-        name: Lint (isort) - Classic
-        alias: isort-classic
-        entry: bash -c 'cd classic && poetry run isort $(echo "$@" | sed "s|classic/||g")' --
-        files: ^classic/(original_autogpt|forge|direct_benchmark)/
+        name: Lint (isort) - Classic - AutoGPT
+        alias: isort-classic-autogpt
+        entry: poetry -P classic/original_autogpt run isort -p autogpt
+        files: ^classic/original_autogpt/
+        types: [file, python]
+        language: system
+
+      - id: isort
+        name: Lint (isort) - Classic - Forge
+        alias: isort-classic-forge
+        entry: poetry -P classic/forge run isort -p forge
+        files: ^classic/forge/
+        types: [file, python]
+        language: system
+
+      - id: isort
+        name: Lint (isort) - Classic - Benchmark
+        alias: isort-classic-benchmark
+        entry: poetry -P classic/benchmark run isort -p agbenchmark
+        files: ^classic/benchmark/
         types: [file, python]
         language: system
 
@@ -114,13 +149,26 @@ repos:
 
   - repo: https://github.com/PyCQA/flake8
     rev: 7.0.0
-    # Use consolidated flake8 config at classic/.flake8
+    # To have flake8 load the config of the individual subprojects, we have to call
+    # them separately.
     hooks:
       - id: flake8
-        name: Lint (Flake8) - Classic
-        alias: flake8-classic
-        files: ^classic/(original_autogpt|forge|direct_benchmark)/
-        args: [--config=classic/.flake8]
+        name: Lint (Flake8) - Classic - AutoGPT
+        alias: flake8-classic-autogpt
+        files: ^classic/original_autogpt/(autogpt|scripts|tests)/
+        args: [--config=classic/original_autogpt/.flake8]
+
+      - id: flake8
+        name: Lint (Flake8) - Classic - Forge
+        alias: flake8-classic-forge
+        files: ^classic/forge/(forge|tests)/
+        args: [--config=classic/forge/.flake8]
+
+      - id: flake8
+        name: Lint (Flake8) - Classic - Benchmark
+        alias: flake8-classic-benchmark
+        files: ^classic/benchmark/(agbenchmark|tests)/((?!reports).)*[/.]
+        args: [--config=classic/benchmark/.flake8]
 
   - repo: local
     hooks:
@@ -156,10 +204,29 @@ repos:
         pass_filenames: false
 
       - id: pyright
-        name: Typecheck - Classic
-        alias: pyright-classic
-        entry: poetry -C classic run pyright
-        files: ^classic/(original_autogpt|forge|direct_benchmark)/.*\.py$|^classic/poetry\.lock$
+        name: Typecheck - Classic - AutoGPT
+        alias: pyright-classic-autogpt
+        entry: poetry -C classic/original_autogpt run pyright
+        # include forge source (since it's a path dependency) but exclude *_test.py files:
+        files: ^(classic/original_autogpt/((autogpt|scripts|tests)/|poetry\.lock$)|classic/forge/(forge/.*(?<!_test)\.py|poetry\.lock)$)
+        types: [file]
+        language: system
+        pass_filenames: false
+
+      - id: pyright
+        name: Typecheck - Classic - Forge
+        alias: pyright-classic-forge
+        entry: poetry -C classic/forge run pyright
+        files: ^classic/forge/(forge/|poetry\.lock$)
+        types: [file]
+        language: system
+        pass_filenames: false
+
+      - id: pyright
+        name: Typecheck - Classic - Benchmark
+        alias: pyright-classic-benchmark
+        entry: poetry -C classic/benchmark run pyright
+        files: ^classic/benchmark/(agbenchmark/|tests/|poetry\.lock$)
         types: [file]
         language: system
         pass_filenames: false

AGENTS.md

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -3,7 +3,6 @@
 import logging
 from typing import Any
 
-from langfuse import observe
 from pydantic import BaseModel, Field, field_validator
 
 from backend.api.features.chat.config import ChatConfig
@@ -155,7 +154,6 @@ class RunAgentTool(BaseTool):
         """All operations require authentication."""
         return True
 
-    @observe(as_type="tool", name="run_agent")
     async def _execute(
         self,
         user_id: str | None,

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

@@ -4,8 +4,6 @@ import logging
 from collections import defaultdict
 from typing import Any
 
-from langfuse import observe
-
 from backend.api.features.chat.model import ChatSession
 from backend.data.block import get_block
 from backend.data.execution import ExecutionContext
@@ -129,7 +127,6 @@ class RunBlockTool(BaseTool):
 
         return matched_credentials, missing_credentials
 
-    @observe(as_type="tool", name="run_block")
     async def _execute(
         self,
         user_id: str | None,

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

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

autogpt_platform/backend/backend/data/understanding.py

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

autogpt_platform/frontend/CONTRIBUTING.md

@@ -549,9 +549,48 @@ Files:
 Types:
 
 - Prefer `interface` for object shapes
-- Component props should be `interface Props { ... }`
+- Component props should be `interface Props { ... }` (not exported)
+- Only use specific exported names (e.g., `export interface MyComponentProps`) when the interface needs to be used outside the component
+- Keep type definitions inline with the component - do not create separate `types.ts` files unless types are shared across multiple files
 - Use precise types; avoid `any` and unsafe casts
 
+**Props naming examples:**
+
+```tsx
+// ✅ Good - internal props, not exported
+interface Props {
+  title: string;
+  onClose: () => void;
+}
+
+export function Modal({ title, onClose }: Props) {
+  // ...
+}
+
+// ✅ Good - exported when needed externally
+export interface ModalProps {
+  title: string;
+  onClose: () => void;
+}
+
+export function Modal({ title, onClose }: ModalProps) {
+  // ...
+}
+
+// ❌ Bad - unnecessarily specific name for internal use
+interface ModalComponentProps {
+  title: string;
+  onClose: () => void;
+}
+
+// ❌ Bad - separate types.ts file for single component
+// types.ts
+export interface ModalProps { ... }
+
+// Modal.tsx
+import type { ModalProps } from './types';
+```
+
 Parameters:
 
 - If more than one parameter is needed, pass a single `Args` object for clarity

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,24 @@
+"use client";
+
+import { Chat } from "@/components/contextual/Chat/Chat";
+import { useCopilotChatPage } from "./useCopilotChatPage";
+
+export default function CopilotChatPage() {
+  const { isFlagReady, isChatEnabled, sessionId, prompt } =
+    useCopilotChatPage();
+
+  if (!isFlagReady || isChatEnabled === false) {
+    return null;
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      <Chat
+        className="flex-1"
+        urlSessionId={sessionId}
+        initialPrompt={prompt}
+        showNewChatButton={false}
+      />
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/chat/useCopilotChatPage.ts

@@ -0,0 +1,44 @@
+"use client";
+
+import { getHomepageRoute } from "@/lib/constants";
+import {
+  Flag,
+  type FlagValues,
+  useGetFlag,
+} from "@/services/feature-flags/use-get-flag";
+import { useFlags } from "launchdarkly-react-client-sdk";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+
+export function useCopilotChatPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const isChatEnabled = useGetFlag(Flag.CHAT);
+  const flags = useFlags<FlagValues>();
+  const homepageRoute = getHomepageRoute(isChatEnabled);
+  const envEnabled = process.env.NEXT_PUBLIC_LAUNCHDARKLY_ENABLED === "true";
+  const clientId = process.env.NEXT_PUBLIC_LAUNCHDARKLY_CLIENT_ID;
+  const isLaunchDarklyConfigured = envEnabled && Boolean(clientId);
+  const isFlagReady =
+    !isLaunchDarklyConfigured || flags[Flag.CHAT] !== undefined;
+
+  const sessionId = searchParams.get("sessionId");
+  const prompt = searchParams.get("prompt");
+
+  useEffect(
+    function guardAccess() {
+      if (!isFlagReady) return;
+      if (isChatEnabled === false) {
+        router.replace(homepageRoute);
+      }
+    },
+    [homepageRoute, isChatEnabled, isFlagReady, router],
+  );
+
+  return {
+    isFlagReady,
+    isChatEnabled,
+    sessionId,
+    prompt,
+  };
+}

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

@@ -0,0 +1,75 @@
+"use client";
+
+import { NAVBAR_HEIGHT_PX } from "@/lib/constants";
+import type { ReactNode } from "react";
+import { DesktopSidebar } from "./components/DesktopSidebar/DesktopSidebar";
+import { LoadingState } from "./components/LoadingState/LoadingState";
+import { MobileDrawer } from "./components/MobileDrawer/MobileDrawer";
+import { MobileHeader } from "./components/MobileHeader/MobileHeader";
+import { useCopilotShell } from "./useCopilotShell";
+
+interface Props {
+  children: ReactNode;
+}
+
+export function CopilotShell({ children }: Props) {
+  const {
+    isMobile,
+    isDrawerOpen,
+    isLoading,
+    sessions,
+    currentSessionId,
+    handleSelectSession,
+    handleOpenDrawer,
+    handleCloseDrawer,
+    handleDrawerOpenChange,
+    handleNewChat,
+    hasNextPage,
+    isFetchingNextPage,
+    fetchNextPage,
+    isReadyToShowContent,
+  } = useCopilotShell();
+
+  return (
+    <div
+      className="flex overflow-hidden bg-zinc-50"
+      style={{ height: `calc(100vh - ${NAVBAR_HEIGHT_PX}px)` }}
+    >
+      {!isMobile && (
+        <DesktopSidebar
+          sessions={sessions}
+          currentSessionId={currentSessionId}
+          isLoading={isLoading}
+          hasNextPage={hasNextPage}
+          isFetchingNextPage={isFetchingNextPage}
+          onSelectSession={handleSelectSession}
+          onFetchNextPage={fetchNextPage}
+          onNewChat={handleNewChat}
+        />
+      )}
+
+      <div className="flex min-h-0 flex-1 flex-col">
+        {isMobile && <MobileHeader onOpenDrawer={handleOpenDrawer} />}
+        <div className="flex min-h-0 flex-1 flex-col">
+          {isReadyToShowContent ? children : <LoadingState />}
+        </div>
+      </div>
+
+      {isMobile && (
+        <MobileDrawer
+          isOpen={isDrawerOpen}
+          sessions={sessions}
+          currentSessionId={currentSessionId}
+          isLoading={isLoading}
+          hasNextPage={hasNextPage}
+          isFetchingNextPage={isFetchingNextPage}
+          onSelectSession={handleSelectSession}
+          onFetchNextPage={fetchNextPage}
+          onNewChat={handleNewChat}
+          onClose={handleCloseDrawer}
+          onOpenChange={handleDrawerOpenChange}
+        />
+      )}
+    </div>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,87 @@
+import type { SessionSummaryResponse } from "@/app/api/__generated__/models/sessionSummaryResponse";
+import { Button } from "@/components/atoms/Button/Button";
+import { scrollbarStyles } from "@/components/styles/scrollbars";
+import { cn } from "@/lib/utils";
+import { Plus, X } from "@phosphor-icons/react";
+import { Drawer } from "vaul";
+import { SessionsList } from "../SessionsList/SessionsList";
+
+interface Props {
+  isOpen: boolean;
+  sessions: SessionSummaryResponse[];
+  currentSessionId: string | null;
+  isLoading: boolean;
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+  onSelectSession: (sessionId: string) => void;
+  onFetchNextPage: () => void;
+  onNewChat: () => void;
+  onClose: () => void;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function MobileDrawer({
+  isOpen,
+  sessions,
+  currentSessionId,
+  isLoading,
+  hasNextPage,
+  isFetchingNextPage,
+  onSelectSession,
+  onFetchNextPage,
+  onNewChat,
+  onClose,
+  onOpenChange,
+}: Props) {
+  return (
+    <Drawer.Root open={isOpen} onOpenChange={onOpenChange} direction="left">
+      <Drawer.Portal>
+        <Drawer.Overlay className="fixed inset-0 z-[60] bg-black/10 backdrop-blur-sm" />
+        <Drawer.Content className="fixed left-0 top-0 z-[70] flex h-full w-80 flex-col border-r border-zinc-200 bg-white">
+          <div className="shrink-0 border-b border-zinc-200 p-4">
+            <div className="flex items-center justify-between">
+              <Drawer.Title className="text-lg font-semibold text-zinc-800">
+                Your tasks
+              </Drawer.Title>
+              <Button
+                variant="icon"
+                size="icon"
+                aria-label="Close sessions"
+                onClick={onClose}
+              >
+                <X width="1.25rem" height="1.25rem" />
+              </Button>
+            </div>
+          </div>
+          <div
+            className={cn(
+              "flex min-h-0 flex-1 flex-col overflow-y-auto px-3 py-3",
+              scrollbarStyles,
+            )}
+          >
+            <SessionsList
+              sessions={sessions}
+              currentSessionId={currentSessionId}
+              isLoading={isLoading}
+              hasNextPage={hasNextPage}
+              isFetchingNextPage={isFetchingNextPage}
+              onSelectSession={onSelectSession}
+              onFetchNextPage={onFetchNextPage}
+            />
+          </div>
+          <div className="shrink-0 bg-white p-3 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
+            <Button
+              variant="primary"
+              size="small"
+              onClick={onNewChat}
+              className="w-full"
+              leftIcon={<Plus width="1rem" height="1rem" />}
+            >
+              New Chat
+            </Button>
+          </div>
+        </Drawer.Content>
+      </Drawer.Portal>
+    </Drawer.Root>
+  );
+}

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

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

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

@@ -0,0 +1,21 @@
+import { Button } from "@/components/atoms/Button/Button";
+import { List } from "@phosphor-icons/react";
+
+interface Props {
+  onOpenDrawer: () => void;
+}
+
+export function MobileHeader({ onOpenDrawer }: Props) {
+  return (
+    <header className="flex items-center justify-between px-4 py-3">
+      <Button
+        variant="icon"
+        size="icon"
+        aria-label="Open sessions"
+        onClick={onOpenDrawer}
+      >
+        <List width="1.25rem" height="1.25rem" />
+      </Button>
+    </header>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,167 @@
+import type { SessionDetailResponse } from "@/app/api/__generated__/models/sessionDetailResponse";
+import type { SessionSummaryResponse } from "@/app/api/__generated__/models/sessionSummaryResponse";
+import { format, formatDistanceToNow, isToday } from "date-fns";
+
+export function convertSessionDetailToSummary(
+  session: SessionDetailResponse,
+): SessionSummaryResponse {
+  return {
+    id: session.id,
+    created_at: session.created_at,
+    updated_at: session.updated_at,
+    title: undefined,
+  };
+}
+
+export function filterVisibleSessions(
+  sessions: SessionSummaryResponse[],
+): SessionSummaryResponse[] {
+  return sessions.filter(
+    (session) => session.updated_at !== session.created_at,
+  );
+}
+
+export function getSessionTitle(session: SessionSummaryResponse): string {
+  if (session.title) return session.title;
+  const isNewSession = session.updated_at === session.created_at;
+  if (isNewSession) {
+    const createdDate = new Date(session.created_at);
+    if (isToday(createdDate)) {
+      return "Today";
+    }
+    return format(createdDate, "MMM d, yyyy");
+  }
+  return "Untitled Chat";
+}
+
+export function getSessionUpdatedLabel(
+  session: SessionSummaryResponse,
+): string {
+  if (!session.updated_at) return "";
+  return formatDistanceToNow(new Date(session.updated_at), { addSuffix: true });
+}
+
+export function mergeCurrentSessionIntoList(
+  accumulatedSessions: SessionSummaryResponse[],
+  currentSessionId: string | null,
+  currentSessionData: SessionDetailResponse | undefined,
+): SessionSummaryResponse[] {
+  const filteredSessions: SessionSummaryResponse[] = [];
+
+  if (accumulatedSessions.length > 0) {
+    const visibleSessions = filterVisibleSessions(accumulatedSessions);
+
+    if (currentSessionId) {
+      const currentInAll = accumulatedSessions.find(
+        (s) => s.id === currentSessionId,
+      );
+      if (currentInAll) {
+        const isInVisible = visibleSessions.some(
+          (s) => s.id === currentSessionId,
+        );
+        if (!isInVisible) {
+          filteredSessions.push(currentInAll);
+        }
+      }
+    }
+
+    filteredSessions.push(...visibleSessions);
+  }
+
+  if (currentSessionId && currentSessionData) {
+    const isCurrentInList = filteredSessions.some(
+      (s) => s.id === currentSessionId,
+    );
+    if (!isCurrentInList) {
+      const summarySession = convertSessionDetailToSummary(currentSessionData);
+      filteredSessions.unshift(summarySession);
+    }
+  }
+
+  return filteredSessions;
+}
+
+export function getCurrentSessionId(
+  searchParams: URLSearchParams,
+  storedSessionId: string | null,
+): string | null {
+  const paramSessionId = searchParams.get("sessionId");
+  if (paramSessionId) return paramSessionId;
+  if (storedSessionId) return storedSessionId;
+  return null;
+}
+
+export function shouldAutoSelectSession(
+  areAllSessionsLoaded: boolean,
+  hasAutoSelectedSession: boolean,
+  paramSessionId: string | null,
+  visibleSessions: SessionSummaryResponse[],
+  accumulatedSessions: SessionSummaryResponse[],
+  isLoading: boolean,
+  totalCount: number | null,
+): {
+  shouldSelect: boolean;
+  sessionIdToSelect: string | null;
+  shouldCreate: boolean;
+} {
+  if (!areAllSessionsLoaded || hasAutoSelectedSession) {
+    return {
+      shouldSelect: false,
+      sessionIdToSelect: null,
+      shouldCreate: false,
+    };
+  }
+
+  if (paramSessionId) {
+    return {
+      shouldSelect: false,
+      sessionIdToSelect: null,
+      shouldCreate: false,
+    };
+  }
+
+  if (visibleSessions.length > 0) {
+    return {
+      shouldSelect: true,
+      sessionIdToSelect: visibleSessions[0].id,
+      shouldCreate: false,
+    };
+  }
+
+  if (accumulatedSessions.length === 0 && !isLoading && totalCount === 0) {
+    return { shouldSelect: false, sessionIdToSelect: null, shouldCreate: true };
+  }
+
+  if (totalCount === 0) {
+    return {
+      shouldSelect: false,
+      sessionIdToSelect: null,
+      shouldCreate: false,
+    };
+  }
+
+  return { shouldSelect: false, sessionIdToSelect: null, shouldCreate: false };
+}
+
+export function checkReadyToShowContent(
+  areAllSessionsLoaded: boolean,
+  paramSessionId: string | null,
+  accumulatedSessions: SessionSummaryResponse[],
+  isCurrentSessionLoading: boolean,
+  currentSessionData: SessionDetailResponse | undefined,
+  hasAutoSelectedSession: boolean,
+): boolean {
+  if (!areAllSessionsLoaded) return false;
+
+  if (paramSessionId) {
+    const sessionFound = accumulatedSessions.some(
+      (s) => s.id === paramSessionId,
+    );
+    return (
+      sessionFound ||
+      (!isCurrentSessionLoading && currentSessionData !== undefined)
+    );
+  }
+
+  return hasAutoSelectedSession;
+}

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

@@ -0,0 +1,202 @@
+"use client";
+
+import {
+  postV2CreateSession,
+  useGetV2GetSession,
+} from "@/app/api/__generated__/endpoints/chat/chat";
+import { okData } from "@/app/api/helpers";
+import { useBreakpoint } from "@/lib/hooks/useBreakpoint";
+import { Key, storage } from "@/services/storage/local-storage";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useMobileDrawer } from "./components/MobileDrawer/useMobileDrawer";
+import { useSessionsPagination } from "./components/SessionsList/useSessionsPagination";
+import {
+  checkReadyToShowContent,
+  filterVisibleSessions,
+  getCurrentSessionId,
+  mergeCurrentSessionIntoList,
+  shouldAutoSelectSession,
+} from "./helpers";
+
+export function useCopilotShell() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const breakpoint = useBreakpoint();
+  const isMobile =
+    breakpoint === "base" || breakpoint === "sm" || breakpoint === "md";
+
+  const {
+    isDrawerOpen,
+    handleOpenDrawer,
+    handleCloseDrawer,
+    handleDrawerOpenChange,
+  } = useMobileDrawer();
+
+  const paginationEnabled = !isMobile || isDrawerOpen;
+
+  const {
+    sessions: accumulatedSessions,
+    isLoading: isSessionsLoading,
+    isFetching: isSessionsFetching,
+    hasNextPage,
+    areAllSessionsLoaded,
+    totalCount,
+    fetchNextPage,
+    reset: resetPagination,
+  } = useSessionsPagination({
+    enabled: paginationEnabled,
+  });
+
+  const storedSessionId = storage.get(Key.CHAT_SESSION_ID) ?? null;
+  const currentSessionId = useMemo(
+    () => getCurrentSessionId(searchParams, storedSessionId),
+    [searchParams, storedSessionId],
+  );
+
+  const { data: currentSessionData, isLoading: isCurrentSessionLoading } =
+    useGetV2GetSession(currentSessionId || "", {
+      query: {
+        enabled: !!currentSessionId && paginationEnabled,
+        select: okData,
+      },
+    });
+
+  const [hasAutoSelectedSession, setHasAutoSelectedSession] = useState(false);
+  const hasCreatedSessionRef = useRef(false);
+  const paramSessionId = searchParams.get("sessionId");
+
+  const createSessionAndNavigate = useCallback(
+    function createSessionAndNavigate() {
+      postV2CreateSession({ body: JSON.stringify({}) })
+        .then((response) => {
+          if (response.status === 200 && response.data) {
+            router.push(`/copilot/chat?sessionId=${response.data.id}`);
+            setHasAutoSelectedSession(true);
+          }
+        })
+        .catch(() => {
+          hasCreatedSessionRef.current = false;
+        });
+    },
+    [router],
+  );
+
+  useEffect(() => {
+    if (!areAllSessionsLoaded || hasAutoSelectedSession) return;
+
+    const visibleSessions = filterVisibleSessions(accumulatedSessions);
+    const autoSelect = shouldAutoSelectSession(
+      areAllSessionsLoaded,
+      hasAutoSelectedSession,
+      paramSessionId,
+      visibleSessions,
+      accumulatedSessions,
+      isSessionsLoading,
+      totalCount,
+    );
+
+    if (paramSessionId) {
+      setHasAutoSelectedSession(true);
+      return;
+    }
+
+    if (autoSelect.shouldSelect && autoSelect.sessionIdToSelect) {
+      setHasAutoSelectedSession(true);
+      router.push(`/copilot/chat?sessionId=${autoSelect.sessionIdToSelect}`);
+    } else if (autoSelect.shouldCreate && !hasCreatedSessionRef.current) {
+      hasCreatedSessionRef.current = true;
+      createSessionAndNavigate();
+    } else if (totalCount === 0) {
+      setHasAutoSelectedSession(true);
+    }
+  }, [
+    areAllSessionsLoaded,
+    accumulatedSessions,
+    paramSessionId,
+    hasAutoSelectedSession,
+    router,
+    isSessionsLoading,
+    totalCount,
+    createSessionAndNavigate,
+  ]);
+
+  useEffect(() => {
+    if (paramSessionId) {
+      setHasAutoSelectedSession(true);
+    }
+  }, [paramSessionId]);
+
+  function resetAutoSelect() {
+    setHasAutoSelectedSession(false);
+    hasCreatedSessionRef.current = false;
+  }
+
+  // Reset pagination and auto-selection when query becomes disabled
+  useEffect(() => {
+    if (!paginationEnabled) {
+      resetPagination();
+      resetAutoSelect();
+    }
+  }, [paginationEnabled, resetPagination]);
+
+  const sessions = useMemo(
+    function getSessions() {
+      return mergeCurrentSessionIntoList(
+        accumulatedSessions,
+        currentSessionId,
+        currentSessionData,
+      );
+    },
+    [accumulatedSessions, currentSessionId, currentSessionData],
+  );
+
+  function handleSelectSession(sessionId: string) {
+    router.push(`/copilot/chat?sessionId=${sessionId}`);
+    if (isMobile) handleCloseDrawer();
+  }
+
+  function handleNewChat() {
+    storage.clean(Key.CHAT_SESSION_ID);
+    resetAutoSelect();
+    createSessionAndNavigate();
+    if (isMobile) handleCloseDrawer();
+  }
+
+  const isReadyToShowContent = useMemo(
+    () =>
+      checkReadyToShowContent(
+        areAllSessionsLoaded,
+        paramSessionId,
+        accumulatedSessions,
+        isCurrentSessionLoading,
+        currentSessionData,
+        hasAutoSelectedSession,
+      ),
+    [
+      areAllSessionsLoaded,
+      paramSessionId,
+      accumulatedSessions,
+      isCurrentSessionLoading,
+      currentSessionData,
+      hasAutoSelectedSession,
+    ],
+  );
+
+  return {
+    isMobile,
+    isDrawerOpen,
+    isLoading: isSessionsLoading || !areAllSessionsLoaded,
+    sessions,
+    currentSessionId,
+    handleSelectSession,
+    handleOpenDrawer,
+    handleCloseDrawer,
+    handleDrawerOpenChange,
+    handleNewChat,
+    hasNextPage,
+    isFetchingNextPage: isSessionsFetching,
+    fetchNextPage,
+    isReadyToShowContent,
+  };
+}

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

@@ -0,0 +1,33 @@
+import type { User } from "@supabase/supabase-js";
+
+export function getGreetingName(user?: User | null): string {
+  if (!user) return "there";
+  const metadata = user.user_metadata as Record<string, unknown> | undefined;
+  const fullName = metadata?.full_name;
+  const name = metadata?.name;
+  if (typeof fullName === "string" && fullName.trim()) {
+    return fullName.split(" ")[0];
+  }
+  if (typeof name === "string" && name.trim()) {
+    return name.split(" ")[0];
+  }
+  if (user.email) {
+    return user.email.split("@")[0];
+  }
+  return "there";
+}
+
+export function buildCopilotChatUrl(prompt: string): string {
+  const trimmed = prompt.trim();
+  if (!trimmed) return "/copilot/chat";
+  const encoded = encodeURIComponent(trimmed);
+  return `/copilot/chat?prompt=${encoded}`;
+}
+
+export function getQuickActions(): string[] {
+  return [
+    "Show me what I can automate",
+    "Design a custom workflow",
+    "Help me with content creation",
+  ];
+}

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

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

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

@@ -0,0 +1,102 @@
+"use client";
+
+import { Skeleton } from "@/components/__legacy__/ui/skeleton";
+import { Button } from "@/components/atoms/Button/Button";
+import { Input } from "@/components/atoms/Input/Input";
+import { Text } from "@/components/atoms/Text/Text";
+import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
+import { ArrowUpIcon } from "@phosphor-icons/react";
+import { useCopilotHome } from "./useCopilotHome";
+
+export default function CopilotPage() {
+  const {
+    greetingName,
+    value,
+    quickActions,
+    isFlagReady,
+    isChatEnabled,
+    handleChange,
+    handleSubmit,
+    handleKeyDown,
+    handleQuickAction,
+  } = useCopilotHome();
+  const { isUserLoading } = useSupabase();
+
+  if (!isFlagReady || isChatEnabled === false) {
+    return null;
+  }
+
+  const isLoading = isUserLoading;
+
+  return (
+    <div className="flex h-full flex-1 items-center justify-center overflow-y-auto px-6 py-10">
+      <div className="w-full max-w-2xl text-center">
+        {isLoading ? (
+          <>
+            <Skeleton className="mx-auto mb-3 h-8 w-64" />
+            <Skeleton className="mx-auto mb-8 h-6 w-80" />
+            <div className="mb-8">
+              <Skeleton className="mx-auto h-14 w-full max-w-2xl rounded-lg" />
+            </div>
+            <div className="flex flex-wrap items-center justify-center gap-3">
+              {Array.from({ length: 4 }).map((_, i) => (
+                <Skeleton key={i} className="h-9 w-48 rounded-md" />
+              ))}
+            </div>
+          </>
+        ) : (
+          <>
+            <Text variant="h2" className="mb-3 text-zinc-700">
+              Hey, <span className="text-violet-600">{greetingName}</span>
+            </Text>
+            <Text variant="h3" className="mb-8 text-zinc-900">
+              What do you want to automate?
+            </Text>
+
+            <form onSubmit={handleSubmit} className="mb-8">
+              <div className="relative">
+                <Input
+                  id="copilot-prompt"
+                  label="Copilot prompt"
+                  hideLabel
+                  type="textarea"
+                  value={value}
+                  onChange={handleChange}
+                  onKeyDown={handleKeyDown}
+                  rows={1}
+                  placeholder='You can search or just ask - e.g. "create a blog post outline"'
+                  wrapperClassName="mb-0"
+                  className="min-h-[3.5rem] pr-12 text-base"
+                />
+                <Button
+                  type="submit"
+                  variant="icon"
+                  size="icon"
+                  aria-label="Submit prompt"
+                  className="absolute right-2 top-1/2 -translate-y-1/2 border-zinc-800 bg-zinc-800 text-white hover:border-zinc-900 hover:bg-zinc-900"
+                  disabled={!value.trim()}
+                >
+                  <ArrowUpIcon className="h-4 w-4" weight="bold" />
+                </Button>
+              </div>
+            </form>
+
+            <div className="flex flex-wrap items-center justify-center gap-3">
+              {quickActions.map((action) => (
+                <Button
+                  key={action}
+                  variant="outline"
+                  size="small"
+                  onClick={() => handleQuickAction(action)}
+                  className="border-zinc-300 text-zinc-700 hover:border-zinc-400 hover:bg-zinc-50"
+                >
+                  {action}
+                </Button>
+              ))}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,90 @@
+"use client";
+
+import { getHomepageRoute } from "@/lib/constants";
+import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
+import {
+  Flag,
+  type FlagValues,
+  useGetFlag,
+} from "@/services/feature-flags/use-get-flag";
+import { useFlags } from "launchdarkly-react-client-sdk";
+import { useRouter } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
+import {
+  buildCopilotChatUrl,
+  getGreetingName,
+  getQuickActions,
+} from "./helpers";
+
+export function useCopilotHome() {
+  const router = useRouter();
+  const { user } = useSupabase();
+  const [value, setValue] = useState("");
+  const isChatEnabled = useGetFlag(Flag.CHAT);
+  const flags = useFlags<FlagValues>();
+  const homepageRoute = getHomepageRoute(isChatEnabled);
+  const envEnabled = process.env.NEXT_PUBLIC_LAUNCHDARKLY_ENABLED === "true";
+  const clientId = process.env.NEXT_PUBLIC_LAUNCHDARKLY_CLIENT_ID;
+  const isLaunchDarklyConfigured = envEnabled && Boolean(clientId);
+  const isFlagReady =
+    !isLaunchDarklyConfigured || flags[Flag.CHAT] !== undefined;
+
+  const greetingName = useMemo(
+    function getName() {
+      return getGreetingName(user);
+    },
+    [user],
+  );
+
+  const quickActions = useMemo(function getActions() {
+    return getQuickActions();
+  }, []);
+
+  useEffect(
+    function ensureAccess() {
+      if (!isFlagReady) return;
+      if (isChatEnabled === false) {
+        router.replace(homepageRoute);
+      }
+    },
+    [homepageRoute, isChatEnabled, isFlagReady, router],
+  );
+
+  function handleChange(
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) {
+    setValue(event.target.value);
+  }
+
+  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!value.trim()) return;
+    router.push(buildCopilotChatUrl(value));
+  }
+
+  function handleKeyDown(
+    event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) {
+    if (event.key !== "Enter") return;
+    if (event.shiftKey) return;
+    event.preventDefault();
+    if (!value.trim()) return;
+    router.push(buildCopilotChatUrl(value));
+  }
+
+  function handleQuickAction(action: string) {
+    router.push(buildCopilotChatUrl(action));
+  }
+
+  return {
+    greetingName,
+    value,
+    quickActions,
+    isFlagReady,
+    isChatEnabled,
+    handleChange,
+    handleSubmit,
+    handleKeyDown,
+    handleQuickAction,
+  };
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

autogpt_platform/frontend/src/app/page.tsx

@@ -1,5 +1,33 @@
-import { redirect } from "next/navigation";
+"use client";
+
+import { getHomepageRoute } from "@/lib/constants";
+import {
+  Flag,
+  type FlagValues,
+  useGetFlag,
+} from "@/services/feature-flags/use-get-flag";
+import { useFlags } from "launchdarkly-react-client-sdk";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
 
 export default function Page() {
-  redirect("/marketplace");
+  const isChatEnabled = useGetFlag(Flag.CHAT);
+  const flags = useFlags<FlagValues>();
+  const router = useRouter();
+  const homepageRoute = getHomepageRoute(isChatEnabled);
+  const envEnabled = process.env.NEXT_PUBLIC_LAUNCHDARKLY_ENABLED === "true";
+  const clientId = process.env.NEXT_PUBLIC_LAUNCHDARKLY_CLIENT_ID;
+  const isLaunchDarklyConfigured = envEnabled && Boolean(clientId);
+  const isFlagReady =
+    !isLaunchDarklyConfigured || flags[Flag.CHAT] !== undefined;
+
+  useEffect(
+    function redirectToHomepage() {
+      if (!isFlagReady) return;
+      router.replace(homepageRoute);
+    },
+    [homepageRoute, isFlagReady, router],
+  );
+
+  return null;
 }

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

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

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

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

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

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

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

@@ -1,22 +1,23 @@
 import type { SessionDetailResponse } from "@/app/api/__generated__/models/sessionDetailResponse";
 import { cn } from "@/lib/utils";
-import { useCallback } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { usePageContext } from "../../usePageContext";
 import { ChatInput } from "../ChatInput/ChatInput";
 import { MessageList } from "../MessageList/MessageList";
-import { QuickActionsWelcome } from "../QuickActionsWelcome/QuickActionsWelcome";
 import { useChatContainer } from "./useChatContainer";
 
 export interface ChatContainerProps {
   sessionId: string | null;
   initialMessages: SessionDetailResponse["messages"];
   className?: string;
+  initialPrompt?: string | null;
 }
 
 export function ChatContainer({
   sessionId,
   initialMessages,
   className,
+  initialPrompt,
 }: ChatContainerProps) {
   const { messages, streamingChunks, isStreaming, sendMessage } =
     useChatContainer({
@@ -24,6 +25,7 @@ export function ChatContainer({
       initialMessages,
     });
   const { capturePageContext } = usePageContext();
+  const hasSentInitialRef = useRef(false);
 
   // Wrap sendMessage to automatically capture page context
   const sendMessageWithContext = useCallback(
@@ -34,35 +36,28 @@ export function ChatContainer({
     [sendMessage, capturePageContext],
   );
 
-  const quickActions = [
-    "Find agents for social media management",
-    "Show me agents for content creation",
-    "Help me automate my business",
-    "What can you help me with?",
-  ];
+  useEffect(
+    function handleInitialPrompt() {
+      if (!initialPrompt) return;
+      if (hasSentInitialRef.current) return;
+      if (!sessionId) return;
+      if (messages.length > 0) return;
+      hasSentInitialRef.current = true;
+      void sendMessageWithContext(initialPrompt);
+    },
+    [initialPrompt, messages.length, sendMessageWithContext, sessionId],
+  );
 
   return (
     <div
-      className={cn("flex h-full min-h-0 flex-col", className)}
-      style={{
-        backgroundColor: "#ffffff",
-        backgroundImage:
-          "radial-gradient(#e5e5e5 0.5px, transparent 0.5px), radial-gradient(#e5e5e5 0.5px, #ffffff 0.5px)",
-        backgroundSize: "20px 20px",
-        backgroundPosition: "0 0, 10px 10px",
-      }}
+      className={cn(
+        "mx-auto flex h-full min-h-0 w-full max-w-3xl flex-col bg-[#f8f8f9]",
+        className,
+      )}
     >
-      {/* Messages or Welcome Screen */}
-      <div className="flex min-h-0 flex-1 flex-col overflow-hidden pb-24">
-        {messages.length === 0 ? (
-          <QuickActionsWelcome
-            title="Welcome to AutoGPT Copilot"
-            description="Start a conversation to discover and run AI agents."
-            actions={quickActions}
-            onActionClick={sendMessageWithContext}
-            disabled={isStreaming || !sessionId}
-          />
-        ) : (
+      {/* Messages or Welcome Screen - Scrollable */}
+      <div className="relative flex min-h-0 flex-1 flex-col overflow-y-auto">
+        <div className="flex min-h-full flex-col justify-end">
           <MessageList
             messages={messages}
             streamingChunks={streamingChunks}
@@ -70,17 +65,16 @@ export function ChatContainer({
             onSendMessage={sendMessageWithContext}
             className="flex-1"
           />
-        )}
+        </div>
       </div>
 
-      {/* Input - Always visible */}
-      <div className="fixed bottom-0 left-0 right-0 z-50 border-t border-zinc-200 bg-white p-4">
+      {/* Input - Fixed at bottom */}
+      <div className="relative pb-4 pt-2">
+        <div className="pointer-events-none absolute top-[-18px] z-10 h-6 w-full bg-gradient-to-b from-transparent to-[#f8f8f9]" />
         <ChatInput
           onSend={sendMessageWithContext}
           disabled={isStreaming || !sessionId}
-          placeholder={
-            sessionId ? "Type your message..." : "Creating session..."
-          }
+          placeholder="You can search or just ask — e.g. “create a blog post outline”"
         />
       </div>
     </div>

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

@@ -33,13 +33,23 @@ export function handleTextEnded(
   console.log("[Text Ended] Saving streamed text as assistant message");
   const completedText = deps.streamingChunksRef.current.join("");
   if (completedText.trim()) {
-    const assistantMessage: ChatMessageData = {
-      type: "message",
-      role: "assistant",
-      content: completedText,
-      timestamp: new Date(),
-    };
-    deps.setMessages((prev) => [...prev, assistantMessage]);
+    deps.setMessages((prev) => {
+      const lastMessage = prev[prev.length - 1];
+      console.log("[Text Ended] Previous message:", {
+        type: lastMessage?.type,
+        toolName:
+          lastMessage?.type === "tool_call" ? lastMessage.toolName : undefined,
+        content: completedText.substring(0, 200),
+      });
+
+      const assistantMessage: ChatMessageData = {
+        type: "message",
+        role: "assistant",
+        content: completedText,
+        timestamp: new Date(),
+      };
+      return [...prev, assistantMessage];
+    });
   }
   deps.setStreamingChunks([]);
   deps.streamingChunksRef.current = [];

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

@@ -3,7 +3,7 @@ import { cn } from "@/lib/utils";
 import { ArrowUpIcon } from "@phosphor-icons/react";
 import { useChatInput } from "./useChatInput";
 
-export interface ChatInputProps {
+export interface Props {
   onSend: (message: string) => void;
   disabled?: boolean;
   placeholder?: string;
@@ -15,7 +15,7 @@ export function ChatInput({
   disabled = false,
   placeholder = "Type your message...",
   className,
-}: ChatInputProps) {
+}: Props) {
   const inputId = "chat-input";
   const { value, setValue, handleKeyDown, handleSend } = useChatInput({
     onSend,

autogpt_platform/frontend/src/components/contextual/Chat/components/ChatLoader/ChatLoader.module.css

@@ -0,0 +1,13 @@
+.loader {
+  width: 20px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: #000;
+  box-shadow: 0 0 0 0 #0004;
+  animation: l1 1s infinite;
+}
+@keyframes l1 {
+  100% {
+    box-shadow: 0 0 0 30px #0000;
+  }
+}

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

@@ -0,0 +1,5 @@
+import styles from "./ChatLoader.module.css";
+
+export function ChatLoader() {
+  return <div className={styles.loader} />;
+}

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

@@ -1,10 +1,5 @@
 "use client";
 
-import { useGetV2GetUserProfile } from "@/app/api/__generated__/endpoints/store/store";
-import Avatar, {
-  AvatarFallback,
-  AvatarImage,
-} from "@/components/atoms/Avatar/Avatar";
 import { Button } from "@/components/atoms/Button/Button";
 import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
 import { cn } from "@/lib/utils";
@@ -13,20 +8,19 @@ import {
   CheckCircleIcon,
   CheckIcon,
   CopyIcon,
-  RobotIcon,
 } from "@phosphor-icons/react";
 import { useRouter } from "next/navigation";
 import { useCallback, useState } from "react";
-import { getToolActionPhrase } from "../../helpers";
 import { AgentCarouselMessage } from "../AgentCarouselMessage/AgentCarouselMessage";
+import { AIChatBubble } from "../AIChatBubble/AIChatBubble";
 import { AuthPromptWidget } from "../AuthPromptWidget/AuthPromptWidget";
 import { ChatCredentialsSetup } from "../ChatCredentialsSetup/ChatCredentialsSetup";
 import { ExecutionStartedMessage } from "../ExecutionStartedMessage/ExecutionStartedMessage";
 import { MarkdownContent } from "../MarkdownContent/MarkdownContent";
-import { MessageBubble } from "../MessageBubble/MessageBubble";
 import { NoResultsMessage } from "../NoResultsMessage/NoResultsMessage";
 import { ToolCallMessage } from "../ToolCallMessage/ToolCallMessage";
 import { ToolResponseMessage } from "../ToolResponseMessage/ToolResponseMessage";
+import { UserChatBubble } from "../UserChatBubble/UserChatBubble";
 import { useChatMessage, type ChatMessageData } from "./useChatMessage";
 export interface ChatMessageProps {
   message: ChatMessageData;
@@ -35,6 +29,7 @@ export interface ChatMessageProps {
   onDismissCredentials?: () => void;
   onSendMessage?: (content: string, isUserMessage?: boolean) => void;
   agentOutput?: ChatMessageData;
+  isFinalMessage?: boolean;
 }
 
 export function ChatMessage({
@@ -43,6 +38,7 @@ export function ChatMessage({
   onDismissCredentials,
   onSendMessage,
   agentOutput,
+  isFinalMessage = true,
 }: ChatMessageProps) {
   const { user } = useSupabase();
   const router = useRouter();
@@ -55,14 +51,6 @@ export function ChatMessage({
     isCredentialsNeeded,
   } = useChatMessage(message);
 
-  const { data: profile } = useGetV2GetUserProfile({
-    query: {
-      select: (res) => (res.status === 200 ? res.data : null),
-      enabled: isUser && !!user,
-      queryKey: ["/api/store/profile", user?.id],
-    },
-  });
-
   const handleAllCredentialsComplete = useCallback(
     function handleAllCredentialsComplete() {
       // Send a user message that explicitly asks to retry the setup
@@ -171,7 +159,11 @@ export function ChatMessage({
   if (isToolCall && message.type === "tool_call") {
     return (
       <div className={cn("px-4 py-2", className)}>
-        <ToolCallMessage toolName={message.toolName} />
+        <ToolCallMessage
+          toolId={message.toolId}
+          toolName={message.toolName}
+          arguments={message.arguments}
+        />
       </div>
     );
   }
@@ -218,27 +210,11 @@ export function ChatMessage({
 
   // Render tool response messages (but skip agent_output if it's being rendered inside assistant message)
   if (isToolResponse && message.type === "tool_response") {
-    // Check if this is an agent_output that should be rendered inside assistant message
-    if (message.result) {
-      let parsedResult: Record<string, unknown> | null = null;
-      try {
-        parsedResult =
-          typeof message.result === "string"
-            ? JSON.parse(message.result)
-            : (message.result as Record<string, unknown>);
-      } catch {
-        parsedResult = null;
-      }
-      if (parsedResult?.type === "agent_output") {
-        // Skip rendering - this will be rendered inside the assistant message
-        return null;
-      }
-    }
-
     return (
       <div className={cn("px-4 py-2", className)}>
         <ToolResponseMessage
-          toolName={getToolActionPhrase(message.toolName)}
+          toolId={message.toolId}
+          toolName={message.toolName}
           result={message.result}
         />
       </div>
@@ -256,40 +232,33 @@ export function ChatMessage({
         )}
       >
         <div className="flex w-full max-w-3xl gap-3">
-          {!isUser && (
-            <div className="flex-shrink-0">
-              <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-indigo-500">
-                <RobotIcon className="h-4 w-4 text-indigo-50" />
-              </div>
-            </div>
-          )}
-
           <div
             className={cn(
               "flex min-w-0 flex-1 flex-col",
               isUser && "items-end",
             )}
           >
-            <MessageBubble variant={isUser ? "user" : "assistant"}>
-              <MarkdownContent content={message.content} />
-              {agentOutput &&
-                agentOutput.type === "tool_response" &&
-                !isUser && (
+            {isUser ? (
+              <UserChatBubble>
+                <MarkdownContent content={message.content} />
+              </UserChatBubble>
+            ) : (
+              <AIChatBubble>
+                <MarkdownContent content={message.content} />
+                {agentOutput && agentOutput.type === "tool_response" && (
                   <div className="mt-4">
                     <ToolResponseMessage
-                      toolName={
-                        agentOutput.toolName
-                          ? getToolActionPhrase(agentOutput.toolName)
-                          : "Agent Output"
-                      }
+                      toolId={agentOutput.toolId}
+                      toolName={agentOutput.toolName || "Agent Output"}
                       result={agentOutput.result}
                     />
                   </div>
                 )}
-            </MessageBubble>
+              </AIChatBubble>
+            )}
             <div
               className={cn(
-                "mt-1 flex gap-1",
+                "flex gap-1",
                 isUser ? "justify-end" : "justify-start",
               )}
             >
@@ -303,34 +272,22 @@ export function ChatMessage({
                   <ArrowClockwise className="size-3 text-neutral-500" />
                 </Button>
               )}
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={handleCopy}
-                aria-label="Copy message"
-              >
-                {copied ? (
-                  <CheckIcon className="size-3 text-green-600" />
-                ) : (
-                  <CopyIcon className="size-3 text-neutral-500" />
-                )}
-              </Button>
+              {(isUser || isFinalMessage) && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={handleCopy}
+                  aria-label="Copy message"
+                >
+                  {copied ? (
+                    <CheckIcon className="size-3 text-green-600" />
+                  ) : (
+                    <CopyIcon className="size-3 text-neutral-500" />
+                  )}
+                </Button>
+              )}
             </div>
           </div>
-
-          {isUser && (
-            <div className="flex-shrink-0">
-              <Avatar className="h-7 w-7">
-                <AvatarImage
-                  src={profile?.avatar_url ?? ""}
-                  alt={profile?.username ?? "User"}
-                />
-                <AvatarFallback className="rounded-lg bg-neutral-200 text-neutral-600">
-                  {profile?.username?.charAt(0)?.toUpperCase() || "U"}
-                </AvatarFallback>
-              </Avatar>
-            </div>
-          )}
         </div>
       </div>
     );

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

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

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

@@ -0,0 +1,105 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import type { ChatMessageData } from "../ChatMessage/useChatMessage";
+import { StreamingMessage } from "../StreamingMessage/StreamingMessage";
+import { ThinkingMessage } from "../ThinkingMessage/ThinkingMessage";
+import { LastToolResponse } from "./components/LastToolResponse/LastToolResponse";
+import { MessageItem } from "./components/MessageItem/MessageItem";
+import { findLastMessageIndex, shouldSkipAgentOutput } from "./helpers";
+import { useMessageList } from "./useMessageList";
+
+export interface MessageListProps {
+  messages: ChatMessageData[];
+  streamingChunks?: string[];
+  isStreaming?: boolean;
+  className?: string;
+  onStreamComplete?: () => void;
+  onSendMessage?: (content: string) => void;
+}
+
+export function MessageList({
+  messages,
+  streamingChunks = [],
+  isStreaming = false,
+  className,
+  onStreamComplete,
+  onSendMessage,
+}: MessageListProps) {
+  const { messagesEndRef, messagesContainerRef } = useMessageList({
+    messageCount: messages.length,
+    isStreaming,
+  });
+
+  return (
+    <div
+      ref={messagesContainerRef}
+      className={cn(
+        "flex-1 overflow-y-auto overflow-x-hidden",
+        "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-zinc-300",
+        className,
+      )}
+    >
+      <div className="mx-auto flex min-w-0 flex-col hyphens-auto break-words py-4">
+        {/* Render all persisted messages */}
+        {(() => {
+          const lastAssistantMessageIndex = findLastMessageIndex(
+            messages,
+            (msg) => msg.type === "message" && msg.role === "assistant",
+          );
+
+          const lastToolResponseIndex = findLastMessageIndex(
+            messages,
+            (msg) => msg.type === "tool_response",
+          );
+
+          return messages.map((message, index) => {
+            // Skip agent_output tool_responses that should be rendered inside assistant messages
+            if (shouldSkipAgentOutput(message, messages[index - 1])) {
+              return null;
+            }
+
+            // Render last tool_response as AIChatBubble
+            if (
+              message.type === "tool_response" &&
+              index === lastToolResponseIndex
+            ) {
+              return (
+                <LastToolResponse
+                  key={index}
+                  message={message}
+                  prevMessage={messages[index - 1]}
+                />
+              );
+            }
+
+            return (
+              <MessageItem
+                key={index}
+                message={message}
+                messages={messages}
+                index={index}
+                lastAssistantMessageIndex={lastAssistantMessageIndex}
+                onSendMessage={onSendMessage}
+              />
+            );
+          });
+        })()}
+
+        {/* Render thinking message when streaming but no chunks yet */}
+        {isStreaming && streamingChunks.length === 0 && <ThinkingMessage />}
+
+        {/* Render streaming message if active */}
+        {isStreaming && streamingChunks.length > 0 && (
+          <StreamingMessage
+            chunks={streamingChunks}
+            onComplete={onStreamComplete}
+          />
+        )}
+
+        {/* Invisible div to scroll to */}
+        <div ref={messagesEndRef} />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,29 @@
+import { AIChatBubble } from "../../../AIChatBubble/AIChatBubble";
+import type { ChatMessageData } from "../../../ChatMessage/useChatMessage";
+import { MarkdownContent } from "../../../MarkdownContent/MarkdownContent";
+import { formatToolResultValue, shouldSkipAgentOutput } from "../../helpers";
+
+export interface LastToolResponseProps {
+  message: ChatMessageData;
+  prevMessage: ChatMessageData | undefined;
+}
+
+export function LastToolResponse({
+  message,
+  prevMessage,
+}: LastToolResponseProps) {
+  if (message.type !== "tool_response") return null;
+
+  // Skip if this is an agent_output that should be rendered inside assistant message
+  if (shouldSkipAgentOutput(message, prevMessage)) return null;
+
+  const resultValue = formatToolResultValue(message.result);
+
+  return (
+    <div className="min-w-0 overflow-x-hidden hyphens-auto break-words px-4 py-2">
+      <AIChatBubble>
+        <MarkdownContent content={resultValue} />
+      </AIChatBubble>
+    </div>
+  );
+}

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

@@ -0,0 +1,35 @@
+import { ChatMessage } from "../../../ChatMessage/ChatMessage";
+import type { ChatMessageData } from "../../../ChatMessage/useChatMessage";
+import { useMessageItem } from "./useMessageItem";
+
+export interface MessageItemProps {
+  message: ChatMessageData;
+  messages: ChatMessageData[];
+  index: number;
+  lastAssistantMessageIndex: number;
+  onSendMessage?: (content: string) => void;
+}
+
+export function MessageItem({
+  message,
+  messages,
+  index,
+  lastAssistantMessageIndex,
+  onSendMessage,
+}: MessageItemProps) {
+  const { messageToRender, agentOutput, isFinalMessage } = useMessageItem({
+    message,
+    messages,
+    index,
+    lastAssistantMessageIndex,
+  });
+
+  return (
+    <ChatMessage
+      message={messageToRender}
+      onSendMessage={onSendMessage}
+      agentOutput={agentOutput}
+      isFinalMessage={isFinalMessage}
+    />
+  );
+}

autogpt_platform/frontend/src/components/contextual/Chat/components/MessageList/components/MessageItem/useMessageItem.ts

@@ -0,0 +1,83 @@
+import type { ChatMessageData } from "../../../ChatMessage/useChatMessage";
+import { isAgentOutputResult, isToolOutputPattern } from "../../helpers";
+
+export interface UseMessageItemArgs {
+  message: ChatMessageData;
+  messages: ChatMessageData[];
+  index: number;
+  lastAssistantMessageIndex: number;
+}
+
+export function useMessageItem({
+  message,
+  messages,
+  index,
+  lastAssistantMessageIndex,
+}: UseMessageItemArgs) {
+  let agentOutput: ChatMessageData | undefined;
+  let messageToRender: ChatMessageData = message;
+
+  // Check if assistant message follows a tool_call and looks like a tool output
+  if (message.type === "message" && message.role === "assistant") {
+    const prevMessage = messages[index - 1];
+
+    // Check if next message is an agent_output tool_response to include in current assistant message
+    const nextMessage = messages[index + 1];
+    if (
+      nextMessage &&
+      nextMessage.type === "tool_response" &&
+      nextMessage.result
+    ) {
+      if (isAgentOutputResult(nextMessage.result)) {
+        agentOutput = nextMessage;
+      }
+    }
+
+    // Only convert to tool_response if it follows a tool_call AND looks like a tool output
+    if (prevMessage && prevMessage.type === "tool_call") {
+      if (isToolOutputPattern(message.content)) {
+        // Convert this message to a tool_response format for rendering
+        messageToRender = {
+          type: "tool_response",
+          toolId: prevMessage.toolId,
+          toolName: prevMessage.toolName,
+          result: message.content,
+          success: true,
+          timestamp: message.timestamp,
+        } as ChatMessageData;
+
+        console.log(
+          "[MessageItem] Converting assistant message to tool output:",
+          {
+            content: message.content.substring(0, 100),
+            prevToolName: prevMessage.toolName,
+          },
+        );
+      }
+    }
+
+    // Log for debugging
+    if (message.type === "message" && message.role === "assistant") {
+      const prevMessageToolName =
+        prevMessage?.type === "tool_call" ? prevMessage.toolName : undefined;
+      console.log("[MessageItem] Assistant message:", {
+        index,
+        content: message.content.substring(0, 200),
+        fullContent: message.content,
+        prevMessageType: prevMessage?.type,
+        prevMessageToolName,
+      });
+    }
+  }
+
+  const isFinalMessage =
+    messageToRender.type !== "message" ||
+    messageToRender.role !== "assistant" ||
+    index === lastAssistantMessageIndex;
+
+  return {
+    messageToRender,
+    agentOutput,
+    isFinalMessage,
+  };
+}

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

@@ -0,0 +1,68 @@
+import type { ChatMessageData } from "../ChatMessage/useChatMessage";
+
+export function parseToolResult(
+  result: unknown,
+): Record<string, unknown> | null {
+  try {
+    return typeof result === "string"
+      ? JSON.parse(result)
+      : (result as Record<string, unknown>);
+  } catch {
+    return null;
+  }
+}
+
+export function isAgentOutputResult(result: unknown): boolean {
+  const parsed = parseToolResult(result);
+  return parsed?.type === "agent_output";
+}
+
+export function isToolOutputPattern(content: string): boolean {
+  const normalizedContent = content.toLowerCase().trim();
+
+  return (
+    normalizedContent.startsWith("no agents found") ||
+    normalizedContent.startsWith("no results found") ||
+    normalizedContent.includes("no agents found matching") ||
+    !!normalizedContent.match(/^no \w+ found/i) ||
+    (content.length < 150 && normalizedContent.includes("try different")) ||
+    (content.length < 200 &&
+      !normalizedContent.includes("i'll") &&
+      !normalizedContent.includes("let me") &&
+      !normalizedContent.includes("i can") &&
+      !normalizedContent.includes("i will"))
+  );
+}
+
+export function formatToolResultValue(result: unknown): string {
+  return typeof result === "string"
+    ? result
+    : result
+      ? JSON.stringify(result, null, 2)
+      : "";
+}
+
+export function findLastMessageIndex(
+  messages: ChatMessageData[],
+  predicate: (msg: ChatMessageData) => boolean,
+): number {
+  for (let i = messages.length - 1; i >= 0; i--) {
+    if (predicate(messages[i])) return i;
+  }
+  return -1;
+}
+
+export function shouldSkipAgentOutput(
+  message: ChatMessageData,
+  prevMessage: ChatMessageData | undefined,
+): boolean {
+  if (message.type !== "tool_response" || !message.result) return false;
+
+  const isAgentOutput = isAgentOutputResult(message.result);
+  return (
+    isAgentOutput &&
+    !!prevMessage &&
+    prevMessage.type === "message" &&
+    prevMessage.role === "assistant"
+  );
+}

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

@@ -1,7 +1,6 @@
 import { cn } from "@/lib/utils";
-import { RobotIcon } from "@phosphor-icons/react";
+import { AIChatBubble } from "../AIChatBubble/AIChatBubble";
 import { MarkdownContent } from "../MarkdownContent/MarkdownContent";
-import { MessageBubble } from "../MessageBubble/MessageBubble";
 import { useStreamingMessage } from "./useStreamingMessage";
 
 export interface StreamingMessageProps {
@@ -25,16 +24,10 @@ export function StreamingMessage({
       )}
     >
       <div className="flex w-full max-w-3xl gap-3">
-        <div className="flex-shrink-0">
-          <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-indigo-600">
-            <RobotIcon className="h-4 w-4 text-indigo-50" />
-          </div>
-        </div>
-
         <div className="flex min-w-0 flex-1 flex-col">
-          <MessageBubble variant="assistant">
+          <AIChatBubble>
             <MarkdownContent content={displayText} />
-          </MessageBubble>
+          </AIChatBubble>
         </div>
       </div>
     </div>

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

@@ -1,7 +1,6 @@
 import { cn } from "@/lib/utils";
-import { RobotIcon } from "@phosphor-icons/react";
 import { useEffect, useRef, useState } from "react";
-import { MessageBubble } from "../MessageBubble/MessageBubble";
+import { AIChatBubble } from "../AIChatBubble/AIChatBubble";
 
 export interface ThinkingMessageProps {
   className?: string;
@@ -34,14 +33,8 @@ export function ThinkingMessage({ className }: ThinkingMessageProps) {
       )}
     >
       <div className="flex w-full max-w-3xl gap-3">
-        <div className="flex-shrink-0">
-          <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-indigo-500">
-            <RobotIcon className="h-4 w-4 text-indigo-50" />
-          </div>
-        </div>
-
         <div className="flex min-w-0 flex-1 flex-col">
-          <MessageBubble variant="assistant">
+          <AIChatBubble>
             <div className="transition-all duration-500 ease-in-out">
               {showSlowLoader ? (
                 <div className="flex flex-col items-center gap-3 py-2">
@@ -62,7 +55,7 @@ export function ThinkingMessage({ className }: ThinkingMessageProps) {
                 </span>
               )}
             </div>
-          </MessageBubble>
+          </AIChatBubble>
         </div>
       </div>
     </div>

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

@@ -0,0 +1,33 @@
+import { Text } from "@/components/atoms/Text/Text";
+import type { ToolArguments } from "@/types/chat";
+import { AIChatBubble } from "../AIChatBubble/AIChatBubble";
+
+export interface ToolCallMessageProps {
+  toolId?: string;
+  toolName: string;
+  arguments?: ToolArguments;
+  className?: string;
+}
+
+export function ToolCallMessage({
+  toolId,
+  toolName,
+  arguments: toolArguments,
+  className,
+}: ToolCallMessageProps) {
+  const displayKey = toolName || toolId;
+
+  const displayData = toolArguments
+    ? JSON.stringify(toolArguments)
+    : "No arguments";
+
+  const displayText = `${displayKey}: ${displayData}`;
+
+  return (
+    <AIChatBubble className={className}>
+      <Text variant="small" className="text-neutral-500">
+        {displayText}
+      </Text>
+    </AIChatBubble>
+  );
+}

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

@@ -0,0 +1,36 @@
+import { Text } from "@/components/atoms/Text/Text";
+import type { ToolResult } from "@/types/chat";
+import { AIChatBubble } from "../AIChatBubble/AIChatBubble";
+
+export interface ToolResponseMessageProps {
+  toolId?: string;
+  toolName: string;
+  result?: ToolResult;
+  success?: boolean;
+  className?: string;
+}
+
+export function ToolResponseMessage({
+  toolId,
+  toolName,
+  result: _result,
+  success: _success = true,
+  className,
+}: ToolResponseMessageProps) {
+  const displayKey = toolId || toolName;
+  const resultValue =
+    typeof _result === "string"
+      ? _result
+      : _result
+        ? JSON.stringify(_result)
+        : toolName;
+  const displayText = `${displayKey}: ${resultValue}`;
+
+  return (
+    <AIChatBubble className={className}>
+      <Text variant="small" className="text-neutral-500">
+        {displayText}
+      </Text>
+    </AIChatBubble>
+  );
+}

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

@@ -0,0 +1,25 @@
+import { cn } from "@/lib/utils";
+import { ReactNode } from "react";
+
+export interface UserChatBubbleProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function UserChatBubble({ children, className }: UserChatBubbleProps) {
+  return (
+    <div
+      className={cn(
+        "group relative min-w-20 overflow-hidden rounded-xl bg-purple-100 px-3 text-right text-sm leading-relaxed transition-all duration-500 ease-in-out",
+        className,
+      )}
+      style={{
+        borderBottomRightRadius: 0,
+      }}
+    >
+      <div className="relative z-10 text-slate-900 transition-all duration-500 ease-in-out">
+        {children}
+      </div>
+    </div>
+  );
+}

autogpt_platform/frontend/src/components/contextual/Chat/useChat.ts

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